diff --git a/Protest/Front/ping.js b/Protest/Front/ping.js index ba1c7e6b..a6433499 100644 --- 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 index abb0d1e3..40d52c01 100644 --- 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 index 826752f3..3f7f64a7 100644 --- 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; }