UX: improve json_schema setting styles (#24424)

app/assets/javascripts/discourse/app/components/modal/json-schema-editor.js

@@ -46,7 +46,7 @@ export default class JsonSchemaEditorModal extends Component {
   _loadEditor(editor) {
     let { JSONEditor } = window;
 
-    JSONEditor.defaults.options.theme = "bootstrap4";
+    JSONEditor.defaults.options.theme = "barebones";
     JSONEditor.defaults.iconlibs = {
       discourseIcons: DiscourseJsonSchemaEditorIconlib,
     };
@@ -62,7 +62,6 @@ export default class JsonSchemaEditorModal extends Component {
       disable_edit_json: true,
       disable_properties: true,
       disable_collapse: false,
-      remove_button_labels: true,
       show_errors: "never",
       startval: this.value ? JSON.parse(this.value) : null,
     });
@@ -76,6 +75,8 @@ class DiscourseJsonSchemaEditorIconlib {
       add: "plus",
       moveup: "arrow-up",
       movedown: "arrow-down",
+      moveleft: "chevron-left",
+      moveright: "chevron-right",
       copy: "copy",
       collapse: "chevron-down",
       expand: "chevron-up",

app/assets/stylesheets/common/base/_index.scss

@@ -27,6 +27,7 @@
 @import "groups";
 @import "header";
 @import "history";
+@import "json_schema";
 @import "lightbox";
 @import "login";
 @import "magnific-popup";

app/assets/stylesheets/common/base/json_schema.scss

@@ -0,0 +1,247 @@
+// styles used for JSON schema settings
+
+.d-modal.json-schema-editor-modal {
+  --modal-max-width: 95vw;
+  --modal-width: unset;
+  --space-1: 0.25em;
+  --space-2: calc(0.25em * 2);
+  --space-3: calc(0.25em * 3);
+  --space-4: calc(0.25em * 4);
+  --space-5: calc(0.25em * 5);
+  --space-6: calc(0.25em * 6);
+
+  .d-modal__container {
+    width: unset;
+  }
+
+  .je-ready {
+    .je-object__container {
+      padding: 0;
+      border: none;
+      margin-bottom: var(--space-4);
+
+      > span:not(.je-object__controls) {
+        display: flex;
+        padding: var(--space-1) 0 var(--space-4) var(--space-6);
+
+        .json-editor-btn-delete {
+          order: 2;
+          margin-left: auto;
+          margin-right: 0;
+        }
+      }
+    }
+
+    .je-object__controls {
+      margin: 0;
+    }
+
+    .json-editor-btn-delete {
+      @extend .btn-danger;
+      @extend .no-text;
+    }
+
+    .json-editor-btn-add {
+      @extend .btn, .ok;
+      gap: var(--space-1);
+      span {
+        display: inline;
+      }
+    }
+
+    button {
+      @extend .btn;
+      @extend .no-text;
+      span {
+        display: none;
+      }
+    }
+
+    .json-editor-btn-collapse {
+      @extend .btn-flat;
+    }
+
+    [class*="json-editor-btn"] {
+      margin-right: var(--space-2);
+    }
+
+    select {
+      @include appearance-none;
+      @include form-item-sizing;
+      display: inline-block;
+      margin-bottom: var(--space-2);
+      color: var(--primary);
+      background-color: var(--secondary);
+      border: 1px solid var(--primary-400);
+      border-radius: var(--d-input-border-radius);
+      background: svg-uri(
+        '<svg xmlns="http://www.w3.org/2000/svg" fill="#999" height=".75em" viewBox="0 0 448 512"><path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"/></svg>'
+      ); // down chevron
+      background-repeat: no-repeat;
+      background-position: 98%;
+      &:focus {
+        @include default-focus;
+      }
+    }
+
+    select,
+    input {
+      width: 100%;
+      margin: 0;
+    }
+
+    .row:not(:first-child) {
+      .form-control {
+        margin: var(--space-4) 0;
+      }
+    }
+
+    .form-control {
+      p {
+        // description
+        color: var(--primary-medium);
+        margin-top: var(--space-1);
+        font-size: var(--font-down-1);
+      }
+    }
+
+    h3 {
+      display: flex;
+      align-items: center;
+      margin: 0;
+      button.json-editor-btn-collapse.json-editor-btntype-toggle {
+        // needs the specificity
+        background: transparent;
+        margin: 0 0 0 calc(var(--space-2) * -1);
+        padding: var(--space-1) var(--space-2);
+        font-size: var(--font-down-2);
+        .d-icon {
+          color: var(--primary-medium);
+        }
+      }
+
+      label {
+        margin: 0 0 0 0.1em; // minor visual alignment
+        font-weight: normal;
+        font-size: var(--font-up-1);
+        color: var(--primary);
+      }
+    }
+
+    .je-indented-panel {
+      margin: 0;
+      padding: var(--space-4) 0 0 var(--space-6);
+      border-left: none;
+    }
+
+    [data-schemaid="root"] {
+      position: relative;
+      > .je-header {
+        label,
+        .json-editor-btn-collapse {
+          display: none;
+        }
+        button {
+          position: absolute;
+          right: 0;
+          margin-right: 0;
+          font-size: var(--font-down-1);
+          z-index: 2;
+        }
+      }
+
+      > .je-indented-panel {
+        margin: 0;
+        padding: 0;
+        border: none;
+      }
+    }
+
+    // for "format":"tabs-top"
+
+    .je-tabholder--top {
+      margin: 0;
+      display: flex;
+      flex-wrap: wrap;
+      width: 80%;
+      gap: 0 var(--space-3);
+      border-bottom: 1px solid var(--primary-low);
+      padding-bottom: var(--space-1);
+
+      .je-tab--top {
+        border: none;
+        padding: 0;
+      }
+    }
+
+    .je-tabholder--clear {
+      padding-top: var(--space-3);
+
+      .je-object__title {
+        display: none;
+      }
+
+      .je-object__container > span:not(.je-object__controls) {
+        padding: 0;
+      }
+
+      h3 label {
+        margin: 0;
+      }
+
+      .je-indented-panel--top {
+        margin: 0;
+        padding: 0;
+      }
+
+      .json-editor-btn-collapse {
+        display: none;
+      }
+
+      .je-indented-panel {
+        padding-left: 0;
+      }
+    }
+
+    // for "format":"table"
+
+    table {
+      width: 100%;
+      margin-bottom: 1em;
+
+      td,
+      th {
+        &:not(:first-child):not(:last-child) {
+          padding: var(--space-2);
+        }
+        &:first-child,
+        &:last-child {
+          padding: var(--space-2) 0;
+        }
+      }
+
+      td {
+        vertical-align: top;
+
+        select {
+          background-position: center right var(--space-2);
+          padding-right: var(--space-6);
+        }
+
+        &:last-child {
+          span {
+            display: flex;
+            flex-direction: column;
+            gap: var(--space-1);
+            button {
+              margin: 0;
+            }
+            .delete {
+              order: 2;
+            }
+          }
+        }
+      }
+    }
+  }
+}