Add visual feedback on Sidebar resize handle mouse down.

y-scope · Sep 29, 2024 · 03e3de1 · 03e3de1
1 parent 030036e
commit 03e3de1
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/ResizeHandle.css b/new-log-viewer/src/components/CentralContainer/Sidebar/ResizeHandle.css
@@ -13,6 +13,7 @@
     border-right: 1px solid var(--joy-palette-neutral-outlinedBorder, #cdd7e1);
 }
 
+.resize-handle-holding,
 .resize-handle:hover {
     box-sizing: initial;
 

diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/ResizeHandle.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/ResizeHandle.tsx
@@ -76,7 +76,9 @@ const ResizeHandle = ({
 
     return (
         <div
-            className={"resize-handle"}
+            className={`resize-handle ${isMouseDown ?
+                "resize-handle-holding" :
+                ""}`}
             onMouseDown={handleMouseDown}/>
     );
 };