feat(ui): improve attribute layout

springwolf · Jul 29, 2024 · 3ce5bf3 · 3ce5bf3
1 parent 148ffe2
commit 3ce5bf3
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 60 deletions.
diff --git a/springwolf-ui/src/app/components/new/schema/schema.component.css b/springwolf-ui/src/app/components/new/schema/schema.component.css
@@ -3,19 +3,22 @@
   color: red;
 }
 
+.deprecated {
+  color: red;
+}
+
 .description {
   overflow: auto;
 }
 
 .example {
-  display: block;
   word-break: break-all;
 }
 
 .attribute {
   background-color: rgb(128, 90, 213);
   color: rgb(255, 255, 255);
-  margin: 0 8px 0 8px;
-  padding: 2px 4px 2px 4px;
+  margin: 0 0.2em 0.2em 0;
+  padding: 0.1em 0.2em 0.1em 0.2em;
   border-radius: 4px;
 }
diff --git a/springwolf-ui/src/app/components/new/schema/schema.component.html b/springwolf-ui/src/app/components/new/schema/schema.component.html
@@ -91,66 +91,63 @@
     </mat-select>
   </span>
 
-  <!-- array properties -->
-  <span *ngIf="value.uniqueItems != null" class="example">
-    <i>Unique items:</i>
-    &nbsp;
-    {{ value.uniqueItems ? "yes" : "no" }}
-  </span>
-  <span
-    *ngIf="value.minItems != null || value.maxItems != null"
-    class="example"
-  >
-    <i>Items:</i>
-    &nbsp;
-    <app-schema-range-new
-      [lowerBound]="value.minItems"
-      [upperBound]="value.maxItems"
-      lowerBoundInclusive="true"
-      upperBoundInclusive="true"
-    />
-  </span>
+  <!-- attributes -->
+  <span class="flex flex-wrap">
+    <!-- array attributes -->
+    <span
+      *ngIf="value.minItems != null || value.maxItems != null"
+      class="attribute"
+    >
+      <app-schema-range-new
+        [lowerBound]="value.minItems"
+        [upperBound]="value.maxItems"
+        lowerBoundInclusive="true"
+        upperBoundInclusive="true"
+      />
+      items
+    </span>
+    <span *ngIf="value.uniqueItems != null" class="attribute">
+      Unique items:
+      {{ value.uniqueItems ? "yes" : "no" }}
+    </span>
 
-  <!-- primitive properties -->
-  <span *ngIf="value.pattern" class="example">
-    <i>Pattern:</i>
-    &nbsp;
-    <span class="text-console">
-      {{ value.pattern }}
+    <!-- primitive attributes -->
+    <span *ngIf="value.pattern" class="attribute">
+      pattern:
+      <span class="text-console">
+        {{ value.pattern }}
+      </span>
+    </span>
+    <span
+      *ngIf="value.minLength != null || value.maxLength != null"
+      class="attribute"
+    >
+      <app-schema-range-new
+        [lowerBound]="value.minLength"
+        [upperBound]="value.maxLength"
+        lowerBoundInclusive="true"
+        upperBoundInclusive="true"
+      />
+      length
     </span>
-  </span>
-  <span
-    *ngIf="value.minLength != null || value.maxLength != null"
-    class="example"
-  >
-    <i>Length:</i>
-    &nbsp;
-    <app-schema-range-new
-      [lowerBound]="value.minLength"
-      [upperBound]="value.maxLength"
-      lowerBoundInclusive="true"
-      upperBoundInclusive="true"
-    />
-  </span>
 
-  <span
-    *ngIf="value.minimum != undefined || value.maximum != undefined"
-    class="example"
-  >
-    <i>Range:</i>
-    &nbsp;
-    <app-schema-range-new
-      [lowerBound]="value.minimum"
-      [upperBound]="value.maximum"
-      [lowerBoundInclusive]="!value.exclusiveMinimum"
-      [upperBoundInclusive]="!value.exclusiveMaximum"
-    />
-  </span>
-  <span *ngIf="value.multipleOf != undefined" class="example">
-    <i>Multiple of:</i>
-    &nbsp;
-    {{ value.multipleOf }}
+    <span
+      *ngIf="value.minimum != undefined || value.maximum != undefined"
+      class="attribute"
+    >
+      <app-schema-range-new
+        [lowerBound]="value.minimum"
+        [upperBound]="value.maximum"
+        [lowerBoundInclusive]="!value.exclusiveMinimum"
+        [upperBoundInclusive]="!value.exclusiveMaximum"
+      />
+      value range
+    </span>
+    <span *ngIf="value.multipleOf != undefined" class="attribute">
+      Multiple of
+      {{ value.multipleOf }}
+    </span>
   </span>
 
-  <hr />
+  <mat-divider />
 </ng-template>
diff --git a/springwolf-ui/src/main.css b/springwolf-ui/src/main.css
@@ -32,6 +32,9 @@ a {
   display: flex;
   flex-direction: column;
 }
+.flex-wrap {
+  flex-wrap: wrap;
+}
 .gap-8 {
   gap: 8px;
 }