From a044dc377e77aade4696984fb42f7aa5db8c2561 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 12 Sep 2024 15:47:48 +0300
Subject: Massively upgraded shadow control, added sorting by specificity in
 themes3, added/fixed disabled inputs

---
 .../settings_modal/tabs/theme_tab/theme_tab.scss          | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
index 84933fb8..e86e61da 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
@@ -25,7 +25,9 @@
     margin-bottom: 5px;
 
     .label {
+      margin-right: 1em;
       flex: 1;
+      line-height: 2;
     }
 
     .opt {
@@ -48,15 +50,14 @@
 
       &[type="range"] {
         flex: 1;
-        min-width: 3em;
-        align-self: flex-start;
+        min-width: 2em;
+        align-self: center;
+        margin: 0 0.5em;
       }
-    }
 
-    &.disabled {
-      input,
-      select {
-        opacity: 0.5;
+      &[type="checkbox"] + i {
+        height: 1.1em;
+        align-self: center;
       }
     }
   }
-- 
cgit v1.2.3-70-g09d2


From 2b9968eacd6f45dc5ad39796f1b2f488e2a22cbb Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 12 Sep 2024 16:10:39 +0300
Subject: lint

---
 src/components/checkbox/checkbox.vue                       |  2 +-
 src/components/color_input/color_input.vue                 |  2 +-
 src/components/settings_modal/tabs/theme_tab/theme_tab.vue | 11 +++++++----
 src/components/shadow_control/shadow_control.vue           |  5 ++---
 4 files changed, 11 insertions(+), 9 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index 494605cf..8ffcc63b 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -8,7 +8,7 @@
       class="label -before"
       :class="{ faint: disabled }"
     >
-      <slot name="before"/>
+      <slot name="before" />
     </span>
     <input
       type="checkbox"
diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue
index 200b8631..6725fcda 100644
--- a/src/components/color_input/color_input.vue
+++ b/src/components/color_input/color_input.vue
@@ -20,7 +20,7 @@
     <div
       class="input color-input-field"
       :class="{ disabled: !present || disabled }"
-      >
+    >
       <input
         :id="name + '-t'"
         class="textColor unstyled"
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
index 4498c143..d975c61d 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -123,10 +123,13 @@
       </div>
     </div>
 
-    <!-- eslint-disable vue/no-v-text-v-html-on-component -->
-    <component :is="'style'" v-html="themeV3Preview"/>
-    <!-- eslint-enable vue/no-v-text-v-html-on-component -->
-    <preview id="theme-preview"/>
+    <!-- eslint-disable vue/no-v-html vue/no-v-text-v-html-on-component -->
+    <component
+      :is="'style'"
+      v-html="themeV3Preview"
+    />
+    <!-- eslint-enable vue/no-v-html vue/no-v-text-v-html-on-component -->
+    <preview id="theme-preview" />
 
     <div>
       <button
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 77d7c15a..b867d6e0 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -60,21 +60,20 @@
       >
         {{ $t('settings.style.shadows.light_grid') }}
       </Checkbox>
-
     </div>
     <div class="shadow-switcher">
       <Select
-        class="shadow-list"
         id="shadow-list"
         v-model="selectedId"
+        class="shadow-list"
         size="10"
         :disabled="!ready || usingFallback"
       >
         <option
           v-for="(shadow, index) in cValue"
+          :key="index"
           :value="index"
           :class="{ '-active': index === Number(selectedId) }"
-          :key="index"
         >
           {{ shadow.name ?? $t('settings.style.shadows.shadow_id', { value: index }) }}
         </option>
-- 
cgit v1.2.3-70-g09d2


From aa7a3361833f4c88ec685c4a92ff7727ed7249a7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 12 Sep 2024 19:31:19 +0300
Subject: Updated shadow control to be able to handle "absolute null" situation

---
 .../settings_modal/tabs/theme_tab/theme_tab.js     |  14 ++-
 .../settings_modal/tabs/theme_tab/theme_tab.vue    |  46 +-------
 src/components/shadow_control/shadow_control.js    | 122 +++++++++++----------
 src/components/shadow_control/shadow_control.scss  |  17 ++-
 src/components/shadow_control/shadow_control.vue   | 103 +++++++++++++----
 src/i18n/en.json                                   |   1 +
 src/services/theme_data/theme_data.service.js      |   2 +-
 7 files changed, 179 insertions(+), 126 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index 25836559..a295e880 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -314,7 +314,18 @@ export default {
       },
       set (val) {
         if (val) {
-          this.shadowsLocal[this.shadowSelected] = this.currentShadowFallback.map(_ => Object.assign({}, _))
+          this.shadowsLocal[this.shadowSelected] = (this.currentShadowFallback || [])
+            .map(s => ({
+              name: null,
+              x: 0,
+              y: 0,
+              blur: 0,
+              spread: 0,
+              inset: false,
+              color: '#000000',
+              alpha: 1,
+              ...s
+            }))
         } else {
           delete this.shadowsLocal[this.shadowSelected]
         }
@@ -328,6 +339,7 @@ export default {
         return this.shadowsLocal[this.shadowSelected]
       },
       set (v) {
+        console.log('TT', v)
         this.shadowsLocal[this.shadowSelected] = v
       }
     },
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
index d975c61d..00a55832 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -937,24 +937,14 @@
               </Select>
             </div>
             <div class="override">
-              <label
-                for="override"
-                class="label"
-              >
-                {{ $t('settings.style.shadows.override') }}
-              </label>
-              {{ ' ' }}
-              <input
+              <Checkbox
                 id="override"
                 v-model="currentShadowOverriden"
                 name="override"
                 class="input-override"
-                type="checkbox"
               >
-              <label
-                class="checkbox-label"
-                for="override"
-              />
+                {{ $t('settings.style.shadows.override') }}
+              </Checkbox>
             </div>
             <button
               class="btn button-default"
@@ -965,38 +955,10 @@
           </div>
           <ShadowControl
             v-model="currentShadow"
-            :ready="!!currentShadowFallback"
+            :separate-inset="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'"
             :fallback="currentShadowFallback"
           />
-          <div v-if="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'">
-            <i18n-t
-              scope="global"
-              keypath="settings.style.shadows.filter_hint.always_drop_shadow"
-              tag="p"
-            >
-              <code>filter: drop-shadow()</code>
-            </i18n-t>
-            <p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p>
-            <i18n-t
-              scope="global"
-              keypath="settings.style.shadows.filter_hint.drop_shadow_syntax"
-              tag="p"
-            >
-              <code>drop-shadow</code>
-              <code>spread-radius</code>
-              <code>inset</code>
-            </i18n-t>
-            <i18n-t
-              scope="global"
-              keypath="settings.style.shadows.filter_hint.inset_classic"
-              tag="p"
-            >
-              <code>box-shadow</code>
-            </i18n-t>
-            <p>{{ $t('settings.style.shadows.filter_hint.spread_zero') }}</p>
-          </div>
         </div>
-
         <div
           :label="$t('settings.style.fonts._tab_label')"
           class="fonts-container"
diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
index e653854a..4d26a539 100644
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@@ -1,8 +1,9 @@
-import ColorInput from '../color_input/color_input.vue'
-import OpacityInput from '../opacity_input/opacity_input.vue'
-import Select from '../select/select.vue'
-import Checkbox from '../checkbox/checkbox.vue'
-import { getCssShadow } from '../../services/theme_data/theme_data.service.js'
+import ColorInput from 'src/components/color_input/color_input.vue'
+import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
+import Select from 'src/components/select/select.vue'
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+import Popover from 'src/components/popover/popover.vue'
+import { getCssShadow, getCssShadowFilter } from '../../services/theme_data/theme_data.service.js'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -31,12 +32,8 @@ const toModel = (object = {}) => ({
 })
 
 export default {
-  // 'modelValue' and 'Fallback' can be undefined, but if they are
-  // initially vue won't detect it when they become something else
-  // therefore i'm using "ready" which should be passed as true when
-  // data becomes available
   props: [
-    'modelValue', 'fallback', 'ready'
+    'modelValue', 'fallback', 'separateInset'
   ],
   emits: ['update:modelValue'],
   data () {
@@ -51,75 +48,86 @@ export default {
     ColorInput,
     OpacityInput,
     Select,
-    Checkbox
-  },
-  methods: {
-    add () {
-      this.cValue.push(toModel(this.selected))
-      this.selectedId = this.cValue.length - 1
-    },
-    del () {
-      this.cValue.splice(this.selectedId, 1)
-      this.selectedId = this.cValue.length === 0 ? undefined : Math.max(this.selectedId - 1, 0)
-    },
-    moveUp () {
-      const movable = this.cValue.splice(this.selectedId, 1)[0]
-      this.cValue.splice(this.selectedId - 1, 0, movable)
-      this.selectedId -= 1
-    },
-    moveDn () {
-      const movable = this.cValue.splice(this.selectedId, 1)[0]
-      this.cValue.splice(this.selectedId + 1, 0, movable)
-      this.selectedId += 1
-    }
+    Checkbox,
+    Popover
   },
   beforeUpdate () {
-    this.cValue = this.modelValue || this.fallback
+    this.cValue = (this.modelValue || this.fallback || []).map(toModel)
   },
   computed: {
+    selected () {
+      const selected = this.cValue[this.selectedId]
+      if (selected) {
+        return { ...selected }
+      }
+      return null
+    },
+    present () {
+      return this.selected != null && !this.usingFallback
+    },
+    shadowsAreNull () {
+      return this.modelValue == null
+    },
     anyShadows () {
       return this.cValue.length > 0
     },
     anyShadowsFallback () {
       return this.fallback.length > 0
     },
-    selected () {
-      if (this.ready && this.anyShadows) {
-        return this.cValue[this.selectedId]
-      } else {
-        return toModel({})
-      }
-    },
     currentFallback () {
-      if (this.ready && this.anyShadowsFallback) {
-        return this.fallback[this.selectedId]
-      } else {
-        return toModel({})
-      }
+      return this.fallback?.[this.selectedId]
     },
     moveUpValid () {
-      return this.ready && this.selectedId > 0
+      return this.selectedId > 0
     },
     moveDnValid () {
-      return this.ready && this.selectedId < this.cValue.length - 1
-    },
-    present () {
-      return this.ready &&
-        typeof this.cValue[this.selectedId] !== 'undefined' &&
-        !this.usingFallback
+      return this.selectedId < this.cValue.length - 1
     },
     usingFallback () {
-      return typeof this.modelValue === 'undefined'
+      return this.modelValue == null
     },
     rgb () {
       return hex2rgb(this.selected.color)
     },
     style () {
-      return this.ready
-        ? {
-            boxShadow: getCssShadow(this.fallback)
-          }
-        : {}
+      if (!this.ready) return {}
+      if (this.separateInset) {
+        return {
+          filter: getCssShadowFilter(this.fallback),
+          boxShadow: getCssShadow(this.fallback, true)
+        }
+      }
+      return {
+        boxShadow: getCssShadow(this.fallback)
+      }
+    }
+  },
+  methods: {
+    updateProperty (prop, value) {
+      this.cValue[this.selectedId][prop] = value
+      this.$emit('update:modelValue', this.cValue)
+    },
+    add () {
+      this.cValue.push(toModel(this.selected))
+      this.selectedId = Math.max(this.cValue.length - 1, 0)
+      this.$emit('update:modelValue', this.cValue)
+    },
+    del () {
+      this.cValue.splice(this.selectedId, 1)
+      this.selectedId = this.cValue.length === 0 ? undefined : Math.max(this.selectedId - 1, 0)
+      this.$emit('update:modelValue', this.cValue)
+    },
+    moveUp () {
+      const movable = this.cValue.splice(this.selectedId, 1)[0]
+      this.cValue.splice(this.selectedId - 1, 0, movable)
+      this.selectedId -= 1
+      this.$emit('update:modelValue', this.cValue)
+    },
+    moveDn () {
+      const movable = this.cValue.splice(this.selectedId, 1)[0]
+      this.cValue.splice(this.selectedId + 1, 0, movable)
+      this.selectedId += 1
+      this.$emit('update:modelValue', this.cValue)
     }
   }
 }
diff --git a/src/components/shadow_control/shadow_control.scss b/src/components/shadow_control/shadow_control.scss
index 0fba39f3..d7bc15c4 100644
--- a/src/components/shadow_control/shadow_control.scss
+++ b/src/components/shadow_control/shadow_control.scss
@@ -69,6 +69,16 @@
     }
   }
 
+  .inset-alert {
+    padding: 0.25em 0.5em;
+  }
+
+  &.disabled {
+    .inset-alert {
+      opacity: 0.2;
+    }
+  }
+
   .shadow-preview {
     order: 2;
     flex: 3 3 15em;
@@ -94,7 +104,7 @@
 
     .input-light-grid {
       grid-area: options;
-      justify-self: end;
+      justify-self: center;
     }
 
     .input-number {
@@ -176,3 +186,8 @@
     }
   }
 }
+
+.inset-tooltip {
+  padding: 0.5em;
+  max-width: 30em;
+}
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index b867d6e0..8e2133ee 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -11,20 +11,22 @@
         {{ $t('settings.style.shadows.offset') }}
       </label>
       <input
-        v-model="selected.y"
+        :value="selected?.y"
         :disabled="!present"
         :class="{ disabled: !present }"
         class="input input-number y-shift-number"
         type="number"
+        @input="e => updateProperty('y', e.target.value)"
       >
       <input
-        v-model="selected.y"
+        :value="selected?.y"
         :disabled="!present"
         :class="{ disabled: !present }"
         class="input input-range y-shift-slider"
         type="range"
         max="20"
         min="-20"
+        @input="e => updateProperty('y', e.target.value)"
       >
       <div
         class="preview-window"
@@ -36,20 +38,22 @@
         />
       </div>
       <input
-        v-model="selected.x"
+        :value="selected?.x"
         :disabled="!present"
         :class="{ disabled: !present }"
         class="input input-number x-shift-number"
         type="number"
+        @input="e => updateProperty('x', e.target.value)"
       >
       <input
-        v-model="selected.x"
+        :value="selected?.x"
         :disabled="!present"
         :class="{ disabled: !present }"
         class="input input-range x-shift-slider"
         type="range"
         max="20"
         min="-20"
+        @input="e => updateProperty('x', e.target.value)"
       >
       <Checkbox
         id="inset"
@@ -67,7 +71,7 @@
         v-model="selectedId"
         class="shadow-list"
         size="10"
-        :disabled="!ready || usingFallback"
+        :disabled="shadowsAreNull"
       >
         <option
           v-for="(shadow, index) in cValue"
@@ -75,28 +79,26 @@
           :value="index"
           :class="{ '-active': index === Number(selectedId) }"
         >
-          {{ shadow.name ?? $t('settings.style.shadows.shadow_id', { value: index }) }}
+          {{ shadow?.name ?? $t('settings.style.shadows.shadow_id', { value: index }) }}
         </option>
       </Select>
       <div
-        :disabled="usingFallback"
         class="id-control arrange-buttons"
       >
         <button
           class="btn button-default"
-          :disabled="!ready || !present"
-          :class="{ disabled: !present }"
-          @click="del"
+          :disabled="shadowsAreNull"
+          @click="add"
         >
           <FAIcon
             fixed-width
-            icon="times"
+            icon="plus"
           />
         </button>
         <button
           class="btn button-default"
           :disabled="!moveUpValid"
-          :class="{ disabled: !present }"
+          :class="{ disabled: !moveUpValid }"
           @click="moveUp"
         >
           <FAIcon
@@ -107,6 +109,7 @@
         <button
           class="btn button-default"
           :disabled="!moveDnValid"
+          :class="{ disabled: !moveDnValid }"
           @click="moveDn"
         >
           <FAIcon
@@ -116,12 +119,13 @@
         </button>
         <button
           class="btn button-default"
-          :disabled="usingFallback || !present"
-          @click="add"
+          :disabled="!present"
+          :class="{ disabled: !present }"
+          @click="del"
         >
           <FAIcon
             fixed-width
-            icon="plus"
+            icon="times"
           />
         </button>
       </div>
@@ -141,11 +145,12 @@
         </label>
         <input
           id="name"
-          v-model="selected.name"
+          :value="selected?.name"
           :disabled="!present"
           :class="{ disabled: !present }"
           name="name"
           class="input input-string"
+          @input="e => updateProperty('name', e.target.value)"
         >
       </div>
       <div
@@ -154,10 +159,11 @@
       >
         <Checkbox
           id="inset"
-          v-model="selected.inset"
+          :value="selected?.inset"
           :disabled="!present"
           name="inset"
           class="input-inset input-boolean"
+          @input="e => updateProperty('inset', e.target.value)"
         >
           <template #before>
             {{ $t('settings.style.shadows.inset') }}
@@ -178,7 +184,7 @@
         </label>
         <input
           id="blur"
-          v-model="selected.blur"
+          :value="selected?.blur"
           :disabled="!present"
           :class="{ disabled: !present }"
           name="blur"
@@ -186,14 +192,16 @@
           type="range"
           max="20"
           min="0"
+          @input="e => updateProperty('blur', e.target.value)"
         >
         <input
-          v-model="selected.blur"
+          :value="selected?.blur"
           :disabled="!present"
           :class="{ disabled: !present }"
           class="input input-number"
           type="number"
           min="0"
+          @input="e => updateProperty('blur', e.target.value)"
         >
       </div>
       <div
@@ -210,7 +218,7 @@
         </label>
         <input
           id="spread"
-          v-model="selected.spread"
+          :value="selected?.spread"
           :disabled="!present"
           :class="{ disabled: !present }"
           name="spread"
@@ -218,26 +226,30 @@
           type="range"
           max="20"
           min="-20"
+          @input="e => updateProperty('spread', e.target.value)"
         >
         <input
-          v-model="selected.spread"
+          :value="selected?.spread"
           :disabled="!present"
           :class="{ disabled: !present }"
           class="input input-number"
           type="number"
+          @input="e => updateProperty('spread', e.target.value)"
         >
       </div>
       <ColorInput
-        v-model="selected.color"
+        :modelValue="selected?.color"
         :disabled="!present"
         :label="$t('settings.style.common.color')"
-        :fallback="currentFallback.color"
+        :fallback="currentFallback?.color"
         :show-optional-tickbox="false"
         name="shadow"
+        @update:modelValue="e => updateProperty('color', e.target.value)"
       />
       <OpacityInput
-        v-model="selected.alpha"
+        :modelValue="selected?.alpha"
         :disabled="!present"
+        @update:modelValue="e => updateProperty('alpha', e.target.value)"
       />
       <i18n-t
         scope="global"
@@ -247,6 +259,49 @@
       >
         <code>--variable,mod</code>
       </i18n-t>
+      <Popover
+        trigger="hover"
+        v-if="separateInset"
+      >
+        <template #trigger>
+          <div
+            class="inset-alert alert warning"
+          >
+            <FAIcon icon="exclamation-triangle" />
+            &nbsp;
+            {{ $t('settings.style.shadows.filter_hint.avatar_inset_short') }}
+          </div>
+        </template>
+        <template #content>
+          <div class="inset-tooltip">
+            <i18n-t
+              scope="global"
+              keypath="settings.style.shadows.filter_hint.always_drop_shadow"
+              tag="p"
+            >
+              <code>filter: drop-shadow()</code>
+            </i18n-t>
+            <p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p>
+            <i18n-t
+              scope="global"
+              keypath="settings.style.shadows.filter_hint.drop_shadow_syntax"
+              tag="p"
+            >
+              <code>drop-shadow</code>
+              <code>spread-radius</code>
+              <code>inset</code>
+            </i18n-t>
+            <i18n-t
+              scope="global"
+              keypath="settings.style.shadows.filter_hint.inset_classic"
+              tag="p"
+            >
+              <code>box-shadow</code>
+            </i18n-t>
+            <p>{{ $t('settings.style.shadows.filter_hint.spread_zero') }}</p>
+          </div>
+        </template>
+      </Popover>
     </div>
   </div>
 </template>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index b27c36d7..1b67d4f7 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -880,6 +880,7 @@
         "filter_hint": {
           "always_drop_shadow": "Warning, this shadow always uses {0} when browser supports it.",
           "drop_shadow_syntax": "{0} does not support {1} parameter and {2} keyword.",
+          "avatar_inset_short": "Separate inset shadow",
           "avatar_inset": "Please note that combining both inset and non-inset shadows on avatars might give unexpected results with transparent avatars.",
           "spread_zero": "Shadows with spread > 0 will appear as if it was set to zero",
           "inset_classic": "Inset shadows will be using {0}"
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index 2dddfa04..ef7ec645 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -452,7 +452,7 @@ export const getCssShadow = (input, usesDropShadow) => {
     ]).join(' ')).join(', ')
 }
 
-const getCssShadowFilter = (input) => {
+export const getCssShadowFilter = (input) => {
   if (input.length === 0) {
     return 'none'
   }
-- 
cgit v1.2.3-70-g09d2


From a0c303efb6ea422289aff8c295d288a13b0699d0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 16 Sep 2024 00:03:40 +0300
Subject: fixed shadow preview, added more safeguards for spread on
 separateInset shadows

---
 changelog.d/better-shadow-control.fix              |  1 +
 src/components/color_input/color_input.vue         | 12 ++++++--
 src/components/select/select.vue                   | 23 +++++++++++----
 .../settings_modal/tabs/theme_tab/theme_tab.js     |  1 -
 src/components/shadow_control/shadow_control.js    | 31 +++++++++-----------
 src/components/shadow_control/shadow_control.scss  |  1 -
 src/components/shadow_control/shadow_control.vue   | 34 ++++++++++------------
 7 files changed, 56 insertions(+), 47 deletions(-)
 create mode 100644 changelog.d/better-shadow-control.fix

(limited to 'src/components/settings_modal')

diff --git a/changelog.d/better-shadow-control.fix b/changelog.d/better-shadow-control.fix
new file mode 100644
index 00000000..585ef6d2
--- /dev/null
+++ b/changelog.d/better-shadow-control.fix
@@ -0,0 +1 @@
+Updated shadow editor, hopefully fixed long-standing bugs, added ability to specify shadow's name.
diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue
index 6725fcda..b6e84629 100644
--- a/src/components/color_input/color_input.vue
+++ b/src/components/color_input/color_input.vue
@@ -15,7 +15,7 @@
       :model-value="present"
       :disabled="disabled"
       class="opt"
-      @update:modelValue="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
+      @update:modelValue="update(typeof modelValue === 'undefined' ? fallback : undefined)"
     />
     <div
       class="input color-input-field"
@@ -28,7 +28,7 @@
         type="text"
         :value="modelValue || fallback"
         :disabled="!present || disabled"
-        @input="$emit('update:modelValue', $event.target.value)"
+        @input="updateValue($event.target.value)"
       >
       <div
         v-if="validColor"
@@ -57,7 +57,7 @@
           :value="modelValue || fallback"
           :disabled="!present || disabled"
           :class="{ disabled: !present || disabled }"
-          @input="$emit('update:modelValue', $event.target.value)"
+          @input="updateValue($event.target.value)"
         >
       </label>
     </div>
@@ -66,6 +66,7 @@
 <script>
 import Checkbox from '../checkbox/checkbox.vue'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
+import { throttle } from 'lodash'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -131,6 +132,11 @@ export default {
     computedColor () {
       return this.modelValue && this.modelValue.startsWith('--')
     }
+  },
+  methods: {
+    updateValue: throttle(function (value) {
+      this.$emit('update:modelValue', value)
+    }, 100)
   }
 }
 </script>
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index 7494f7d3..39d3ca64 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -27,11 +27,6 @@
 label.Select {
   padding: 0;
 
-  &.disabled,
-  &:disabled {
-    background-color: var(--background);
-  }
-
   select {
     appearance: none;
     background: transparent;
@@ -52,7 +47,7 @@ label.Select {
       padding: 0.2em;
 
       option {
-        background: transparent;
+        background-color: transparent;
 
         &.-active {
           color: var(--selectionText);
@@ -62,6 +57,22 @@ label.Select {
     }
   }
 
+  &.disabled,
+  &:disabled {
+    background-color: var(--background);
+    opacity: 1; /* override browser */
+
+    select {
+      &[multiple],
+      &[size] {
+        option.-active {
+          color: var(--text);
+          background: transparent;
+        }
+      }
+    }
+  }
+
   .select-down-icon {
     position: absolute;
     top: 0;
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index a295e880..64de28bc 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -339,7 +339,6 @@ export default {
         return this.shadowsLocal[this.shadowSelected]
       },
       set (v) {
-        console.log('TT', v)
         this.shadowsLocal[this.shadowSelected] = v
       }
     },
diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
index 4d26a539..ab1df53c 100644
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@@ -4,8 +4,8 @@ import Select from 'src/components/select/select.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Popover from 'src/components/popover/popover.vue'
 import { getCssShadow, getCssShadowFilter } from '../../services/theme_data/theme_data.service.js'
-import { hex2rgb } from '../../services/color_convert/color_convert.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
+import { throttle } from 'lodash'
 import {
   faTimes,
   faChevronDown,
@@ -41,7 +41,7 @@ export default {
       lightGrid: false,
       selectedId: 0,
       // TODO there are some bugs regarding display of array (it's not getting updated when deleting for some reason)
-      cValue: (this.modelValue || this.fallback || []).map(toModel)
+      cValue: (this.modelValue ?? this.fallback ?? []).map(toModel)
     }
   },
   components: {
@@ -52,7 +52,7 @@ export default {
     Popover
   },
   beforeUpdate () {
-    this.cValue = (this.modelValue || this.fallback || []).map(toModel)
+    this.cValue = (this.modelValue ?? this.fallback ?? []).map(toModel)
   },
   computed: {
     selected () {
@@ -68,12 +68,6 @@ export default {
     shadowsAreNull () {
       return this.modelValue == null
     },
-    anyShadows () {
-      return this.cValue.length > 0
-    },
-    anyShadowsFallback () {
-      return this.fallback.length > 0
-    },
     currentFallback () {
       return this.fallback?.[this.selectedId]
     },
@@ -86,27 +80,28 @@ export default {
     usingFallback () {
       return this.modelValue == null
     },
-    rgb () {
-      return hex2rgb(this.selected.color)
-    },
     style () {
-      if (!this.ready) return {}
+      console.log(this.separateInset)
       if (this.separateInset) {
         return {
-          filter: getCssShadowFilter(this.fallback),
-          boxShadow: getCssShadow(this.fallback, true)
+          filter: getCssShadowFilter(this.cValue),
+          boxShadow: getCssShadow(this.cValue, true)
         }
       }
       return {
-        boxShadow: getCssShadow(this.fallback)
+        boxShadow: getCssShadow(this.cValue)
       }
     }
   },
   methods: {
-    updateProperty (prop, value) {
+    updateProperty: throttle(function (prop, value) {
+      console.log(prop, value)
       this.cValue[this.selectedId][prop] = value
+      if (prop === 'inset' && value === false && this.separateInset) {
+        this.cValue[this.selectedId].spread = 0
+      }
       this.$emit('update:modelValue', this.cValue)
-    },
+    }, 100),
     add () {
       this.cValue.push(toModel(this.selected))
       this.selectedId = Math.max(this.cValue.length - 1, 0)
diff --git a/src/components/shadow_control/shadow_control.scss b/src/components/shadow_control/shadow_control.scss
index d7bc15c4..19009a3d 100644
--- a/src/components/shadow_control/shadow_control.scss
+++ b/src/components/shadow_control/shadow_control.scss
@@ -22,7 +22,6 @@
       display: grid;
       grid-auto-columns: 1fr;
       grid-auto-flow: column;
-      grid-gap: 0.125em;
       margin-top: 0.25em;
 
       .button-default {
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 8e2133ee..6a7829c5 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -56,7 +56,7 @@
         @input="e => updateProperty('x', e.target.value)"
       >
       <Checkbox
-        id="inset"
+        id="lightGrid"
         v-model="lightGrid"
         :disabled="!present"
         name="lightGrid"
@@ -83,7 +83,7 @@
         </option>
       </Select>
       <div
-        class="id-control arrange-buttons"
+        class="id-control btn-group arrange-buttons"
       >
         <button
           class="btn button-default"
@@ -132,12 +132,11 @@
     </div>
     <div class="shadow-tweak">
       <div
-        :disabled="!present"
         :class="{ disabled: !present }"
         class="name-control style-control"
       >
         <label
-          for="spread"
+          for="name"
           class="label"
           :class="{ faint: !present }"
         >
@@ -163,7 +162,7 @@
           :disabled="!present"
           name="inset"
           class="input-inset input-boolean"
-          @input="e => updateProperty('inset', e.target.value)"
+          @input="e => updateProperty('inset', e.target.checked)"
         >
           <template #before>
             {{ $t('settings.style.shadows.inset') }}
@@ -176,7 +175,7 @@
         class="blur-control style-control"
       >
         <label
-          for="spread"
+          for="blur"
           class="label"
           :class="{ faint: !present }"
         >
@@ -205,22 +204,21 @@
         >
       </div>
       <div
-        :disabled="!present"
         class="spread-control style-control"
-        :class="{ disabled: !present }"
+        :class="{ disabled: !present || (separateInset && !selected?.inset) }"
       >
         <label
           for="spread"
           class="label"
-          :class="{ faint: !present }"
+          :class="{ faint: !present || (separateInset && !selected?.inset) }"
         >
           {{ $t('settings.style.shadows.spread') }}
         </label>
         <input
           id="spread"
           :value="selected?.spread"
-          :disabled="!present"
-          :class="{ disabled: !present }"
+          :disabled="!present || (separateInset && !selected?.inset)"
+          :class="{ disabled: !present || (separateInset && !selected?.inset) }"
           name="spread"
           class="input input-range"
           type="range"
@@ -230,26 +228,26 @@
         >
         <input
           :value="selected?.spread"
-          :disabled="!present"
-          :class="{ disabled: !present }"
+          :disabled="{ disabled: !present || (separateInset && !selected?.inset) }"
+          :class="{ disabled: !present || (separateInset && !selected?.inset) }"
           class="input input-number"
           type="number"
           @input="e => updateProperty('spread', e.target.value)"
         >
       </div>
       <ColorInput
-        :modelValue="selected?.color"
+        :model-value="selected?.color"
         :disabled="!present"
         :label="$t('settings.style.common.color')"
         :fallback="currentFallback?.color"
         :show-optional-tickbox="false"
         name="shadow"
-        @update:modelValue="e => updateProperty('color', e.target.value)"
+        @update:modelValue="e => updateProperty('color', e)"
       />
       <OpacityInput
-        :modelValue="selected?.alpha"
+        :model-value="selected?.alpha"
         :disabled="!present"
-        @update:modelValue="e => updateProperty('alpha', e.target.value)"
+        @update:modelValue="e => updateProperty('alpha', e)"
       />
       <i18n-t
         scope="global"
@@ -260,8 +258,8 @@
         <code>--variable,mod</code>
       </i18n-t>
       <Popover
-        trigger="hover"
         v-if="separateInset"
+        trigger="hover"
       >
         <template #trigger>
           <div
-- 
cgit v1.2.3-70-g09d2