[fix] Polish extensions widget UX #98

Related to #98

Author: czarflix

django_x509/static/django-x509/css/extensions-widget.css

@@ -3,30 +3,50 @@
 }
 
 .x509-extensions-widget__message {
-  color: #a41515;
+  color: var(--error-fg);
   margin-bottom: 0.75rem;
 }
 
 .x509-extensions-row {
-  background: #fff;
-  border: 1px solid #d0d7de;
+  background: var(--darkened-bg);
+  border: 1px solid var(--border-color);
   border-radius: 6px;
+  color: var(--body-fg);
   margin-bottom: 0.75rem;
   padding: 0.9rem;
 }
 
 .x509-extensions-row__header {
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
+  align-items: start;
+  column-gap: 1rem;
+  display: grid;
   gap: 0.75rem;
-  justify-content: space-between;
+  grid-template-areas:
+    "select remove"
+    "critical remove";
+  grid-template-columns: minmax(0, 1fr) auto;
 }
 
 .x509-extensions-row__field {
+  align-items: start;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.x509-extensions-row__field--select {
+  grid-area: select;
+  max-width: 20rem;
+}
+
+.x509-extensions-row__toggle {
+  grid-area: critical;
   align-items: center;
   display: inline-flex;
-  gap: 0.5rem;
+  gap: 0.35rem;
+  margin-top: 0;
+  white-space: nowrap;
 }
 
 .x509-extensions-row__label {
@@ -36,6 +56,7 @@
 }
 
 .x509-extensions-row__description {
+  color: var(--body-quiet-color);
   margin: 0.65rem 0 0.4rem;
 }
 
@@ -56,10 +77,22 @@
 }
 
 .x509-extensions-input,
+.x509-extensions-select {
+  max-width: 100%;
+  min-width: 0;
+  width: 100%;
+}
+
 .x509-extensions-select {
   min-width: 16rem;
 }
 
+.x509-extensions-remove {
+  grid-area: remove;
+  align-self: start;
+  justify-self: end;
+}
+
 .x509-extensions-raw {
   margin-top: 0.75rem;
 }
@@ -72,6 +105,7 @@
 @media screen and (max-width: 767px) {
   .x509-extensions-row__header {
     align-items: flex-start;
+    display: flex;
     flex-direction: column;
   }
 
@@ -80,9 +114,12 @@
     flex-direction: column;
   }
 
+  .x509-extensions-row__toggle {
+    margin-top: 0;
+  }
+
   .x509-extensions-input,
   .x509-extensions-select {
-    min-width: 100%;
     width: 100%;
   }
 }

django_x509/static/django-x509/js/extensions-widget.js

@@ -108,7 +108,7 @@
     textarea.value = JSON.stringify(items, null, 2);
   }
 
-  function buildArrayValueEditor(rowBody, item, option, onChange) {
+  function buildArrayValueEditor(rowBody, item, option, onSync) {
     var wrapper = createElement("div", "x509-extensions-choice-list"),
       valueSchema = getValueSchema(option);
 
@@ -124,7 +124,7 @@
           .map(function (element) {
             return element.value;
           });
-        onChange();
+        onSync();
       });
       label.appendChild(checkbox);
       label.appendChild(document.createTextNode(" " + choice));
@@ -134,7 +134,7 @@
     rowBody.appendChild(wrapper);
   }
 
-  function buildStringValueEditor(rowBody, item, option, onChange) {
+  function buildStringValueEditor(rowBody, item, option, onSync) {
     var input = createElement("input", "vTextField x509-extensions-input"),
       valueSchema = getValueSchema(option);
 
@@ -145,21 +145,34 @@
     }
     input.addEventListener("input", function () {
       item.value = input.value;
-      onChange();
+      onSync();
     });
     rowBody.appendChild(input);
   }
 
-  function renderRow(editor, items, options, optionMap, index, onChange, labels) {
+  function renderRow(
+    editor,
+    items,
+    options,
+    optionMap,
+    index,
+    onSync,
+    onStructureChange,
+    labels,
+  ) {
     var item = items[index],
       option = optionMap[item.name],
       valueSchema = getValueSchema(option),
       row = createElement("div", "x509-extensions-row"),
       header = createElement("div", "x509-extensions-row__header"),
-      selectWrap = createElement("label", "x509-extensions-row__field"),
+      selectWrap = createElement(
+        "label",
+        "x509-extensions-row__field x509-extensions-row__field--select",
+      ),
       selectLabel = createElement("span", "x509-extensions-row__label", "Extension"),
       select = createElement("select", "x509-extensions-select"),
-      criticalWrap = createElement("label", "x509-extensions-row__field"),
+      criticalWrap = createElement("label", "x509-extensions-row__toggle"),
+      criticalLabel = createElement("span", "", "Critical"),
       critical = createElement("input"),
       removeButton = createElement(
         "button",
@@ -185,25 +198,25 @@
       var nextOption = optionMap[select.value];
       item.name = nextOption.name;
       item.value = getDefaultValue(getValueSchema(nextOption));
-      onChange();
+      onStructureChange();
     });
 
     critical.type = "checkbox";
     critical.checked = item.critical;
     critical.addEventListener("change", function () {
       item.critical = critical.checked;
-      onChange();
+      onSync();
     });
 
     removeButton.type = "button";
     removeButton.addEventListener("click", function () {
       items.splice(index, 1);
-      onChange();
+      onStructureChange();
     });
 
     selectWrap.appendChild(selectLabel);
     selectWrap.appendChild(select);
-    criticalWrap.appendChild(document.createTextNode("Critical "));
+    criticalWrap.appendChild(criticalLabel);
     criticalWrap.appendChild(critical);
     header.appendChild(selectWrap);
     header.appendChild(criticalWrap);
@@ -218,9 +231,9 @@
 
     rowBody.appendChild(valueLabel);
     if (valueSchema.type === "array") {
-      buildArrayValueEditor(rowBody, item, option, onChange);
+      buildArrayValueEditor(rowBody, item, option, onSync);
     } else {
-      buildStringValueEditor(rowBody, item, option, onChange);
+      buildStringValueEditor(rowBody, item, option, onSync);
     }
     row.appendChild(rowBody);
     editor.appendChild(row);
@@ -236,6 +249,9 @@
         options,
         optionMap,
         index,
+        function () {
+          syncTextarea(textarea, items);
+        },
         function () {
           syncTextarea(textarea, items);
           renderEditor(widget, textarea, editor, items, options, optionMap, labels);