fully remove drag handle overlap with panel

galaxyproject · Jan 18, 2024 · 4409b24 · 4409b24
1 parent 9e335ca
commit 4409b24
Showing 1 changed file with 38 additions and 12 deletions.
diff --git a/client/src/components/Panels/FlexPanel.vue b/client/src/components/Panels/FlexPanel.vue
@@ -50,7 +50,7 @@ const hoverDraggableOrToggle = computed(
 );
 
 const toggleLinger = 500;
-const toggleShowDelay = 800;
+const toggleShowDelay = 600;
 let showToggleTimeout: ReturnType<typeof setTimeout> | undefined;
 
 watch(
@@ -169,59 +169,85 @@ const sideClasses = computed(() => ({
 <style scoped lang="scss">
 @import "theme/blue.scss";
 
+$border-width: 6px;
+
 .flex-panel {
     z-index: 100;
     flex-shrink: 0;
     display: flex;
     width: var(--width);
     position: relative;
-    border-color: $border-color;
-    border-width: 1px;
+    border-color: transparent;
+    border-width: $border-width;
     box-shadow: 1px 0 transparent;
     transition: border-color 0.1s, box-shadow 0.1s;
     align-items: stretch;
     flex-direction: column;
 
+    &::after {
+        content: "";
+        position: absolute;
+        height: 100%;
+        width: 1px;
+        background-color: $border-color;
+    }
+
     &.show-hover {
         border-color: $brand-info;
 
-        &.left {
-            box-shadow: 1px 0 $brand-info;
-        }
-
-        &.right {
-            box-shadow: -1px 0 $brand-info;
+        &::after {
+            background-color: $brand-info;
         }
     }
 
     &.left {
         border-right-style: solid;
 
+        &::after {
+            right: -1px;
+        }
+
         .drag-handle {
-            right: -4px;
+            right: -$border-width;
+
+            &:hover {
+                right: calc(-1 * $border-width - var(--hover-expand) / 2);
+            }
         }
     }
 
     &.right {
         border-left-style: solid;
 
+        &::after {
+            left: -1px;
+        }
+
         .drag-handle {
-            left: -4px;
+            left: -$border-width;
+
+            &:hover {
+                left: calc(-1 * $border-width - var(--hover-expand) / 2);
+            }
         }
     }
 }
 
 .drag-handle {
     background: none;
     border: none;
+    border-radius: 0;
     position: absolute;
-    width: 10px;
+    width: $border-width;
     padding: 0;
     height: 100%;
     z-index: 10000;
 
+    --hover-expand: 4px;
+
     &:hover {
         cursor: ew-resize;
+        width: calc($border-width + var(--hover-expand));
     }
 }