summaryrefslogtreecommitdiff
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/kvm/index.html16
-rw-r--r--web/kvm/navbar-atx.pug2
-rw-r--r--web/kvm/navbar-gpio.pug2
-rw-r--r--web/kvm/navbar-macro.pug2
-rw-r--r--web/kvm/navbar-msd.pug2
-rw-r--r--web/kvm/navbar-system.pug2
-rw-r--r--web/kvm/navbar-text.pug2
-rw-r--r--web/kvm/navbar.pug2
-rw-r--r--web/share/css/navbar.css10
-rw-r--r--web/share/js/kvm/gpio.js11
-rw-r--r--web/share/js/wm.js5
11 files changed, 36 insertions, 20 deletions
diff --git a/web/kvm/index.html b/web/kvm/index.html
index f9467097..b2d6789d 100644
--- a/web/kvm/index.html
+++ b/web/kvm/index.html
@@ -60,7 +60,7 @@
<ul id="navbar">
<li class="left"><a id="logo" href="/">&larr;&nbsp;&nbsp;<img class="svg-gray" src="/share/svg/logo.svg" alt="&amp;pi;-kvm"></a></li>
<div class="hidden" id="hw-health-dropdown">
- <li class="left"><a class="menu-button" href="#"><img class="hidden" data-dont-hide-menu id="hw-health-undervoltage-led" src="/share/svg/led-undervoltage.svg"><img class="hidden" data-dont-hide-menu id="hw-health-overheating-led" src="/share/svg/led-overheating.svg"></a>
+ <li class="left"><a class="menu-button" href="#"><img class="hidden" id="hw-health-undervoltage-led" src="/share/svg/led-undervoltage.svg"><img class="hidden" id="hw-health-overheating-led" src="/share/svg/led-overheating.svg"></a>
<div class="menu" data-dont-hide-menu>
<div class="text">
<table>
@@ -108,7 +108,7 @@
</li>
</div>
<div class="hidden" id="fan-health-dropdown">
- <li class="left"><a class="menu-button" href="#"><img class="hidden" data-dont-hide-menu id="fan-health-led" src="/share/svg/led-fan.svg"></a>
+ <li class="left"><a class="menu-button" href="#"><img class="hidden" id="fan-health-led" src="/share/svg/led-fan.svg"></a>
<div class="menu" data-dont-hide-menu>
<div class="text">
<table>
@@ -139,7 +139,7 @@
</div>
</li>
</div>
- <li class="right" id="system-dropdown"><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" id="system-dropdown"><a class="menu-button" href="#"><img class="led-gray" id="link-led" src="/share/svg/led-link.svg"><img class="led-gray" id="stream-led" src="/share/svg/led-stream.svg"><img class="led-gray" id="hid-keyboard-led" src="/share/svg/led-hid-keyboard.svg"><img class="led-gray" id="hid-mouse-led" src="/share/svg/led-hid-mouse.svg"><span>System</span></a>
<div class="menu" data-dont-hide-menu id="system-menu">
<table class="kv" style="width: calc(100% - 20px)">
<tr>
@@ -335,7 +335,7 @@
</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>
+ <li class="right feature-disabled" id="atx-dropdown"><a class="menu-button" href="#"><img class="led-gray" id="atx-power-led" src="/share/svg/led-atx-power.svg"><img class="led-gray" id="atx-hdd-led" src="/share/svg/led-atx-hdd.svg"><span>ATX</span></a>
<div class="menu" data-dont-hide-menu>
<div class="text"><b>Control the server's power<br></b><sub>Use the short click for ACPI shutdown</sub></div>
<hr>
@@ -359,7 +359,7 @@
</div>
</div>
</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" id="msd-led" src="/share/svg/led-msd.svg"><span>Drive</span></a>
<div class="menu" data-dont-hide-menu id="msd-menu">
<div class="text"><b>Mass Storage Drive: </b><span id="msd-status"></span><br></div>
<hr>
@@ -570,7 +570,7 @@
</div>
</div>
</li>
- <li class="right" id="macro-dropdown"><a class="menu-button" href="#"><img class="led-gray" data-dont-hide-menu id="hid-recorder-led" src="/share/svg/led-gear.svg">Macro</a>
+ <li class="right" id="macro-dropdown"><a class="menu-button" href="#"><img class="led-gray" id="hid-recorder-led" src="/share/svg/led-gear.svg"><span>Macro</span></a>
<div class="menu" data-dont-hide-menu>
<div class="text"><b>Record and play HID/ATX/GPIO actions<br></b><sub>For security reasons, the record will not be saved on the PiKVM</sub></div>
<hr>
@@ -612,7 +612,7 @@
</div>
</div>
</li>
- <li class="right" id="text-dropdown"><a class="menu-button" href="#"><img class="feature-disabled" data-dont-hide-menu id="stream-ocr-led" src="/share/svg/led-gear.svg">Text</a>
+ <li class="right" id="text-dropdown"><a class="menu-button" href="#"><img class="feature-disabled" id="stream-ocr-led" src="/share/svg/led-gear.svg"><span>Text</span></a>
<div class="menu" data-dont-hide-menu>
<div class="text"><b>Paste text as keypress sequence<br></b><sub>Please note that PiKVM cannot switch the keyboard layout</sub></div>
<hr>
@@ -747,7 +747,7 @@
</table>
</div>
</li>
- <li class="right feature-disabled" id="gpio-dropdown"><a class="menu-button" id="gpio-menu-button" href="#">GPIO</a>
+ <li class="right feature-disabled" id="gpio-dropdown"><a class="menu-button" id="gpio-menu-button" href="#"><span>GPIO</span></a>
<div class="menu" data-dont-hide-menu id="gpio-menu"></div>
</li>
</ul>
diff --git a/web/kvm/navbar-atx.pug b/web/kvm/navbar-atx.pug
index 4122ca88..30bffaa2 100644
--- a/web/kvm/navbar-atx.pug
+++ b/web/kvm/navbar-atx.pug
@@ -2,7 +2,7 @@ li(id="atx-dropdown" class="right feature-disabled")
a(class="menu-button" href="#")
+navbar_led("atx-power-led", "led-atx-power")
+navbar_led("atx-hdd-led", "led-atx-hdd")
- | ATX
+ span ATX
div(data-dont-hide-menu class="menu")
div(class="text")
b Control the server's power#[br]
diff --git a/web/kvm/navbar-gpio.pug b/web/kvm/navbar-gpio.pug
index ed5000ac..e8424ef7 100644
--- a/web/kvm/navbar-gpio.pug
+++ b/web/kvm/navbar-gpio.pug
@@ -1,4 +1,4 @@
li(id="gpio-dropdown" class="right feature-disabled")
a(class="menu-button" id="gpio-menu-button" href="#")
- | GPIO
+ span GPIO
div(data-dont-hide-menu id="gpio-menu" class="menu")
diff --git a/web/kvm/navbar-macro.pug b/web/kvm/navbar-macro.pug
index 7d3ab18f..73b88c63 100644
--- a/web/kvm/navbar-macro.pug
+++ b/web/kvm/navbar-macro.pug
@@ -1,7 +1,7 @@
li(id="macro-dropdown" class="right")
a(class="menu-button" href="#")
+navbar_led("hid-recorder-led", "led-gear")
- | Macro
+ span Macro
div(data-dont-hide-menu class="menu")
div(class="text")
b Record and play HID/ATX/GPIO actions#[br]
diff --git a/web/kvm/navbar-msd.pug b/web/kvm/navbar-msd.pug
index d382c5b2..14e2d956 100644
--- a/web/kvm/navbar-msd.pug
+++ b/web/kvm/navbar-msd.pug
@@ -1,7 +1,7 @@
li(id="msd-dropdown" class="right feature-disabled")
a(class="menu-button" href="#")
+navbar_led("msd-led", "led-msd")
- | Drive
+ span Drive
div(data-dont-hide-menu id="msd-menu" class="menu")
div(class="text")
b Mass Storage Drive:
diff --git a/web/kvm/navbar-system.pug b/web/kvm/navbar-system.pug
index 499e34e1..550325ae 100644
--- a/web/kvm/navbar-system.pug
+++ b/web/kvm/navbar-system.pug
@@ -4,7 +4,7 @@ li(id="system-dropdown" class="right")
+navbar_led("stream-led", "led-stream")
+navbar_led("hid-keyboard-led", "led-hid-keyboard")
+navbar_led("hid-mouse-led", "led-hid-mouse")
- | System
+ span System
div(data-dont-hide-menu id="system-menu" class="menu")
table(class="kv" style="width: calc(100% - 20px)")
tr
diff --git a/web/kvm/navbar-text.pug b/web/kvm/navbar-text.pug
index 9b50f0e1..afc7a70b 100644
--- a/web/kvm/navbar-text.pug
+++ b/web/kvm/navbar-text.pug
@@ -1,7 +1,7 @@
li(id="text-dropdown" class="right")
a(class="menu-button" href="#")
+navbar_led("stream-ocr-led", "led-gear", "feature-disabled")
- | Text
+ span Text
div(data-dont-hide-menu class="menu")
div(class="text")
b Paste text as keypress sequence#[br]
diff --git a/web/kvm/navbar.pug b/web/kvm/navbar.pug
index 9703344e..98456765 100644
--- a/web/kvm/navbar.pug
+++ b/web/kvm/navbar.pug
@@ -1,5 +1,5 @@
mixin navbar_led(id, icon, cls="led-gray")
- img(data-dont-hide-menu id=id, class=cls src=`${svg_dir}/${icon}.svg`)
+ img(id=id, class=cls src=`${svg_dir}/${icon}.svg`)
mixin menu_message(icon, short, classes="")
div(class="text")
diff --git a/web/share/css/navbar.css b/web/share/css/navbar.css
index 8a339b8a..e8a73820 100644
--- a/web/share/css/navbar.css
+++ b/web/share/css/navbar.css
@@ -44,6 +44,7 @@ ul#navbar li.left {
}
ul#navbar li a#logo {
+ height: 50px; /* Чтобы вертикальные разделители не вылезали за пределы навбара */
line-height: 50px;
outline: none;
cursor: pointer;
@@ -55,6 +56,7 @@ ul#navbar li a#logo {
}
ul#navbar li a.menu-button {
+ height: 50px; /* То же самое */
line-height: 50px;
outline: none;
cursor: pointer;
@@ -83,7 +85,7 @@ ul#navbar li a.menu-button:hover:not(.active) {
@media only screen and (pointer: coarse) {
ul#navbar li a#logo:hover:not(.active),
ul#navbar li a.menu-button:hover:not(.active) {
- background-color: var(--cs-navbar-default-bg) !important;
+ background-color: var(--cs-navbar-default-bg);
}
}
@@ -92,11 +94,15 @@ ul#navbar li a#logo img {
height: 24px;
}
+ul#navbar li a.menu-button span,
ul#navbar li a.menu-button img {
vertical-align: middle;
- margin-right: 10px;
height: 20px;
}
+ul#navbar li a.menu-button span:not(:last-child),
+ul#navbar li a.menu-button img:not(:last-child) {
+ margin-right: 10px;
+}
ul#navbar li a.menu-button-pressed {
box-shadow: var(--shadow-navbar-item-pressed);
diff --git a/web/share/js/kvm/gpio.js b/web/share/js/kvm/gpio.js
index 15eabd79..08ec42a8 100644
--- a/web/share/js/kvm/gpio.js
+++ b/web/share/js/kvm/gpio.js
@@ -72,7 +72,16 @@ export function Gpio(__recorder) {
self.setModel = function(model) {
tools.feature.setEnabled($("gpio-dropdown"), model.view.table.length);
if (model.view.table.length) {
- $("gpio-menu-button").innerHTML = `${model.view.header.title}`;
+ let title = [];
+ let last_is_label = false;
+ for (let item of model.view.header.title) {
+ if (last_is_label && item.type === "label") {
+ title.push("<span></span>");
+ }
+ last_is_label = (item.type === "label");
+ title.push(__createItem(item));
+ }
+ $("gpio-menu-button").innerHTML = title.join(" ");
}
let content = "<table class=\"kv\">";
diff --git a/web/share/js/wm.js b/web/share/js/wm.js
index 51f6c01a..20ea0805 100644
--- a/web/share/js/wm.js
+++ b/web/share/js/wm.js
@@ -344,8 +344,9 @@ function __WindowManager() {
var __globalMouseButtonHandler = function(event) {
if (
- event.target.matches && !event.target.matches(".menu-button")
- && event.target.closest && !event.target.closest(".modal")
+ event.target.closest
+ && !event.target.closest(".menu-button")
+ && !event.target.closest(".modal")
) {
for (let el_item = event.target; el_item && el_item !== document; el_item = el_item.parentNode) {
if (el_item.hasAttribute("data-force-hide-menu")) {
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-23 22:43:29 +0000