mirror of
https://github.com/mofeng-git/One-KVM.git
synced 2025-12-13 01:30:31 +08:00
improved mobile keyboard layout
This commit is contained in:
Maxim Devaev
parent
808cd02018
commit
b3c7340504
File diff suppressed because it is too large
Load Diff
@ -1,16 +1,29 @@
|
||||
mixin key(code, classes="", width=0)
|
||||
mixin key(spacer, code, classes="", width=0)
|
||||
div(data-code=code, class=`key ${classes}`, style=(width ? `width:${width}px` : ""))
|
||||
div(class="label")
|
||||
block
|
||||
if spacer == 1
|
||||
div(class="spacer")
|
||||
else if spacer == 2
|
||||
div(class="spacer-fixed")
|
||||
|
||||
mixin modifier(code, classes="", width=0)
|
||||
mixin modifier(spacer, code, classes="", width=0)
|
||||
div(data-code=code class=`modifier ${classes}` style=(width ? `width:${width}px` : ""))
|
||||
div(class="label")
|
||||
| #[b •]#[br]
|
||||
block
|
||||
if spacer == 1
|
||||
div(class="spacer")
|
||||
else if spacer == 2
|
||||
div(class="spacer-fixed")
|
||||
|
||||
mixin empty_key(width=0)
|
||||
div(class="empty-key" style=(width ? `width:${width}px` : ""))
|
||||
mixin empty(spacer, classes="", width=0)
|
||||
div(class=`empty ${classes}` style=(width ? `width:${width}px` : ""))
|
||||
div(class="label")
|
||||
if spacer == 1
|
||||
div(class="spacer")
|
||||
else if spacer == 2
|
||||
div(class="spacer-fixed")
|
||||
|
||||
mixin lamp(cls)
|
||||
img(class=`inline-lamp ${cls} led-gray` src=`${svg_dir}/led-square.svg`)
|
||||
@ -23,173 +36,181 @@ div(id="keyboard-window" class="window")
|
||||
div(id="keyboard-desktop" class="keypad" align="center")
|
||||
div(class="keypad-block")
|
||||
div(class="keypad-row")
|
||||
+key("Escape", "small") Esc
|
||||
+empty_key(24)
|
||||
+key(2, "Escape", "small") Esc
|
||||
+empty(1, "", 24)
|
||||
each key in ["F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12"]
|
||||
+key(key, "small") #{key}
|
||||
+key((key != "F12" ? 1 : 0), key, "small") #{key}
|
||||
if key == "F4" || key == "F8"
|
||||
+empty_key(10)
|
||||
+empty(1, "", 10)
|
||||
hr
|
||||
div(class="keypad-row")
|
||||
+key("Backquote") ~#[br]`
|
||||
+key(1, "Backquote") ~#[br]`
|
||||
each key, index in ["!", "@", "#", "$", "%", "^", "&", "*", "("]
|
||||
+key(`Digit${index + 1}`) #{key}#[br]#{index + 1}
|
||||
+key("Digit0") )#[br]0
|
||||
+key("Minus") _#[br]-
|
||||
+key("Equal") +#[br]=
|
||||
+key("Backspace", "wide-2 right") ↤
|
||||
+key(1, `Digit${index + 1}`) #{key}#[br]#{index + 1}
|
||||
+key(1, "Digit0") )#[br]0
|
||||
+key(1, "Minus") _#[br]-
|
||||
+key(2, "Equal") +#[br]=
|
||||
+key(0, "Backspace", "wide-1 right") ↤
|
||||
div(class="keypad-row")
|
||||
+key("Tab", "wide-2 left") ⇤#[br]⇥
|
||||
+key(2, "Tab", "wide-1 left") ⇤#[br]⇥
|
||||
each key in ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"]
|
||||
+key(`Key${key}`, "single") #{key}
|
||||
+key("BracketLeft") {#[br][
|
||||
+key("BracketRight") }#[br]]
|
||||
+key("Backslash") |#[br]\
|
||||
+key(1, `Key${key}`, "single") #{key}
|
||||
+key(1, "BracketLeft") {#[br][
|
||||
+key(1, "BracketRight") }#[br]]
|
||||
+key(0, "Backslash") |#[br]\
|
||||
div(class="keypad-row")
|
||||
+key("CapsLock", "wide-3 left small")
|
||||
+key(2, "CapsLock", "wide-2 left small")
|
||||
+lamp("hid-keyboard-caps-led")
|
||||
| #[br] Caps Lock
|
||||
each key in ["A", "S", "D", "F", "G", "H", "J", "K", "L"]
|
||||
+key(`Key${key}`, "single") #{key}
|
||||
+key("Semicolon") :#[br];
|
||||
+key("Quote") "#[br]'
|
||||
+key("Enter", "wide-3 right small") Enter#[br]↵
|
||||
+key(1, `Key${key}`, "single") #{key}
|
||||
+key(1, "Semicolon") :#[br];
|
||||
+key(2, "Quote") "#[br]'
|
||||
+key(0, "Enter", "wide-2 right small") Enter#[br]↵
|
||||
div(class="keypad-row")
|
||||
+modifier("ShiftLeft", "wide-4 left small") Shift
|
||||
+modifier(2, "ShiftLeft", "wide-3 left small") Shift
|
||||
each key in ["Z", "X", "C", "V", "B", "N", "M"]
|
||||
+key(`Key${key}`, "single") #{key}
|
||||
+key("Comma") <#[br],
|
||||
+key("Period") >#[br].
|
||||
+key("Slash") ?#[br]/
|
||||
+modifier("ShiftRight", "wide-4 right small") Shift
|
||||
+key(1, `Key${key}`, "single") #{key}
|
||||
+key(1, "Comma") <#[br],
|
||||
+key(1, "Period") >#[br].
|
||||
+key(2, "Slash") ?#[br]/
|
||||
+modifier(0, "ShiftRight", "wide-3 right small") Shift
|
||||
div(class="keypad-row")
|
||||
+modifier("ControlLeft", "wide-1 left small") Ctrl
|
||||
+modifier("MetaLeft", "wide-1 left small") Win
|
||||
+modifier("AltLeft", "wide-1 left small") Alt
|
||||
+key("Space", "wide-5")
|
||||
+modifier("AltRight", "wide-1 right small") Alt
|
||||
+modifier("MetaRight", "wide-1 right small") Win
|
||||
+modifier("ControlRight", "wide-1 right small") Ctrl
|
||||
+modifier(2, "ControlLeft", "wide-1 left small") Ctrl
|
||||
+modifier(2, "MetaLeft", "wide-1 left small") Win
|
||||
+modifier(2, "AltLeft", "wide-1 left small") Alt
|
||||
+key(2, "Space", "wide-4")
|
||||
+modifier(2, "AltRight", "wide-1 right small") Alt
|
||||
+modifier(2, "MetaRight", "wide-1 right small") Win
|
||||
+modifier(0, "ControlRight", "wide-1 right small") Ctrl
|
||||
div(class="keypad-block")
|
||||
div(class="keypad-row")
|
||||
+modifier("PrintScreen", "small") Pt/Sq
|
||||
+key("ScrollLock", "small")
|
||||
+modifier(2, "PrintScreen", "small") Pt/Sq
|
||||
+key(2, "ScrollLock", "small")
|
||||
+lamp("hid-keyboard-scroll-led")
|
||||
| #[br] ScrLk
|
||||
+key("Pause", "small") P/Brk
|
||||
+key(0, "Pause", "small") P/Brk
|
||||
hr
|
||||
div(class="keypad-row")
|
||||
+key("Insert", "small") Ins
|
||||
+key("Home", "small") Home
|
||||
+key("PageUp", "small") PgUp
|
||||
+key(2, "Insert", "small") Ins
|
||||
+key(2, "Home", "small") Home
|
||||
+key(0, "PageUp", "small") PgUp
|
||||
div(class="keypad-row")
|
||||
+key("Delete", "small") Del
|
||||
+key("End", "small") End
|
||||
+key("PageDown", "small") PgDn
|
||||
+key(2, "Delete", "small") Del
|
||||
+key(2, "End", "small") End
|
||||
+key(0, "PageDown", "small") PgDn
|
||||
div(class="keypad-row")
|
||||
div(class="keypad-row")
|
||||
+empty_key()
|
||||
+key("ArrowUp") ↑
|
||||
+empty_key()
|
||||
+empty(1, "")
|
||||
+key(2, "ArrowUp") ↑
|
||||
+empty(0, "")
|
||||
div(class="keypad-row")
|
||||
+key("ArrowLeft") ←
|
||||
+key("ArrowDown") ↓
|
||||
+key("ArrowRight") →
|
||||
+key(2, "ArrowLeft") ←
|
||||
+key(2, "ArrowDown") ↓
|
||||
+key(0, "ArrowRight") →
|
||||
div(class="keypad-block")
|
||||
div(class="keypad-row")
|
||||
+empty_key()
|
||||
+key("IntlYen", "small") Yen
|
||||
+key("IntlBackslash", "small") N/US
|
||||
+key("Power", "small") PWR
|
||||
+empty(2, "small")
|
||||
+key(2, "IntlYen", "small") Yen
|
||||
+key(2, "IntlBackslash", "small") N/US
|
||||
+key(0, "Power", "small") PWR
|
||||
hr
|
||||
div(class="keypad-row")
|
||||
+key("NumLock", "small")
|
||||
+key(2, "NumLock", "small")
|
||||
+lamp("hid-keyboard-num-led")
|
||||
| #[br] NmLk
|
||||
+key("NumpadDivide") /
|
||||
+key("NumpadMultiply") *
|
||||
+key("NumpadSubtract") -
|
||||
+key(2, "NumpadDivide") /
|
||||
+key(2, "NumpadMultiply") *
|
||||
+key(0, "NumpadSubtract") -
|
||||
div(class="keypad-row")
|
||||
+key("Numpad7", "small") 7#[br]Home
|
||||
+key("Numpad8", "small") 8#[br]↑
|
||||
+key("Numpad9", "small") 9#[br]PgUp
|
||||
+empty_key()
|
||||
+key(2, "Numpad7", "small") 7#[br]Home
|
||||
+key(2, "Numpad8", "small") 8#[br]↑
|
||||
+key(2, "Numpad9", "small") 9#[br]PgUp
|
||||
+empty(0, "")
|
||||
div(class="keypad-row")
|
||||
+key("Numpad4", "small") 4#[br]←
|
||||
+key("Numpad5", "small") 5#[br]#[br]
|
||||
+key("Numpad6", "small") 6#[br]→
|
||||
+key("NumpadAdd") +
|
||||
+key(2, "Numpad4", "small") 4#[br]←
|
||||
+key(2, "Numpad5", "small") 5#[br]#[br]
|
||||
+key(2, "Numpad6", "small") 6#[br]→
|
||||
+key(0, "NumpadAdd") +
|
||||
div(class="keypad-row")
|
||||
+key("Numpad1", "small") 1#[br]End
|
||||
+key("Numpad2", "small") 2#[br]↓
|
||||
+key("Numpad3", "small") 3#[br]PgDn
|
||||
+empty_key()
|
||||
+key(2, "Numpad1", "small") 1#[br]End
|
||||
+key(2, "Numpad2", "small") 2#[br]↓
|
||||
+key(2, "Numpad3", "small") 3#[br]PgDn
|
||||
+empty(0, "")
|
||||
div(class="keypad-row")
|
||||
+key("Numpad0", "small") 0#[br]Ins
|
||||
+empty_key()
|
||||
+key("NumpadDecimal", "small") .#[br]Del
|
||||
+key("NumpadEnter", "small") Ent
|
||||
+key(2, "Numpad0", "small") 0#[br]Ins
|
||||
+empty(2, "")
|
||||
+key(2, "NumpadDecimal", "small") .#[br]Del
|
||||
+key(0, "NumpadEnter", "small") Ent
|
||||
|
||||
div(id="keyboard-mobile" class="keypad" align="center")
|
||||
div(class="keypad-block")
|
||||
div(class="keypad-row")
|
||||
+key("Escape", "margin-0 small") Esc
|
||||
+empty_key(1)
|
||||
each key in ["F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12"]
|
||||
+key(key, "wide-0 margin-0 small") #{key}
|
||||
+empty_key(2)
|
||||
+modifier("PrintScreen", "margin-0 small") Pt/Sq
|
||||
+key("ScrollLock", "margin-0 small")
|
||||
+key(1, "Escape", "small") Esc
|
||||
+key(0, "F1", "wide-0 small rounded-left") F1
|
||||
+key(0, "F2", "wide-0 small rounded-none") F2
|
||||
+key(0, "F3", "wide-0 small rounded-none") F3
|
||||
+key(2, "F4", "wide-0 small rounded-right") F4
|
||||
+key(0, "F5", "wide-0 small rounded-left") F5
|
||||
+key(0, "F6", "wide-0 small rounded-none") F6
|
||||
+key(0, "F7", "wide-0 small rounded-none") F7
|
||||
+key(2, "F8", "wide-0 small rounded-right") F8
|
||||
+key(0, "F9", "wide-0 small rounded-left") F9
|
||||
+key(0, "F10", "wide-0 small rounded-none") F10
|
||||
+key(0, "F11", "wide-0 small rounded-none") F11
|
||||
+key(2, "F12", "wide-0 small rounded-right") F12
|
||||
+modifier(1, "PrintScreen", "small") Pt/Sq
|
||||
+key(1, "ScrollLock", "small")
|
||||
+lamp("hid-keyboard-scroll-led")
|
||||
| #[br] ScrLk
|
||||
+key("Pause", "margin-0 small") P/Brk
|
||||
+key("Insert", "margin-0 small") Ins
|
||||
+key("Home", "margin-0 small") Home
|
||||
+key("End", "margin-0 small") End
|
||||
+key("Delete", "margin-0 small") Del
|
||||
+key(1, "Pause", "small") P/Brk
|
||||
+key(1, "Insert", "small") Ins
|
||||
+key(1, "Home", "small") Home
|
||||
+key(1, "End", "small") End
|
||||
+key(0, "Delete", "small") Del
|
||||
div(class="keypad-row")
|
||||
+key("Backquote") ~#[br]`
|
||||
+key(1, "Backquote") ~#[br]`
|
||||
each key, index in ["!", "@", "#", "$", "%", "^", "&", "*", "("]
|
||||
+key(`Digit${index + 1}`) #{key}#[br]#{index + 1}
|
||||
+key("Digit0") )#[br]0
|
||||
+key("Minus") _#[br]-
|
||||
+key("Equal") +#[br]=
|
||||
+key("Backspace", "wide-3 right", 101) ↤
|
||||
+key(1, `Digit${index + 1}`) #{key}#[br]#{index + 1}
|
||||
+key(1, "Digit0") )#[br]0
|
||||
+key(1, "Minus") _#[br]-
|
||||
+key(1, "Equal") +#[br]=
|
||||
+key(0, "Backspace", "wide-2 right", 101) ↤
|
||||
div(class="keypad-row")
|
||||
+key("Tab", "wide-2 left") ⇤<br>⇥
|
||||
+key(1, "Tab", "wide-1 left") ⇤<br>⇥
|
||||
each key in ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"]
|
||||
+key(`Key${key}`, "single") #{key}
|
||||
+key("BracketLeft") {#[br][
|
||||
+key("BracketRight") }#[br]]
|
||||
+key("Backslash", "wide-2 left", 78) |#[br]\
|
||||
+key(1, `Key${key}`, "single") #{key}
|
||||
+key(1, "BracketLeft") {#[br][
|
||||
+key(1, "BracketRight") }#[br]]
|
||||
+key(0, "Backslash", "wide-1 left", 78) |#[br]\
|
||||
div(class="keypad-row")
|
||||
+key("CapsLock", "wide-3 left small")
|
||||
+key(1, "CapsLock", "wide-2 left small")
|
||||
+lamp("hid-keyboard-caps-led")
|
||||
| #[br] Caps Lock
|
||||
each key in ["A", "S", "D", "F", "G", "H", "J", "K", "L"]
|
||||
+key(`Key${key}`, "single") #{key}
|
||||
+key("Semicolon") :#[br];
|
||||
+key("Quote") `#[br]'
|
||||
+key("Enter", "wide-4 right small", 116) Enter#[br]↵
|
||||
+key(1, `Key${key}`, "single") #{key}
|
||||
+key(1, "Semicolon") :#[br];
|
||||
+key(1, "Quote") `#[br]'
|
||||
+key(0, "Enter", "wide-3 right small", 116) Enter#[br]↵
|
||||
div(class="keypad-row")
|
||||
+modifier("ShiftLeft", "wide-4 left small") Shift
|
||||
+modifier(1, "ShiftLeft", "wide-3 left small") Shift
|
||||
each key in ["Z", "X", "C", "V", "B", "N", "M"]
|
||||
+key(`Key${key}`, "single") #{key}
|
||||
+key("Comma") lt;#[br],
|
||||
+key("Period") >#[br].
|
||||
+key("Slash") ?#[br]/
|
||||
+key("PageUp", "small") PgUp
|
||||
+key("ArrowUp") ↑
|
||||
+key("PageDown", "small") PgDn
|
||||
+key(1, `Key${key}`, "single") #{key}
|
||||
+key(1, "Comma") <#[br],
|
||||
+key(1, "Period") >#[br].
|
||||
+key(1, "Slash") ?#[br]/
|
||||
+key(2, "PageUp", "small") PgUp
|
||||
+key(2, "ArrowUp") ↑
|
||||
+key(0, "PageDown", "small") PgDn
|
||||
div(class="keypad-row")
|
||||
+modifier("ControlLeft", "wide-1 left small") Ctrl
|
||||
+modifier("MetaLeft", "wide-1 left small") Win
|
||||
+modifier("AltLeft", "wide-1 left small") Alt
|
||||
+key("Space", "", 190)
|
||||
+modifier("AltRight", "right small") Alt
|
||||
+modifier("MetaRight", "right small") Win
|
||||
+modifier("ShiftRight", "right small") Shift
|
||||
+modifier("ControlRight", "right small") Ctrl
|
||||
+key("ArrowLeft") ←
|
||||
+key("ArrowDown") ↓
|
||||
+key("ArrowRight") →
|
||||
+modifier(1, "ControlLeft", "wide-1 left small") Ctrl
|
||||
+modifier(1, "MetaLeft", "wide-1 left small") Win
|
||||
+modifier(1, "AltLeft", "wide-1 left small") Alt
|
||||
+key(1, "Space", "", 190)
|
||||
+modifier(1, "AltRight", "right small") Alt
|
||||
+modifier(1, "MetaRight", "right small") Win
|
||||
+modifier(1, "ShiftRight", "right small") Shift
|
||||
+modifier(1, "ControlRight", "right small") Ctrl
|
||||
+key(2, "ArrowLeft") ←
|
||||
+key(2, "ArrowDown") ↓
|
||||
+key(0, "ArrowRight") →
|
||||
|
||||
@ -21,17 +21,17 @@ div(id="stream-window" class="window window-resizable")
|
||||
div(id="stream-mouse-buttons" class="keypad" align="center")
|
||||
div(class="keypad-block")
|
||||
div(class="keypad-row")
|
||||
div(data-code="left" class="key wide-4 left small") #[span Mouse#[br]Left]
|
||||
div(data-code="left" class="modifier wide-2 left small") #[span #[b •]#[br]← Hold]
|
||||
div(class="empty-key" style="width:10px")
|
||||
div(data-code="middle" class="key wide-2 left small") #[span Mouse#[br]Middle]
|
||||
div(data-code="middle" class="modifier wide-2 left small") #[span #[b •]#[br]← Hold]
|
||||
div(class="empty-key" style="width:10px")
|
||||
div(data-code="right" class="modifier wide-2 right small") #[span #[b •]#[br]Hold →]
|
||||
div(data-code="right" class="key wide-4 right small") #[span Mouse#[br]Right]
|
||||
div(class="keypad-row" style="display:none")
|
||||
div(data-code="up" class="key wide-4 left small") #[span Mouse#[br]Up/Back]
|
||||
div(data-code="up" class="modifier wide-2 left small") #[span #[b •]#[br]← Hold]
|
||||
div(class="empty-key" style="width:10px")
|
||||
div(data-code="down" class="modifier wide-2 right small") #[span #[b •]#[br]Hold →]
|
||||
div(data-code="down" class="key wide-4 right small") #[span Mouse#[br]Down/Fw]
|
||||
div(data-code="left" class="key wide-3 left rounded-left")
|
||||
div(class="label") Left
|
||||
div(data-code="left" class="modifier left small rounded-right")
|
||||
div(class="label") #[b •]#[br]Hold
|
||||
div(class="empty" style="width:15px")
|
||||
div(data-code="middle" class="key wide-1 left rounded-left")
|
||||
div(class="label") Mid
|
||||
div(data-code="middle" class="modifier left small rounded-right")
|
||||
div(class="label") #[b •]#[br]Hold
|
||||
div(class="empty" style="width:15px")
|
||||
div(data-code="right" class="modifier right small rounded-left")
|
||||
div(class="label") #[b •]#[br]Hold
|
||||
div(data-code="right" class="key wide-3 right rounded-right")
|
||||
div(class="label") Right
|
||||
|
||||
@ -33,6 +33,8 @@ div.keypad div.keypad-block:not(:first-child) {
|
||||
}
|
||||
|
||||
div.keypad div.keypad-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
white-space: nowrap;
|
||||
height: 40px;
|
||||
margin-bottom: 5px;
|
||||
@ -41,12 +43,18 @@ div.keypad div.keypad-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
div.keypad div.keypad-row div.spacer {
|
||||
margin: 2px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
div.keypad div.keypad-row div.spacer-fixed {
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
div.keypad div.key,
|
||||
div.keypad div.modifier,
|
||||
div.keypad div.empty-key {
|
||||
div.keypad div.empty {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
padding: 0;
|
||||
width: 40px;
|
||||
}
|
||||
@ -68,6 +76,15 @@ div.keypad div.modifier:hover {
|
||||
color: var(--cs-key-hovered-fg);
|
||||
background-color: var(--cs-key-hovered-bg);
|
||||
}
|
||||
div.keypad div.rounded-left {
|
||||
border-radius: 6px 0px 0px 6px !important;
|
||||
}
|
||||
div.keypad div.rounded-right {
|
||||
border-radius: 0px 6px 6px 0px !important;
|
||||
}
|
||||
div.keypad div.rounded-none {
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
div.keypad div.pressed {
|
||||
box-shadow: none;
|
||||
color: var(--cs-key-pressed-fg) !important;
|
||||
@ -79,29 +96,24 @@ div.keypad div.holded {
|
||||
background-color: var(--cs-key-holded-bg) !important;
|
||||
}
|
||||
div.keypad div.key:last-child,
|
||||
div.keypad div.empty-key:last-child,
|
||||
div.keypad div.empty:last-child,
|
||||
div.keypad div.modifier:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
div.keypad div.margin-0 {
|
||||
margin-right: 0px;
|
||||
}
|
||||
div.keypad div.wide-0 {
|
||||
width: 26px;
|
||||
width: 28px;
|
||||
}
|
||||
div.keypad div.wide-1 {
|
||||
width: 61px;
|
||||
}
|
||||
div.keypad div.wide-2 {
|
||||
width: 64px;
|
||||
}
|
||||
div.keypad div.wide-3 {
|
||||
width: 77px;
|
||||
}
|
||||
div.keypad div.wide-4 {
|
||||
div.keypad div.wide-3 {
|
||||
width: 102px;
|
||||
}
|
||||
div.keypad div.wide-5 {
|
||||
div.keypad div.wide-4 {
|
||||
flex-grow: 1;
|
||||
width: 288px;
|
||||
}
|
||||
div.keypad div.left {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user