From 51b435b0f4a49b2991ae5e969926ab28af63dfe3 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Thu, 19 Sep 2024 15:02:02 -0700
Subject: [PATCH] Enhancements for better wrapping of Status Area icons - Fixed
 CSS classing on collapse/expand button. - New method added for storing head
 props in local storage. - TODOs:   - Make sure using Update hook is
 performant.   - Tests.

---
 src/ui/layout/AppLayout.vue | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/ui/layout/AppLayout.vue b/src/ui/layout/AppLayout.vue
index 3b37ca269d..4242efa43f 100644
--- a/src/ui/layout/AppLayout.vue
+++ b/src/ui/layout/AppLayout.vue
@@ -52,7 +52,7 @@
         @click="toggleIndicatorsMultiline"
       ></button>
       <button
-        class="l-shell__head__collapse-button c-icon-button"
+        class="l-shell__head__button"
         :class="headExpanded ? 'icon-items-collapse' : 'icon-items-expand'"
         :aria-label="`Show ${headExpanded ? 'icon only' : 'icon and name'}`"
         :title="`Show ${headExpanded ? 'icon only' : 'icon and name'}`"
@@ -210,7 +210,7 @@ export default {
   data: function () {
     let storedHeadProps = window.localStorage.getItem('openmct-shell-head');
     let headExpanded = true;
-    let indicatorsMultiline = false;
+    let indicatorsMultiline = true;
     if (storedHeadProps) {
       headExpanded = JSON.parse(storedHeadProps).expanded;
       indicatorsMultiline = JSON.parse(storedHeadProps).multiline;
@@ -282,20 +282,17 @@ export default {
     },
     toggleShellHead() {
       this.headExpanded = !this.headExpanded;
-
-      window.localStorage.setItem(
-        'openmct-shell-head',
-        JSON.stringify({
-          expanded: this.headExpanded
-        })
-      );
+      this.setLocalStorage();
     },
     toggleIndicatorsMultiline() {
       this.indicatorsMultiline = !this.indicatorsMultiline;
-
+      this.setLocalStorage();
+    },
+    setLocalStorage() {
       window.localStorage.setItem(
         'openmct-shell-head',
         JSON.stringify({
+          expanded: this.headExpanded,
           multiline: this.indicatorsMultiline
         })
       );