opensource/yn
3
0
Fork 0
mirror of https://github.com/purocean/yn.git synced 2026-09-24 15:46:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add checked state for status bar menu

Browse Source
This commit is contained in:
purocean
2021-12-29 11:31:26 +08:00
parent c2a4abab4c
commit 0d8bfd508d
7 changed files with 50 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/StatusBarMenu.vue
+16 -3
View File
@@ -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);
src/renderer/components/SvgIcon.vue
+1
View File
@@ -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!
src/renderer/plugins/status-bar-repository-switch.ts
+1
View File
@@ -55,6 +55,7 @@ export default {
type: 'normal',
title: name,
tips: path,
checked: currentRepo && currentRepo.name === name && currentRepo.path === path,
onClick: () => choose({ name, path })
}
})
src/renderer/plugins/status-bar-view.ts
+19 -11
View File
@@ -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 {
src/renderer/services/status-bar.ts
+1
View File
@@ -10,6 +10,7 @@ export type MenuItem = {
subTitle?: string;
disabled?: boolean;
hidden?: boolean;
checked?: boolean;
onClick?: (item: MenuItem) => void;
} | { type: 'separator' }
src/share/i18n/languages/en.ts
+6 -7
View File
@@ -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': {
src/share/i18n/languages/zh-CN.ts
+6 -7
View File
@@ -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': {