Enhancements for better wrapping of Status Area icons

- WIP, but is working!
- TODOs:
  - Make sure this is a good way to do things.
  - Cleanup code.
  - Tests.

src/ui/layout/AppLayout.vue

@@ -33,15 +33,20 @@
       :class="{
         'l-shell__head--expanded': headExpanded,
         'l-shell__head--minify-indicators': !headExpanded,
-        'l-shell__head--indicators-single-line': !indicatorsMultiline
+        'l-shell__head--indicators-single-line': !indicatorsMultiline,
+        '--indicators-overflowing': indicatorsOverflowing
       }"
     >
       <CreateButton class="l-shell__create-button" />
       <GrandSearch ref="grand-search" />
-      <StatusIndicators />
+      <StatusIndicators
+        :listen-for-overflow="!indicatorsMultiline"
+        :content-updated="headExpanded || indicatorsMultiline"
+        @indicators-overflowing="indicatorsOverflowUpdate"
+      />
       <button
-        class="l-shell__head__button c-icon-button"
-        :class="indicatorsMultiline ? 'icon-singleline' : 'icon-multiline'"
+        class="l-shell__head__button"
+        :class="[indicatorsMultilineCssClass, indicatorsOverflowingCssClass]"
         :aria-label="`Display as ${indicatorsMultiline ? 'single line' : 'multiple lines'}`"
         :title="`Display as ${indicatorsMultiline ? 'single line' : 'multiple lines'}`"
         @click="toggleIndicatorsMultiline"
@@ -221,6 +226,7 @@ export default {
       triggerReset: false,
       headExpanded,
       indicatorsMultiline,
+      indicatorsOverflowing: false,
       isResizing: false,
       disableClearButton: false
     };
@@ -231,6 +237,12 @@ export default {
     },
     resizingClass() {
       return this.isResizing ? 'l-shell__resizing' : '';
+    },
+    indicatorsMultilineCssClass() {
+      return this.indicatorsMultiline ? 'icon-singleline' : 'icon-multiline';
+    },
+    indicatorsOverflowingCssClass() {
+      return this.indicatorsOverflowing ? 'c-button c-button--major' : 'c-icon-button';
     }
   },
   mounted() {
@@ -335,6 +347,10 @@ export default {
     },
     setClearButtonDisabled(isDisabled) {
       this.disableClearButton = isDisabled;
+    },
+    indicatorsOverflowUpdate(isOverflowing) {
+      console.log('indicatorsOverflowUpdate', isOverflowing);
+      this.indicatorsOverflowing = isOverflowing;
     }
   }
 };

src/ui/layout/layout.scss

@@ -276,6 +276,10 @@
         margin-left: auto; // Mimics justify-content: flex-end when in single line mode.
       }
     }
+
+    &.--is-overflowing {
+      background: rgba(deeppink, 0.1);
+    }
   }
 
   /******************************* MAIN AREA */

src/ui/layout/status-bar/StatusIndicators.vue

@@ -29,12 +29,26 @@
 
 <script>
 import { shallowRef } from 'vue';
+
 export default {
   inject: ['openmct'],
+  props: {
+    contentUpdated: {
+      type: String,
+      required: true
+    },
+    listenForOverflow: {
+      type: Boolean,
+      required: false,
+      default() {
+        return false;
+      }
+    }
+  },
+  emits: ['indicators-overflowing'],
   data() {
     return {
-      indicators: this.openmct.indicators.getIndicatorObjectsByPriority().map(shallowRef),
-      indicatorsOverflowing: false
+      indicators: this.openmct.indicators.getIndicatorObjectsByPriority().map(shallowRef)
     };
   },
   computed: {
@@ -46,13 +60,34 @@ export default {
       return [...this.indicators].sort((a, b) => b.value.priority - a.value.priority);
     }
   },
+  watch: {
+    contentUpdated() {
+      // console.log('content updated');
+      // this.checkOverflow();
+    }
+  },
   mounted() {
-    this.checkOverflow();
-    window.addEventListener('resize', this.checkOverflow);
+    if (this.listenForOverflow) {
+      window.addEventListener('load', this.checkOverflow);
+      window.addEventListener('resize', this.checkOverflow);
+    }
   },
   beforeUnmount() {
     this.openmct.indicators.off('addIndicator', this.addIndicator);
-    window.removeEventListener('resize', this.checkOverflow);
+    if (this.listenForOverflow) {
+      window.removeEventListener('load', this.checkOverflow);
+      window.removeEventListener('resize', this.checkOverflow);
+    }
+  },
+  updated() {
+    // console.log('updated');
+    if (this.listenForOverflow) {
+      window.addEventListener('resize', this.checkOverflow);
+      this.checkOverflow();
+    } else {
+      window.removeEventListener('resize', this.checkOverflow);
+      this.checkOverflow();
+    }
   },
   created() {
     this.openmct.indicators.on('addIndicator', this.addIndicator);
@@ -63,12 +98,7 @@ export default {
     },
     checkOverflow() {
       const element = this.$refs.indicators;
-      const sizes = {
-        spaceNeeded: element.scrollWidth,
-        spaceAvail: element.clientWidth
-      };
-      this.indicatorsOverflowing = sizes.spaceNeeded > sizes.spaceAvail;
-      console.log('checkOverflow', this.indicatorsOverflowing, sizes.spaceNeeded, sizes.spaceAvail);
+      this.$emit('indicators-overflowing', element.scrollWidth > element.clientWidth);
     }
   }
 };