Merge pull request #43 from move-elevator/feat/disk-space-status-icon

feat: show disk space as a status icon with hover details

Author: konradmichalik

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

@@ -72,11 +72,25 @@ progress {
     height: .125rem;
 }
 .disk-space {
-    padding: .25rem 1rem 0;
+    position: fixed;
+    top: .75rem;
+    left: .75rem;
+    z-index: 10;
+}
+.disk-space-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    border-radius: 50%;
+    cursor: pointer;
 }
-.disk-space small {
-    display: block;
-    color: var(--muted-color, #666);
+.disk-space-icon svg {
+    pointer-events: none;
 }
 h3 {
     width: max-content;

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

@@ -43,14 +43,26 @@ public function renderEntries(array $entries): string
     public function renderDiskSpace(IOService $ioService): string
     {
         $status = $ioService->getDiskSpaceStatus();
-        $warning = $status !== 'green' ? " <span class='status $status' data-tooltip='Disk usage is above " . $ioService->getDiskSpaceThreshold() . "%'>Low disk space</span>" : '';
+        $info = $ioService->getDiskFullSpacePercent() . "% 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'>" .
-            "<progress style='color:" . $ioService->getDiskSpaceColor() . "' value='" . $ioService->getDiskFullSpacePercent() . "' max='100'></progress>" .
-            "<small>" . $ioService->getDiskFullSpacePercent() . "% used (" . $ioService->getDiskTotalFree() . " GB free of " . $ioService->getDiskTotalSpace() . " GB)$warning</small>" .
+            "<button type='button' class='disk-space-icon' style='background-color:" . $ioService->getDiskSpaceColor() . "' data-tooltip='$info' aria-label='Disk space: $info'>" .
+            $this->getDiskIcon() .
+            "</button>" .
             "</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'/>" .
+            "</svg>";
+    }
+
     /**
      * @param string $links
      * @return string