UX: add collabsible headings to theme objects editor, adjust styles (#26383)

This adds collapsible headings to child lists, and adjusts the layout to utilize the available space.

app/assets/javascripts/admin/addon/components/schema-theme-setting/editor.gjs

@@ -42,6 +42,7 @@ export default class SchemaThemeSettingEditor extends Component {
   @tracked activeIndex = 0;
   @tracked backButtonText;
   @tracked saveButtonDisabled = false;
+  @tracked visibilityStates = [];
 
   data = cloneJSON(this.args.setting.value);
   history = [];
@@ -242,6 +243,23 @@ export default class SchemaThemeSettingEditor extends Component {
     }
   }
 
+  @action
+  toggleListVisibility(listIdentifier) {
+    if (this.visibilityStates.includes(listIdentifier)) {
+      this.visibilityStates = this.visibilityStates.filter(
+        (id) => id !== listIdentifier
+      );
+    } else {
+      this.visibilityStates = [...this.visibilityStates, listIdentifier];
+    }
+  }
+
+  get isListVisible() {
+    return (listIdentifier) => {
+      return this.visibilityStates.includes(listIdentifier);
+    };
+  }
+
   fieldDescription(fieldName) {
     const descriptions = this.args.setting.metadata?.property_descriptions;
 
@@ -288,6 +306,10 @@ export default class SchemaThemeSettingEditor extends Component {
     });
   }
 
+  uniqueNodeId(nestedTreePropertyName, nodeIndex) {
+    return `${nestedTreePropertyName}-${nodeIndex}`;
+  }
+
   <template>
     {{! template-lint-disable no-nested-interactive }}
     <div class="schema-theme-setting-editor">
@@ -323,7 +345,37 @@ export default class SchemaThemeSettingEditor extends Component {
               </div>
 
               {{#each node.trees as |nestedTree|}}
-                <ul>
+                <div
+                  class="schema-theme-setting-editor__tree-node --heading"
+                  role="button"
+                  {{on
+                    "click"
+                    (fn
+                      this.toggleListVisibility
+                      (this.uniqueNodeId nestedTree.propertyName node.index)
+                    )
+                  }}
+                >
+                  {{nestedTree.propertyName}}
+                  {{dIcon
+                    (if
+                      (this.isListVisible
+                        (this.uniqueNodeId nestedTree.propertyName node.index)
+                      )
+                      "chevron-right"
+                      "chevron-down"
+                    )
+                  }}
+                </div>
+                <ul
+                  class={{if
+                    (this.isListVisible
+                      (this.uniqueNodeId nestedTree.propertyName node.index)
+                    )
+                    "--is-hidden"
+                    "--is-visible"
+                  }}
+                >
                   {{#each nestedTree.nodes as |childNode|}}
                     <li
                       role="link"
@@ -367,6 +419,15 @@ export default class SchemaThemeSettingEditor extends Component {
             />
           </li>
         </ul>
+
+        <div class="schema-theme-setting-editor__footer">
+          <DButton
+            @disabled={{this.saveButtonDisabled}}
+            @action={{this.saveChanges}}
+            @label="save"
+            class="btn-primary"
+          />
+        </div>
       </div>
 
       <div class="schema-theme-setting-editor__fields">
@@ -388,15 +449,6 @@ export default class SchemaThemeSettingEditor extends Component {
           />
         {{/if}}
       </div>
-
-      <div class="schema-theme-setting-editor__footer">
-        <DButton
-          @disabled={{this.saveButtonDisabled}}
-          @action={{this.saveChanges}}
-          @label="save"
-          class="btn-primary"
-        />
-      </div>
     </div>
   </template>
 }

app/assets/stylesheets/common/admin/schema_field.scss

@@ -1,6 +1,6 @@
 .schema-field {
   margin-bottom: 1em;
-  width: 50%;
+  width: 100%;
   min-width: 200px;
   display: grid;
   grid-template-columns: 25% 1fr;

app/assets/stylesheets/common/admin/schema_theme_setting_editor.scss

@@ -2,26 +2,43 @@
   --schema-space: 0.5em;
   display: grid;
   grid-template-columns: minmax(10em, 0.3fr) 1fr;
-  gap: 2em 4vw;
+  grid-template-rows: auto 1fr;
+  gap: 2em 5vw;
 
   &__navigation {
     overflow: hidden;
-    border: 1px solid var(--primary-low);
+    align-self: start;
 
     ul {
       list-style: none;
     }
 
     .schema-theme-setting-editor__tree {
-      margin: 0;
+      border: 1px solid var(--primary-low);
+      overflow: auto;
+      margin: 0 0 2em 0;
+
       ul {
-        padding: 0;
-        margin: var(--schema-space) var(--schema-space) 1em 0;
+        padding: 0 calc(var(--schema-space) * 2) 0 var(--schema-space);
+        margin: 0 0 1em;
         li:hover {
           background: var(--primary-very-low);
         }
-        &:last-child {
-          margin-bottom: calc(var(--schema-space) * 2);
+
+        &.--is-hidden {
+          display: none;
+        }
+      }
+
+      .--heading {
+        display: flex;
+        align-items: center;
+        padding: var(--schema-space) calc(var(--schema-space) * 3)
+          var(--schema-space) calc(var(--schema-space) * 2);
+        gap: 0.5em;
+        .d-icon {
+          font-size: var(--font-down-3);
+          margin-left: auto;
         }
       }
 
@@ -94,6 +111,13 @@
           }
         }
 
+        &.--heading {
+          font-weight: bold;
+          &:hover {
+            background: var(--primary-very-low);
+          }
+        }
+
         &.--child {
           margin-left: var(--schema-space);
           border-left: 1px solid var(--primary-200);
@@ -110,6 +134,7 @@
       .d-icon {
         color: currentColor;
         font-size: var(--font-down-1);
+        margin-left: -0.35em; // optical alignment
       }
 
       &:hover {
@@ -121,8 +146,4 @@
       }
     }
   }
-
-  &__fields {
-    margin-top: -0.15em; // visual alignment with top of nav
-  }
 }

app/assets/stylesheets/common/select-kit/select-kit.scss

@@ -142,7 +142,7 @@
 
     .btn-clear {
       margin-left: 0.25em;
-      padding: 0.25em;
+      padding: 0 0.2em;
       border: 0;
       background: none;
       min-height: auto;