Changes for adjustable Time Strip view

- WIP!
- Moved many CSS defs from flexible-layout.scss into new mixin `resizeHandleStyle`.
- Fixed bad `drap-orientation` arg in TimelineViewLayout.vue.
- Styling for resize handles in Time Strip view.

src/plugins/flexibleLayout/components/flexible-layout.scss

@@ -247,46 +247,17 @@
   }
 
   &__resize-handle {
-    $size: 2px;
+    $size: 1px;
     $margin: 3px;
     $marginHov: 0;
     $grippyThickness: $size + 6;
     $grippyLen: $grippyThickness * 2;
 
+    @include resizeHandleStyle($size, $margin);
+
     display: flex;
     flex-direction: column;
     flex: 0 0 ($margin * 2) + $size;
-
-    &:before {
-      // The visible resize line
-      background-color: $editUIColor;
-      content: '';
-      display: block;
-      flex: 1 1 auto;
-      min-height: $size;
-      min-width: $size;
-    }
-
-    &.vertical {
-      padding: $margin $size;
-      &:hover {
-        cursor: row-resize;
-      }
-    }
-
-    &.horizontal {
-      padding: $size $margin;
-      &:hover {
-        cursor: col-resize;
-      }
-    }
-
-    &:hover {
-      &:before {
-        // The visible resize line
-        background-color: $editUIColorHov;
-      }
-    }
   }
 
   // Hide the resize-handles in first and last c-fl-frame elements

src/plugins/timeline/TimelineViewLayout.vue

@@ -50,7 +50,7 @@
         <ResizeHandle
           v-if="index !== items.length - 1"
           :index="index"
-          drag-orientation="'vertical'"
+          drag-orientation="vertical"
           :is-editing="isEditing"
           @init-move="startContainerResizing"
           @move="containerResizing"

src/styles/_constants-espresso.scss

@@ -226,10 +226,7 @@ $borderMissing: 1px dashed $colorAlert !important;
 $editUIColor: $uiColor; // Base color
 $editUIColorBg: $editUIColor;
 $editUIColorFg: #fff;
-$editUIColorHov: pullForward(
-  saturate($uiColor, 10%),
-  10%
-); // Hover color when $editUIColor is applied as a base color
+$editUIColorHov: #ffffff; // Hover color when $editUIColor is applied as a base color
 $editUIBaseColor: #344b8d; // Base color, toolbar bg
 $editUIBaseColorHov: pullForward($editUIBaseColor, 20%);
 $editUIBaseColorFg: #ffffff; // Toolbar button icon colors, etc.

src/styles/_controls.scss

@@ -87,6 +87,52 @@
   }
 }
 
+@mixin resizeHandleStyle($size: 1px, $margin: 3px) {
+  // Used by Flexible Layouts and Time Strip views
+  &:before {
+    // The visible resize line
+    background-color: $editUIColor;
+    content: '';
+    display: block;
+    @include abs();
+    min-height: $size;
+    min-width: $size;
+  }
+
+  &:hover {
+    &:before {
+      // The visible resize line
+      background-color: $editUIColorHov;
+    }
+  }
+
+  &.vertical {
+    // Resizes in Y dimension
+    padding: $margin $size;
+    &:before {
+      top: 50%;
+      bottom: auto;
+      transform: translateY(-50%);
+    }
+    &:hover {
+      cursor: row-resize;
+    }
+  }
+
+  &.horizontal {
+    // Resizes in X dimension
+    padding: $size $margin;
+    &:before {
+      left: 50%;
+      right: auto;
+      transform: translateX(-50%);
+    }
+    &:hover {
+      cursor: col-resize;
+    }
+  }
+}
+
 /******************************************************** BUTTONS */
 // Optionally can include icon in :before via markup
 button {

src/ui/components/swim-lane/SwimLane.vue

@@ -56,7 +56,7 @@
           @click="pressOnButton"
         />
       </div>
-      <div class="c-swimlane__handle" @mousedown="mousedown"></div>
+      <div class="c-swimlane__handle horizontal" @mousedown="mousedown"></div>
     </div>
 
     <div

src/ui/components/swim-lane/swimlane.scss

@@ -20,10 +20,15 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 
+@use 'sass:math';
+
 .c-swimlane {
+  $handleSize: 1px;
+  $handleMargin: 3px;
+  $handleHitSize: $handleMargin * 2 + $handleSize;
+
   display: grid;
   flex: 1 1 auto;
-  // grid-template-columns: 100px 100px 1fr;
   grid-template-rows: 1fr;
   grid-column-gap: 1px;
   grid-row-gap: 1px; // Used for grid within a swimlane for Plan views
@@ -44,29 +49,29 @@
   &__lane-label {
     background: $colorTimeStripLabelBg;
     color: $colorBodyFg;
+    overflow: visible;
     padding: $interiorMarginSm $interiorMargin;
   }
 
   &__handle {
-    // In SwimLane.vue
+    $size: $handleSize;
+    $margin: $handleMargin;
+
+    @include resizeHandleStyle($size, $margin);
+
     @include abs();
     display: none; // Set to display: block in .is-editing section below
-    left: auto;
-    // right: -1 * $tabularTdPadLR;
-    width: $splitterHandleD;
-    cursor: col-resize;
+    //z-index: 1000;
 
-    &:before {
-      // Extended hit area
-      top: 0;
-      right: $splitterHandleHitMargin * -1;
-      bottom: 0;
-      left: $splitterHandleHitMargin * -1;
+    &.vertical {
+      // Vertical resizing uses c-fl-frame__resize-handle
     }
 
-    &:hover {
-      background-color: $colorSplitterHover;
-      @include transition(background-color);
+    &.horizontal {
+      // Resizes in X dimension
+      left: auto;
+      right: -1 * $handleHitSize;
+      width: $handleHitSize;
     }
   }
 
@@ -96,10 +101,12 @@
   .is-object-type-gantt-chart {
     display: contents;
   }
-}
 
-.is-editing {
-  .c-swimlane__handle {
-    display: block;
+  .is-editing & {
+    // TODO: BETTER SELECTOR TO LIMIT STYLING TO TIME STRIP IN MAIN VIEW, NOT NESTED VIEWS
+    grid-column-gap: $handleHitSize;
+    .c-swimlane__handle {
+      display: block;
+    }
   }
-}
+}