Adjustable swimlanes merge attempt 2 (#8138)

* Move ResizeHandle to reusable ui location
* Changes for user-settable swimlane heights.
* resize widths for all swimlane labels
* make drag resizer more scalable
* add resize handles to time strip views
* Moved many CSS defs from flexible-layout.scss into new mixin `resizeHandleStyle`.

---------

Co-authored-by: David Tsay <[email protected]>
Co-authored-by: Charles Hacskaylo <[email protected]>

Author: 3 people

e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-panned-chrome-linux.png

@@ -186,7 +186,7 @@ test.describe('Inspector tests', () => {
       const objectInfo = await createDomainObjectWithDefaults(
         page,
         createOptions,
-        viewConfig.required ? viewConfig.required : {}
+        viewConfig.required ?? {}
       );
       await page.goto(objectInfo.url);
 

e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-prepan-chrome-linux.png

@@ -69,6 +69,10 @@ test.describe('Visual - Time Strip @a11y', () => {
     //This will stabilize the state of the test and allow the SWG to render as empty
     await waitForAnimations(page.getByLabel('Plot Canvas'));
 
+    // FIXME: https://github.com/nasa/openmct/issues/8005
+    // eslint-disable-next-line playwright/no-wait-for-timeout
+    await page.waitForTimeout(500);
+
     await percySnapshot(page, `Time Strip View (theme: ${theme}) - With SWG and Plan`);
   });
 });

e2e/tests/functional/ui/inspector.e2e.spec.js

@@ -20,7 +20,6 @@
     &__container {
         // Holds event lines
         background-color: $colorPlotBg;
-        //box-shadow: inset $colorPlotAreaBorder 0 0 0 1px; // Using box-shadow instead of border to not affect box size
         position: absolute;
         top: $m; right: 0; bottom: $m; left: 0;
     }
@@ -77,10 +76,13 @@
 }
 
 // Extended event lines
+.c-timeline__overlay-lines__extended-line-container {
+    display: contents;
+}
+
 .c-timeline__event-line--extended {
     @include abs();
     width: $eventLineW;
-    opacity: 0.4;
 
     &.--hilite {
         opacity: 0.8;

e2e/tests/visual-a11y/planning-timestrip.visual.spec.js

@@ -80,9 +80,10 @@
 </template>
 
 <script>
+import ResizeHandle from '@/ui/layout/ResizeHandle/ResizeHandle.vue';
+
 import DropHint from './DropHint.vue';
 import FrameComponent from './FrameComponent.vue';
-import ResizeHandle from './ResizeHandle.vue';
 
 const MIN_FRAME_SIZE = 5;
 

src/plugins/events/components/events-view.scss

@@ -77,11 +77,12 @@
 </template>
 
 <script>
-import Container from '../utils/container.js';
-import Frame from '../utils/frame.js';
+import Container from '@/ui/layout/Container.js';
+import Frame from '@/ui/layout/Frame.js';
+import ResizeHandle from '@/ui/layout/ResizeHandle/ResizeHandle.vue';
+
 import ContainerComponent from './ContainerComponent.vue';
 import DropHint from './DropHint.vue';
-import ResizeHandle from './ResizeHandle.vue';
 
 const MIN_CONTAINER_SIZE = 5;
 

src/plugins/flexibleLayout/components/ContainerComponent.vue

@@ -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/flexibleLayout/components/FlexibleLayout.vue

@@ -20,10 +20,11 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+import Container from '@/ui/layout/Container.js';
+
 import flexibleLayoutStylesInterceptor from './flexibleLayoutStylesInterceptor.js';
 import FlexibleLayoutViewProvider from './flexibleLayoutViewProvider.js';
 import ToolBarProvider from './toolbarProvider.js';
-import Container from './utils/container.js';
 
 export default function plugin() {
   return function install(openmct) {

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

@@ -46,6 +46,7 @@
         :object-path="[elementObject, domainObject]"
         @context-click-active="setContextClickState"
       />
+      <slot name="content"></slot>
     </div>
   </li>
   <li v-else :aria-label="`${elementObject.name} Element Item`">