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,6 +1,7 @@
|
|||
import ColorInput from '../color_input/color_input.vue'
|
||||
import OpacityInput from '../opacity_input/opacity_input.vue'
|
||||
import Select from '../select/select.vue'
|
||||
import Checkbox from '../checkbox/checkbox.vue'
|
||||
import { getCssShadow } from '../../services/theme_data/theme_data.service.js'
|
||||
import { hex2rgb } from '../../services/color_convert/color_convert.js'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
|
|
@ -40,6 +41,7 @@ export default {
|
|||
emits: ['update:modelValue'],
|
||||
data () {
|
||||
return {
|
||||
lightGrid: false,
|
||||
selectedId: 0,
|
||||
// TODO there are some bugs regarding display of array (it's not getting updated when deleting for some reason)
|
||||
cValue: (this.modelValue || this.fallback || []).map(toModel)
|
||||
|
|
@ -48,7 +50,8 @@ export default {
|
|||
components: {
|
||||
ColorInput,
|
||||
OpacityInput,
|
||||
Select
|
||||
Select,
|
||||
Checkbox
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
|
|
|
|||
178
src/components/shadow_control/shadow_control.scss
Normal file
178
src/components/shadow_control/shadow_control.scss
Normal file
|
|
@ -0,0 +1,178 @@
|
|||
.settings-modal .settings-modal-panel .shadow-control {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: stretch;
|
||||
grid-gap: 0.25em;
|
||||
margin-bottom: 1em;
|
||||
|
||||
.shadow-switcher {
|
||||
order: 1;
|
||||
flex: 1 0 6em;
|
||||
min-width: 6em;
|
||||
margin-right: 0.125em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.shadow-list {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
.arrange-buttons {
|
||||
flex: 0 0 auto;
|
||||
display: grid;
|
||||
grid-auto-columns: 1fr;
|
||||
grid-auto-flow: column;
|
||||
grid-gap: 0.125em;
|
||||
margin-top: 0.25em;
|
||||
|
||||
.button-default {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shadow-tweak {
|
||||
order: 3;
|
||||
flex: 2 0 10em;
|
||||
min-width: 10em;
|
||||
margin-left: 0.125em;
|
||||
margin-right: 0.125em;
|
||||
|
||||
/* hack */
|
||||
.input-boolean {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
.label {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.input-string {
|
||||
flex: 1 0 5em;
|
||||
}
|
||||
|
||||
.id-control {
|
||||
align-items: stretch;
|
||||
|
||||
.shadow-switcher,
|
||||
.btn {
|
||||
min-width: 1px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0 0.4em;
|
||||
margin: 0 0.1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shadow-preview {
|
||||
order: 2;
|
||||
flex: 3 3 15em;
|
||||
min-width: 10em;
|
||||
display: grid;
|
||||
margin-left: 0.125em;
|
||||
align-self: start;
|
||||
grid-template-columns: 3em 1fr 3em;
|
||||
grid-template-rows: 2em 1fr 2em;
|
||||
grid-template-areas:
|
||||
". header y-num "
|
||||
". preview y-slide"
|
||||
"x-num x-slide . "
|
||||
"options options options";
|
||||
grid-gap: 0.5em;
|
||||
|
||||
.header {
|
||||
grid-area: header;
|
||||
justify-self: center;
|
||||
align-self: baseline;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.input-light-grid {
|
||||
grid-area: options;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.input-number {
|
||||
min-width: 2em;
|
||||
}
|
||||
|
||||
.x-shift-number {
|
||||
grid-area: x-num;
|
||||
}
|
||||
|
||||
.x-shift-slider {
|
||||
grid-area: x-slide;
|
||||
height: auto;
|
||||
align-self: start;
|
||||
min-width: 10em;
|
||||
}
|
||||
|
||||
.y-shift-number {
|
||||
grid-area: y-num;
|
||||
}
|
||||
|
||||
.y-shift-slider {
|
||||
grid-area: y-slide;
|
||||
writing-mode: vertical-lr;
|
||||
justify-self: left;
|
||||
min-height: 10em;
|
||||
}
|
||||
|
||||
.x-shift-slider,
|
||||
.y-shift-slider {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.preview-window {
|
||||
--__grid-color1: rgb(102 102 102);
|
||||
--__grid-color2: rgb(153 153 153);
|
||||
--__grid-color1-disabled: rgba(102 102 102 / 20%);
|
||||
--__grid-color2-disabled: rgba(153 153 153 / 20%);
|
||||
|
||||
&.-light-grid {
|
||||
--__grid-color1: rgb(205 205 205);
|
||||
--__grid-color2: rgb(255 255 255);
|
||||
--__grid-color1-disabled: rgba(205 205 205 / 20%);
|
||||
--__grid-color2-disabled: rgba(255 255 255 / 20%);
|
||||
}
|
||||
|
||||
grid-area: preview;
|
||||
aspect-ratio: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 10em;
|
||||
min-height: 10em;
|
||||
background-color: var(--__grid-color2);
|
||||
background-image:
|
||||
linear-gradient(45deg, var(--__grid-color1) 25%, transparent 25%),
|
||||
linear-gradient(-45deg, var(--__grid-color1) 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, var(--__grid-color1) 75%),
|
||||
linear-gradient(-45deg, transparent 75%, var(--__grid-color1) 75%);
|
||||
background-size: 20px 20px;
|
||||
background-position: 0 0, 0 10px, 10px -10px, -10px 0;
|
||||
border-radius: var(--roundness);
|
||||
|
||||
&.disabled {
|
||||
background-color: var(--__grid-color2-disabled);
|
||||
background-image:
|
||||
linear-gradient(45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
|
||||
linear-gradient(-45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, var(--__grid-color1-disabled) 75%),
|
||||
linear-gradient(-45deg, transparent 75%, var(--__grid-color1-disabled) 75%);
|
||||
}
|
||||
|
||||
.preview-block {
|
||||
width: 33%;
|
||||
height: 33%;
|
||||
border-radius: var(--roundness);
|
||||
background: var(--background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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