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

fixed shadow preview, added more safeguards for spread on separateInset shadows

Browse source
This commit is contained in:
Henry Jameson 2024-09-16 00:03:40 +03:00
commit a0c303efb6
7 changed files with 56 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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