Replace the attribute selector with a datalist

Amphiluke · Dec 24, 2023 · 64e25aa · 64e25aa
1 parent f554b75
commit 64e25aa
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 122 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "lindsvg-pwa",
   "private": true,
-  "version": "2.3.3",
+  "version": "2.3.4",
   "type": "module",
   "scripts": {
     "lint": "eslint \"src/**/*.{mjs,vue}\"",

diff --git a/src/assets/icons.svg b/src/assets/icons.svg
diff --git a/src/components/PanelAttributes.vue b/src/components/PanelAttributes.vue
@@ -10,54 +10,48 @@ let interfaceStore = useInterfaceStore();
 
 let newAttributeName = ref("");
 let newAttributeValue = ref("");
-let attributes = {
-  // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation
-  "Presentation Attributes": [
-    "clip-path",
-    "clip-rule",
-    "color",
-    "color-interpolation",
-    "cursor",
-    "display",
-    "fill",
-    "fill-opacity",
-    "fill-rule",
-    "filter",
-    "marker-end",
-    "marker-mid",
-    "marker-start",
-    "mask",
-    "opacity",
-    "overflow",
-    "paint-order",
-    "pathLength",
-    "pointer-events",
-    "shape-rendering",
-    "stroke",
-    "stroke-dasharray",
-    "stroke-dashoffset",
-    "stroke-linecap",
-    "stroke-linejoin",
-    "stroke-miterlimit",
-    "stroke-opacity",
-    "stroke-width",
-    "transform",
-    "vector-effect",
-    "visibility",
-  ],
-
-  // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Core
-  "Core Attributes": [
-    "id",
-    "tabindex",
-  ],
-
-  // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Styling
-  "Styling Attributes": [
-    "class",
-    "style",
-  ],
-};
+let attributes = [
+  // Presentation Attributes (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation)
+  "clip-path",
+  "clip-rule",
+  "color",
+  "color-interpolation",
+  "cursor",
+  "display",
+  "fill",
+  "fill-opacity",
+  "fill-rule",
+  "filter",
+  "marker-end",
+  "marker-mid",
+  "marker-start",
+  "mask",
+  "opacity",
+  "overflow",
+  "paint-order",
+  "pathLength",
+  "pointer-events",
+  "shape-rendering",
+  "stroke",
+  "stroke-dasharray",
+  "stroke-dashoffset",
+  "stroke-linecap",
+  "stroke-linejoin",
+  "stroke-miterlimit",
+  "stroke-opacity",
+  "stroke-width",
+  "transform",
+  "vector-effect",
+  "visibility",
+
+  // Core Attributes (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Core)
+  "id",
+  "tabindex",
+
+  // Styling Attributes (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Styling)
+  "class",
+  "style",
+];
 
 function setAttribute(name, value) {
   value = value.trim().split(/\r?\n/);
@@ -120,36 +114,23 @@ function plot() {
         <h3>Add a new attribute</h3>
         <div :class="$style.attributeItem">
           <div :class="$style.newAttributeName">
-            <label :class="$style.attributeListCtrl">
-              <select
-                :class="$style.attributeList"
-                title="Select attribute"
-                @change="newAttributeName = $event.target.value"
-              >
-                <optgroup
-                  v-for="(attributeList, group) in attributes"
-                  :key="group"
-                  :label="group"
-                >
-                  <option
-                    v-for="attribute in attributeList"
-                    :key="attribute"
-                    :value="attribute"
-                    :disabled="Object.hasOwn(lSystemStore.attributes, attribute)"
-                  >
-                    {{ attribute }}
-                  </option>
-                </optgroup>
-              </select>
-            </label>
             <label :class="[interfaceStyles.labeledField, $style.labeledField]">
               <input
                 v-model="newAttributeName"
+                list="svg-attributes"
                 autocapitalize="off"
                 type="text"
                 placeholder="Enter attribute name…"
               >
             </label>
+            <datalist id="svg-attributes">
+              <option
+                v-for="(attribute, index) of attributes"
+                :key="index"
+                :value="attribute"
+                :disabled="Object.hasOwn(lSystemStore.attributes, attribute)"
+              />
+            </datalist>
             <button
               type="button"
               :class="[$style.addAttributeButton, interfaceStyles.iconButton, interfaceStyles.iconButtonAdd]"
@@ -245,37 +226,6 @@ function plot() {
     }
   }
   
-  .attributeListCtrl {
-    display: flex;
-    flex-shrink: 0;
-    position: relative;
-
-    &::before {
-      background-color: var(--color-accent);
-      content: "";
-      height: 25px;
-      left: 50%;
-      -webkit-mask: url(../assets/icons.svg) -150px 0 no-repeat;
-      mask: url(../assets/icons.svg) -150px 0 no-repeat;
-      opacity: 0.5;
-      position: absolute;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      width: 25px;
-    }
-
-    &:hover::before,
-    &:focus-within::before {
-      opacity: 1;
-    }
-  }
-
-  .attributeList {
-    cursor: pointer;
-    opacity: 0.01;
-    width: 32px;
-  }
-
   .addAttributeButton {
     flex-shrink: 0;
 

diff --git a/src/components/PanelCollections.vue b/src/components/PanelCollections.vue
@@ -154,8 +154,8 @@ function copyPermalink(cid, lid) {
       content: "";
       flex-shrink: 0;
       height: 25px;
-      -webkit-mask: url(../assets/icons.svg) -125px 0 no-repeat;
-      mask: url(../assets/icons.svg) -125px 0 no-repeat;
+      -webkit-mask: url(../assets/icons.svg) -100px 0 no-repeat;
+      mask: url(../assets/icons.svg) -100px 0 no-repeat;
       width: 25px;
     }
 

diff --git a/src/components/PanelSettings.vue b/src/components/PanelSettings.vue
@@ -231,8 +231,8 @@ function plot() {
       content: "";
       height: 25px;
       left: 20px;
-      -webkit-mask: url(../assets/icons.svg) -100px 0 no-repeat;
-      mask: url(../assets/icons.svg) -100px 0 no-repeat;
+      -webkit-mask: url(../assets/icons.svg) -75px 0 no-repeat;
+      mask: url(../assets/icons.svg) -75px 0 no-repeat;
       pointer-events: none;
       position: absolute;
       top: 50%;

diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue
@@ -53,8 +53,8 @@ let interfaceStore = useInterfaceStore();
   background-color: var(--color-accent);
   border: none;
   height: 25px;
-  -webkit-mask: url(../assets/icons.svg) -175px 0 no-repeat;
-  mask: url(../assets/icons.svg) -175px 0 no-repeat;
+  -webkit-mask: url(../assets/icons.svg) -150px 0 no-repeat;
+  mask: url(../assets/icons.svg) -150px 0 no-repeat;
   padding: 0;
   position: absolute;
   right: 10px;

diff --git a/src/styles/interface.module.css b/src/styles/interface.module.css
@@ -81,30 +81,25 @@
   }
 }
 
-.iconButtonView::before {
+.iconButtonConfig::before {
   -webkit-mask-position: 0 0;
   mask-position: 0 0;
 }
 
-.iconButtonConfig::before {
+.iconButtonErase::before,
+.iconButtonAdd::before {
   -webkit-mask-position: -25px 0;
   mask-position: -25px 0;
 }
 
-.iconButtonErase::before,
-.iconButtonAdd::before {
+.iconButtonDelete::before {
   -webkit-mask-position: -50px 0;
   mask-position: -50px 0;
 }
 
-.iconButtonDelete::before {
-  -webkit-mask-position: -75px 0;
-  mask-position: -75px 0;
-}
-
 .iconButtonLink::before {
-  -webkit-mask-position: -200px 0;
-  mask-position: -200px 0;
+  -webkit-mask-position: -125px 0;
+  mask-position: -125px 0;
 }
 
 @keyframes add-breath {