separate shadow preview into its own component, needed for themes3 editor
This commit is contained in:
Henry Jameson
parent
a0c303efb6
commit
735433beb4
195
src/components/component_preview/component_preview.vue
Normal file
195
src/components/component_preview/component_preview.vue
Normal file
|
|
@ -0,0 +1,195 @@
|
||||||
|
<template>
|
||||||
|
<div class="ComponentPreview">
|
||||||
|
<label
|
||||||
|
class="header"
|
||||||
|
v-show="shadowControl"
|
||||||
|
:class="{ faint: disabled }"
|
||||||
|
>
|
||||||
|
{{ $t('settings.style.shadows.offset') }}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
v-show="shadowControl"
|
||||||
|
:value="shadow?.y"
|
||||||
|
:disabled="disabled"
|
||||||
|
:class="{ disabled }"
|
||||||
|
class="input input-number y-shift-number"
|
||||||
|
type="number"
|
||||||
|
@input="e => updateProperty('y', e.target.value)"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
v-show="shadowControl"
|
||||||
|
:value="shadow?.y"
|
||||||
|
:disabled="disabled"
|
||||||
|
:class="{ disabled }"
|
||||||
|
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: disabled && shadowControl, '-light-grid': lightGrid }"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="preview-block"
|
||||||
|
:style="previewStyle"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
v-show="shadowControl"
|
||||||
|
:value="shadow?.x"
|
||||||
|
:disabled="disabled"
|
||||||
|
:class="{ disabled }"
|
||||||
|
class="input input-number x-shift-number"
|
||||||
|
type="number"
|
||||||
|
@input="e => updateProperty('x', e.target.value)"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
v-show="shadowControl"
|
||||||
|
:value="shadow?.x"
|
||||||
|
:disabled="disabled"
|
||||||
|
:class="{ disabled }"
|
||||||
|
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="shadow == null"
|
||||||
|
name="lightGrid"
|
||||||
|
class="input-light-grid"
|
||||||
|
>
|
||||||
|
{{ $t('settings.style.shadows.light_grid') }}
|
||||||
|
</Checkbox>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.ComponentPreview {
|
||||||
|
display: grid;
|
||||||
|
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: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
import Checkbox from 'src/components/checkbox/checkbox.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: [
|
||||||
|
'shadow',
|
||||||
|
'shadowControl',
|
||||||
|
'previewClass',
|
||||||
|
'previewStyle',
|
||||||
|
'disabled'
|
||||||
|
],
|
||||||
|
emits: ['update:shadow'],
|
||||||
|
components: {
|
||||||
|
Checkbox
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
update (axis, value) {
|
||||||
|
this.$emit('update:shadow', { ...this.shadowControl, [axis]: value })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -3,6 +3,7 @@ import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
|
||||||
import Select from 'src/components/select/select.vue'
|
import Select from 'src/components/select/select.vue'
|
||||||
import Checkbox from 'src/components/checkbox/checkbox.vue'
|
import Checkbox from 'src/components/checkbox/checkbox.vue'
|
||||||
import Popover from 'src/components/popover/popover.vue'
|
import Popover from 'src/components/popover/popover.vue'
|
||||||
|
import ComponentPreview from 'src/components/component_preview/component_preview.vue'
|
||||||
import { getCssShadow, getCssShadowFilter } from '../../services/theme_data/theme_data.service.js'
|
import { getCssShadow, getCssShadowFilter } from '../../services/theme_data/theme_data.service.js'
|
||||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||||
import { throttle } from 'lodash'
|
import { throttle } from 'lodash'
|
||||||
|
|
@ -49,7 +50,8 @@ export default {
|
||||||
OpacityInput,
|
OpacityInput,
|
||||||
Select,
|
Select,
|
||||||
Checkbox,
|
Checkbox,
|
||||||
Popover
|
Popover,
|
||||||
|
ComponentPreview
|
||||||
},
|
},
|
||||||
beforeUpdate () {
|
beforeUpdate () {
|
||||||
this.cValue = (this.modelValue ?? this.fallback ?? []).map(toModel)
|
this.cValue = (this.modelValue ?? this.fallback ?? []).map(toModel)
|
||||||
|
|
@ -81,7 +83,6 @@ export default {
|
||||||
return this.modelValue == null
|
return this.modelValue == null
|
||||||
},
|
},
|
||||||
style () {
|
style () {
|
||||||
console.log(this.separateInset)
|
|
||||||
if (this.separateInset) {
|
if (this.separateInset) {
|
||||||
return {
|
return {
|
||||||
filter: getCssShadowFilter(this.cValue),
|
filter: getCssShadowFilter(this.cValue),
|
||||||
|
|
|
||||||
|
|
@ -82,107 +82,8 @@
|
||||||
order: 2;
|
order: 2;
|
||||||
flex: 3 3 15em;
|
flex: 3 3 15em;
|
||||||
min-width: 10em;
|
min-width: 10em;
|
||||||
display: grid;
|
|
||||||
margin-left: 0.125em;
|
margin-left: 0.125em;
|
||||||
align-self: start;
|
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: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,68 +3,13 @@
|
||||||
class="label shadow-control"
|
class="label shadow-control"
|
||||||
:class="{ disabled: !present }"
|
:class="{ disabled: !present }"
|
||||||
>
|
>
|
||||||
<div class="shadow-preview">
|
<ComponentPreview
|
||||||
<label
|
class="shadow-preview"
|
||||||
class="header"
|
:shadow-control="true"
|
||||||
:class="{ faint: !present }"
|
:shadow="selected"
|
||||||
>
|
:preview-style="style"
|
||||||
{{ $t('settings.style.shadows.offset') }}
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
:value="selected?.y"
|
|
||||||
:disabled="!present"
|
: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>
|
|
||||||
<div class="shadow-switcher">
|
<div class="shadow-switcher">
|
||||||
<Select
|
<Select
|
||||||
id="shadow-list"
|
id="shadow-list"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue