diff --git a/src/option/index.js b/src/option/index.js index 8958e53..73f94cd 100644 --- a/src/option/index.js +++ b/src/option/index.js @@ -8,16 +8,31 @@ import { nextTick, css, html, Component, bind } from 'wkit' import '../icon/index.js' const MACOS_KEYS = { - Command: '⌘', Cmd: '⌘', Option: '⌥', - Alt: '⌥', Shift: '⇧', - Ctrl: '⌃', - Control: '⌃' + Ctrl: '⌃' +} +const WIN_KEYS = { + Win: 'Win' +} +const LINUX_KEYS = { + Super: 'Super' } const UA = navigator.userAgent.toLowerCase() const IS_MACOS = UA.includes('mac os x') || UA.includes('iphone') +const IS_WIN = UA.includes('windows nt') + +MACOS_KEYS['Super'] = MACOS_KEYS.Cmd +MACOS_KEYS['Command'] = MACOS_KEYS.Cmd +MACOS_KEYS['Alt'] = MACOS_KEYS.Option +MACOS_KEYS['Control'] = MACOS_KEYS.Ctrl +WIN_KEYS['Super'] = WIN_KEYS.Win +WIN_KEYS['Cmd'] = WIN_KEYS.Win +WIN_KEYS['Command'] = WIN_KEYS.Win +LINUX_KEYS['Win'] = LINUX_KEYS.Super +LINUX_KEYS['Cmd'] = LINUX_KEYS.Super +LINUX_KEYS['Command'] = LINUX_KEYS.Super class OptionGroup extends Component { // @@ -31,6 +46,11 @@ class OptionGroup extends Component { :host { display: block; width: 100%; + } + .option-group { + position: relative; + width: 100%; + height: 100%; line-height: 1.5; } @@ -62,14 +82,16 @@ class OptionGroup extends Component { render() { return html` - -
- +
+ +
+ +
` } @@ -119,8 +141,7 @@ class Option extends Component { margin: 0 8px; } .action { - font-size: 12px; - // font-family: Menlo; + font-size: 10px; white-space: nowrap; color: var(--color-grey-2); } @@ -141,17 +162,22 @@ class Option extends Component { render() { let action = (this.action || '').trim() - if (IS_MACOS && action) { + if (action) { action = action .split('+') - .map(s => MACOS_KEYS[s.trim()] || s.trim()) + .map( + s => + (IS_MACOS ? MACOS_KEYS : IS_WIN ? WIN_KEYS : LINUX_KEYS)[ + s.trim() + ] || s.trim() + ) .join('+') } return html`
- ${action} + ${action}
` }