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

smart menubar

Browse Source
This commit is contained in:
Devaev Maxim 2018-07-22 17:23:33 +03:00
parent 41576d7f62
commit c462aedad9
4 changed files with 50 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
kvmd/web/css/main.css
View File

@ -59,7 +59,6 @@ ul#ctl li.ctl-logo {
float: left; float: left;
} }
ul#ctl li.ctl-right-actions { ul#ctl li.ctl-right-actions {
cursor: pointer;
float: right; float: right;
} }
ul#ctl img { ul#ctl img {
@ -68,7 +67,7 @@ ul#ctl img {
height: 20px; height: 20px;
} }
ul#ctl li a.ctl-item { ul#ctl li a.ctl-item {
pointer-events: none; cursor: pointer;
border-left: var(--black-border); border-left: var(--black-border);
display: inline-block; display: inline-block;
color: var(--fg-color-normal); color: var(--fg-color-normal);
@ -77,16 +76,10 @@ ul#ctl li a.ctl-item {
height: 20px; height: 20px;
} }
ul#ctl li a.ctl-item:hover:not(.active) { ul#ctl li a.ctl-item:hover:not(.active) {
background-color: var(--bg-color-selected); background-color: var(--bg-color-hovered);
}
div.ctl-dropdown {
outline: none;
position: relative;
display: inline-block;
} }
div.ctl-dropdown-content { div.ctl-dropdown-content {
user-select: text; user-select: text;
cursor: default;
white-space: nowrap; white-space: nowrap;
border: var(--dark-border); border: var(--dark-border);
border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px;
@ -95,23 +88,6 @@ div.ctl-dropdown-content {
min-width: 180px; min-width: 180px;
box-shadow: var(--big-shadow); box-shadow: var(--big-shadow);
z-index: 9; z-index: 9;
visibility: hidden;
transition: visibility 0.5s;
opacity: 0;
}
div.ctl-dropdown:focus {
pointer-events: none;
}
div.ctl-dropdown:focus div.ctl-dropdown-content {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
div.ctl-dropdown:hover a.ctl-item {
background-color: var(--bg-color-hovered);
}
div.ctl-dropdown:focus a.ctl-item {
background-color: var(--bg-color-selected);
} }
div.ctl-dropdown-content button { div.ctl-dropdown-content button {
box-shadow: none; box-shadow: none;

37
kvmd/web/index.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>&pi;-kvm</title> <title>Pi-KVM</title>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
@ -20,6 +20,7 @@
<script src="js/hid.js"></script> <script src="js/hid.js"></script>
<script src="js/msd.js"></script> <script src="js/msd.js"></script>
<script src="js/session.js"></script> <script src="js/session.js"></script>
<script src="js/ui.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>
<script>window.onload = main;</script> <script>window.onload = main;</script>
@ -29,27 +30,27 @@
<li class="ctl-logo"><img id="logo" src="svg/logo.svg" alt="&pi;-kvm" /></li> <li class="ctl-logo"><img id="logo" src="svg/logo.svg" alt="&pi;-kvm" /></li>
<li class="ctl-right-actions"> <li class="ctl-right-actions">
<div class="ctl-dropdown" tabindex="0"> <div class="ctl-dropdown">
<a class="ctl-item" href="#"> <a class="ctl-item" href="#" onclick="ui.toggleMenu(this);">
<img id="stream-led" class="led-off" src="svg/stream-led.svg" /> <img data-dont-hide-menu id="stream-led" class="led-off" src="svg/stream-led.svg" />
<img id="hid-keyboard-led" class="led-off" src="svg/hid-keyboard-led.svg" /> <img data-dont-hide-menu id="hid-keyboard-led" class="led-off" src="svg/hid-keyboard-led.svg" />
<img id="hid-mouse-led" class="led-off" src="svg/hid-mouse-led.svg" /> <img data-dont-hide-menu id="hid-mouse-led" class="led-off" src="svg/hid-mouse-led.svg" />
System &#8628; System &#8628;
</a> </a>
<div class="ctl-dropdown-content"> <div class="ctl-dropdown-content" style="display:none">
<button disabled id="stream-reset-button" onclick="stream.clickResetButton();">&bull; Reset stream</button> <button disabled id="stream-reset-button" onclick="stream.clickResetButton();">&bull; Reset stream</button>
</div> </div>
</div> </div>
</li> </li>
<li class="ctl-right-actions"> <li class="ctl-right-actions">
<div class="ctl-dropdown" tabindex="0"> <div class="ctl-dropdown">
<a class="ctl-item" href="#"> <a class="ctl-item" href="#" onclick="ui.toggleMenu(this);">
<img id="atx-power-led" class="led-off" src="svg/atx-power-led.svg" /> <img data-dont-hide-menu id="atx-power-led" class="led-off" src="svg/atx-power-led.svg" />
<img id="atx-hdd-led" class="led-off" src="svg/atx-hdd-led.svg" /> <img data-dont-hide-menu id="atx-hdd-led" class="led-off" src="svg/atx-hdd-led.svg" />
ATX &#8628; ATX &#8628;
</a> </a>
<div class="ctl-dropdown-content"> <div class="ctl-dropdown-content" style="display:none">
<button disabled id="atx-power-button" onclick="atx.clickButton(this);">&bull; Click Power <sup><i>short</i></sup></button> <button disabled id="atx-power-button" onclick="atx.clickButton(this);">&bull; Click Power <sup><i>short</i></sup></button>
<button disabled id="atx-power-button-long" onclick="atx.clickButton(this);">&bull; Click Power <sup><i>long</i></sup></button> <button disabled id="atx-power-button-long" onclick="atx.clickButton(this);">&bull; Click Power <sup><i>long</i></sup></button>
<hr> <hr>
@ -59,12 +60,12 @@
</li> </li>
<li class="ctl-right-actions"> <li class="ctl-right-actions">
<div class="ctl-dropdown" tabindex="0"> <div class="ctl-dropdown">
<a class="ctl-item" href="#"> <a class="ctl-item" href="#" onclick="ui.toggleMenu(this);">
<img id="msd-led" class="led-off" src="svg/msd-led.svg" /> <img data-dont-hide-menu id="msd-led" class="led-off" src="svg/msd-led.svg" />
Mass Storage &#8628; Mass Storage &#8628;
</a> </a>
<div id="msd-menu" class="ctl-dropdown-content"> <div data-dont-hide-menu id="msd-menu" class="ctl-dropdown-content" style="display:none">
<div id="msd-not-in-operate" style="display:none"> <div id="msd-not-in-operate" style="display:none">
<div class="ctl-dropdown-content-text"> <div class="ctl-dropdown-content-text">
<table> <table>
@ -125,7 +126,7 @@
<hr> <hr>
<input type="file" id="msd-select-new-image-file" style="display:none;" onchange="msd.selectNewImageFile()" /> <input type="file" id="msd-select-new-image-file" style="display:none;" onchange="msd.selectNewImageFile()" />
<button disabled id="msd-select-new-image-button" class="first" onclick="document.getElementById('msd-select-new-image-file').click();">&bull; Upload new image</button><button disabled id="msd-upload-new-image-button" class="second-half" onclick="msd.clickButton(this);">&bull; Start</button><button disabled id="msd-abort-uploading-button" class="second-half" onclick="msd.clickButton(this);">&bull; Abort</button> <button disabled id="msd-select-new-image-button" class="first" onclick="document.getElementById('msd-select-new-image-file').click();">Upload new image</button><button disabled id="msd-upload-new-image-button" class="second-half" onclick="msd.clickButton(this);">Start</button><button disabled id="msd-abort-uploading-button" class="second-half" onclick="msd.clickButton(this);">Abort</button>
<hr> <hr>
<div id="msd-new-image" style="display:none"> <div id="msd-new-image" style="display:none">
@ -148,7 +149,7 @@
<hr> <hr>
</div> </div>
<button disabled id="msd-switch-to-kvm-button" class="first-bottom" onclick="msd.clickButton(this);">&bull; Switch drive to KVM</button><button disabled id="msd-switch-to-server-button" class="second-bottom" onclick="msd.clickButton(this);">&bull; Switch drive to Server</button> <button disabled data-force-hide-menu id="msd-switch-to-kvm-button" class="first-bottom" onclick="msd.clickButton(this);">&bull; Switch drive to KVM</button><button disabled data-force-hide-menu id="msd-switch-to-server-button" class="second-bottom" onclick="msd.clickButton(this);">&bull; Switch drive to Server</button>
</div> </div>
</div> </div>
</li> </li>

1
kvmd/web/js/main.js
View File

@ -1,4 +1,5 @@
function main () { function main () {
window.onclick = ui.windowClickHandler;
session.startPoller(); session.startPoller();
stream.startPoller(); stream.startPoller();
} }

28
kvmd/web/js/ui.js Normal file
View File

@ -0,0 +1,28 @@
var ui = new function() {
this.toggleMenu = function(el_a) {
Array.prototype.forEach.call(document.getElementsByClassName("ctl-item"), function(el_item) {
var el_menu = el_item.parentElement.querySelector(".ctl-dropdown-content");
if (el_item === el_a && el_menu.style.display === "none") {
el_menu.style.display = "block";
el_item.setAttribute("style", "background-color: var(--bg-color-selected)");
} else {
el_menu.style.display = "none";
el_item.setAttribute("style", "background-color: default");
}
});
};
this.windowClickHandler = function(event) {
if (!event.target.matches(".ctl-item")) {
for (el_item = event.target; el_item && el_item !== document; el_item = el_item.parentNode) {
if (el_item.hasAttribute("data-force-hide-menu")) {
break;
}
else if (el_item.hasAttribute("data-dont-hide-menu")) {
return;
}
}
ui.toggleMenu(null);
}
};
};