Merge remote-tracking branch 'origin' into fix/nested-fl-7635

- Updated e2e test.
- New computed properties for layout direction.
- CSS code cleanup.

e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js

@@ -309,9 +309,9 @@ test.describe('Flexible Layout Toolbar Actions @localStorage', () => {
     await page.getByRole('columnheader', { name: 'Container Handle 1' }).click();
     const flexRows = page.getByLabel('Flexible Layout Row');
     expect(await flexRows.count()).toEqual(0);
-    await page.getByTitle('Columns layout').click();
+    await page.getByTitle('Switch to rows layout').click();
     expect(await flexRows.count()).toEqual(1);
-    await page.getByTitle('Rows layout').click();
+    await page.getByTitle('Switch to columns layout').click();
     expect(await flexRows.count()).toEqual(0);
   });
 });

src/plugins/flexibleLayout/components/ContainerComponent.vue

@@ -45,7 +45,7 @@
       @object-drop-to="moveOrCreateNewFrame"
     />
 
-    <div role="row" class="c-fl-container__frames-holder">
+    <div role="row" class="c-fl-container__frames-holder" :class="flexLayoutCssClass">
       <template v-for="(frame, i) in frames" :key="frame.id">
         <frame-component
           class="c-fl-container__frame"
@@ -118,6 +118,9 @@ export default {
   },
   emits: ['new-frame', 'move-frame', 'persist'],
   computed: {
+    flexLayoutCssClass() {
+      return this.rowsLayout ? '--layout-rows' : '--layout-cols';
+    },
     frames() {
       return this.container.frames;
     },

src/plugins/flexibleLayout/components/FlexibleLayout.vue

@@ -30,10 +30,8 @@
 
     <div
       class="c-fl__container-holder u-style-receiver js-style-receiver"
-      :class="{
-        'c-fl--rows': rowsLayout === true
-      }"
-      :aria-label="`Flexible Layout ${rowsLayout ? 'Row' : 'Column'}`"
+      :class="flexLayoutCssClass"
+      :aria-label="`Flexible Layout ${rowsLayout ? 'Rows' : 'Columns'}`"
     >
       <template v-for="(container, index) in containers" :key="`component-${container.id}`">
         <drop-hint
@@ -45,7 +43,6 @@
         />
 
         <container-component
-          class="c-fl__container"
           :index="index"
           :container="container"
           :rows-layout="rowsLayout"
@@ -148,15 +145,11 @@ export default {
     };
   },
   computed: {
-    layoutDirectionStr() {
-      if (this.rowsLayout) {
-        return 'Rows';
-      } else {
-        return 'Columns';
-      }
-    },
     allContainersAreEmpty() {
       return this.containers.every((container) => container.frames.length === 0);
+    },
+    flexLayoutCssClass() {
+      return this.rowsLayout ? 'c-fl--rows' : 'c-fl--cols';
     }
   },
   created() {

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

@@ -7,7 +7,6 @@
   $majorOffset: 35%;
   content: '';
   display: block;
-  position: absolute;
   @include grippy($c: $editFrameSelectedMovebarColorFg, $dir: $dir);
   @if $dir == 'x' {
     top: $minorOffset;
@@ -35,18 +34,15 @@
     flex: 1 1 100%; // Must be 100% to work
     overflow: auto;
 
-    // Columns by default
-    flex-direction: row;
-    > * + * {
-      margin-left: 1px;
+    // Controls layout of c-fl__container(s)
+    &[class*='--cols'] {
+      flex-direction: row;
+      column-gap: 1px;
     }
 
     &[class*='--rows'] {
       flex-direction: column;
-      > * + * {
-        margin-left: 0;
-        margin-top: 1px;
-      }
+      row-gap: 1px;
     }
   }
 
@@ -119,10 +115,18 @@
   &__frames-holder {
     display: flex;
     flex: 1 1 100%; // Must be 100% to work
-    flex-direction: column; // Default
+    flex-direction: row; // Default
     align-content: stretch;
     align-items: stretch;
     overflow: hidden; // This sucks, but doing in the short-term
+
+    &.--layout-cols {
+      flex-direction: column !important;
+    }
+
+    &.--layout-rows {
+      flex-direction: row !important;
+    }
   }
 
   .is-editing & {

src/plugins/flexibleLayout/toolbarProvider.js

@@ -61,13 +61,13 @@ function ToolbarProvider(openmct) {
         options: [
           {
             value: true,
-            icon: 'icon-columns',
-            title: 'Columns layout'
+            icon: 'icon-rows',
+            title: 'Switch to rows layout'
           },
           {
             value: false,
-            icon: 'icon-rows',
-            title: 'Rows layout'
+            icon: 'icon-columns',
+            title: 'Switch to columns layout'
           }
         ]
       };