Massively upgraded shadow control, added sorting by specificity in themes3, added/fixed disabled inputs
This commit is contained in:
Henry Jameson
parent
a586b9f6d2
commit
a044dc377e
11 changed files with 375 additions and 208 deletions
|
|
@ -1,81 +1,92 @@
|
|||
<template>
|
||||
<div
|
||||
class="shadow-control"
|
||||
class="label shadow-control"
|
||||
:class="{ disabled: !present }"
|
||||
>
|
||||
<div class="shadow-preview-container">
|
||||
<div
|
||||
:disabled="!present"
|
||||
class="y-shift-control"
|
||||
<div class="shadow-preview">
|
||||
<label
|
||||
class="header"
|
||||
:class="{ faint: !present }"
|
||||
>
|
||||
{{ $t('settings.style.shadows.offset') }}
|
||||
</label>
|
||||
<input
|
||||
v-model="selected.y"
|
||||
:disabled="!present"
|
||||
:class="{ disabled: !present }"
|
||||
class="input input-number y-shift-number"
|
||||
type="number"
|
||||
>
|
||||
<input
|
||||
v-model="selected.y"
|
||||
:disabled="!present"
|
||||
:class="{ disabled: !present }"
|
||||
class="input input-range y-shift-slider"
|
||||
type="range"
|
||||
max="20"
|
||||
min="-20"
|
||||
>
|
||||
<div
|
||||
class="preview-window"
|
||||
:class="{ disabled: !present, '-light-grid': lightGrid }"
|
||||
>
|
||||
<input
|
||||
v-model="selected.y"
|
||||
:disabled="!present"
|
||||
class="input input-number"
|
||||
type="number"
|
||||
>
|
||||
<div class="wrap">
|
||||
<input
|
||||
v-model="selected.y"
|
||||
:disabled="!present"
|
||||
class="input input-range"
|
||||
type="range"
|
||||
max="20"
|
||||
min="-20"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="preview-window">
|
||||
<div
|
||||
class="preview-block"
|
||||
:style="style"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
<input
|
||||
v-model="selected.x"
|
||||
:disabled="!present"
|
||||
class="x-shift-control"
|
||||
:class="{ disabled: !present }"
|
||||
class="input input-number x-shift-number"
|
||||
type="number"
|
||||
>
|
||||
<input
|
||||
v-model="selected.x"
|
||||
:disabled="!present"
|
||||
class="input input-number"
|
||||
type="number"
|
||||
>
|
||||
<div class="wrap">
|
||||
<input
|
||||
v-model="selected.x"
|
||||
:disabled="!present"
|
||||
class="input input-range"
|
||||
type="range"
|
||||
max="20"
|
||||
min="-20"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
v-model="selected.x"
|
||||
:disabled="!present"
|
||||
:class="{ disabled: !present }"
|
||||
class="input input-range x-shift-slider"
|
||||
type="range"
|
||||
max="20"
|
||||
min="-20"
|
||||
>
|
||||
<Checkbox
|
||||
id="inset"
|
||||
v-model="lightGrid"
|
||||
:disabled="!present"
|
||||
name="lightGrid"
|
||||
class="input-light-grid"
|
||||
>
|
||||
{{ $t('settings.style.shadows.light_grid') }}
|
||||
</Checkbox>
|
||||
|
||||
<div class="shadow-tweak">
|
||||
</div>
|
||||
<div class="shadow-switcher">
|
||||
<Select
|
||||
class="shadow-list"
|
||||
id="shadow-list"
|
||||
v-model="selectedId"
|
||||
size="10"
|
||||
:disabled="!ready || usingFallback"
|
||||
>
|
||||
<option
|
||||
v-for="(shadow, index) in cValue"
|
||||
:value="index"
|
||||
:class="{ '-active': index === Number(selectedId) }"
|
||||
:key="index"
|
||||
>
|
||||
{{ shadow.name ?? $t('settings.style.shadows.shadow_id', { value: index }) }}
|
||||
</option>
|
||||
</Select>
|
||||
<div
|
||||
:disabled="usingFallback"
|
||||
class="id-control style-control"
|
||||
class="id-control arrange-buttons"
|
||||
>
|
||||
<Select
|
||||
id="shadow-switcher"
|
||||
v-model="selectedId"
|
||||
class="shadow-switcher"
|
||||
:disabled="!ready || usingFallback"
|
||||
>
|
||||
<option
|
||||
v-for="(shadow, index) in cValue"
|
||||
:key="index"
|
||||
:value="index"
|
||||
>
|
||||
{{ $t('settings.style.shadows.shadow_id', { value: index }) }}
|
||||
</option>
|
||||
</Select>
|
||||
<button
|
||||
class="btn button-default"
|
||||
:disabled="!ready || !present"
|
||||
:class="{ disabled: !present }"
|
||||
@click="del"
|
||||
>
|
||||
<FAIcon
|
||||
|
|
@ -86,6 +97,7 @@
|
|||
<button
|
||||
class="btn button-default"
|
||||
:disabled="!moveUpValid"
|
||||
:class="{ disabled: !present }"
|
||||
@click="moveUp"
|
||||
>
|
||||
<FAIcon
|
||||
|
|
@ -105,7 +117,7 @@
|
|||
</button>
|
||||
<button
|
||||
class="btn button-default"
|
||||
:disabled="usingFallback"
|
||||
:disabled="usingFallback || !present"
|
||||
@click="add"
|
||||
>
|
||||
<FAIcon
|
||||
|
|
@ -114,37 +126,54 @@
|
|||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shadow-tweak">
|
||||
<div
|
||||
:disabled="!present"
|
||||
:class="{ disabled: !present }"
|
||||
class="name-control style-control"
|
||||
>
|
||||
<label
|
||||
for="spread"
|
||||
class="label"
|
||||
:class="{ faint: !present }"
|
||||
>
|
||||
{{ $t('settings.style.shadows.name') }}
|
||||
</label>
|
||||
<input
|
||||
id="name"
|
||||
v-model="selected.name"
|
||||
:disabled="!present"
|
||||
:class="{ disabled: !present }"
|
||||
name="name"
|
||||
class="input input-string"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
:disabled="!present"
|
||||
class="inset-control style-control"
|
||||
>
|
||||
<label
|
||||
for="inset"
|
||||
class="label"
|
||||
>
|
||||
{{ $t('settings.style.shadows.inset') }}
|
||||
</label>
|
||||
<input
|
||||
<Checkbox
|
||||
id="inset"
|
||||
v-model="selected.inset"
|
||||
:disabled="!present"
|
||||
name="inset"
|
||||
class="input -checkbox input-inset visible-for-screenreader-only"
|
||||
type="checkbox"
|
||||
class="input-inset input-boolean"
|
||||
>
|
||||
<label
|
||||
class="checkbox-label"
|
||||
for="inset"
|
||||
:aria-hidden="true"
|
||||
/>
|
||||
<template #before>
|
||||
{{ $t('settings.style.shadows.inset') }}
|
||||
</template>
|
||||
</Checkbox>
|
||||
</div>
|
||||
<div
|
||||
:disabled="!present"
|
||||
:class="{ disabled: !present }"
|
||||
class="blur-control style-control"
|
||||
>
|
||||
<label
|
||||
for="spread"
|
||||
class="label"
|
||||
:class="{ faint: !present }"
|
||||
>
|
||||
{{ $t('settings.style.shadows.blur') }}
|
||||
</label>
|
||||
|
|
@ -152,6 +181,7 @@
|
|||
id="blur"
|
||||
v-model="selected.blur"
|
||||
:disabled="!present"
|
||||
:class="{ disabled: !present }"
|
||||
name="blur"
|
||||
class="input input-range"
|
||||
type="range"
|
||||
|
|
@ -161,6 +191,7 @@
|
|||
<input
|
||||
v-model="selected.blur"
|
||||
:disabled="!present"
|
||||
:class="{ disabled: !present }"
|
||||
class="input input-number"
|
||||
type="number"
|
||||
min="0"
|
||||
|
|
@ -169,10 +200,12 @@
|
|||
<div
|
||||
:disabled="!present"
|
||||
class="spread-control style-control"
|
||||
:class="{ disabled: !present }"
|
||||
>
|
||||
<label
|
||||
for="spread"
|
||||
class="label"
|
||||
:class="{ faint: !present }"
|
||||
>
|
||||
{{ $t('settings.style.shadows.spread') }}
|
||||
</label>
|
||||
|
|
@ -180,6 +213,7 @@
|
|||
id="spread"
|
||||
v-model="selected.spread"
|
||||
:disabled="!present"
|
||||
:class="{ disabled: !present }"
|
||||
name="spread"
|
||||
class="input input-range"
|
||||
type="range"
|
||||
|
|
@ -189,6 +223,7 @@
|
|||
<input
|
||||
v-model="selected.spread"
|
||||
:disabled="!present"
|
||||
:class="{ disabled: !present }"
|
||||
class="input input-number"
|
||||
type="number"
|
||||
>
|
||||
|
|
@ -208,6 +243,7 @@
|
|||
<i18n-t
|
||||
scope="global"
|
||||
keypath="settings.style.shadows.hintV3"
|
||||
:class="{ faint: !present }"
|
||||
tag="p"
|
||||
>
|
||||
<code>--variable,mod</code>
|
||||
|
|
@ -218,109 +254,4 @@
|
|||
|
||||
<script src="./shadow_control.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
.shadow-control {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-bottom: 1em;
|
||||
|
||||
.shadow-preview-container,
|
||||
.shadow-tweak {
|
||||
margin: 5px 6px 0 0;
|
||||
}
|
||||
|
||||
.shadow-preview-container {
|
||||
flex: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
input[type="number"] {
|
||||
width: 5em;
|
||||
min-width: 2em;
|
||||
}
|
||||
|
||||
.x-shift-control,
|
||||
.y-shift-control {
|
||||
display: flex;
|
||||
flex: 0;
|
||||
|
||||
&[disabled="disabled"] * {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.x-shift-control {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.x-shift-control .wrap,
|
||||
input[type="range"] {
|
||||
margin: 0;
|
||||
width: 15em;
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
.y-shift-control {
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
|
||||
.wrap {
|
||||
width: 2em;
|
||||
height: 15em;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
transform-origin: 1em 1em;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.preview-window {
|
||||
flex: 1;
|
||||
background-color: #999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-image:
|
||||
linear-gradient(45deg, #666 25%, transparent 25%),
|
||||
linear-gradient(-45deg, #666 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, #666 75%),
|
||||
linear-gradient(-45deg, transparent 75%, #666 75%);
|
||||
background-size: 20px 20px;
|
||||
background-position: 0 0, 0 10px, 10px -10px, -10px 0;
|
||||
border-radius: var(--roundness);
|
||||
|
||||
.preview-block {
|
||||
width: 33%;
|
||||
height: 33%;
|
||||
border-radius: var(--roundness);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shadow-tweak {
|
||||
flex: 1;
|
||||
min-width: 280px;
|
||||
|
||||
.id-control {
|
||||
align-items: stretch;
|
||||
|
||||
.shadow-switcher {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.shadow-switcher,
|
||||
.btn {
|
||||
min-width: 1px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0 0.4em;
|
||||
margin: 0 0.1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style src="./shadow_control.scss" lang="scss"></style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue