commit: 735433beb48764ec560d852a58a8e2ed954220f6
parent a0c303efb6ea422289aff8c295d288a13b0699d0
Author: Henry Jameson <me@hjkos.com>
Date: Tue, 24 Sep 2024 19:19:53 +0300
separate shadow preview into its own component, needed for themes3 editor
Diffstat:
4 files changed, 205 insertions(+), 163 deletions(-)
diff --git a/src/components/component_preview/component_preview.vue b/src/components/component_preview/component_preview.vue
@@ -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>
diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
@@ -3,6 +3,7 @@ import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
import Select from 'src/components/select/select.vue'
import Checkbox from 'src/components/checkbox/checkbox.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 { library } from '@fortawesome/fontawesome-svg-core'
import { throttle } from 'lodash'
@@ -49,7 +50,8 @@ export default {
OpacityInput,
Select,
Checkbox,
- Popover
+ Popover,
+ ComponentPreview
},
beforeUpdate () {
this.cValue = (this.modelValue ?? this.fallback ?? []).map(toModel)
@@ -81,7 +83,6 @@ export default {
return this.modelValue == null
},
style () {
- console.log(this.separateInset)
if (this.separateInset) {
return {
filter: getCssShadowFilter(this.cValue),
diff --git a/src/components/shadow_control/shadow_control.scss b/src/components/shadow_control/shadow_control.scss
@@ -82,107 +82,8 @@
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: 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);
- }
- }
}
}
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
@@ -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"
