pleroma-fe

commit: 098c6af7ef11972b27dafc3ef98a6fd2684695cb
parent 1a38e0273ee68dc8fe2f46d8b35b7a2d26d36ea7
Author: Henry Jameson <me@hjkos.com>
Date:   Sat, 12 Oct 2024 01:26:29 +0300

pass computeColor into shadow control, fix shadow switching types due to invalid shadow color

Diffstat:
M
src/components/palette_editor/palette_editor.vue
6
+++---
M
src/components/settings_modal/tabs/style_tab/style_tab.js
1
-
M
src/components/settings_modal/tabs/style_tab/style_tab.vue
1
+
M
src/components/shadow_control/shadow_control.js
8
++++++++
M
src/components/shadow_control/shadow_control.vue
2
+-
M
src/services/theme_data/iss_deserializer.js
6
+++++-
M
src/services/theme_data/iss_serializer.js
2
+-

7 files changed, 19 insertions(+), 7 deletions(-)
diff --git a/src/components/palette_editor/palette_editor.vue b/src/components/palette_editor/palette_editor.vue
@@ -46,12 +46,12 @@ library.add(
 const props = defineProps(['modelValue'])
 const emit = defineEmits(['update:modelValue'])
 const paletteExporter = newExporter({
-  filename: 'pleroma',
-  extension: 'palette.json',
+  filename: 'pleroma_palette',
+  extension: 'json',
   getExportedObject: () => props.modelValue
 })
 const paletteImporter = newImporter({
-  accept: '.palette.json',
+  accept: '.json',
   onImport (parsed, filename) {
     emit('update:modelValue', parsed)
   }
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -620,7 +620,6 @@ export default {
             }
           }
           case 'color':
-            console.log('COLOR', selectedVirtualDirective.value.value)
             return selectedVirtualDirective.value.value
           default:
             return selectedVirtualDirective.value.value
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -409,6 +409,7 @@
           <ShadowControl
             v-if="selectedVirtualDirectiveValType === 'shadow'"
             v-model="selectedVirtualDirectiveParsed"
+            :computeColor="computeColor"
             :compact="true"
           />
           <ColorInput
diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
@@ -46,6 +46,7 @@ export default {
     'separateInset',
     'noPreview',
     'disabled',
+    'computeColor',
     'compact'
   ],
   emits: ['update:modelValue', 'subShadowSelected'],
@@ -107,6 +108,13 @@ export default {
     usingFallback () {
       return this.modelValue == null
     },
+    getFallback () {
+      if (typeof this.computeColor === 'function' && this.selected?.color) {
+        return this.computeColor(this.selected.color)
+      } else {
+        return this.currentFallback?.color
+      }
+    },
     style () {
       try {
         if (this.separateInset) {
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
@@ -165,7 +165,7 @@
           :model-value="selected?.color"
           :disabled="disabled || !present"
           :label="$t('settings.style.common.color')"
-          :fallback="currentFallback?.color"
+          :fallback="getFallback"
           :show-optional-tickbox="false"
           name="shadow"
           @update:modelValue="e => updateProperty('color', e)"
diff --git a/src/services/theme_data/iss_deserializer.js b/src/services/theme_data/iss_deserializer.js
@@ -21,7 +21,11 @@ export const parseShadow = string => {
   const regex = new RegExp(regexPrep, 'gis') // global, (stable) indices, single-string
   const result = regex.exec(string)
   if (result == null) {
-    return string
+    if (string.startsWith('$') || string.startsWith('--')) {
+      return string
+    } else {
+      throw new Error(`Invalid shadow definition: ${string}`)
+    }
   } else {
     const numeric = new Set(['x', 'y', 'blur', 'spread', 'alpha'])
     const { x, y, blur, spread, alpha, inset, color } = Object.fromEntries(modes.map((mode, i) => {
diff --git 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'
 
-export const serializeShadow = s => {
+export const serializeShadow = (s, throwOnInvalid) => {
   if (typeof s === 'object') {
     return `${s.inset ? 'inset ' : ''}${s.x} ${s.y} ${s.blur} ${s.spread} ${s.color} / ${s.alpha}`
   } else {