GithubFollow/One-KVM
1
0
Fork 0
mirror of https://github.com/mofeng-git/One-KVM.git synced 2025-12-12 17:20:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

improved mobile keyboard layout

Browse Source
This commit is contained in:
Maxim Devaev 2022-10-05 13:43:25 +03:00
parent 808cd02018
commit b3c7340504
4 changed files with 433 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

310
web/kvm/index.html
View File

File diff suppressed because it is too large Load Diff

267
web/kvm/window-keyboard.pug
View File

@ -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(data-code=code, class=`key ${classes}`, style=(width ? `width:${width}px` : ""))
div(class="label") div(class="label")
block 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(data-code=code class=`modifier ${classes}` style=(width ? `width:${width}px` : ""))
div(class="label") div(class="label")
| #[b •]#[br] | #[b •]#[br]
block block
if spacer == 1
div(class="spacer")
else if spacer == 2
div(class="spacer-fixed")
mixin empty_key(width=0) mixin empty(spacer, classes="", width=0)
div(class="empty-key" style=(width ? `width:${width}px` : "")) 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) mixin lamp(cls)
img(class=`inline-lamp ${cls} led-gray` src=`${svg_dir}/led-square.svg`) 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(id="keyboard-desktop" class="keypad" align="center")
div(class="keypad-block") div(class="keypad-block")
div(class="keypad-row") div(class="keypad-row")
+key("Escape", "small") Esc +key(2, "Escape", "small") Esc
+empty_key(24) +empty(1, "", 24)
each key in ["F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12"] 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" if key == "F4" || key == "F8"
+empty_key(10) +empty(1, "", 10)
hr hr
div(class="keypad-row") div(class="keypad-row")
+key("Backquote") ~#[br]` +key(1, "Backquote") ~#[br]`
each key, index in ["!", "@", "#", "$", "%", "^", "&", "*", "("] each key, index in ["!", "@", "#", "$", "%", "^", "&", "*", "("]
+key(`Digit${index + 1}`) #{key}#[br]#{index + 1} +key(1, `Digit${index + 1}`) #{key}#[br]#{index + 1}
+key("Digit0") )#[br]0 +key(1, "Digit0") )#[br]0
+key("Minus") _#[br]- +key(1, "Minus") _#[br]-
+key("Equal") +#[br]= +key(2, "Equal") +#[br]=
+key("Backspace", "wide-2 right") ↤ +key(0, "Backspace", "wide-1 right") ↤
div(class="keypad-row") 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"] each key in ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"]
+key(`Key${key}`, "single") #{key} +key(1, `Key${key}`, "single") #{key}
+key("BracketLeft") {#[br][ +key(1, "BracketLeft") {#[br][
+key("BracketRight") }#[br]] +key(1, "BracketRight") }#[br]]
+key("Backslash") |#[br]\ +key(0, "Backslash") |#[br]\
div(class="keypad-row") div(class="keypad-row")
+key("CapsLock", "wide-3 left small") +key(2, "CapsLock", "wide-2 left small")
+lamp("hid-keyboard-caps-led") +lamp("hid-keyboard-caps-led")
| #[br] Caps Lock | #[br] Caps Lock
each key in ["A", "S", "D", "F", "G", "H", "J", "K", "L"] each key in ["A", "S", "D", "F", "G", "H", "J", "K", "L"]
+key(`Key${key}`, "single") #{key} +key(1, `Key${key}`, "single") #{key}
+key("Semicolon") :#[br]; +key(1, "Semicolon") :#[br];
+key("Quote") "#[br]' +key(2, "Quote") "#[br]'
+key("Enter", "wide-3 right small") Enter#[br]↵ +key(0, "Enter", "wide-2 right small") Enter#[br]↵
div(class="keypad-row") 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"] each key in ["Z", "X", "C", "V", "B", "N", "M"]
+key(`Key${key}`, "single") #{key} +key(1, `Key${key}`, "single") #{key}
+key("Comma") <#[br], +key(1, "Comma") <#[br],
+key("Period") >#[br]. +key(1, "Period") >#[br].
+key("Slash") ?#[br]/ +key(2, "Slash") ?#[br]/
+modifier("ShiftRight", "wide-4 right small") Shift +modifier(0, "ShiftRight", "wide-3 right small") Shift
div(class="keypad-row") div(class="keypad-row")
+modifier("ControlLeft", "wide-1 left small") Ctrl +modifier(2, "ControlLeft", "wide-1 left small") Ctrl
+modifier("MetaLeft", "wide-1 left small") Win +modifier(2, "MetaLeft", "wide-1 left small") Win
+modifier("AltLeft", "wide-1 left small") Alt +modifier(2, "AltLeft", "wide-1 left small") Alt
+key("Space", "wide-5") +key(2, "Space", "wide-4")
+modifier("AltRight", "wide-1 right small") Alt +modifier(2, "AltRight", "wide-1 right small") Alt
+modifier("MetaRight", "wide-1 right small") Win +modifier(2, "MetaRight", "wide-1 right small") Win
+modifier("ControlRight", "wide-1 right small") Ctrl +modifier(0, "ControlRight", "wide-1 right small") Ctrl
div(class="keypad-block") div(class="keypad-block")
div(class="keypad-row") div(class="keypad-row")
+modifier("PrintScreen", "small") Pt/Sq +modifier(2, "PrintScreen", "small") Pt/Sq
+key("ScrollLock", "small") +key(2, "ScrollLock", "small")
+lamp("hid-keyboard-scroll-led") +lamp("hid-keyboard-scroll-led")
| #[br] ScrLk | #[br] ScrLk
+key("Pause", "small") P/Brk +key(0, "Pause", "small") P/Brk
hr hr
div(class="keypad-row") div(class="keypad-row")
+key("Insert", "small") Ins +key(2, "Insert", "small") Ins
+key("Home", "small") Home +key(2, "Home", "small") Home
+key("PageUp", "small") PgUp +key(0, "PageUp", "small") PgUp
div(class="keypad-row") div(class="keypad-row")
+key("Delete", "small") Del +key(2, "Delete", "small") Del
+key("End", "small") End +key(2, "End", "small") End
+key("PageDown", "small") PgDn +key(0, "PageDown", "small") PgDn
div(class="keypad-row") div(class="keypad-row")
div(class="keypad-row") div(class="keypad-row")
+empty_key() +empty(1, "")
+key("ArrowUp") ↑ +key(2, "ArrowUp") ↑
+empty_key() +empty(0, "")
div(class="keypad-row") div(class="keypad-row")
+key("ArrowLeft") ← +key(2, "ArrowLeft") ←
+key("ArrowDown") ↓ +key(2, "ArrowDown") ↓
+key("ArrowRight") → +key(0, "ArrowRight") →
div(class="keypad-block") div(class="keypad-block")
div(class="keypad-row") div(class="keypad-row")
+empty_key() +empty(2, "small")
+key("IntlYen", "small") Yen +key(2, "IntlYen", "small") Yen
+key("IntlBackslash", "small") N/US +key(2, "IntlBackslash", "small") N/US
+key("Power", "small") PWR +key(0, "Power", "small") PWR
hr hr
div(class="keypad-row") div(class="keypad-row")
+key("NumLock", "small") +key(2, "NumLock", "small")
+lamp("hid-keyboard-num-led") +lamp("hid-keyboard-num-led")
| #[br] NmLk | #[br] NmLk
+key("NumpadDivide") / +key(2, "NumpadDivide") /
+key("NumpadMultiply") * +key(2, "NumpadMultiply") *
+key("NumpadSubtract") - +key(0, "NumpadSubtract") -
div(class="keypad-row") div(class="keypad-row")
+key("Numpad7", "small") 7#[br]Home +key(2, "Numpad7", "small") 7#[br]Home
+key("Numpad8", "small") 8#[br]↑ +key(2, "Numpad8", "small") 8#[br]↑
+key("Numpad9", "small") 9#[br]PgUp +key(2, "Numpad9", "small") 9#[br]PgUp
+empty_key() +empty(0, "")
div(class="keypad-row") div(class="keypad-row")
+key("Numpad4", "small") 4#[br]← +key(2, "Numpad4", "small") 4#[br]←
+key("Numpad5", "small") 5#[br]#[br] +key(2, "Numpad5", "small") 5#[br]#[br]
+key("Numpad6", "small") 6#[br]→ +key(2, "Numpad6", "small") 6#[br]→
+key("NumpadAdd") + +key(0, "NumpadAdd") +
div(class="keypad-row") div(class="keypad-row")
+key("Numpad1", "small") 1#[br]End +key(2, "Numpad1", "small") 1#[br]End
+key("Numpad2", "small") 2#[br]↓ +key(2, "Numpad2", "small") 2#[br]↓
+key("Numpad3", "small") 3#[br]PgDn +key(2, "Numpad3", "small") 3#[br]PgDn
+empty_key() +empty(0, "")
div(class="keypad-row") div(class="keypad-row")
+key("Numpad0", "small") 0#[br]Ins +key(2, "Numpad0", "small") 0#[br]Ins
+empty_key() +empty(2, "")
+key("NumpadDecimal", "small") .#[br]Del +key(2, "NumpadDecimal", "small") .#[br]Del
+key("NumpadEnter", "small") Ent +key(0, "NumpadEnter", "small") Ent
div(id="keyboard-mobile" class="keypad" align="center") div(id="keyboard-mobile" class="keypad" align="center")
div(class="keypad-block") div(class="keypad-block")
div(class="keypad-row") div(class="keypad-row")
+key("Escape", "margin-0 small") Esc +key(1, "Escape", "small") Esc
+empty_key(1) +key(0, "F1", "wide-0 small rounded-left") F1
each key in ["F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12"] +key(0, "F2", "wide-0 small rounded-none") F2
+key(key, "wide-0 margin-0 small") #{key} +key(0, "F3", "wide-0 small rounded-none") F3
+empty_key(2) +key(2, "F4", "wide-0 small rounded-right") F4
+modifier("PrintScreen", "margin-0 small") Pt/Sq +key(0, "F5", "wide-0 small rounded-left") F5
+key("ScrollLock", "margin-0 small") +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") +lamp("hid-keyboard-scroll-led")
| #[br] ScrLk | #[br] ScrLk
+key("Pause", "margin-0 small") P/Brk +key(1, "Pause", "small") P/Brk
+key("Insert", "margin-0 small") Ins +key(1, "Insert", "small") Ins
+key("Home", "margin-0 small") Home +key(1, "Home", "small") Home
+key("End", "margin-0 small") End +key(1, "End", "small") End
+key("Delete", "margin-0 small") Del +key(0, "Delete", "small") Del
div(class="keypad-row") div(class="keypad-row")
+key("Backquote") ~#[br]` +key(1, "Backquote") ~#[br]`
each key, index in ["!", "@", "#", "$", "%", "^", "&", "*", "("] each key, index in ["!", "@", "#", "$", "%", "^", "&", "*", "("]
+key(`Digit${index + 1}`) #{key}#[br]#{index + 1} +key(1, `Digit${index + 1}`) #{key}#[br]#{index + 1}
+key("Digit0") )#[br]0 +key(1, "Digit0") )#[br]0
+key("Minus") _#[br]- +key(1, "Minus") _#[br]-
+key("Equal") +#[br]= +key(1, "Equal") +#[br]=
+key("Backspace", "wide-3 right", 101) ↤ +key(0, "Backspace", "wide-2 right", 101) ↤
div(class="keypad-row") div(class="keypad-row")
+key("Tab", "wide-2 left") &#8676;<br>&#8677; +key(1, "Tab", "wide-1 left") &#8676;<br>&#8677;
each key in ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"] each key in ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"]
+key(`Key${key}`, "single") #{key} +key(1, `Key${key}`, "single") #{key}
+key("BracketLeft") {#[br][ +key(1, "BracketLeft") {#[br][
+key("BracketRight") }#[br]] +key(1, "BracketRight") }#[br]]
+key("Backslash", "wide-2 left", 78) |#[br]&bsol; +key(0, "Backslash", "wide-1 left", 78) |#[br]&bsol;
div(class="keypad-row") div(class="keypad-row")
+key("CapsLock", "wide-3 left small") +key(1, "CapsLock", "wide-2 left small")
+lamp("hid-keyboard-caps-led") +lamp("hid-keyboard-caps-led")
| #[br] Caps Lock | #[br] Caps Lock
each key in ["A", "S", "D", "F", "G", "H", "J", "K", "L"] each key in ["A", "S", "D", "F", "G", "H", "J", "K", "L"]
+key(`Key${key}`, "single") #{key} +key(1, `Key${key}`, "single") #{key}
+key("Semicolon") :#[br]; +key(1, "Semicolon") :#[br];
+key("Quote") `#[br]' +key(1, "Quote") `#[br]'
+key("Enter", "wide-4 right small", 116) Enter#[br]&crarr; +key(0, "Enter", "wide-3 right small", 116) Enter#[br]&crarr;
div(class="keypad-row") 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"] each key in ["Z", "X", "C", "V", "B", "N", "M"]
+key(`Key${key}`, "single") #{key} +key(1, `Key${key}`, "single") #{key}
+key("Comma") lt;#[br], +key(1, "Comma") &lt;#[br],
+key("Period") &gt;#[br]. +key(1, "Period") &gt;#[br].
+key("Slash") ?#[br]/ +key(1, "Slash") ?#[br]/
+key("PageUp", "small") PgUp +key(2, "PageUp", "small") PgUp
+key("ArrowUp") &uarr; +key(2, "ArrowUp") &uarr;
+key("PageDown", "small") PgDn +key(0, "PageDown", "small") PgDn
div(class="keypad-row") div(class="keypad-row")
+modifier("ControlLeft", "wide-1 left small") Ctrl +modifier(1, "ControlLeft", "wide-1 left small") Ctrl
+modifier("MetaLeft", "wide-1 left small") Win +modifier(1, "MetaLeft", "wide-1 left small") Win
+modifier("AltLeft", "wide-1 left small") Alt +modifier(1, "AltLeft", "wide-1 left small") Alt
+key("Space", "", 190) +key(1, "Space", "", 190)
+modifier("AltRight", "right small") Alt +modifier(1, "AltRight", "right small") Alt
+modifier("MetaRight", "right small") Win +modifier(1, "MetaRight", "right small") Win
+modifier("ShiftRight", "right small") Shift +modifier(1, "ShiftRight", "right small") Shift
+modifier("ControlRight", "right small") Ctrl +modifier(1, "ControlRight", "right small") Ctrl
+key("ArrowLeft") &larr; +key(2, "ArrowLeft") &larr;
+key("ArrowDown") &darr; +key(2, "ArrowDown") &darr;
+key("ArrowRight") &rarr; +key(0, "ArrowRight") &rarr;

28
web/kvm/window-stream.pug
View File

@ -21,17 +21,17 @@ div(id="stream-window" class="window window-resizable")
div(id="stream-mouse-buttons" class="keypad" align="center") div(id="stream-mouse-buttons" class="keypad" align="center")
div(class="keypad-block") div(class="keypad-block")
div(class="keypad-row") div(class="keypad-row")
div(data-code="left" class="key wide-4 left small") #[span Mouse#[br]Left] div(data-code="left" class="key wide-3 left rounded-left")
div(data-code="left" class="modifier wide-2 left small") #[span #[b &bull;]#[br]&larr; Hold] div(class="label") Left
div(class="empty-key" style="width:10px") div(data-code="left" class="modifier left small rounded-right")
div(data-code="middle" class="key wide-2 left small") #[span Mouse#[br]Middle] div(class="label") #[b &bull;]#[br]Hold
div(data-code="middle" class="modifier wide-2 left small") #[span #[b &bull;]#[br]&larr; Hold] div(class="empty" style="width:15px")
div(class="empty-key" style="width:10px") div(data-code="middle" class="key wide-1 left rounded-left")
div(data-code="right" class="modifier wide-2 right small") #[span #[b &bull;]#[br]Hold &rarr;] div(class="label") Mid
div(data-code="right" class="key wide-4 right small") #[span Mouse#[br]Right] div(data-code="middle" class="modifier left small rounded-right")
div(class="keypad-row" style="display:none") div(class="label") #[b &bull;]#[br]Hold
div(data-code="up" class="key wide-4 left small") #[span Mouse#[br]Up/Back] div(class="empty" style="width:15px")
div(data-code="up" class="modifier wide-2 left small") #[span #[b &bull;]#[br]&larr; Hold] div(data-code="right" class="modifier right small rounded-left")
div(class="empty-key" style="width:10px") div(class="label") #[b &bull;]#[br]Hold
div(data-code="down" class="modifier wide-2 right small") #[span #[b &bull;]#[br]Hold &rarr;] div(data-code="right" class="key wide-3 right rounded-right")
div(data-code="down" class="key wide-4 right small") #[span Mouse#[br]Down/Fw] div(class="label") Right

38
web/share/css/keypad.css
View File

@ -33,6 +33,8 @@ div.keypad div.keypad-block:not(:first-child) {
} }
div.keypad div.keypad-row { div.keypad div.keypad-row {
display: flex;
flex-wrap: wrap;
white-space: nowrap; white-space: nowrap;
height: 40px; height: 40px;
margin-bottom: 5px; margin-bottom: 5px;
@ -41,12 +43,18 @@ div.keypad div.keypad-row:last-child {
margin-bottom: 0; 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.key,
div.keypad div.modifier, div.keypad div.modifier,
div.keypad div.empty-key { div.keypad div.empty {
box-sizing: border-box; box-sizing: border-box;
display: inline-block;
margin-right: 5px;
padding: 0; padding: 0;
width: 40px; width: 40px;
} }
@ -68,6 +76,15 @@ div.keypad div.modifier:hover {
color: var(--cs-key-hovered-fg); color: var(--cs-key-hovered-fg);
background-color: var(--cs-key-hovered-bg); 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 { div.keypad div.pressed {
box-shadow: none; box-shadow: none;
color: var(--cs-key-pressed-fg) !important; color: var(--cs-key-pressed-fg) !important;
@ -79,29 +96,24 @@ div.keypad div.holded {
background-color: var(--cs-key-holded-bg) !important; background-color: var(--cs-key-holded-bg) !important;
} }
div.keypad div.key:last-child, 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 { div.keypad div.modifier:last-child {
margin-right: 0; margin-right: 0;
} }
div.keypad div.margin-0 {
margin-right: 0px;
}
div.keypad div.wide-0 { div.keypad div.wide-0 {
width: 26px; width: 28px;
} }
div.keypad div.wide-1 { div.keypad div.wide-1 {
width: 61px; width: 61px;
} }
div.keypad div.wide-2 { div.keypad div.wide-2 {
width: 64px;
}
div.keypad div.wide-3 {
width: 77px; width: 77px;
} }
div.keypad div.wide-4 { div.keypad div.wide-3 {
width: 102px; width: 102px;
} }
div.keypad div.wide-5 { div.keypad div.wide-4 {
flex-grow: 1;
width: 288px; width: 288px;
} }
div.keypad div.left { div.keypad div.left {