From 0d8bfd508dc0fbdd339279e3d2f5dcc5cd5823f7 Mon Sep 17 00:00:00 2001
From: purocean <purocean@gmail.com>
Date: Wed, 29 Dec 2021 11:25:18 +0800
Subject: [PATCH] feat: add checked state for status bar menu

---
 src/renderer/components/StatusBarMenu.vue     | 19 ++++++++++--
 src/renderer/components/SvgIcon.vue           |  1 +
 .../plugins/status-bar-repository-switch.ts   |  1 +
 src/renderer/plugins/status-bar-view.ts       | 30 ++++++++++++-------
 src/renderer/services/status-bar.ts           |  1 +
 src/share/i18n/languages/en.ts                | 13 ++++----
 src/share/i18n/languages/zh-CN.ts             | 13 ++++----
 7 files changed, 50 insertions(+), 28 deletions(-)

diff --git a/src/renderer/components/StatusBarMenu.vue b/src/renderer/components/StatusBarMenu.vue
index 5b6078b8..ade00cd8 100644
--- a/src/renderer/components/StatusBarMenu.vue
+++ b/src/renderer/components/StatusBarMenu.vue
@@ -10,7 +10,7 @@
         <svg-icon v-if="menu.icon" :name="menu.icon" class="title-icon" />
         <div v-if="menu.title" class="title-text">{{menu.title}}</div>
       </div>
-      <ul class="list" v-if="showList && menu.list && menu.list.length">
+      <ul v-if="showList && menu.list && menu.list.length" :class="{list: true, 'has-checked': menu.list.some(x => x.checked)}">
         <template v-for="item in menu.list" :key="item.id">
           <li v-if="item.type === 'separator'" v-show="!item.hidden" :key="i" :class="item.type"></li>
           <li
@@ -18,6 +18,7 @@
             :class="{[item.type]: true, disabled: item.disabled, hidden: item.hidden}"
             :title="item.tips"
             @click="handleItemClick(item)">
+            <svg-icon class="checked-icon" v-if="item.checked" name="check-solid" />
             <div class="menu-item-title">{{item.title}}</div>
             <div v-if="item.subTitle" class="menu-item-sub-title">{{item.subTitle}}</div>
           </li>
@@ -47,7 +48,7 @@ export default defineComponent({
     const list = ref(getMenus(props.position))
     const showList = ref(true)
 
-    const handleItemClick = (item: MenuItem) => {
+    const handleItemClick = (item: MenuItem & { type: 'normal' }) => {
       if (item.disabled) {
         return
       }
@@ -142,15 +143,20 @@ export default defineComponent({
   border-radius: var(--g-border-radius);
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
+
+  &.has-checked li.normal {
+    padding-left: 20px;
+  }
 }
 
 .list li.normal {
-  padding: 4px .8em;
+  padding: 4px 12px;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   display: flex;
   justify-content: space-between;
+  align-items: center;
   border-radius: var(--g-border-radius);
 
   &:hover {
@@ -173,6 +179,13 @@ export default defineComponent({
     display: none;
   }
 
+  .checked-icon {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    transform: translateX(-14px) translateY(-2px) scaleX(0.8);
+  }
+
   .menu-item-sub-title {
     font-size: 12px;
     color: var(--g-color-50);
diff --git a/src/renderer/components/SvgIcon.vue b/src/renderer/components/SvgIcon.vue
index cb474fef..36ceb446 100644
--- a/src/renderer/components/SvgIcon.vue
+++ b/src/renderer/components/SvgIcon.vue
@@ -41,6 +41,7 @@ export default defineComponent({
       'text-width-solid': '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="text-width" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-text-width fa-w-14"><path fill="currentColor" d="M432 32H16A16 16 0 0 0 0 48v80a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-16h120v112h-24a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-24V112h120v16a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zm-68.69 260.69C354 283.36 336 288.36 336 304v48H112v-48c0-14.31-17.31-21.32-27.31-11.31l-80 80a16 16 0 0 0 0 22.62l80 80C94 484.64 112 479.64 112 464v-48h224v48c0 14.31 17.31 21.33 27.31 11.31l80-80a16 16 0 0 0 0-22.62z" class=""></path></svg>',
       'keyboard-solid': '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="keyboard" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="svg-inline--fa fa-keyboard fa-w-18"><path fill="currentColor" d="M528 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h480c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM128 180v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-336 96v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-336 96v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm288 0v-40c0-6.627-5.373-12-12-12H172c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h232c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12z" class=""></path></svg>',
       'columns-solid': '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="columns" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-columns fa-w-16"><path fill="currentColor" d="M464 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM224 416H64V160h160v256zm224 0H288V160h160v256z" class=""></path></svg>',
+      'check-solid': '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-check fa-w-16"><path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" class=""></path></svg>',
     }
 
     const name = props.name!
diff --git a/src/renderer/plugins/status-bar-repository-switch.ts b/src/renderer/plugins/status-bar-repository-switch.ts
index 1b8e803a..e8faea2b 100644
--- a/src/renderer/plugins/status-bar-repository-switch.ts
+++ b/src/renderer/plugins/status-bar-repository-switch.ts
@@ -55,6 +55,7 @@ export default {
             type: 'normal',
             title: name,
             tips: path,
+            checked: currentRepo && currentRepo.name === name && currentRepo.path === path,
             onClick: () => choose({ name, path })
           }
         })
diff --git a/src/renderer/plugins/status-bar-view.ts b/src/renderer/plugins/status-bar-view.ts
index 1d2a5c3d..576e8cf8 100644
--- a/src/renderer/plugins/status-bar-view.ts
+++ b/src/renderer/plugins/status-bar-view.ts
@@ -1,19 +1,15 @@
 import type { Plugin } from '@fe/context'
 import { FLAG_DISABLE_XTERM } from '@fe/support/args'
 import { getKeysLabel } from '@fe/core/command'
-import type { MsgPath } from '@share/i18n'
 
 export default {
   name: 'status-bar-view',
   register: ctx => {
-    const t = ctx.i18n.t
-    const toggleTitle = (flag: boolean, title: MsgPath) => (flag ? t('status-bar.view.hide') : t('status-bar.view.show')) + t(title)
-
     ctx.statusBar.tapMenus(menus => {
       menus['status-bar-view'] = {
         id: 'status-bar-view',
         position: 'left',
-        title: t('status-bar.view.view'),
+        title: ctx.i18n.t('status-bar.view.view'),
         list: []
       }
     })
@@ -26,39 +22,51 @@ export default {
             {
               id: 'toggle-side',
               type: 'normal',
-              title: toggleTitle(ctx.store.state.showSide, 'status-bar.view.side-bar'),
+              title: ctx.i18n.t('status-bar.view.side-bar'),
+              checked: ctx.store.state.showSide,
               subTitle: getKeysLabel('layout.toggle-side'),
               onClick: () => ctx.layout.toggleSide()
             },
             {
               id: 'toggle-editor',
               type: 'normal',
-              title: toggleTitle(ctx.store.state.showEditor, 'status-bar.view.editor'),
+              checked: ctx.store.state.showEditor,
+              title: ctx.i18n.t('status-bar.view.editor'),
               subTitle: getKeysLabel('layout.toggle-editor'),
               onClick: () => ctx.layout.toggleEditor()
             },
             {
               id: 'toggle-view',
               type: 'normal',
-              title: toggleTitle(ctx.store.state.showView, 'status-bar.view.preview'),
+              checked: ctx.store.state.showView,
+              title: ctx.i18n.t('status-bar.view.preview'),
               subTitle: getKeysLabel('layout.toggle-view'),
               onClick: () => ctx.layout.toggleView()
             },
             ...(!FLAG_DISABLE_XTERM ? [{
               id: 'toggle-xterm',
               type: 'normal' as any,
-              title: toggleTitle(ctx.store.state.showXterm, 'status-bar.view.xterm'),
+              checked: ctx.store.state.showXterm,
+              title: ctx.i18n.t('status-bar.view.xterm'),
               subTitle: getKeysLabel('layout.toggle-xterm'),
               onClick: () => ctx.layout.toggleXterm()
             }] : []),
             { type: 'separator' },
             {
-              id: 'toggle-wrap',
+              id: 'word-wrap',
               type: 'normal',
-              title: t('status-bar.view.toggle-wrap'),
+              checked: ctx.store.state.wordWrap === 'on',
+              title: ctx.i18n.t('status-bar.view.word-wrap'),
               subTitle: getKeysLabel('editor.toggle-wrap'),
               onClick: () => ctx.editor.toggleWrap()
             },
+            {
+              id: 'typewriter-mode',
+              type: 'normal',
+              checked: ctx.store.state.typewriterMode,
+              title: ctx.i18n.t('status-bar.view.typewriter-mode'),
+              onClick: () => ctx.editor.toggleTypewriterMode()
+            },
           ]
         })
       } else {
diff --git a/src/renderer/services/status-bar.ts b/src/renderer/services/status-bar.ts
index aa7ff076..4b6d9a4d 100644
--- a/src/renderer/services/status-bar.ts
+++ b/src/renderer/services/status-bar.ts
@@ -10,6 +10,7 @@ export type MenuItem = {
   subTitle?: string;
   disabled?: boolean;
   hidden?: boolean;
+  checked?: boolean;
   onClick?: (item: MenuItem) => void;
 } | { type: 'separator' }
 
diff --git a/src/share/i18n/languages/en.ts b/src/share/i18n/languages/en.ts
index 69e54a91..936a719d 100644
--- a/src/share/i18n/languages/en.ts
+++ b/src/share/i18n/languages/en.ts
@@ -186,13 +186,12 @@ const data = {
   'status-bar': {
     'view': {
       'view': 'View',
-      'show': 'Show ',
-      'hide': 'Hide ',
-      'xterm': 'Terminal',
-      'preview': 'Preview',
-      'editor': 'Editor',
-      'side-bar': 'Side Bar',
-      'toggle-wrap': 'Toggle Wrap'
+      'xterm': 'Show Terminal',
+      'preview': 'Show Preview',
+      'editor': 'Show Editor',
+      'side-bar': 'Show Side Bar',
+      'word-wrap': 'Word Wrap',
+      'typewriter-mode': 'Typewriter Mode',
     },
     'setting': 'Setting',
     'repo': {
diff --git a/src/share/i18n/languages/zh-CN.ts b/src/share/i18n/languages/zh-CN.ts
index aea8b089..aea6ea27 100644
--- a/src/share/i18n/languages/zh-CN.ts
+++ b/src/share/i18n/languages/zh-CN.ts
@@ -187,13 +187,12 @@ const data: BaseLanguage = {
   'status-bar': {
     'view': {
       'view': '视图',
-      'show': '显示',
-      'hide': '隐藏',
-      'xterm': '终端',
-      'preview': '预览',
-      'editor': '编辑',
-      'side-bar': '侧栏',
-      'toggle-wrap': '切换换行'
+      'xterm': '显示终端',
+      'preview': '显示预览',
+      'editor': '显示编辑',
+      'side-bar': '显示侧栏',
+      'word-wrap': '文本换行',
+      'typewriter-mode': '打字机模式',
     },
     'setting': '设置',
     'repo': {