commit: 5a2080570f5ff82ec4fcaac54752f8d04df21a80
parent 54c740c2525368ac5bbd8162c45555d6e2443955
Author: Henry Jameson <me@hjkos.com>
Date: Wed, 9 Oct 2024 09:59:37 +0300
variables work + i18n cleanup
Diffstat:
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
@@ -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 selectedVirtualDirective.value.value
+ }
+ },
+ set (value) {
+ switch (selectedVirtualDirective.value.valType) {
+ case 'shadow': {
+ virtualDirectives[selectedVirtualDirectiveId.value].value = value.map(x => serializeShadow(x)).join(', ')
+ break
+ }
default:
- return null
+ 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
@@ -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
@@ -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
@@ -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 {
