commit: 756ea63b6709e3daf35d738b0a1f3a5e9439c4d9
parent 8725de3e9179a52a3a085d4dfec6a84ecbd339af
Author: Henry Jameson <me@hjkos.com>
Date: Sun, 6 Oct 2024 20:21:13 +0300
variables stuff seem to be at least somewhat working
Diffstat:
6 files changed, 51 insertions(+), 14 deletions(-)
diff --git a/src/components/palette_editor/palette_editor.vue b/src/components/palette_editor/palette_editor.vue
@@ -107,7 +107,7 @@ const updatePalette = (paletteKey, value) => {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr) auto;
grid-gap: 0.5em;
- align-items: space-between;
+ align-items: baseline;
.palette-import-button {
grid-column: 1 / span 2;
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -17,7 +17,7 @@ import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
import { init } from 'src/services/theme_data/theme_data_3.service.js'
import { getCssRules } from 'src/services/theme_data/css_utils.js'
import { serialize } from 'src/services/theme_data/iss_serializer.js'
-// import { deserialize } from 'src/services/theme_data/iss_deserializer.js'
+import { parseShadow /* , deserialize */ } from 'src/services/theme_data/iss_deserializer.js'
import {
// rgb2hex,
hex2rgb,
@@ -259,7 +259,7 @@ export default {
}
})
- const getEditedElement = (component, directive) => computed({
+ const getEditedElement = (component, directive, postProcess = x => x) => computed({
get () {
let usedRule
const fallback = editorFriendlyFallbackStructure.value
@@ -271,7 +271,11 @@ export default {
usedRule = get(fallback, path)
}
- return usedRule
+ if (directive === 'shadow') {
+ console.log('EDITED', usedRule)
+ console.log('PP', postProcess(usedRule))
+ }
+ return postProcess(usedRule)
},
set (value) {
set(allEditedRules, getPath(component, directive), value)
@@ -316,9 +320,22 @@ export default {
}
}
+ const normalizeShadows = (shadows) => {
+ console.log('NORMALIZE')
+ return shadows?.map(shadow => {
+ if (typeof shadow === 'object') {
+ return shadow
+ }
+ if (typeof shadow === 'string') {
+ return parseShadow(shadow)
+ }
+ return null
+ })
+ }
+
// Shadow is partially edited outside the ShadowControl
// for better space utilization
- const editedShadow = getEditedElement(null, 'shadow')
+ const editedShadow = getEditedElement(null, 'shadow', normalizeShadows)
const editedSubShadowId = ref(null)
const editedSubShadow = computed(() => {
if (editedShadow.value == null || editedSubShadowId.value == null) return null
@@ -511,8 +528,15 @@ export default {
const selectedVirtualDirectiveParsed = computed({
get () {
switch (selectedVirtualDirective.value.valType) {
- case 'shadow':
- return {}
+ case 'shadow': {
+ const directiveValue = selectedVirtualDirective.value.value
+ if (Array.isArray(directiveValue)) {
+ return normalizeShadows(directiveValue)
+ } else {
+ const splitShadow = directiveValue.split(/,/g).map(x => x.trim())
+ return normalizeShadows(splitShadow)
+ }
+ }
default:
return null
}
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.scss b/src/components/settings_modal/tabs/style_tab/style_tab.scss
@@ -93,7 +93,7 @@
"label editor"
"selector editor"
"movement editor";
- grid-template-columns: auto 1fr;
+ grid-template-columns: 10em 1fr;
grid-template-rows: auto 1fr auto;
grid-gap: 0.5em;
@@ -124,9 +124,9 @@
grid-template-rows: auto auto 1fr;
grid-gap: 0.5em;
grid-template-areas:
- "component component variant"
- "state state state"
- "preview settings settings";
+ "component component variant"
+ "state state state"
+ "preview settings settings";
.component-selector {
grid-area: component;
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -245,6 +245,7 @@
>
{{ $t('settings.style.themes3.editor.include_in_rule') }}
</checkbox>
+ {{ editedShadow }}
<ShadowControl
v-model="editedShadow"
:disabled="!isShadowPresent"
@@ -327,11 +328,15 @@
@update:selectedId="e => selectedVirtualDirectiveId = e"
/>
<div class="list-edit-area">
+ <Select>
+ <option value='shadow'>shadow</option>
+ <option value='shadow'>color</option>
+ <option value='shadow'>generic</option>
+ </Select>
<ShadowControl
v-if="selectedVirtualDirective.valType === 'shadow'"
- v-model="selectedVirtualDirective.value"
+ v-model="selectedVirtualDirectiveParsed"
/>
- {{ selectedVirtualDirective.valType }}
</div>
</div>
</tab-switcher>
diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
@@ -45,6 +45,7 @@ export default {
],
emits: ['update:modelValue', 'subShadowSelected'],
data () {
+ console.log('MODEL VALUE', this.modelValue, this.fallback)
return {
selectedId: 0,
// TODO there are some bugs regarding display of array (it's not getting updated when deleting for some reason)
@@ -60,6 +61,9 @@ export default {
Popover,
ComponentPreview
},
+ beforeUpdate () {
+ this.cValue = (this.modelValue ?? this.fallback ?? []).map(toModel)
+ },
computed: {
selectedType: {
get () {
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -774,6 +774,9 @@
"extra3": "Extra 3",
"v2_unsupported": "Older v2 themes don't support palettes. Switch to v3 theme to make use of palettes"
},
+ "variables": {
+ "label": "Variables"
+ },
"editor": {
"title": "Style",
"new_style": "New",
@@ -800,7 +803,8 @@
"no-auto": "Disabled"
},
"component_tab": "Components style",
- "palette_tab": "Color presets"
+ "palette_tab": "Color presets",
+ "variables_tab": "Variables (Advanced)"
},
"hacks": {
"underlay_overrides": "Change underlay",
