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

separate shadow preview into its own component, needed for themes3 editor

Browse source
This commit is contained in:
Henry Jameson 2024-09-24 19:19:53 +03:00
commit 735433beb4
4 changed files with 205 additions and 163 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,68 +3,13 @@
class="label shadow-control"
:class="{ disabled: !present }"
>
<div class="shadow-preview">
<label
class="header"
:class="{ faint: !present }"
>
{{ $t('settings.style.shadows.offset') }}
</label>
<input
:value="selected?.y"
:disabled="!present"
:class="{ disabled: !present }"
class="input input-number y-shift-number"
type="number"
@input="e => updateProperty('y', e.target.value)"
>
<input
:value="selected?.y"
:disabled="!present"
:class="{ disabled: !present }"
class="input input-range y-shift-slider"
type="range"
max="20"
min="-20"
@input="e => updateProperty('y', e.target.value)"
>
<div
class="preview-window"
:class="{ disabled: !present, '-light-grid': lightGrid }"
>
<div
class="preview-block"
:style="style"
/>
</div>
<input
:value="selected?.x"
:disabled="!present"
:class="{ disabled: !present }"
class="input input-number x-shift-number"
type="number"
@input="e => updateProperty('x', e.target.value)"
>
<input
:value="selected?.x"
:disabled="!present"
:class="{ disabled: !present }"
class="input input-range x-shift-slider"
type="range"
max="20"
min="-20"
@input="e => updateProperty('x', e.target.value)"
>
<Checkbox
id="lightGrid"
v-model="lightGrid"
:disabled="!present"
name="lightGrid"
class="input-light-grid"
>
{{ $t('settings.style.shadows.light_grid') }}
</Checkbox>
</div>
<ComponentPreview
class="shadow-preview"
:shadow-control="true"
:shadow="selected"
:preview-style="style"
:disabled="!present"
/>
<div class="shadow-switcher">
<Select
id="shadow-list"