({
})
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', 'noPreview', 'disabled'
],
- emits: ['update:modelValue'],
+ emits: ['update:modelValue', 'subShadowSelected'],
data () {
return {
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: {
ColorInput,
OpacityInput,
- Select
+ Select,
+ Checkbox,
+ Popover,
+ ComponentPreview
+ },
+ beforeUpdate () {
+ 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
+ },
+ currentFallback () {
+ return this.fallback?.[this.selectedId]
+ },
+ moveUpValid () {
+ return this.selectedId > 0
+ },
+ moveDnValid () {
+ return this.selectedId < this.cValue.length - 1
+ },
+ usingFallback () {
+ return this.modelValue == null
+ },
+ style () {
+ if (this.separateInset) {
+ return {
+ filter: getCssShadowFilter(this.cValue),
+ boxShadow: getCssShadow(this.cValue, true)
+ }
+ }
+ return {
+ boxShadow: getCssShadow(this.cValue)
+ }
+ }
+ },
+ watch: {
+ selected (value) {
+ this.$emit('subShadowSelected', this.selectedId)
+ }
},
methods: {
+ updateProperty: throttle(function (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 = this.cValue.length - 1
+ 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
- }
- },
- beforeUpdate () {
- this.cValue = this.modelValue || this.fallback
- },
- computed: {
- 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({})
- }
- },
- moveUpValid () {
- return this.ready && 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
- },
- usingFallback () {
- return typeof this.modelValue === 'undefined'
- },
- rgb () {
- return hex2rgb(this.selected.color)
- },
- style () {
- return this.ready
- ? {
- boxShadow: getCssShadow(this.fallback)
- }
- : {}
+ this.$emit('update:modelValue', this.cValue)
}
}
}
diff --git a/src/components/shadow_control/shadow_control.scss b/src/components/shadow_control/shadow_control.scss
new file mode 100644
index 00000000..dd049023
--- /dev/null
+++ b/src/components/shadow_control/shadow_control.scss
@@ -0,0 +1,105 @@
+.settings-modal .settings-modal-panel .shadow-control {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: stretch;
+ grid-gap: 0.25em;
+ margin-bottom: 1em;
+
+ .shadow-switcher {
+ order: 1;
+ flex: 1 0 6em;
+ min-width: 6em;
+ margin-right: 0.125em;
+ display: flex;
+ flex-direction: column;
+
+ .shadow-list {
+ flex: 1 0 auto;
+ }
+
+ .arrange-buttons {
+ flex: 0 0 auto;
+ display: grid;
+ grid-auto-columns: 1fr;
+ grid-auto-flow: column;
+ margin-top: 0.25em;
+
+ .button-default {
+ margin: 0;
+ padding: 0;
+ }
+ }
+ }
+
+ .shadow-tweak {
+ order: 3;
+ flex: 2 0 10em;
+ min-width: 10em;
+ margin-left: 0.125em;
+ margin-right: 0.125em;
+
+ /* hack */
+ .input-boolean {
+ flex: 1;
+ display: flex;
+
+ .label {
+ flex: 1;
+ }
+ }
+
+ .input-string {
+ flex: 1 0 5em;
+ }
+
+ .id-control {
+ align-items: stretch;
+
+ .shadow-switcher,
+ .btn {
+ min-width: 1px;
+ margin-right: 5px;
+ }
+
+ .btn {
+ padding: 0 0.4em;
+ margin: 0 0.1em;
+ }
+ }
+ }
+
+ &.-no-preview {
+ .shadow-tweak {
+ order: 0;
+ flex: 2 0 8em;
+ max-width: 100%;
+ }
+
+ .input-range {
+ min-width: 5em;
+ }
+ }
+
+ .inset-alert {
+ padding: 0.25em 0.5em;
+ }
+
+ &.disabled {
+ .inset-alert {
+ opacity: 0.2;
+ }
+ }
+
+ .shadow-preview {
+ order: 2;
+ flex: 3 3 15em;
+ min-width: 10em;
+ margin-left: 0.125em;
+ align-self: start;
+ }
+}
+
+.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 c3b956cd..e1d20191 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -1,91 +1,51 @@
-
-
+
-
+ {{ shadow?.name ?? $t('settings.style.shadows.shadow_id', { value: index }) }}
+
+
-
-
-
-
-
+
+
-
+
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 9e17a81f..304a82cb 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -874,6 +874,9 @@
"component": "Component",
"override": "Override",
"shadow_id": "Shadow #{value}",
+ "offset": "Shadow offset",
+ "light_grid": "Use light checkerboard",
+ "name": "Name",
"blur": "Blur",
"spread": "Spread",
"inset": "Inset",
@@ -881,6 +884,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'
}
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 39c8b74f..3c2f8a63 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -182,7 +182,7 @@ export const init = ({
const rulesetUnsorted = [
...Object.values(components)
- .map(c => (c.defaultRules || []).map(r => ({ component: c.name, ...r, source: 'Built-in' })))
+ .map(c => (c.defaultRules || []).map(r => ({ source: 'Built-in', component: c.name, ...r })))
.reduce((acc, arr) => [...acc, ...arr], []),
...inputRuleset
].map(rule => {
@@ -198,18 +198,33 @@ export const init = ({
const ruleset = rulesetUnsorted
.map((data, index) => ({ data, index }))
- .sort(({ data: a, index: ai }, { data: b, index: bi }) => {
+ .toSorted(({ data: a, index: ai }, { data: b, index: bi }) => {
const parentsA = unroll(a).length
const parentsB = unroll(b).length
- if (parentsA === parentsB) {
- if (a.component === 'Text') return -1
- if (b.component === 'Text') return 1
+ let aScore = 0
+ let bScore = 0
+
+ aScore += parentsA * 1000
+ bScore += parentsB * 1000
+
+ aScore += a.variant !== 'normal' ? 100 : 0
+ bScore += b.variant !== 'normal' ? 100 : 0
+
+ aScore += a.state.filter(x => x !== 'normal').length * 1000
+ bScore += b.state.filter(x => x !== 'normal').length * 1000
+
+ aScore += a.component === 'Text' ? 1 : 0
+ bScore += b.component === 'Text' ? 1 : 0
+
+ // Debug
+ a.specifityScore = aScore
+ b.specifityScore = bScore
+
+ if (aScore === bScore) {
return ai - bi
}
- if (parentsA === 0 && parentsB !== 0) return -1
- if (parentsB === 0 && parentsA !== 0) return 1
- return parentsA - parentsB
+ return aScore - bScore
})
.map(({ data }) => data)
@@ -235,7 +250,10 @@ export const init = ({
// Inheriting all of the applicable rules
const existingRules = ruleset.filter(findRules(combination))
- const computedDirectives = existingRules.map(r => r.directives).reduce((acc, directives) => ({ ...acc, ...directives }), {})
+ const computedDirectives =
+ existingRules
+ .map(r => r.directives)
+ .reduce((acc, directives) => ({ ...acc, ...directives }), {})
const computedRule = {
...combination,
directives: computedDirectives