Merge pull request #44 from move-elevator/fix/disk-space-icon-tooltip

fix: restore full-width disk space bar and fix icon tooltip clipping off-screen

Author: konradmichalik

deployer/feature/dist/index/assets/css/style.css

@@ -71,27 +71,86 @@ kbd[data-tooltip], .status[data-tooltip]  {
 progress {
     height: .125rem;
 }
+.disk-space-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: .3rem;
+    background: rgba(0, 0, 0, .08);
+    z-index: 9;
+}
+.disk-space-bar-fill {
+    height: 100%;
+}
 .disk-space {
     position: fixed;
-    top: .75rem;
+    top: .65rem;
     left: .75rem;
     z-index: 10;
 }
 .disk-space-icon {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 2rem;
-    height: 2rem;
-    padding: 0;
-    margin: 0;
-    border: 0;
+    width: 2.25rem;
+    height: 2.25rem;
     border-radius: 50%;
-    cursor: pointer;
+    cursor: default;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, .28), 0 0 0 3px #fff;
+}
+.disk-space-icon:hover,
+.disk-space-icon:focus-visible {
+    box-shadow: 0 2px 10px rgba(0, 0, 0, .4), 0 0 0 3px #fff;
+}
+.disk-space-icon:focus-visible {
+    outline: 2px solid #fff;
+    outline-offset: 2px;
 }
 .disk-space-icon svg {
     pointer-events: none;
 }
+.disk-space-icon[data-info]::after {
+    content: attr(data-info);
+    position: absolute;
+    left: 0;
+    top: calc(100% + .6rem);
+    opacity: 0;
+    pointer-events: none;
+    background: #1d1d1b;
+    color: #fff;
+    font-size: .72rem;
+    line-height: 1.45;
+    padding: .5rem .65rem;
+    border-radius: .4rem;
+    width: max-content;
+    max-width: 15.5rem;
+    white-space: normal;
+    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
+    z-index: 20;
+}
+.disk-space-icon[data-info]:hover::after,
+.disk-space-icon[data-info]:focus-visible::after {
+    opacity: 1;
+}
+@media (prefers-reduced-motion: no-preference) {
+    .disk-space-icon {
+        transition: transform .15s ease, box-shadow .15s ease;
+    }
+    .disk-space-icon:hover,
+    .disk-space-icon:focus-visible {
+        transform: scale(1.08);
+    }
+    .disk-space-icon[data-info]::after {
+        transform: translateY(-4px);
+        transition: opacity .15s ease, transform .15s ease;
+    }
+    .disk-space-icon[data-info]:hover::after,
+    .disk-space-icon[data-info]:focus-visible::after {
+        transform: translateY(0);
+    }
+}
 h3 {
     width: max-content;
 }

deployer/feature/dist/index/src/Service/TemplateService.php

@@ -43,23 +43,28 @@ public function renderEntries(array $entries): string
     public function renderDiskSpace(IOService $ioService): string
     {
         $status = $ioService->getDiskSpaceStatus();
-        $info = $ioService->getDiskFullSpacePercent() . "% used (" . $ioService->getDiskTotalFree() . " GB free of " . $ioService->getDiskTotalSpace() . " GB)";
+        $percent = $ioService->getDiskFullSpacePercent();
+        $color = $ioService->getDiskSpaceColor();
+        $info = $percent . "% used (" . $ioService->getDiskTotalFree() . " GB free of " . $ioService->getDiskTotalSpace() . " GB)";
         if ($status !== 'green') {
             $info .= ". Low disk space, above " . $ioService->getDiskSpaceThreshold() . "%";
         }
         $info = htmlspecialchars($info, ENT_QUOTES);
 
-        return "<div class='disk-space'>" .
-            "<button type='button' class='disk-space-icon' style='background-color:" . $ioService->getDiskSpaceColor() . "' data-tooltip='$info' aria-label='Disk space: $info'>" .
+        return "<div class='disk-space-bar'><div class='disk-space-bar-fill' style='width:$percent%;background-color:$color'></div></div>" .
+            "<div class='disk-space'>" .
+            "<span class='disk-space-icon' role='img' tabindex='0' style='background-color:$color' data-info='$info' aria-label='Disk space: $info'>" .
             $this->getDiskIcon() .
-            "</button>" .
+            "</span>" .
             "</div>";
     }
 
     private function getDiskIcon(): string
     {
-        return "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'>" .
-            "<path fill='#fff' d='M12,3C7.58,3,4,4.79,4,7v10c0,2.21,3.58,4,8,4s8-1.79,8-4V7C20,4.79,16.42,3,12,3z M12,5c3.87,0,6,1.5,6,2c0,0.5-2.13,2-6,2S6,7.5,6,7C6,6.5,8.13,5,12,5z M18,17c0,0.5-2.13,2-6,2s-6-1.5-6-2v-2.35C7.61,15.5,9.72,16,12,16s4.39-0.5,6-1.35V17z M18,12c0,0.5-2.13,2-6,2s-6-1.5-6-2V9.65C7.61,10.5,9.72,11,12,11s4.39-0.5,6-1.35V12z'/>" .
+        return "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='none' stroke='#fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>" .
+            "<ellipse cx='12' cy='5' rx='9' ry='3'/>" .
+            "<path d='M21 12c0 1.66-4 3-9 3s-9-1.34-9-3'/>" .
+            "<path d='M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5'/>" .
             "</svg>";
     }