summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--kvmd/web/css/main.css28
-rw-r--r--kvmd/web/index.html37
-rw-r--r--kvmd/web/js/main.js1
-rw-r--r--kvmd/web/js/ui.js28
4 files changed, 50 insertions, 44 deletions
diff --git a/kvmd/web/css/main.css b/kvmd/web/css/main.css
index e8b4ad9a..e0d1d91b 100644
--- a/kvmd/web/css/main.css
+++ b/kvmd/web/css/main.css
@@ -59,7 +59,6 @@ ul#ctl li.ctl-logo {
float: left;
}
ul#ctl li.ctl-right-actions {
- cursor: pointer;
float: right;
}
ul#ctl img {
@@ -68,7 +67,7 @@ ul#ctl img {
height: 20px;
}
ul#ctl li a.ctl-item {
- pointer-events: none;
+ cursor: pointer;
border-left: var(--black-border);
display: inline-block;
color: var(--fg-color-normal);
@@ -77,16 +76,10 @@ ul#ctl li a.ctl-item {
height: 20px;
}
ul#ctl li a.ctl-item:hover:not(.active) {
- background-color: var(--bg-color-selected);
-}
-div.ctl-dropdown {
- outline: none;
- position: relative;
- display: inline-block;
+ background-color: var(--bg-color-hovered);
}
div.ctl-dropdown-content {
user-select: text;
- cursor: default;
white-space: nowrap;
border: var(--dark-border);
border-radius: 0 0 8px 8px;
@@ -95,23 +88,6 @@ div.ctl-dropdown-content {
min-width: 180px;
box-shadow: var(--big-shadow);
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 {
box-shadow: none;
diff --git a/kvmd/web/index.html b/kvmd/web/index.html
index 6bdc7ad0..17538d2b 100644
--- a/kvmd/web/index.html
+++ b/kvmd/web/index.html
@@ -2,7 +2,7 @@
<html>
<head>
<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="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
@@ -20,6 +20,7 @@
<script src="js/hid.js"></script>
<script src="js/msd.js"></script>
<script src="js/session.js"></script>
+<script src="js/ui.js"></script>
<script src="js/main.js"></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-right-actions">
- <div class="ctl-dropdown" tabindex="0">
- <a class="ctl-item" href="#">
- <img 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 id="hid-mouse-led" class="led-off" src="svg/hid-mouse-led.svg" />
+ <div class="ctl-dropdown">
+ <a class="ctl-item" href="#" onclick="ui.toggleMenu(this);">
+ <img data-dont-hide-menu id="stream-led" class="led-off" src="svg/stream-led.svg" />
+ <img data-dont-hide-menu id="hid-keyboard-led" class="led-off" src="svg/hid-keyboard-led.svg" />
+ <img data-dont-hide-menu id="hid-mouse-led" class="led-off" src="svg/hid-mouse-led.svg" />
System &#8628;
</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>
</div>
</div>
</li>
<li class="ctl-right-actions">
- <div class="ctl-dropdown" tabindex="0">
- <a class="ctl-item" href="#">
- <img 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" />
+ <div class="ctl-dropdown">
+ <a class="ctl-item" href="#" onclick="ui.toggleMenu(this);">
+ <img data-dont-hide-menu id="atx-power-led" class="led-off" src="svg/atx-power-led.svg" />
+ <img data-dont-hide-menu id="atx-hdd-led" class="led-off" src="svg/atx-hdd-led.svg" />
ATX &#8628;
</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-long" onclick="atx.clickButton(this);">&bull; Click Power <sup><i>long</i></sup></button>
<hr>
@@ -59,12 +60,12 @@
</li>
<li class="ctl-right-actions">
- <div class="ctl-dropdown" tabindex="0">
- <a class="ctl-item" href="#">
- <img id="msd-led" class="led-off" src="svg/msd-led.svg" />
+ <div class="ctl-dropdown">
+ <a class="ctl-item" href="#" onclick="ui.toggleMenu(this);">
+ <img data-dont-hide-menu id="msd-led" class="led-off" src="svg/msd-led.svg" />
Mass Storage &#8628;
</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 class="ctl-dropdown-content-text">
<table>
@@ -125,7 +126,7 @@
<hr>
<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>
<div id="msd-new-image" style="display:none">
@@ -148,7 +149,7 @@
<hr>
</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>
</li>
diff --git a/kvmd/web/js/main.js b/kvmd/web/js/main.js
index b0f03109..51c6eae7 100644
--- a/kvmd/web/js/main.js
+++ b/kvmd/web/js/main.js
@@ -1,4 +1,5 @@
function main () {
+ window.onclick = ui.windowClickHandler;
session.startPoller();
stream.startPoller();
}
diff --git a/kvmd/web/js/ui.js b/kvmd/web/js/ui.js
new file mode 100644
index 00000000..60fcf70f
--- /dev/null
+++ b/kvmd/web/js/ui.js
@@ -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);
+ }
+ };
+};
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-23 16:53:33 +0000