GithubFollow/One-KVM
1
0
Fork 0
mirror of https://github.com/mofeng-git/One-KVM.git synced 2026-02-01 02:21: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> </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> <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="menu" data-dont-hide-menu>
<div class="buttons"> <div class="text"><b>Runtime settings &amp; tools<br></b><sub>Lower stream params may improve performance in a poor network</sub></div>
<button disabled data-force-hide-menu id="stream-screenshot-button">&bull; Take a screenshot</button> <hr>
<hr> <table class="kv" style="width: calc(100% - 20px)">
<button data-force-hide-menu id="show-stream-button">&bull; Show stream</button> <tr class="feature-disabled" id="stream-resolution">
<button data-force-hide-menu id="show-keyboard-button">&bull; Show keyboard</button> <td>Resolution:</td>
<button data-force-hide-menu id="show-about-button">&bull; Show about</button> <td>
</div>
<div class="feature-disabled" id="stream-resolution">
<hr>
<div class="text">Stream resolution:
<div class="stream-param-box">
<select disabled data-dont-hide-menu id="stream-resolution-selector"></select> <select disabled data-dont-hide-menu id="stream-resolution-selector"></select>
</div> </td>
</div> </tr>
</div> <tr class="feature-disabled" id="stream-quality">
<div class="feature-disabled" id="stream-quality"> <td>Image quality:</td>
<hr> <td>
<div class="text">Stream quality: <span id="stream-quality-value">80%</span>
<div class="stream-param-box">
<input class="slider" disabled type="range" id="stream-quality-slider"> <input class="slider" disabled type="range" id="stream-quality-slider">
</div> </td>
</div> <td class="value" id="stream-quality-value">80%</td>
</div> </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> <hr>
<div class="text">Stream FPS: <span id="stream-desired-fps-value">0</span> <table class="kv">
<div class="stream-param-box"> <td>Auto-resize stream window:</td>
<input class="slider" disabled type="range" id="stream-desired-fps-slider"> <td align="right">
</div> <div class="switch-box">
</div> <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> <hr>
<div class="text">Stream size: <span id="stream-size-value">100%</span> <div class="buttons buttons-row">
<div class="stream-param-box"> <button class="row33" data-force-hide-menu id="show-stream-button">&bull; Show stream</button>
<input class="slider" type="range" id="stream-size-slider"> <button class="row33" disabled data-force-hide-menu id="stream-screenshot-button">&bull; Screenshot</button>
</div> <button class="row33" disabled id="stream-reset-button">Reset stream</button>
</div> </div>
<hr> <div class="feature-disabled" id="mouse-squash">
<div class="text"> <hr>
<table class="one-line-switch"> <table class="kv">
<td>Auto-resize stream:</td> <td>Squash mouse moves:</td>
<td align="right"> <td align="right">
<div class="switch-box"> <div class="switch-box">
<input checked type="checkbox" id="stream-auto-resize-checkbox"> <input checked type="checkbox" id="mouse-squash-checkbox">
<label for="stream-auto-resize-checkbox"><span class="switch-inner"></span><span class="switch"></span></label> <label for="mouse-squash-checkbox"><span class="switch-inner"></span><span class="switch"></span></label>
</div> </div>
</td> </td>
</table> </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> </div>
<hr> <hr>
<div class="buttons"> <div class="buttons buttons-row">
<button disabled data-force-hide-menu id="stream-reset-button">&bull; Reset stream</button> <button class="row50" data-force-hide-menu id="show-keyboard-button">&bull; Show keyboard</button>
<button disabled data-force-hide-menu id="hid-reset-button">&bull; Reset keyboard &amp; mouse</button> <button class="row50" disabled id="hid-reset-button">Reset HID</button>
<button class="feature-disabled" disabled data-force-hide-menu id="msd-reset-button">&bull; Reset drive</button>
</div> </div>
<hr> <hr>
<div class="buttons"> <div class="buttons buttons-row">
<button data-force-hide-menu id="open-log-button">&bull; Open log</button> <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>
<div class="buttons feature-disabled" id="wol"> <div class="buttons feature-disabled" id="wol">
<hr> <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>
</div> </div>
</li> </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> <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="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"> <div class="buttons">
<button disabled id="atx-power-button">&bull; Click Power <sup><i>short</i></sup></button> <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> <button disabled id="atx-power-button-long">&bull; Click Power <sup><i>long</i></sup></button>
@@ -196,6 +196,8 @@
</li> </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> <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="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="hidden" id="msd-message-offline">
<div class="text"> <div class="text">
<table> <table>
@@ -338,7 +340,8 @@
</div> </div>
<div class="buttons buttons-row"> <div class="buttons buttons-row">
<button class="row50" disabled id="msd-connect-button">Connect drive to Server</button> <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>
</div> </div>
</li> </li>
@@ -368,17 +371,15 @@
</tr> </tr>
</table> </table>
<hr> <hr>
<table class="kv"> <table class="kv">
<tr> <td>Infinite loop playback:</td>
<td>Infinite loop playback:</td> <td align="right">
<td colspan="2"> <div class="switch-box">
<div class="switch-box"> <input disabled type="checkbox" id="hid-recorder-loop-checkbox">
<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>
<label for="hid-recorder-loop-checkbox"><span class="switch-inner"></span><span class="switch"></span></label> </div>
</div> </td>
</td> </table>
</tr>
</table>
<hr> <hr>
<input type="file" id="hid-recorder-new-script-file"> <input type="file" id="hid-recorder-new-script-file">
<div class="buttons buttons-row"> <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") +navbar_led("atx-hdd-led", "led-atx-hdd")
| ATX | ATX
div(class="menu") 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") div(class="buttons")
button(disabled id="atx-power-button") &bull; Click Power #[sup #[i short]] 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]] 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(id="hid-recorder-events-count" class="value") 0
td #[sup #[i include delays]] td #[sup #[i include delays]]
hr hr
table(class="kv") +menu_switch("hid-recorder-loop-checkbox", "Infinite loop playback", false, false)
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")
hr hr
input(type="file" id="hid-recorder-new-script-file") input(type="file" id="hid-recorder-new-script-file")
div(class="buttons buttons-row") 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") +navbar_led("msd-led", "led-msd")
| Drive | Drive
div(data-dont-hide-menu id="msd-menu" class="menu") 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") div(id="msd-message-offline" class="hidden")
+menu_message("warning", "Mass Storage Drive is offline") +menu_message("warning", "Mass Storage Drive is offline")
hr hr
@@ -77,4 +80,5 @@ li(id="msd-dropdown" class="right feature-disabled")
hr hr
div(class="buttons buttons-row") div(class="buttons buttons-row")
button(disabled id="msd-connect-button" class="row50") Connect drive to Server 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") +navbar_led("hid-mouse-led", "led-hid-mouse")
| System | System
div(data-dont-hide-menu class="menu") 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") div(class="text")
| Stream FPS: #[span(id="stream-desired-fps-value") 0] b Runtime settings &amp; tools#[br]
div(class="stream-param-box") sub Lower stream params may improve performance in a poor network
input(disabled type="range" id="stream-desired-fps-slider" class="slider")
hr hr
div(class="text") table(class="kv" style="width: calc(100% - 20px)")
| Stream size: #[span(id="stream-size-value") 100%] tr(id="stream-resolution" class="feature-disabled")
div(class="stream-param-box") td Resolution:
input(type="range" id="stream-size-slider" class="slider") 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 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") div(id="mouse-squash" class="feature-disabled")
hr hr
+menu_switch("mouse-squash-checkbox", "Squash mouse moves") +menu_switch("mouse-squash-checkbox", "Squash mouse moves", true, true)
hr hr
div(class="buttons") div(class="buttons buttons-row")
button(disabled data-force-hide-menu id="stream-reset-button") &bull; Reset stream button(data-force-hide-menu id="show-keyboard-button" class="row50") &bull; Show keyboard
button(disabled data-force-hide-menu id="hid-reset-button") &bull; Reset keyboard &amp; mouse button(disabled id="hid-reset-button" class="row50") Reset HID
button(disabled data-force-hide-menu id="msd-reset-button" class="feature-disabled") &bull; Reset drive
hr hr
div(class="buttons") div(class="buttons buttons-row")
button(data-force-hide-menu id="open-log-button") &bull; Open log 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") div(id="wol" class="buttons feature-disabled")
hr 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") sup(style="line-height:1")
block block
mixin menu_switch(id, title) mixin menu_switch(id, title, enabled, checked)
div(class="text") table(class="kv")
table(class="one-line-switch") td #{title}:
td #{title}: td(align="right")
td(align="right") div(class="switch-box")
div(class="switch-box") input(checked=checked disabled=!enabled type="checkbox" id=id)
input(checked type="checkbox" id=id) label(for=id)
label(for=id) span(class="switch-inner")
span(class="switch-inner") span(class="switch")
span(class="switch")
ul(id="navbar") ul(id="navbar")
li(class="left") 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%); filter: grayscale(100%) brightness(75%) sepia(75%);
} }
div.stream-param-box {
margin-top: 5px;
display: flex;
}
div#stream-mouse-buttons { div#stream-mouse-buttons {
display: none; display: none;
} }

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

@@ -215,15 +215,20 @@ div.buttons-row {
display: inline-block; display: inline-block;
width: 50%; width: 50%;
} }
.row33 {
display: inline-block;
width: 33.33%;
}
.row25 { .row25 {
display: inline-block; display: inline-block;
width: 25%; width: 25%;
} }
.row16 { .row16 {
display: inline-block; display: inline-block;
width: 16.66% width: 16.66%;
} }
.row50:not(:first-child), .row50:not(:first-child),
.row33:not(:first-child),
.row25:not(:first-child), .row25:not(:first-child),
.row16:not(:first-child) { .row16:not(:first-child) {
border-top-left-radius: 0; border-top-left-radius: 0;
@@ -231,6 +236,7 @@ div.buttons-row {
border-left: var(--border-control-thin) !important; border-left: var(--border-control-thin) !important;
} }
.row50:not(:last-child), .row50:not(:last-child),
.row33:not(:last-child),
.row25:not(:last-child), .row25:not(:last-child),
.row16:not(:last-child) { .row16:not(:last-child) {
border-top-right-radius: 0; 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; 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 { ul#navbar li div.menu table.kv {
border-spacing: 5px; border-spacing: 5px;
margin: 0 10px 0 10px; margin: 0 10px 0 10px;

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

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