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

3 files changed, 21 insertions, 5 deletions

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