From 735433beb48764ec560d852a58a8e2ed954220f6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 24 Sep 2024 19:19:53 +0300
Subject: separate shadow preview into its own component, needed for themes3
 editor

---
 .../component_preview/component_preview.vue        | 195 +++++++++++++++++++++
 1 file changed, 195 insertions(+)
 create mode 100644 src/components/component_preview/component_preview.vue

(limited to 'src/components/component_preview/component_preview.vue')

diff --git a/src/components/component_preview/component_preview.vue b/src/components/component_preview/component_preview.vue
new file mode 100644
index 00000000..087f48ea
--- /dev/null
+++ 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>
-- 
cgit v1.2.3-70-g09d2


From d2a9653ecb027ecabd78a2fb8608b4e1f9e64187 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 24 Sep 2024 19:32:08 +0300
Subject: forgot something again

---
 src/components/component_preview/component_preview.vue | 4 ++--
 src/components/shadow_control/shadow_control.vue       | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

(limited to 'src/components/component_preview/component_preview.vue')

diff --git a/src/components/component_preview/component_preview.vue b/src/components/component_preview/component_preview.vue
index 087f48ea..f29284c8 100644
--- a/src/components/component_preview/component_preview.vue
+++ b/src/components/component_preview/component_preview.vue
@@ -187,8 +187,8 @@ export default {
     Checkbox
   },
   methods: {
-    update (axis, value) {
-      this.$emit('update:shadow', { ...this.shadowControl, [axis]: value })
+    updateProperty (axis, value) {
+      this.$emit('update:shadow', { axis, value })
     }
   }
 }
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 0305b55c..8c37e82d 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -9,6 +9,7 @@
       :shadow="selected"
       :preview-style="style"
       :disabled="!present"
+      @update:shadow="({ axis, value }) => updateProperty(axis, value)"
     />
     <div class="shadow-switcher">
       <Select
-- 
cgit v1.2.3-70-g09d2


From 9370ee8c1791b852dfb72567ed9f415de98645fc Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 25 Sep 2024 00:47:54 +0300
Subject: fix lightGrid not working, add more stuff for style editor

---
 src/components/component_preview/component_preview.vue | 7 +++++++
 1 file changed, 7 insertions(+)

(limited to 'src/components/component_preview/component_preview.vue')

diff --git a/src/components/component_preview/component_preview.vue b/src/components/component_preview/component_preview.vue
index f29284c8..e86b2c19 100644
--- a/src/components/component_preview/component_preview.vue
+++ b/src/components/component_preview/component_preview.vue
@@ -167,6 +167,8 @@
       height: 33%;
       border-radius: var(--roundness);
       background: var(--background);
+      box-shadow: var(--shadow);
+      border: 1px solid var(--border);
     }
   }
 }
@@ -182,6 +184,11 @@ export default {
     'previewStyle',
     'disabled'
   ],
+  data () {
+    return {
+      lightGrid: false
+    }
+  },
   emits: ['update:shadow'],
   components: {
     Checkbox
-- 
cgit v1.2.3-70-g09d2


From dd4cab74d1a3eff4a8ea49244dd01d0b5cf00ce6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 29 Sep 2024 00:57:00 +0300
Subject: small fixes

---
 src/components/component_preview/component_preview.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

(limited to 'src/components/component_preview/component_preview.vue')

diff --git a/src/components/component_preview/component_preview.vue b/src/components/component_preview/component_preview.vue
index e86b2c19..151ab857 100644
--- a/src/components/component_preview/component_preview.vue
+++ b/src/components/component_preview/component_preview.vue
@@ -1,5 +1,8 @@
 <template>
-<div class="ComponentPreview">
+<div
+  class="ComponentPreview"
+  :class="{ '-shadow-controls': shadowControl }"
+>
   <label
     class="header"
     v-show="shadowControl"
@@ -29,7 +32,7 @@
   >
   <div
     class="preview-window"
-    :class="{ disabled: disabled && shadowControl, '-light-grid': lightGrid }"
+    :class="{ '-light-grid': lightGrid }"
   >
     <div
       class="preview-block"
-- 
cgit v1.2.3-70-g09d2


From c2dfe62481ccd53bbaa9695f106a9f664f54ae4c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 29 Sep 2024 19:20:09 +0300
Subject: subshadow select event + better styles for preview

---
 src/components/component_preview/component_preview.vue | 15 +++++++++++----
 src/components/shadow_control/shadow_control.js        |  8 ++++++--
 2 files changed, 17 insertions(+), 6 deletions(-)

(limited to 'src/components/component_preview/component_preview.vue')

diff --git a/src/components/component_preview/component_preview.vue b/src/components/component_preview/component_preview.vue
index 151ab857..873f7e61 100644
--- a/src/components/component_preview/component_preview.vue
+++ b/src/components/component_preview/component_preview.vue
@@ -166,12 +166,19 @@
     }
 
     .preview-block {
-      width: 33%;
-      height: 33%;
-      border-radius: var(--roundness);
       background: var(--background);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-width: 33%;
+      min-height: 33%;
+      max-width: 80%;
+      max-height: 80%;
+      border-width: 0;
+      border-style: solid;
+      border-color: var(--border);
+      border-radius: var(--roundness);
       box-shadow: var(--shadow);
-      border: 1px solid var(--border);
     }
   }
 }
diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
index 451180f4..4521305e 100644
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@@ -36,7 +36,7 @@ export default {
   props: [
     'modelValue', 'fallback', 'separateInset', 'noPreview', 'disabled'
   ],
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'subShadowSelected'],
   data () {
     return {
       selectedId: 0,
@@ -93,9 +93,13 @@ export default {
       }
     }
   },
+  watch: {
+    selected (value) {
+      this.$emit('subShadowSelected', this.selectedId)
+    }
+  },
   methods: {
     updateProperty: throttle(function (prop, value) {
-      console.log(prop, value)
       this.cValue[this.selectedId][prop] = value
       if (prop === 'inset' && value === false && this.separateInset) {
         this.cValue[this.selectedId].spread = 0
-- 
cgit v1.2.3-70-g09d2


From c677bbf10249f29699243399fb0b6fe192298772 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 29 Sep 2024 19:20:39 +0300
Subject: fallback

---
 src/components/component_preview/component_preview.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/component_preview/component_preview.vue')

diff --git a/src/components/component_preview/component_preview.vue b/src/components/component_preview/component_preview.vue
index 873f7e61..3b2cf63b 100644
--- a/src/components/component_preview/component_preview.vue
+++ b/src/components/component_preview/component_preview.vue
@@ -166,7 +166,7 @@
     }
 
     .preview-block {
-      background: var(--background);
+      background: var(--background, var(--bg));
       display: flex;
       justify-content: center;
       align-items: center;
-- 
cgit v1.2.3-70-g09d2