From 30c38426000370879ab9484191aa3cfc38e79c73 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Wed, 18 Sep 2024 10:07:03 -0700
Subject: [PATCH] Enhancements for better wrapping of Status Area icons - Added
 `headCanWrap` stored property, and toggle button. - CSS mods, cleanup.

---
 src/ui/layout/AppLayout.vue | 29 +++++++++++++++++++++++------
 src/ui/layout/layout.scss   | 20 ++++++--------------
 2 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/src/ui/layout/AppLayout.vue b/src/ui/layout/AppLayout.vue
index a80d4f0fd6..e70286dede 100644
--- a/src/ui/layout/AppLayout.vue
+++ b/src/ui/layout/AppLayout.vue
@@ -32,19 +32,23 @@
       class="l-shell__head"
       :class="{
         'l-shell__head--expanded': headExpanded,
-        'l-shell__head--minify-indicators': !headExpanded
+        'l-shell__head--minify-indicators': !headExpanded,
+        'l-shell__head--can-wrap': headCanWrap
       }"
     >
       <CreateButton class="l-shell__create-button" />
       <GrandSearch ref="grand-search" />
       <StatusIndicators />
+      <button
+        class="l-shell__head__button c-icon-button"
+        :class="headCanWrap ? 'icon-list-view' : 'icon-3-dots'"
+        :aria-label="`Click to ${headCanWrap ? 'prevent wrapping' : 'wrap'} items`"
+        :title="`Click to ${headCanWrap ? 'prevent wrapping' : 'wrap'} items`"
+        @click="toggleHeadWrapping"
+      ></button>
       <button
         class="l-shell__head__collapse-button c-icon-button"
-        :class="
-          headExpanded
-            ? 'l-shell__head__collapse-button--collapse'
-            : 'l-shell__head__collapse-button--expand'
-        "
+        :class="headExpanded ? 'icon-items-collapse' : 'icon-items-expand'"
         :aria-label="`Click to ${headExpanded ? 'collapse' : 'expand'} items`"
         :title="`Click to ${headExpanded ? 'collapse' : 'expand'} items`"
         @click="toggleShellHead"
@@ -201,8 +205,10 @@ export default {
   data: function () {
     let storedHeadProps = window.localStorage.getItem('openmct-shell-head');
     let headExpanded = true;
+    let headCanWrap = false;
     if (storedHeadProps) {
       headExpanded = JSON.parse(storedHeadProps).expanded;
+      headCanWrap = JSON.parse(storedHeadProps).wrapping;
     }
 
     return {
@@ -214,6 +220,7 @@ export default {
       triggerSync: false,
       triggerReset: false,
       headExpanded,
+      headCanWrap,
       isResizing: false,
       disableClearButton: false
     };
@@ -271,6 +278,16 @@ export default {
         })
       );
     },
+    toggleHeadWrapping() {
+      this.headCanWrap = !this.headCanWrap;
+
+      window.localStorage.setItem(
+        'openmct-shell-head',
+        JSON.stringify({
+          wrapping: this.headCanWrap
+        })
+      );
+    },
     fullScreenToggle() {
       if (this.fullScreen) {
         this.fullScreen = false;
diff --git a/src/ui/layout/layout.scss b/src/ui/layout/layout.scss
index 7b4b7d5cf6..76e550f71e 100644
--- a/src/ui/layout/layout.scss
+++ b/src/ui/layout/layout.scss
@@ -213,27 +213,15 @@
     align-items: center;
     background: $colorHeadBg;
     display: grid;
-    grid-template-columns: min-content 1fr 3fr repeat(3, min-content);
+    grid-template-columns: min-content 1fr 3fr repeat(4, min-content);
     grid-column-gap: $interiorMargin;
     min-height: 34px;
     padding: $interiorMargin $interiorMargin + 2;
 
-    .l-shell__head__collapse-button {
+    .l-shell__head__button {
       color: $colorBtnMajorBg;
       flex: 0 0 auto;
       font-size: 0.9em;
-
-      &--collapse {
-        &:before {
-          content: $glyph-icon-items-collapse;
-        }
-      }
-
-      &--expand {
-        &:before {
-          content: $glyph-icon-items-expand;
-        }
-      }
     }
 
     &-section {
@@ -276,7 +264,11 @@
     justify-content: flex-end;
 
     .l-shell__head--expanded & {
+    }
+
+    .l-shell__head--can-wrap & {
       // Force elements to wrap down when width constrained
+      background: rgba(deeppink, 0.4);
       height: 24px;
       overflow: hidden;
     }