commit: a0c303efb6ea422289aff8c295d288a13b0699d0
parent aa7a3361833f4c88ec685c4a92ff7727ed7249a7
Author: Henry Jameson <me@hjkos.com>
Date: Mon, 16 Sep 2024 00:03:40 +0300
fixed shadow preview, added more safeguards for spread on separateInset shadows
Diffstat:
7 files changed, 56 insertions(+), 47 deletions(-)
diff --git a/changelog.d/better-shadow-control.fix 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
