Ping.js, tool-tip

openprotest · Jul 18, 2024 · 0a1589a · 0a1589a
1 parent 7f93f36
commit 0a1589a
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 9 deletions.
diff --git a/Protest/Front/ping.js b/Protest/Front/ping.js
@@ -579,9 +579,12 @@ class Ping extends Console {
 				icon.style.backgroundImage = `url(${type in LOADER.deviceIcons ? LOADER.deviceIcons[type] : "mono/gear.svg"}?light)`;
 				div.appendChild(icon);
 
-				icon.ondblclick = ()=> {
-					LOADER.OpenDeviceByFile(key);
-				};
+				let label = LOADER.devices.data[key].name?.v ?? LOADER.devices.data[key].ip?.v;
+				if (label) {
+					icon.setAttribute("tip", label);
+				}
+
+				icon.ondblclick = ()=> LOADER.OpenDeviceByFile(key);
 
 				break;
 			}

diff --git a/Protest/Front/tools.css b/Protest/Front/tools.css
@@ -19,6 +19,32 @@
 	background-size: 24px 24px;
 }
 
+.tool-element > .tool-icon[tip]::before {
+	position: absolute;
+	transform: translateX(-8px) !important;
+	left: calc(100% + 8px) !important;
+	right: unset;
+	top: calc(50% - 12px) !important;
+}
+.tool-element > .tool-icon[tip]::after {
+	transform: translateX(-8px) !important;
+	left: calc(100% + 2px) !important;
+	right: unset;
+	top: calc(50% - 6px) !important;
+	border-width: 6px 6px 6px 0 !important;
+	border-color: transparent rgb(52,52,52) !important;
+}
+.tool-element > .tool-icon[tip]:hover::before,
+.tool-element > .tool-icon[tip]:hover::after {
+	max-width: unset !important;
+	transform: none !important;
+}
+.tool-element > .tool-icon[tip]:active::before,
+.tool-element > .tool-icon[tip]:active::after {
+	transition-delay: .25s !important;
+	transform: translateX(8px) !important;
+}
+
 .tool-element > .tool-label {
 	max-width: 30%;
 	overflow: hidden;

diff --git a/Protest/Front/window.css b/Protest/Front/window.css
@@ -477,7 +477,7 @@
 		var(--clr-accent)95%,
 		color-mix(in hsl shorter hue, var(--clr-select)66%, rgba(8,0,0,1))100%);
 }
-#taskbar.taskbar-left > div.bar-icon:before {
+#taskbar.taskbar-left > div.bar-icon::before {
 	transform: translateX(-8px) !important;
 	left: calc(100% + 12px) !important;
 	right: unset;
@@ -491,7 +491,7 @@
 	border-width: 6px 6px 6px 0 !important;
 	border-color: transparent rgb(52,52,52) !important;
 }
-#taskbar.taskbar-left > div.bar-icon:hover:before,
+#taskbar.taskbar-left > div.bar-icon:hover::before,
 #taskbar.taskbar-left > div.bar-icon:hover::after {
 	transform: none !important;
 }
@@ -508,7 +508,7 @@
 		var(--clr-accent)95%,
 		color-mix(in hsl shorter hue, var(--clr-select)66%, rgba(8,0,0,1))100%);
 }
-#taskbar.taskbar-right > div.bar-icon:before {
+#taskbar.taskbar-right > div.bar-icon::before {
 	transform: translateX(8px) !important;
 	left: unset;
 	right: calc(100% + 12px) !important;
@@ -522,7 +522,7 @@
 	border-width: 6px 0 6px 6px !important;
 	border-color: transparent rgb(52,52,52) !important;
 }
-#taskbar.taskbar-right > div.bar-icon:hover:before,
+#taskbar.taskbar-right > div.bar-icon:hover::before,
 #taskbar.taskbar-right > div.bar-icon:hover::after {
 	transform: none !important;
 }
@@ -536,7 +536,7 @@
 	inset: 0px 0px auto 0px;
 	background: var(--grd-taskbar);
 }
-#taskbar.taskbar-top > div.bar-icon:before {
+#taskbar.taskbar-top > div.bar-icon::before {
 	transform: translateY(-8px) !important;
 	top: calc(100% + 11px) !important;
 }
@@ -545,7 +545,7 @@
 	top: calc(100% + 5px) !important;
 	border-width: 0 6px 6px 6px !important;
 }
-#taskbar.taskbar-top > div.bar-icon:hover:before,
+#taskbar.taskbar-top > div.bar-icon:hover::before,
 #taskbar.taskbar-top > div.bar-icon:hover::after {
 	transform: none !important;
 }