commit: 4e2cb8c13291607407c388dec96e5c594f08dfbc
parent f1d0a6b0a2c3cba9d757782859b0188c367e9c72
Author: Henry Jameson <me@hjkos.com>
Date: Wed, 23 Oct 2024 21:54:16 +0300
re-thought shadow ComponentPreview and added more assists to it
Diffstat:
3 files changed, 129 insertions(+), 49 deletions(-)
diff --git a/src/components/component_preview/component_preview.vue b/src/components/component_preview/component_preview.vue
@@ -11,19 +11,50 @@
<!-- eslint-enable vue/no-v-html vue/no-v-text-v-html-on-component -->
<label
v-show="shadowControl"
+ role="heading"
class="header"
:class="{ faint: disabled }"
>
{{ $t('settings.style.shadows.offset') }}
</label>
+ <label
+ v-show="shadowControl && !hideControls"
+ class="x-shift-number"
+ >
+ {{ $t('settings.style.shadows.offset-x') }}
+ <input
+ :value="shadow?.x"
+ :disabled="disabled"
+ :class="{ disabled }"
+ class="input input-number"
+ type="number"
+ @input="e => updateProperty('x', e.target.value)"
+ >
+ </label>
+ <label
+ class="y-shift-number"
+ v-show="shadowControl && !hideControls"
+ >
+ {{ $t('settings.style.shadows.offset-y') }}
+ <input
+ :value="shadow?.y"
+ :disabled="disabled"
+ :class="{ disabled }"
+ class="input input-number"
+ type="number"
+ @input="e => updateProperty('y', e.target.value)"
+ >
+ </label>
<input
v-show="shadowControl && !hideControls"
- :value="shadow?.y"
+ :value="shadow?.x"
:disabled="disabled"
:class="{ disabled }"
- class="input input-number y-shift-number"
- type="number"
- @input="e => updateProperty('y', e.target.value)"
+ class="input input-range x-shift-slider"
+ type="range"
+ max="20"
+ min="-20"
+ @input="e => updateProperty('x', e.target.value)"
>
<input
v-show="shadowControl && !hideControls"
@@ -43,7 +74,7 @@
<div
class="preview-block"
:class="previewClass"
- :style="previewStyle"
+ :style="style"
>
{{ $t('settings.style.themes3.editor.test_string') }}
</div>
@@ -53,43 +84,42 @@
</div>
</div>
</div>
- <input
- v-show="shadowControl && !hideControls"
- :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 && !hideControls"
- :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"
- name="lightGrid"
- class="input-light-grid"
- >
- {{ $t('settings.style.shadows.light_grid') }}
- </Checkbox>
+ <div class="assists">
+ <Checkbox
+ v-model="lightGrid"
+ name="lightGrid"
+ class="input-light-grid"
+ >
+ {{ $t('settings.style.shadows.light_grid') }}
+ </Checkbox>
+ <div class="style-control">
+ <label class="label">
+ {{ $t('settings.style.shadows.zoom') }}
+ </label>
+ <input
+ v-model="zoom"
+ class="input input-number y-shift-number"
+ type="number"
+ >
+ </div>
+ <ColorInput
+ class="input-color-input"
+ v-model="colorOverride"
+ fallback="#606060"
+ :label="$t('settings.style.shadows.color_override')"
+ />
+ </div>
</div>
</template>
<script>
import Checkbox from 'src/components/checkbox/checkbox.vue'
+import ColorInput from 'src/components/color_input/color_input.vue'
export default {
components: {
- Checkbox
+ Checkbox,
+ ColorInput
},
props: [
'shadow',
@@ -103,10 +133,21 @@ export default {
emits: ['update:shadow'],
data () {
return {
- lightGrid: false
+ colorOverride: null,
+ lightGrid: false,
+ zoom: 100
}
},
computed: {
+ style () {
+ console.log(this.previewStyle)
+ const result = [
+ this.previewStyle,
+ `zoom: ${this.zoom / 100}`
+ ]
+ if (this.colorOverride) result.push(`--background: ${this.colorOverride}`)
+ return result
+ },
hideControls () {
return typeof this.shadow === 'string'
}
@@ -121,16 +162,27 @@ export default {
<style lang="scss">
.ComponentPreview {
display: grid;
- grid-template-columns: 3em 1fr 3em;
- grid-template-rows: 2em 1fr 2em;
+ grid-template-columns: 1em 1fr 1fr 1em;
+ grid-template-rows: 2em 1fr 1fr 1fr 1em 2em max-content;
grid-template-areas:
- ". header y-num "
- ". preview y-slide"
- "x-num x-slide . "
- "options options options";
+ "header header header header "
+ "preview preview preview y-slide"
+ "preview preview preview y-slide"
+ "preview preview preview y-slide"
+ "x-slide x-slide x-slide . "
+ "x-num x-num y-num y-num "
+ "assists assists assists assists";
grid-gap: 0.5em;
- max-width: 25em;
- max-height: 25em;
+
+ &:not(.-shadow-controls) {
+ grid-template-areas:
+ "header header header header "
+ "preview preview preview y-slide"
+ "preview preview preview y-slide"
+ "preview preview preview y-slide"
+ "assists assists assists assists";
+ grid-template-rows: 2em 1fr 1fr 1fr max-content;
+ }
.header {
grid-area: header;
@@ -155,8 +207,15 @@ export default {
}
}
+ .assists {
+ grid-area: assists;
+ display: grid;
+ grid-auto-flow: rows;
+ grid-auto-rows: 2em;
+ grid-gap: 0.5em;
+ }
+
.input-light-grid {
- grid-area: options;
justify-self: center;
}
@@ -166,6 +225,19 @@ export default {
.x-shift-number {
grid-area: x-num;
+ justify-self: right;
+ }
+
+ .y-shift-number {
+ grid-area: y-num;
+ justify-self: left;
+ }
+
+ .x-shift-number,
+ .y-shift-number {
+ input {
+ max-width: 4em;
+ }
}
.x-shift-slider {
@@ -175,10 +247,6 @@ export default {
min-width: 10em;
}
- .y-shift-number {
- grid-area: y-num;
- }
-
.y-shift-slider {
grid-area: y-slide;
writing-mode: vertical-lr;
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -680,6 +680,14 @@ export default {
{ immediate: true }
)
+ const virtualDirectivesOut = computed(() => {
+ return [
+ 'Root {',
+ ...virtualDirectives.map(vd => ` --${vd.name}: ${vd.value};`),
+ '}'
+ ].join('\n')
+ })
+
exports.getNewVirtualDirective = () => ({
name: 'newDirective',
valType: 'generic',
@@ -695,7 +703,6 @@ export default {
}
exports.contrast = computed(() => {
- console.log('APR', applicablePreviewRules.value)
return getContrast(
exports.computeColor(previewColors.value.background),
exports.computeColor(previewColors.value.text)
@@ -777,6 +784,7 @@ export default {
return [
metaOut.value,
palettesOut.value,
+ virtualDirectivesOut.value,
serialize(editorFriendlyToOriginal.value)
].join('\n\n')
})
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -949,7 +949,11 @@
"override": "Override",
"shadow_id": "Shadow #{value}",
"offset": "Shadow offset",
+ "zoom": "Zoom",
+ "offset-x": "x:",
+ "offset-y": "y:",
"light_grid": "Use light checkerboard",
+ "color_override": "Use different color",
"name": "Name",
"blur": "Blur",
"spread": "Spread",
