GithubFollow/One-KVM
1
0
Fork 0
mirror of https://github.com/mofeng-git/One-KVM.git synced 2026-01-29 00:51:53 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

navbar change

Browse Source
This commit is contained in:
Devaev Maxim
2020-11-30 11:23:05 +03:00
parent 58d36c8fdb
commit f4a8a117c7
10 changed files with 130 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
web/kvm/index.html
View File

@@ -107,85 +107,85 @@
</div>
<li class="right"><a class="menu-button" href="#"><img class="led-gray" data-dont-hide-menu id="link-led" src="/share/svg/led-link.svg"><img class="led-gray" data-dont-hide-menu id="stream-led" src="/share/svg/led-stream.svg"><img class="led-gray" data-dont-hide-menu id="hid-keyboard-led" src="/share/svg/led-hid-keyboard.svg"><img class="led-gray" data-dont-hide-menu id="hid-mouse-led" src="/share/svg/led-hid-mouse.svg">System</a>
<div class="menu" data-dont-hide-menu>
<div class="buttons">
<button disabled data-force-hide-menu id="stream-screenshot-button">&bull; Take a screenshot</button>
<hr>
<button data-force-hide-menu id="show-stream-button">&bull; Show stream</button>
<button data-force-hide-menu id="show-keyboard-button">&bull; Show keyboard</button>
<button data-force-hide-menu id="show-about-button">&bull; Show about</button>
</div>
<div class="feature-disabled" id="stream-resolution">
<hr>
<div class="text">Stream resolution:
<div class="stream-param-box">
<div class="text"><b>Runtime settings &amp; tools<br></b><sub>Lower stream params may improve performance in a poor network</sub></div>
<hr>
<table class="kv" style="width: calc(100% - 20px)">
<tr class="feature-disabled" id="stream-resolution">
<td>Resolution:</td>
<td>
<select disabled data-dont-hide-menu id="stream-resolution-selector"></select>
</div>
</div>
</div>
<div class="feature-disabled" id="stream-quality">
<hr>
<div class="text">Stream quality: <span id="stream-quality-value">80%</span>
<div class="stream-param-box">
</td>
</tr>
<tr class="feature-disabled" id="stream-quality">
<td>Image quality:</td>
<td>
<input class="slider" disabled type="range" id="stream-quality-slider">
</div>
</div>
</div>
</td>
<td class="value" id="stream-quality-value">80%</td>
</tr>
<tr>
<td>Max FPS:</td>
<td>
<input class="slider" disabled type="range" id="stream-desired-fps-slider">
</td>
<td class="value" id="stream-desired-fps-value">0</td>
</tr>
<tr>
<td>Stream size:</td>
<td>
<input class="slider" type="range" id="stream-size-slider">
</td>
<td class="value" id="stream-size-value" style="width: 4em">100%</td>
</tr>
</table>
<hr>
<div class="text">Stream FPS: <span id="stream-desired-fps-value">0</span>
<div class="stream-param-box">
<input class="slider" disabled type="range" id="stream-desired-fps-slider">
</div>
</div>
<table class="kv">
<td>Auto-resize stream window:</td>
<td align="right">
<div class="switch-box">
<input checked type="checkbox" id="stream-auto-resize-checkbox">
<label for="stream-auto-resize-checkbox"><span class="switch-inner"></span><span class="switch"></span></label>
</div>
</td>
</table>
<hr>
<div class="text">Stream size: <span id="stream-size-value">100%</span>
<div class="stream-param-box">
<input class="slider" type="range" id="stream-size-slider">
</div>
<div class="buttons buttons-row">
<button class="row33" data-force-hide-menu id="show-stream-button">&bull; Show stream</button>
<button class="row33" disabled data-force-hide-menu id="stream-screenshot-button">&bull; Screenshot</button>
<button class="row33" disabled id="stream-reset-button">Reset stream</button>
</div>
<hr>
<div class="text">
<table class="one-line-switch">
<td>Auto-resize stream:</td>
<div class="feature-disabled" id="mouse-squash">
<hr>
<table class="kv">
<td>Squash mouse moves:</td>
<td align="right">
<div class="switch-box">
<input checked type="checkbox" id="stream-auto-resize-checkbox">
<label for="stream-auto-resize-checkbox"><span class="switch-inner"></span><span class="switch"></span></label>
<input checked type="checkbox" id="mouse-squash-checkbox">
<label for="mouse-squash-checkbox"><span class="switch-inner"></span><span class="switch"></span></label>
</div>
</td>
</table>
</div>
<div class="feature-disabled" id="mouse-squash">
<hr>
<div class="text">
<table class="one-line-switch">
<td>Squash mouse moves:</td>
<td align="right">
<div class="switch-box">
<input checked type="checkbox" id="mouse-squash-checkbox">
<label for="mouse-squash-checkbox"><span class="switch-inner"></span><span class="switch"></span></label>
</div>
</td>
</table>
</div>
</div>
<hr>
<div class="buttons">
<button disabled data-force-hide-menu id="stream-reset-button">&bull; Reset stream</button>
<button disabled data-force-hide-menu id="hid-reset-button">&bull; Reset keyboard &amp; mouse</button>
<button class="feature-disabled" disabled data-force-hide-menu id="msd-reset-button">&bull; Reset drive</button>
<div class="buttons buttons-row">
<button class="row50" data-force-hide-menu id="show-keyboard-button">&bull; Show keyboard</button>
<button class="row50" disabled id="hid-reset-button">Reset HID</button>
</div>
<hr>
<div class="buttons">
<button data-force-hide-menu id="open-log-button">&bull; Open log</button>
<div class="buttons buttons-row">
<button class="row50" data-force-hide-menu id="show-about-button">&bull; Show about</button>
<button class="row50" data-force-hide-menu id="open-log-button">&bull; Open log</button>
</div>
<div class="buttons feature-disabled" id="wol">
<hr>
<button disabled id="wol-wakeup-button">&bull; Wake on LAN server</button>
<button disabled id="wol-wakeup-button">&bull; Wake-on-LAN server</button>
</div>
</div>
</li>
<li class="right feature-disabled" id="atx-dropdown"><a class="menu-button" href="#"><img class="led-gray" data-dont-hide-menu id="atx-power-led" src="/share/svg/led-atx-power.svg"><img class="led-gray" data-dont-hide-menu id="atx-hdd-led" src="/share/svg/led-atx-hdd.svg">ATX</a>
<div class="menu">
<div class="text"><b>Control the server's power<br></b><sub>Use the short click for ACPI shutdown</sub></div>
<hr>
<div class="buttons">
<button disabled id="atx-power-button">&bull; Click Power <sup><i>short</i></sup></button>
<button disabled id="atx-power-button-long">&bull; Click Power <sup><i>long</i></sup></button>
@@ -196,6 +196,8 @@
</li>
<li class="right feature-disabled" id="msd-dropdown"><a class="menu-button" href="#"><img class="led-gray" data-dont-hide-menu id="msd-led" src="/share/svg/led-msd.svg">Drive</a>
<div class="menu" data-dont-hide-menu id="msd-menu">
<div class="text"><b>Mass Storage Device emulator<br></b></div>
<hr>
<div class="hidden" id="msd-message-offline">
<div class="text">
<table>
@@ -338,7 +340,8 @@
</div>
<div class="buttons buttons-row">
<button class="row50" disabled id="msd-connect-button">Connect drive to Server</button>
<button class="row50" disabled id="msd-disconnect-button">Disconnect drive</button>
<button class="row25" disabled id="msd-disconnect-button">Disconnect</button>
<button class="row25" disabled id="msd-reset-button">Reset</button>
</div>
</div>
</li>
@@ -368,17 +371,15 @@
</tr>
</table>
<hr>
<table class="kv">
<tr>
<td>Infinite loop playback:</td>
<td colspan="2">
<div class="switch-box">
<input disabled type="checkbox" id="hid-recorder-loop-checkbox">
<label for="hid-recorder-loop-checkbox"><span class="switch-inner"></span><span class="switch"></span></label>
</div>
</td>
</tr>
</table>
<table class="kv">
<td>Infinite loop playback:</td>
<td align="right">
<div class="switch-box">
<input disabled type="checkbox" id="hid-recorder-loop-checkbox">
<label for="hid-recorder-loop-checkbox"><span class="switch-inner"></span><span class="switch"></span></label>
</div>
</td>
</table>
<hr>
<input type="file" id="hid-recorder-new-script-file">
<div class="buttons buttons-row">

4
web/kvm/navbar-atx.pug
View File

@@ -4,6 +4,10 @@ li(id="atx-dropdown" class="right feature-disabled")
+navbar_led("atx-hdd-led", "led-atx-hdd")
| ATX
div(class="menu")
div(class="text")
b Control the server's power#[br]
sub Use the short click for ACPI shutdown
hr
div(class="buttons")
button(disabled id="atx-power-button") &bull; Click Power #[sup #[i short]]
button(disabled id="atx-power-button-long") &bull; Click Power #[sup #[i long]]

11
web/kvm/navbar-macro.pug
View File

@@ -22,16 +22,7 @@ li(class="right")
td(id="hid-recorder-events-count" class="value") 0
td #[sup #[i include delays]]
hr
table(class="kv")
tr
td Infinite loop playback:
td(colspan="2")
div(class="switch-box")
input(disabled type="checkbox" id="hid-recorder-loop-checkbox")
label(for="hid-recorder-loop-checkbox")
span(class="switch-inner")
span(class="switch")
+menu_switch("hid-recorder-loop-checkbox", "Infinite loop playback", false, false)
hr
input(type="file" id="hid-recorder-new-script-file")
div(class="buttons buttons-row")

6
web/kvm/navbar-msd.pug
View File

@@ -3,6 +3,9 @@ li(id="msd-dropdown" class="right feature-disabled")
+navbar_led("msd-led", "led-msd")
| Drive
div(data-dont-hide-menu id="msd-menu" class="menu")
div(class="text")
b Mass Storage Device emulator#[br]
hr
div(id="msd-message-offline" class="hidden")
+menu_message("warning", "Mass Storage Drive is offline")
hr
@@ -77,4 +80,5 @@ li(id="msd-dropdown" class="right feature-disabled")
hr
div(class="buttons buttons-row")
button(disabled id="msd-connect-button" class="row50") Connect drive to Server
button(disabled id="msd-disconnect-button" class="row50") Disconnect drive
button(disabled id="msd-disconnect-button" class="row25") Disconnect
button(disabled id="msd-reset-button" class="row25") Reset

67
web/kvm/navbar-system.pug
View File

@@ -6,47 +6,44 @@ li(class="right")
+navbar_led("hid-mouse-led", "led-hid-mouse")
| System
div(data-dont-hide-menu class="menu")
div(class="buttons")
button(disabled data-force-hide-menu id="stream-screenshot-button") &bull; Take a screenshot
hr
button(data-force-hide-menu id="show-stream-button") &bull; Show stream
button(data-force-hide-menu id="show-keyboard-button") &bull; Show keyboard
button(data-force-hide-menu id="show-about-button") &bull; Show about
div(id="stream-resolution" class="feature-disabled")
hr
div(class="text")
| Stream resolution:
div(class="stream-param-box")
select(disabled data-dont-hide-menu id="stream-resolution-selector")
div(id="stream-quality" class="feature-disabled")
hr
div(class="text")
| Stream quality: #[span(id="stream-quality-value") 80%]
div(class="stream-param-box")
input(disabled type="range" id="stream-quality-slider" class="slider")
hr
div(class="text")
| Stream FPS: #[span(id="stream-desired-fps-value") 0]
div(class="stream-param-box")
input(disabled type="range" id="stream-desired-fps-slider" class="slider")
b Runtime settings &amp; tools#[br]
sub Lower stream params may improve performance in a poor network
hr
div(class="text")
| Stream size: #[span(id="stream-size-value") 100%]
div(class="stream-param-box")
input(type="range" id="stream-size-slider" class="slider")
table(class="kv" style="width: calc(100% - 20px)")
tr(id="stream-resolution" class="feature-disabled")
td Resolution:
td #[select(disabled data-dont-hide-menu id="stream-resolution-selector")]
tr(id="stream-quality" class="feature-disabled")
td Image quality:
td #[input(disabled type="range" id="stream-quality-slider" class="slider")]
td(id="stream-quality-value" class="value") 80%
tr
td Max FPS:
td #[input(disabled type="range" id="stream-desired-fps-slider" class="slider")]
td(id="stream-desired-fps-value" class="value") 0
tr
td Stream size:
td #[input(type="range" id="stream-size-slider" class="slider")]
td(id="stream-size-value" class="value" style="width: 4em") 100%
hr
+menu_switch("stream-auto-resize-checkbox", "Auto-resize stream")
+menu_switch("stream-auto-resize-checkbox", "Auto-resize stream window", true, true)
hr
div(class="buttons buttons-row")
button(data-force-hide-menu id="show-stream-button" class="row33") &bull; Show stream
button(disabled data-force-hide-menu id="stream-screenshot-button" class="row33") &bull; Screenshot
button(disabled id="stream-reset-button" class="row33") Reset stream
div(id="mouse-squash" class="feature-disabled")
hr
+menu_switch("mouse-squash-checkbox", "Squash mouse moves")
+menu_switch("mouse-squash-checkbox", "Squash mouse moves", true, true)
hr
div(class="buttons")
button(disabled data-force-hide-menu id="stream-reset-button") &bull; Reset stream
button(disabled data-force-hide-menu id="hid-reset-button") &bull; Reset keyboard &amp; mouse
button(disabled data-force-hide-menu id="msd-reset-button" class="feature-disabled") &bull; Reset drive
div(class="buttons buttons-row")
button(data-force-hide-menu id="show-keyboard-button" class="row50") &bull; Show keyboard
button(disabled id="hid-reset-button" class="row50") Reset HID
hr
div(class="buttons")
button(data-force-hide-menu id="open-log-button") &bull; Open log
div(class="buttons buttons-row")
button(data-force-hide-menu id="show-about-button" class="row50") &bull; Show about
button(data-force-hide-menu id="open-log-button" class="row50") &bull; Open log
div(id="wol" class="buttons feature-disabled")
hr
button(disabled id="wol-wakeup-button") &bull; Wake on LAN server
button(disabled id="wol-wakeup-button") &bull; Wake-on-LAN server

19
web/kvm/navbar.pug
View File

@@ -13,16 +13,15 @@ mixin menu_message(icon, short, classes="")
sup(style="line-height:1")
block
mixin menu_switch(id, title)
div(class="text")
table(class="one-line-switch")
td #{title}:
td(align="right")
div(class="switch-box")
input(checked type="checkbox" id=id)
label(for=id)
span(class="switch-inner")
span(class="switch")
mixin menu_switch(id, title, enabled, checked)
table(class="kv")
td #{title}:
td(align="right")
div(class="switch-box")
input(checked=checked disabled=!enabled type="checkbox" id=id)
label(for=id)
span(class="switch-inner")
span(class="switch")
ul(id="navbar")
li(class="left")

5
web/share/css/kvm/stream.css
View File

@@ -61,11 +61,6 @@ img.stream-image-inactive {
filter: grayscale(100%) brightness(75%) sepia(75%);
}
div.stream-param-box {
margin-top: 5px;
display: flex;
}
div#stream-mouse-buttons {
display: none;
}

8
web/share/css/main.css
View File

@@ -215,15 +215,20 @@ div.buttons-row {
display: inline-block;
width: 50%;
}
.row33 {
display: inline-block;
width: 33.33%;
}
.row25 {
display: inline-block;
width: 25%;
}
.row16 {
display: inline-block;
width: 16.66%
width: 16.66%;
}
.row50:not(:first-child),
.row33:not(:first-child),
.row25:not(:first-child),
.row16:not(:first-child) {
border-top-left-radius: 0;
@@ -231,6 +236,7 @@ div.buttons-row {
border-left: var(--border-control-thin) !important;
}
.row50:not(:last-child),
.row33:not(:last-child),
.row25:not(:last-child),
.row16:not(:last-child) {
border-top-right-radius: 0;

12
web/share/css/navbar.css
View File

@@ -132,18 +132,6 @@ ul#navbar li div.menu div.text {
font-size: 14px;
}
ul#navbar li div.menu div.text table.one-line-switch {
width: 100%;
border-collapse: collapse;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
@supports (-webkit-appearance: none) {
ul#navbar li div.menu div.text table.one-line-switch {
margin: 20px 0 20px 0 !important;
}
}
}
ul#navbar li div.menu table.kv {
border-spacing: 5px;
margin: 0 10px 0 10px;

2
web/share/css/switch.css
View File

@@ -28,6 +28,8 @@ div.switch-box {
vertical-align: middle;
position: relative;
width: 50px;
margin-top: 3px;
margin-bottom: 3px;
}
div.switch-box input[type=checkbox] {