pikvm/pikvm#803: Ability to use LEDs in GPIO title

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")) {