Enhancements for better wrapping of Status Area icons

- Add code and CSS for toggling single/multiline display of indicators.
- Add code to detect overflow state of indicators.

src/ui/layout/AppLayout.vue

@@ -33,7 +33,7 @@
       :class="{
         'l-shell__head--expanded': headExpanded,
         'l-shell__head--minify-indicators': !headExpanded,
-        'l-shell__head--can-wrap': headCanWrap
+        'l-shell__head--indicators-single-line': !indicatorsMultiline
       }"
     >
       <CreateButton class="l-shell__create-button" />
@@ -41,10 +41,10 @@
       <StatusIndicators />
       <button
         class="l-shell__head__button c-icon-button"
-        :class="headCanWrap ? 'icon-multiline' : 'icon-singleline'"
+        :class="indicatorsMultiline ? 'icon-singleline' : 'icon-multiline'"
-        :aria-label="`Display as ${headCanWrap ? 'multiple lines' : 'single line'}`"
+        :aria-label="`Display as ${indicatorsMultiline ? 'single line' : 'multiple lines'}`"
-        :title="`Display as ${headCanWrap ? 'multiple lines' : 'single line'}`"
+        :title="`Display as ${indicatorsMultiline ? 'single line' : 'multiple lines'}`"
-        @click="toggleHeadWrapping"
+        @click="toggleIndicatorsMultiline"
       ></button>
       <button
         class="l-shell__head__collapse-button c-icon-button"
@@ -205,10 +205,10 @@ export default {
   data: function () {
     let storedHeadProps = window.localStorage.getItem('openmct-shell-head');
     let headExpanded = true;
-    let headCanWrap = false;
+    let indicatorsMultiline = false;
     if (storedHeadProps) {
       headExpanded = JSON.parse(storedHeadProps).expanded;
-      headCanWrap = JSON.parse(storedHeadProps).wrapping;
+      indicatorsMultiline = JSON.parse(storedHeadProps).multiline;
     }
 
     return {
@@ -220,7 +220,7 @@ export default {
       triggerSync: false,
       triggerReset: false,
       headExpanded,
-      headCanWrap,
+      indicatorsMultiline,
       isResizing: false,
       disableClearButton: false
     };
@@ -278,13 +278,13 @@ export default {
         })
       );
     },
-    toggleHeadWrapping() {
+    toggleIndicatorsMultiline() {
-      this.headCanWrap = !this.headCanWrap;
+      this.indicatorsMultiline = !this.indicatorsMultiline;
 
       window.localStorage.setItem(
         'openmct-shell-head',
         JSON.stringify({
-          wrapping: this.headCanWrap
+          multiline: this.indicatorsMultiline
         })
       );
     },

src/ui/layout/layout.scss

@@ -259,18 +259,22 @@
   }
 
   &__indicators {
+    // Style as multiline by default
+    display: flex;
     flex-wrap: wrap;
     font-size: 11px;
+    min-height: 24px;
     justify-content: flex-end;
 
-    .l-shell__head--expanded & {
+    .l-shell__head--indicators-single-line & {
-    }
+      flex-wrap: nowrap;
-
+      justify-content: flex-start; // Overflow detection doesn't work with flex-end.
-    .l-shell__head--can-wrap & {
+      max-height: 24px;
-      // Force elements to wrap down when width constrained
-      background: rgba(deeppink, 0.4);
-      height: 24px;
       overflow: hidden;
+
+      > *:first-child {
+        margin-left: auto; // Mimics justify-content: flex-end when in single line mode.
+      }
     }
   }
 

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

@@ -17,7 +17,7 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <div class="l-shell__head-section l-shell__indicators">
+  <div ref="indicators" class="l-shell__head-section l-shell__indicators">
     <component
       :is="indicator.value.vueComponent"
       v-for="indicator in sortedIndicators"
@@ -33,7 +33,8 @@ export default {
   inject: ['openmct'],
   data() {
     return {
-      indicators: this.openmct.indicators.getIndicatorObjectsByPriority().map(shallowRef)
+      indicators: this.openmct.indicators.getIndicatorObjectsByPriority().map(shallowRef),
+      indicatorsOverflowing: false
     };
   },
   computed: {
@@ -45,8 +46,13 @@ export default {
       return [...this.indicators].sort((a, b) => b.value.priority - a.value.priority);
     }
   },
+  mounted() {
+    this.checkOverflow();
+    window.addEventListener('resize', this.checkOverflow);
+  },
   beforeUnmount() {
     this.openmct.indicators.off('addIndicator', this.addIndicator);
+    window.removeEventListener('resize', this.checkOverflow);
   },
   created() {
     this.openmct.indicators.on('addIndicator', this.addIndicator);
@@ -54,6 +60,15 @@ export default {
   methods: {
     addIndicator(indicator) {
       this.indicators.push(shallowRef(indicator));
+    },
+    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);
     }
   }
 };