Merge branch 'shadow-control-2.0' into themes3-grand-finale-maybe
This commit is contained in:
commit
e541e2c682
|
@ -34,7 +34,7 @@ const toModel = (object = {}) => ({
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: [
|
props: [
|
||||||
'modelValue', 'fallback', 'separateInset', 'noPreview'
|
'modelValue', 'fallback', 'separateInset', 'noPreview', 'disabled'
|
||||||
],
|
],
|
||||||
emits: ['update:modelValue'],
|
emits: ['update:modelValue'],
|
||||||
data () {
|
data () {
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="label shadow-control"
|
class="label shadow-control"
|
||||||
:class="{ disabled: !present, '-no-preview': noPreview }"
|
:class="{ disabled: disabled || !present, '-no-preview': noPreview }"
|
||||||
>
|
>
|
||||||
<ComponentPreview
|
<ComponentPreview
|
||||||
v-if="!noPreview"
|
v-if="!noPreview"
|
||||||
|
@ -9,7 +9,7 @@
|
||||||
:shadow-control="true"
|
:shadow-control="true"
|
||||||
:shadow="selected"
|
:shadow="selected"
|
||||||
:preview-style="style"
|
:preview-style="style"
|
||||||
:disabled="!present"
|
:disabled="disabled || !present"
|
||||||
@update:shadow="({ axis, value }) => updateProperty(axis, value)"
|
@update:shadow="({ axis, value }) => updateProperty(axis, value)"
|
||||||
/>
|
/>
|
||||||
<div class="shadow-switcher">
|
<div class="shadow-switcher">
|
||||||
|
@ -34,7 +34,7 @@
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
class="btn button-default"
|
class="btn button-default"
|
||||||
:disabled="shadowsAreNull"
|
:disabled="disabled || shadowsAreNull"
|
||||||
@click="add"
|
@click="add"
|
||||||
>
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
|
@ -44,8 +44,8 @@
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="btn button-default"
|
class="btn button-default"
|
||||||
:disabled="!moveUpValid"
|
:disabled="disabled || !moveUpValid"
|
||||||
:class="{ disabled: !moveUpValid }"
|
:class="{ disabled: disabled || !moveUpValid }"
|
||||||
@click="moveUp"
|
@click="moveUp"
|
||||||
>
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
|
@ -55,8 +55,8 @@
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="btn button-default"
|
class="btn button-default"
|
||||||
:disabled="!moveDnValid"
|
:disabled="disabled || !moveDnValid"
|
||||||
:class="{ disabled: !moveDnValid }"
|
:class="{ disabled: disabled || !moveDnValid }"
|
||||||
@click="moveDn"
|
@click="moveDn"
|
||||||
>
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
|
@ -66,8 +66,8 @@
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="btn button-default"
|
class="btn button-default"
|
||||||
:disabled="!present"
|
:disabled="disabled || !present"
|
||||||
:class="{ disabled: !present }"
|
:class="{ disabled: disabled || !present }"
|
||||||
@click="del"
|
@click="del"
|
||||||
>
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
|
@ -79,34 +79,34 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="shadow-tweak">
|
<div class="shadow-tweak">
|
||||||
<div
|
<div
|
||||||
:class="{ disabled: !present }"
|
:class="{ disabled: disabled || !present }"
|
||||||
class="name-control style-control"
|
class="name-control style-control"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
for="name"
|
for="name"
|
||||||
class="label"
|
class="label"
|
||||||
:class="{ faint: !present }"
|
:class="{ faint: disabled || !present }"
|
||||||
>
|
>
|
||||||
{{ $t('settings.style.shadows.name') }}
|
{{ $t('settings.style.shadows.name') }}
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
id="name"
|
id="name"
|
||||||
:value="selected?.name"
|
:value="selected?.name"
|
||||||
:disabled="!present"
|
:disabled="disabled || !present"
|
||||||
:class="{ disabled: !present }"
|
:class="{ disabled: disabled || !present }"
|
||||||
name="name"
|
name="name"
|
||||||
class="input input-string"
|
class="input input-string"
|
||||||
@input="e => updateProperty('name', e.target.value)"
|
@input="e => updateProperty('name', e.target.value)"
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
:disabled="!present"
|
:disabled="disabled || !present"
|
||||||
class="inset-control style-control"
|
class="inset-control style-control"
|
||||||
>
|
>
|
||||||
<Checkbox
|
<Checkbox
|
||||||
id="inset"
|
id="inset"
|
||||||
:value="selected?.inset"
|
:value="selected?.inset"
|
||||||
:disabled="!present"
|
:disabled="disabled || !present"
|
||||||
name="inset"
|
name="inset"
|
||||||
class="input-inset input-boolean"
|
class="input-inset input-boolean"
|
||||||
@input="e => updateProperty('inset', e.target.checked)"
|
@input="e => updateProperty('inset', e.target.checked)"
|
||||||
|
@ -117,22 +117,22 @@
|
||||||
</Checkbox>
|
</Checkbox>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
:disabled="!present"
|
:disabled="disabled || !present"
|
||||||
:class="{ disabled: !present }"
|
:class="{ disabled: disabled || !present }"
|
||||||
class="blur-control style-control"
|
class="blur-control style-control"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
for="blur"
|
for="blur"
|
||||||
class="label"
|
class="label"
|
||||||
:class="{ faint: !present }"
|
:class="{ faint: disabled || !present }"
|
||||||
>
|
>
|
||||||
{{ $t('settings.style.shadows.blur') }}
|
{{ $t('settings.style.shadows.blur') }}
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
id="blur"
|
id="blur"
|
||||||
:value="selected?.blur"
|
:value="selected?.blur"
|
||||||
:disabled="!present"
|
:disabled="disabled || !present"
|
||||||
:class="{ disabled: !present }"
|
:class="{ disabled: disabled || !present }"
|
||||||
name="blur"
|
name="blur"
|
||||||
class="input input-range"
|
class="input input-range"
|
||||||
type="range"
|
type="range"
|
||||||
|
@ -142,9 +142,9 @@
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
:value="selected?.blur"
|
:value="selected?.blur"
|
||||||
:disabled="!present"
|
|
||||||
:class="{ disabled: !present }"
|
|
||||||
class="input input-number -small"
|
class="input input-number -small"
|
||||||
|
:disabled="disabled || !present"
|
||||||
|
:class="{ disabled: disabled || !present }"
|
||||||
type="number"
|
type="number"
|
||||||
min="0"
|
min="0"
|
||||||
@input="e => updateProperty('blur', e.target.value)"
|
@input="e => updateProperty('blur', e.target.value)"
|
||||||
|
@ -152,20 +152,20 @@
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="spread-control style-control"
|
class="spread-control style-control"
|
||||||
:class="{ disabled: !present || (separateInset && !selected?.inset) }"
|
:class="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
for="spread"
|
for="spread"
|
||||||
class="label"
|
class="label"
|
||||||
:class="{ faint: !present || (separateInset && !selected?.inset) }"
|
:class="{ faint: disabled || !present || (separateInset && !selected?.inset) }"
|
||||||
>
|
>
|
||||||
{{ $t('settings.style.shadows.spread') }}
|
{{ $t('settings.style.shadows.spread') }}
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
id="spread"
|
id="spread"
|
||||||
:value="selected?.spread"
|
:value="selected?.spread"
|
||||||
:disabled="!present || (separateInset && !selected?.inset)"
|
:disabled="disabled || !present || (separateInset && !selected?.inset)"
|
||||||
:class="{ disabled: !present || (separateInset && !selected?.inset) }"
|
:class="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
|
||||||
name="spread"
|
name="spread"
|
||||||
class="input input-number -small"
|
class="input input-number -small"
|
||||||
type="range"
|
type="range"
|
||||||
|
@ -175,8 +175,8 @@
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
:value="selected?.spread"
|
:value="selected?.spread"
|
||||||
:disabled="{ disabled: !present || (separateInset && !selected?.inset) }"
|
:disabled="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
|
||||||
:class="{ disabled: !present || (separateInset && !selected?.inset) }"
|
:class="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
|
||||||
class="input input-number -small"
|
class="input input-number -small"
|
||||||
type="number"
|
type="number"
|
||||||
@input="e => updateProperty('spread', e.target.value)"
|
@input="e => updateProperty('spread', e.target.value)"
|
||||||
|
@ -184,7 +184,7 @@
|
||||||
</div>
|
</div>
|
||||||
<ColorInput
|
<ColorInput
|
||||||
:model-value="selected?.color"
|
:model-value="selected?.color"
|
||||||
:disabled="!present"
|
:disabled="disabled || !present"
|
||||||
:label="$t('settings.style.common.color')"
|
:label="$t('settings.style.common.color')"
|
||||||
:fallback="currentFallback?.color"
|
:fallback="currentFallback?.color"
|
||||||
:show-optional-tickbox="false"
|
:show-optional-tickbox="false"
|
||||||
|
@ -193,13 +193,13 @@
|
||||||
/>
|
/>
|
||||||
<OpacityInput
|
<OpacityInput
|
||||||
:model-value="selected?.alpha"
|
:model-value="selected?.alpha"
|
||||||
:disabled="!present"
|
:disabled="disabled || !present"
|
||||||
@update:modelValue="e => updateProperty('alpha', e)"
|
@update:modelValue="e => updateProperty('alpha', e)"
|
||||||
/>
|
/>
|
||||||
<i18n-t
|
<i18n-t
|
||||||
scope="global"
|
scope="global"
|
||||||
keypath="settings.style.shadows.hintV3"
|
keypath="settings.style.shadows.hintV3"
|
||||||
:class="{ faint: !present }"
|
:class="{ faint: disabled || !present }"
|
||||||
tag="p"
|
tag="p"
|
||||||
>
|
>
|
||||||
<code>--variable,mod</code>
|
<code>--variable,mod</code>
|
||||||
|
|
Loading…
Reference in a new issue