bd
/
ui
2
0
Fork 0
Code Issues Pull Requests Wiki Activity

更新option

master
yutent 2023-06-05 17:31:04 +08:00
parent 8c503de7c9
commit 1c30146921
1 changed files with 43 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/option/index.js
View File

@ -8,16 +8,31 @@ import { nextTick, css, html, Component, bind } from 'wkit'
import '../icon/index.js' import '../icon/index.js'
const MACOS_KEYS = { const MACOS_KEYS = {
Command: '⌘',
Cmd: '⌘', Cmd: '⌘',
Option: '⌥', Option: '⌥',
Alt: '⌥',
Shift: '⇧', Shift: '⇧',
Ctrl: '⌃', Ctrl: '⌃'
Control: '⌃' }
const WIN_KEYS = {
Win: 'Win'
}
const LINUX_KEYS = {
Super: 'Super'
} }
const UA = navigator.userAgent.toLowerCase() const UA = navigator.userAgent.toLowerCase()
const IS_MACOS = UA.includes('mac os x') || UA.includes('iphone') 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 { class OptionGroup extends Component {
// //
@ -31,6 +46,11 @@ class OptionGroup extends Component {
:host { :host {
display: block; display: block;
width: 100%; width: 100%;
}
.option-group {
position: relative;
width: 100%;
height: 100%;
line-height: 1.5; line-height: 1.5;
} }
@ -62,14 +82,16 @@ class OptionGroup extends Component {
render() { render() {
return html` return html`
<label <div class="option-group">
>${this.label} <label
${this.fold >${this.label}
? html`<wc-icon class="ico" name="right"></wc-icon>` ${this.fold
: ''}</label ? html`<wc-icon class="ico" name="right"></wc-icon>`
> : ''}</label
<div class="sub-list"> >
<slot></slot> <div class="sub-list">
<slot></slot>
</div>
</div> </div>
` `
} }
@ -119,8 +141,7 @@ class Option extends Component {
margin: 0 8px; margin: 0 8px;
} }
.action { .action {
font-size: 12px; font-size: 10px;
// font-family: Menlo;
white-space: nowrap; white-space: nowrap;
color: var(--color-grey-2); color: var(--color-grey-2);
} }
@ -141,17 +162,22 @@ class Option extends Component {
render() { render() {
let action = (this.action || '').trim() let action = (this.action || '').trim()
if (IS_MACOS && action) { if (action) {
action = action action = action
.split('+') .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('+') .join('+')
} }
return html` return html`
<section class="item"> <section class="item">
<wc-icon class="ico" name=${this.icon}></wc-icon> <wc-icon class="ico" name=${this.icon}></wc-icon>
<span class="name"><slot></slot></span> <span class="name"><slot></slot></span>
<span class="action">${action}</span> <kbd class="action">${action}</kbd>
</section> </section>
` `
} }