From 5a2080570f5ff82ec4fcaac54752f8d04df21a80 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 9 Oct 2024 09:59:37 +0300
Subject: [PATCH] variables work + i18n cleanup

---
 .../tabs/style_tab/style_tab.js               | 46 +++++++++++++++++--
 .../tabs/style_tab/style_tab.vue              | 29 ++++++++----
 src/i18n/en.json                              | 16 ++++---
 src/services/theme_data/iss_serializer.js     |  2 +-
 4 files changed, 73 insertions(+), 20 deletions(-)

diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
index 6c1ef28a..4df1c1a9 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -20,7 +20,7 @@ import {
   getCssRules,
   getScopedVersion
 } from 'src/services/theme_data/css_utils.js'
-import { serialize } from 'src/services/theme_data/iss_serializer.js'
+import { serializeShadow, serialize } from 'src/services/theme_data/iss_serializer.js'
 import { parseShadow /* , deserialize */ } from 'src/services/theme_data/iss_deserializer.js'
 import {
   // rgb2hex,
@@ -537,7 +537,33 @@ export default {
       })
     const virtualDirectives = reactive(allCustomVirtualDirectives)
     const selectedVirtualDirectiveId = ref(0)
-    const selectedVirtualDirective = computed(() => virtualDirectives[selectedVirtualDirectiveId.value])
+    const selectedVirtualDirective = computed({
+      get () {
+        return virtualDirectives[selectedVirtualDirectiveId.value]
+      },
+      set (value) {
+        console.log('SET', value)
+        virtualDirectives[selectedVirtualDirectiveId.value].value = value
+      }
+    })
+    const selectedVirtualDirectiveValType = computed({
+      get () {
+        return virtualDirectives[selectedVirtualDirectiveId.value].valType
+      },
+      set (value) {
+        virtualDirectives[selectedVirtualDirectiveId.value].valType = value
+        switch (value) {
+          case 'shadow':
+            virtualDirectives[selectedVirtualDirectiveId.value].value = '0 0 0 #000000'
+            break
+          case 'color':
+            virtualDirectives[selectedVirtualDirectiveId.value].value = '#000000'
+            break
+          default:
+            virtualDirectives[selectedVirtualDirectiveId.value].value = 'none'
+        }
+      }
+    })
     const selectedVirtualDirectiveParsed = computed({
       get () {
         switch (selectedVirtualDirective.value.valType) {
@@ -550,8 +576,21 @@ export default {
               return normalizeShadows(splitShadow)
             }
           }
+          case 'color':
+            console.log('COLOR', selectedVirtualDirective.value.value)
+            return selectedVirtualDirective.value.value
           default:
-            return null
+            return selectedVirtualDirective.value.value
+        }
+      },
+      set (value) {
+        switch (selectedVirtualDirective.value.valType) {
+          case 'shadow': {
+            virtualDirectives[selectedVirtualDirectiveId.value].value = value.map(x => serializeShadow(x)).join(', ')
+            break
+          }
+          default:
+            virtualDirectives[selectedVirtualDirectiveId.value].value = value
         }
       }
     })
@@ -684,6 +723,7 @@ export default {
       selectedVirtualDirective,
       selectedVirtualDirectiveId,
       selectedVirtualDirectiveParsed,
+      selectedVirtualDirectiveValType,
       getNewDirective,
 
       // ## Export and Import
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
index b934fa44..971dd7e7 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.vue
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -321,7 +321,7 @@
           class="list-select-label"
           for="variables-selector"
         >
-          {{ $t('settings.style.themes3.variables.label') }}
+          {{ $t('settings.style.themes3.editor.variables.label') }}
           {{ ' ' }}
         </label>
         <Select
@@ -351,7 +351,7 @@
               class="variable-name-label"
               for="variables-selector"
             >
-              {{ $t('settings.style.themes3.variables.name_label') }}
+              {{ $t('settings.style.themes3.editor.variables.name_label') }}
               {{ ' ' }}
             </label>
             <input
@@ -362,25 +362,34 @@
               class="variable-type-label"
               for="variables-selector"
             >
-              {{ $t('settings.style.themes3.variables.type_label') }}
+              {{ $t('settings.style.themes3.editor.variables.type_label') }}
               {{ ' ' }}
             </label>
             <Select
-              v-model="selectedVirtualDirective.valType"
+              v-model="selectedVirtualDirectiveValType"
             >
               <option value='shadow'>
-              {{ $t('settings.style.themes3.variables.type_label') }}
-                shadow</option>
-              <option value='shadow'>color</option>
-              <option value='shadow'>generic</option>
+                {{ $t('settings.style.themes3.editor.variables.type_shadow') }}
+              </option>
+              <option value='color'>
+                {{ $t('settings.style.themes3.editor.variables.type_color') }}
+              </option>
+              <option value='generic'>
+                {{ $t('settings.style.themes3.editor.variables.type_generic') }}
+              </option>
             </Select>
           </div>
           <ShadowControl
-            v-if="selectedVirtualDirective.valType === 'shadow'"
+            v-if="selectedVirtualDirectiveValType === 'shadow'"
             v-model="selectedVirtualDirectiveParsed"
             :compact="true"
           />
-          </div>
+          <ColorInput
+            v-if="selectedVirtualDirectiveValType === 'color'"
+            v-model="selectedVirtualDirectiveParsed"
+            :label="$t('settings.style.themes3.editor.variables.virtual_color')"
+          />
+        </div>
       </div>
     </tab-switcher>
   </div>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index bf597fb2..c2db1339 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -774,11 +774,6 @@
           "extra3": "Extra 3",
           "v2_unsupported": "Older v2 themes don't support palettes. Switch to v3 theme to make use of palettes"
         },
-        "variables": {
-          "label": "Variables",
-          "name_label": "Name:",
-          "type_label": "Type:"
-        },
         "editor": {
           "title": "Style",
           "new_style": "New",
@@ -809,7 +804,16 @@
           },
           "component_tab": "Components style",
           "palette_tab": "Color presets",
-          "variables_tab": "Variables (Advanced)"
+          "variables_tab": "Variables (Advanced)",
+          "variables": {
+            "label": "Variables",
+            "name_label": "Name:",
+            "type_label": "Type:",
+            "type_shadow": "Shadow",
+            "type_color": "Color",
+            "type_generic": "Generic",
+            "virtual_color": "Variable color value"
+          },
         },
         "hacks": {
           "underlay_overrides": "Change underlay",
diff --git a/src/services/theme_data/iss_serializer.js b/src/services/theme_data/iss_serializer.js
index 8b7cf5d8..83c8483e 100644
--- a/src/services/theme_data/iss_serializer.js
+++ b/src/services/theme_data/iss_serializer.js
@@ -1,6 +1,6 @@
 import { unroll } from './iss_utils.js'
 
-const serializeShadow = s => {
+export const serializeShadow = s => {
   if (typeof s === 'object') {
     return `${s.inset ? 'inset ' : ''}${s.x} ${s.y} ${s.blur} ${s.spread} ${s.color} / ${s.alpha}`
   } else {