qugalet/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

properly support "disabled" state of contoller

Browse source
This commit is contained in:
Henry Jameson 2024-09-28 20:20:51 +03:00
parent 6fc929a0a0
commit 45f6e003c4
2 changed files with 36 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/shadow_control/shadow_control.js
View file

@ -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 () {

69
src/components/shadow_control/shadow_control.vue
View file

@ -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="input input-number -small"
:class="{ disabled: !present }" :disabled="disabled || !present"
class="input input-number" :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,22 +152,22 @@
</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-range" class="input input-number -small"
type="range" type="range"
max="20" max="20"
min="-20" min="-20"
@ -175,16 +175,17 @@
> >
<input <input
:value="selected?.spread" :value="selected?.spread"
:disabled="{ disabled: !present || (separateInset && !selected?.inset) }" class="input input-number -small"
:class="{ disabled: !present || (separateInset && !selected?.inset) }" :disabled="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
class="input input-number" :class="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
class="input input-number -small"
type="number" type="number"
@input="e => updateProperty('spread', e.target.value)" @input="e => updateProperty('spread', e.target.value)"
> >
</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 +194,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>