From a0c303efb6ea422289aff8c295d288a13b0699d0 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 16 Sep 2024 00:03:40 +0300 Subject: [PATCH] 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 +++++++++---- .../tabs/theme_tab/theme_tab.js | 1 - .../shadow_control/shadow_control.js | 31 +++++++---------- .../shadow_control/shadow_control.scss | 1 - .../shadow_control/shadow_control.vue | 34 +++++++++---------- 7 files changed, 56 insertions(+), 47 deletions(-) create mode 100644 changelog.d/better-shadow-control.fix 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)" />
@@ -66,6 +66,7 @@ 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)" >