Clean up config (#1484)

* better formatting for union list

* cleaner config

Co-authored-by: Matt Hill <matthill@Matt-M1.local>

frontend/projects/ui/src/app/components/form-object/form-label.component.html

@@ -1,9 +1,21 @@
-<ion-button *ngIf="data.spec.description" class="slot-start" fill="clear" size="small" (click)="presentAlertDescription()">
-  <ion-icon name="help-circle-outline"></ion-icon>
+<ion-button
+  *ngIf="data.spec.description"
+  class="slot-start"
+  style="--padding-start: 0; --padding-end: 7px"
+  fill="clear"
+  (click)="presentAlertDescription()"
+>
+  <ion-icon name="help-circle-outline" slot="icon-only" size="small"></ion-icon>
 </ion-button>
 
 <!-- this is a button for css purposes only -->
-<ion-button *ngIf="data.invalid" class="slot-start" fill="clear" size="small" color="danger">
+<ion-button
+  *ngIf="data.invalid"
+  class="slot-start"
+  fill="clear"
+  size="small"
+  color="danger"
+>
   <ion-icon name="warning-outline"></ion-icon>
 </ion-button>
 
@@ -12,6 +24,14 @@
 <ion-text color="success" *ngIf="data.new">&nbsp;(New)</ion-text>
 <ion-text color="warning" *ngIf="data.edited">&nbsp;(Edited)</ion-text>
 
-<span *ngIf="(['string', 'number'] | includes : data.spec.type) && !$any(data.spec).nullable">&nbsp;*</span>
+<span
+  *ngIf="
+    (['string', 'number'] | includes: data.spec.type) &&
+    !$any(data.spec).nullable
+  "
+  >&nbsp;*</span
+>
 
-<span *ngIf="data.spec.type === 'list' && Range.from(data.spec.range).min">&nbsp;*</span>
+<span *ngIf="data.spec.type === 'list' && Range.from(data.spec.range).min"
+  >&nbsp;*</span
+>

frontend/projects/ui/src/app/components/form-object/form-object.component.html

@@ -2,7 +2,6 @@
   <div *ngFor="let entry of formGroup.controls | keyvalue: asIsOrder">
     <!-- union enum -->
     <ng-container *ngIf="unionSpec && entry.key === unionSpec.tag.id">
-      <p class="input-label">{{ unionSpec.tag.name }}</p>
       <ion-item>
         <ion-button
           *ngIf="unionSpec.tag.description"
@@ -18,7 +17,11 @@
         >
           <ion-icon name="help-circle-outline"></ion-icon>
         </ion-button>
-        <ion-label>{{ unionSpec.tag.name }}</ion-label>
+        <ion-label>
+          <ion-text color="dark">
+            <b>{{ unionSpec.tag.name }}</b>
+          </ion-text>
+        </ion-label>
         <!-- class enter-click disables the enter click on the modal behind the select -->
         <ion-select
           [interfaceOptions]="{
@@ -40,11 +43,9 @@
         </ion-select>
       </ion-item>
     </ng-container>
-    <ng-container *ngIf="objectSpec[entry.key] as spec">
-      <!-- primitive -->
-      <ng-container
-        *ngIf="['string', 'number', 'boolean', 'enum'] | includes: spec.type"
-      >
+    <div *ngIf="objectSpec[entry.key] as spec" [class.indent]="unionSpec">
+      <!-- string or number -->
+      <ng-container *ngIf="spec.type === 'string' || spec.type === 'number'">
         <!-- label -->
         <h4 class="input-label">
           <form-label
@@ -55,11 +56,7 @@
             }"
           ></form-label>
         </h4>
-        <!-- string or number -->
-        <ion-item
-          color="dark"
-          *ngIf="spec.type === 'string' || spec.type === 'number'"
-        >
+        <ion-item color="dark" class="ion-margin-bottom">
           <ion-textarea
             *ngIf="spec.type === 'string' && spec.textarea; else notTextArea"
             [placeholder]="spec.placeholder || 'Enter ' + spec.name"
@@ -101,38 +98,55 @@
             >{{ spec.units }}</ion-note
           >
         </ion-item>
-        <!-- boolean -->
-        <ion-item *ngIf="spec.type === 'boolean'">
-          <ion-label>{{ spec.name }}</ion-label>
-          <ion-toggle
-            slot="end"
-            [formControlName]="entry.key"
-            (ionChange)="handleBooleanChange(entry.key, spec)"
-          ></ion-toggle>
-        </ion-item>
-        <!-- enum -->
-        <ion-item *ngIf="spec.type === 'enum'">
-          <ion-label>{{ spec.name }}</ion-label>
-          <!-- class enter-click disables the enter click on the modal behind the select -->
-          <ion-select
-            [interfaceOptions]="{
-              message: getWarningText(spec.warning),
-              cssClass: 'enter-click'
-            }"
-            slot="end"
-            placeholder="Select"
-            [formControlName]="entry.key"
-            [selectedText]="spec['value-names'][formGroup.get(entry.key).value]"
-          >
-            <ion-select-option
-              *ngFor="let option of spec.values"
-              [value]="option"
-            >
-              {{ spec['value-names'][option] }}
-            </ion-select-option>
-          </ion-select>
-        </ion-item>
       </ng-container>
+      <!-- boolean or enum -->
+      <ion-item
+        *ngIf="['boolean', 'enum'] | includes: spec.type"
+        style="--padding-start: 0"
+      >
+        <ion-button
+          *ngIf="spec.description"
+          fill="clear"
+          (click)="presentAlertDescription(spec)"
+          style="--padding-start: 0"
+        >
+          <ion-icon
+            name="help-circle-outline"
+            slot="icon-only"
+            size="small"
+          ></ion-icon>
+        </ion-button>
+        <ion-label
+          ><b>{{ spec.name }}</b></ion-label
+        >
+        <!-- boolean -->
+        <ion-toggle
+          *ngIf="spec.type === 'boolean'"
+          slot="end"
+          [formControlName]="entry.key"
+          (ionChange)="handleBooleanChange(entry.key, spec)"
+        ></ion-toggle>
+        <!-- enum -->
+        <!-- class enter-click disables the enter click on the modal behind the select -->
+        <ion-select
+          *ngIf="spec.type === 'enum'"
+          [interfaceOptions]="{
+            message: getWarningText(spec.warning),
+            cssClass: 'enter-click'
+          }"
+          slot="end"
+          placeholder="Select"
+          [formControlName]="entry.key"
+          [selectedText]="spec['value-names'][formGroup.get(entry.key).value]"
+        >
+          <ion-select-option
+            *ngFor="let option of spec.values"
+            [value]="option"
+          >
+            {{ spec['value-names'][option] }}
+          </ion-select-option>
+        </ion-select>
+      </ion-item>
       <!-- object or union -->
       <ng-container *ngIf="spec.type === 'object' || spec.type === 'union'">
         <!-- label -->
@@ -248,6 +262,7 @@
                 </ion-item>
                 <!-- nested body -->
                 <div
+                  class="ion-padding-start"
                   [id]="getElementId(entry.key, i)"
                   [ngStyle]="{
                     'max-height': objectListDisplay[entry.key][i].height,
@@ -362,6 +377,6 @@
         [spec]="spec"
       >
       </form-error>
-    </ng-container>
+    </div>
   </div>
 </ion-item-group>

frontend/projects/ui/src/app/components/form-object/form-object.component.scss

@@ -10,12 +10,13 @@ ion-input {
 
 ion-item-divider {
   text-transform: unset;
+  --padding-top: 18px;
   --padding-start: 0;
   border-bottom: 1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))))
 }
 
 .nested-wrapper {
-  padding: 0 0 30px 30px;
+  padding: 0 0 24px 24px;
 }
 
 .validation-error {
@@ -23,4 +24,8 @@ ion-item-divider {
     font-size: small;
     color: var(--ion-color-danger);
   }
+}
+
+.indent {
+  margin-left: 24px;
 }

frontend/projects/ui/src/app/components/form-object/form-object.component.ts

@@ -278,6 +278,22 @@ export class FormObjectComponent {
     await alert.present()
   }
 
+  async presentAlertDescription(spec: ValueSpec) {
+    const { name, description } = spec
+
+    const alert = await this.alertCtrl.create({
+      header: name,
+      message: description,
+      buttons: [
+        {
+          text: 'OK',
+          cssClass: 'enter-click',
+        },
+      ],
+    })
+    await alert.present()
+  }
+
   private deleteListItem(key: string, index: number, markDirty = true): void {
     if (this.objectListDisplay[key])
       this.objectListDisplay[key][index].height = '0px'
@@ -352,6 +368,12 @@ export class FormLabelComponent {
     const alert = await this.alertCtrl.create({
       header: name,
       message: description,
+      buttons: [
+        {
+          text: 'OK',
+          cssClass: 'enter-click',
+        },
+      ],
     })
     await alert.present()
   }