Massively upgraded shadow control, added sorting by specificity in themes3, added/fixed disabled inputs

1 files changed, 106 insertions, 175 deletions

diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index c3b956cd..77d7c15a 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -1,81 +1,92 @@
 <template>
   <div
-    class="shadow-control"
+    class="label shadow-control"
     :class="{ disabled: !present }"
   >
-    <div class="shadow-preview-container">
-      <div
+    <div class="shadow-preview">
+      <label
+        class="header"
+        :class="{ faint: !present }"
+      >
+        {{ $t('settings.style.shadows.offset') }}
+      </label>
+      <input
+        v-model="selected.y"
         :disabled="!present"
-        class="y-shift-control"
+        :class="{ disabled: !present }"
+        class="input input-number y-shift-number"
+        type="number"
+      >
+      <input
+        v-model="selected.y"
+        :disabled="!present"
+        :class="{ disabled: !present }"
+        class="input input-range y-shift-slider"
+        type="range"
+        max="20"
+        min="-20"
+      >
+      <div
+        class="preview-window"
+        :class="{ disabled: !present, '-light-grid': lightGrid }"
       >
-        <input
-          v-model="selected.y"
-          :disabled="!present"
-          class="input input-number"
-          type="number"
-        >
-        <div class="wrap">
-          <input
-            v-model="selected.y"
-            :disabled="!present"
-            class="input input-range"
-            type="range"
-            max="20"
-            min="-20"
-          >
-        </div>
-      </div>
-      <div class="preview-window">
         <div
           class="preview-block"
           :style="style"
         />
       </div>
-      <div
+      <input
+        v-model="selected.x"
         :disabled="!present"
-        class="x-shift-control"
+        :class="{ disabled: !present }"
+        class="input input-number x-shift-number"
+        type="number"
       >
-        <input
-          v-model="selected.x"
-          :disabled="!present"
-          class="input input-number"
-          type="number"
-        >
-        <div class="wrap">
-          <input
-            v-model="selected.x"
-            :disabled="!present"
-            class="input input-range"
-            type="range"
-            max="20"
-            min="-20"
-          >
-        </div>
-      </div>
-    </div>
+      <input
+        v-model="selected.x"
+        :disabled="!present"
+        :class="{ disabled: !present }"
+        class="input input-range x-shift-slider"
+        type="range"
+        max="20"
+        min="-20"
+      >
+      <Checkbox
+        id="inset"
+        v-model="lightGrid"
+        :disabled="!present"
+        name="lightGrid"
+        class="input-light-grid"
+      >
+        {{ $t('settings.style.shadows.light_grid') }}
+      </Checkbox>
 
-    <div class="shadow-tweak">
+    </div>
+    <div class="shadow-switcher">
+      <Select
+        class="shadow-list"
+        id="shadow-list"
+        v-model="selectedId"
+        size="10"
+        :disabled="!ready || usingFallback"
+      >
+        <option
+          v-for="(shadow, index) in cValue"
+          :value="index"
+          :class="{ '-active': index === Number(selectedId) }"
+          :key="index"
+        >
+          {{ shadow.name ?? $t('settings.style.shadows.shadow_id', { value: index }) }}
+        </option>
+      </Select>
       <div
         :disabled="usingFallback"
-        class="id-control style-control"
+        class="id-control arrange-buttons"
       >
-        <Select
-          id="shadow-switcher"
-          v-model="selectedId"
-          class="shadow-switcher"
-          :disabled="!ready || usingFallback"
-        >
-          <option
-            v-for="(shadow, index) in cValue"
-            :key="index"
-            :value="index"
-          >
-            {{ $t('settings.style.shadows.shadow_id', { value: index }) }}
-          </option>
-        </Select>
         <button
           class="btn button-default"
           :disabled="!ready || !present"
+          :class="{ disabled: !present }"
           @click="del"
         >
           <FAIcon
@@ -86,6 +97,7 @@
         <button
           class="btn button-default"
           :disabled="!moveUpValid"
+          :class="{ disabled: !present }"
           @click="moveUp"
         >
           <FAIcon
@@ -105,7 +117,7 @@
         </button>
         <button
           class="btn button-default"
-          :disabled="usingFallback"
+          :disabled="usingFallback || !present"
           @click="add"
         >
           <FAIcon
@@ -114,37 +126,54 @@
           />
         </button>
       </div>
+    </div>
+    <div class="shadow-tweak">
       <div
         :disabled="!present"
-        class="inset-control style-control"
+        :class="{ disabled: !present }"
+        class="name-control style-control"
       >
         <label
-          for="inset"
+          for="spread"
           class="label"
+          :class="{ faint: !present }"
         >
-          {{ $t('settings.style.shadows.inset') }}
+          {{ $t('settings.style.shadows.name') }}
         </label>
         <input
+          id="name"
+          v-model="selected.name"
+          :disabled="!present"
+          :class="{ disabled: !present }"
+          name="name"
+          class="input input-string"
+        >
+      </div>
+      <div
+        :disabled="!present"
+        class="inset-control style-control"
+      >
+        <Checkbox
           id="inset"
           v-model="selected.inset"
           :disabled="!present"
           name="inset"
-          class="input -checkbox input-inset visible-for-screenreader-only"
-          type="checkbox"
+          class="input-inset input-boolean"
         >
-        <label
-          class="checkbox-label"
-          for="inset"
-          :aria-hidden="true"
-        />
+          <template #before>
+            {{ $t('settings.style.shadows.inset') }}
+          </template>
+        </Checkbox>
       </div>
       <div
         :disabled="!present"
+        :class="{ disabled: !present }"
         class="blur-control style-control"
       >
         <label
           for="spread"
           class="label"
+          :class="{ faint: !present }"
         >
           {{ $t('settings.style.shadows.blur') }}
         </label>
@@ -152,6 +181,7 @@
           id="blur"
           v-model="selected.blur"
           :disabled="!present"
+          :class="{ disabled: !present }"
           name="blur"
           class="input input-range"
           type="range"
@@ -161,6 +191,7 @@
         <input
           v-model="selected.blur"
           :disabled="!present"
+          :class="{ disabled: !present }"
           class="input input-number"
           type="number"
           min="0"
@@ -169,10 +200,12 @@
       <div
         :disabled="!present"
         class="spread-control style-control"
+        :class="{ disabled: !present }"
       >
         <label
           for="spread"
           class="label"
+          :class="{ faint: !present }"
         >
           {{ $t('settings.style.shadows.spread') }}
         </label>
@@ -180,6 +213,7 @@
           id="spread"
           v-model="selected.spread"
           :disabled="!present"
+          :class="{ disabled: !present }"
           name="spread"
           class="input input-range"
           type="range"
@@ -189,6 +223,7 @@
         <input
           v-model="selected.spread"
           :disabled="!present"
+          :class="{ disabled: !present }"
           class="input input-number"
           type="number"
         >
@@ -208,6 +243,7 @@
       <i18n-t
         scope="global"
         keypath="settings.style.shadows.hintV3"
+        :class="{ faint: !present }"
         tag="p"
       >
         <code>--variable,mod</code>
@@ -218,109 +254,4 @@
 
 <script src="./shadow_control.js"></script>
 
-<style lang="scss">
-.shadow-control {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  margin-bottom: 1em;
-
-  .shadow-preview-container,
-  .shadow-tweak {
-    margin: 5px 6px 0 0;
-  }
-
-  .shadow-preview-container {
-    flex: 0;
-    display: flex;
-    flex-wrap: wrap;
-
-    input[type="number"] {
-      width: 5em;
-      min-width: 2em;
-    }
-
-    .x-shift-control,
-    .y-shift-control {
-      display: flex;
-      flex: 0;
-
-      &[disabled="disabled"] * {
-        opacity: 0.5;
-      }
-    }
-
-    .x-shift-control {
-      align-items: flex-start;
-    }
-
-    .x-shift-control .wrap,
-    input[type="range"] {
-      margin: 0;
-      width: 15em;
-      height: 2em;
-    }
-
-    .y-shift-control {
-      flex-direction: column;
-      align-items: flex-end;
-
-      .wrap {
-        width: 2em;
-        height: 15em;
-      }
-
-      input[type="range"] {
-        transform-origin: 1em 1em;
-        transform: rotate(90deg);
-      }
-    }
-
-    .preview-window {
-      flex: 1;
-      background-color: #999;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-image:
-        linear-gradient(45deg, #666 25%, transparent 25%),
-        linear-gradient(-45deg, #666 25%, transparent 25%),
-        linear-gradient(45deg, transparent 75%, #666 75%),
-        linear-gradient(-45deg, transparent 75%, #666 75%);
-      background-size: 20px 20px;
-      background-position: 0 0, 0 10px, 10px -10px, -10px 0;
-      border-radius: var(--roundness);
-
-      .preview-block {
-        width: 33%;
-        height: 33%;
-        border-radius: var(--roundness);
-      }
-    }
-  }
-
-  .shadow-tweak {
-    flex: 1;
-    min-width: 280px;
-
-    .id-control {
-      align-items: stretch;
-
-      .shadow-switcher {
-        flex: 1;
-      }
-
-      .shadow-switcher,
-      .btn {
-        min-width: 1px;
-        margin-right: 5px;
-      }
-
-      .btn {
-        padding: 0 0.4em;
-        margin: 0 0.1em;
-      }
-    }
-  }
-}
-</style>
+<style src="./shadow_control.scss" lang="scss"></style>