commit: 89b05cfc576d61ab57c21c5b87769ffb704f3d4d
parent d2cce990863725634653baf5cda86505e12a6b41
Author: Henry Jameson <me@hjkos.com>
Date: Mon, 30 Sep 2024 00:16:47 +0300
export/import PoC works
Diffstat:
5 files changed, 60 insertions(+), 81 deletions(-)
diff --git a/src/components/settings_modal/settings_modal_user_content.scss b/src/components/settings_modal/settings_modal_user_content.scss
@@ -8,7 +8,6 @@
> div,
> label {
- display: block;
margin-bottom: 0.5em;
&:last-child {
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -7,6 +7,7 @@ import ComponentPreview from 'src/components/component_preview/component_preview
import StringSetting from '../../helpers/string_setting.vue'
import ShadowControl from 'src/components/shadow_control/shadow_control.vue'
import ColorInput from 'src/components/color_input/color_input.vue'
+import PaletteEditor from 'src/components/palette_editor/palette_editor.vue'
import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
import Popover from 'src/components/popover/popover.vue'
@@ -14,6 +15,8 @@ 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 {
// rgb2hex,
hex2rgb,
@@ -46,6 +49,7 @@ export default {
TabSwitcher,
ShadowControl,
ColorInput,
+ PaletteEditor,
OpacityInput,
ContrastRatio
},
@@ -56,6 +60,15 @@ export default {
const license = ref('')
const website = ref('')
+ const metaOut = computed(() => {
+ return `@meta {
+ name: ${name.value};
+ author: ${author.value};
+ license: ${license.value};
+ website: ${website.value};
+}`
+ })
+
// ### Palette stuff
const palettes = reactive({
light: {
@@ -83,13 +96,23 @@ export default {
}
})
+ const palettesOut = computed(() => {
+ return Object.entries(palettes).map(([name, palette]) => {
+ const entries = Object
+ .entries(palette)
+ .map(([slot, data]) => ` ${slot}: ${data};`)
+ .join('\n')
+
+ return `@palette.${name} {\n${entries}\n}`
+ }).join('\n\n')
+ })
+
const editedPalette = ref('dark')
const palette = computed({
get () {
return palettes[editedPalette.value]
},
set (newPalette) {
- console.log(newPalette)
palettes[editedPalette.value] = newPalette
}
})
@@ -97,6 +120,14 @@ export default {
// ### I18n stuff
// The paths in i18n are getting ridicously long, this effectively shortens them
const getI18nPath = (componentName) => `settings.style.themes3.editor.components.${componentName}`
+ // vue i18n doesn't seem to have (working) mechanic to have a fallback so we have to
+ // make do ourselves
+ const fallbackI18n = (translated, fallback) => {
+ if (translated.startsWith('settings.style.themes3')) {
+ return fallback
+ }
+ return translated
+ }
const getFriendlyNamePath = (componentName) => getI18nPath(componentName) + '.friendlyName'
const getVariantPath = (componentName, variant) => {
return variant === 'normal'
@@ -139,6 +170,13 @@ export default {
const selectedComponentStates = computed(() => {
return selectedComponentStatesAll.value.filter(x => x !== 'normal')
})
+ const updateSelectedStates = (state, v) => {
+ if (v) {
+ selectedState.add(state)
+ } else {
+ selectedState.delete(state)
+ }
+ }
// ### Preview stuff
const editorHintStyle = computed(() => {
@@ -447,6 +485,20 @@ export default {
isShadowTabOpen.value = tab === 'shadow'
}
+ const exportStyle = () => {
+ console.log('ORIG', toValue(editorFriendlyToOriginal.value))
+ console.log('SERI', serialize(editorFriendlyToOriginal.value))
+
+ const result = [
+ metaOut.value,
+ palettesOut.value,
+ serialize(editorFriendlyToOriginal.value)
+ ].join('\n\n')
+
+ console.log('RESULT', result)
+ console.log('DESERI', deserialize(result))
+ }
+
return {
name,
author,
@@ -463,13 +515,7 @@ export default {
selectedComponentStates,
selectedVariant,
selectedState,
- updateSelectedStates (state, v) {
- if (v) {
- selectedState.add(state)
- } else {
- selectedState.delete(state)
- }
- },
+ updateSelectedStates,
editedBackgroundColor,
editedOpacity,
editedTextColor,
@@ -492,17 +538,13 @@ export default {
previewClass,
editorHintStyle,
getFriendlyNamePath,
+ fallbackI18n,
getVariantPath,
getStatePath,
componentHas,
isShadowTabOpen,
onTabSwitch,
- fallbackI18n (translated, fallback) {
- if (translated.startsWith('settings.style.themes3')) {
- return fallback
- }
- return translated
- }
+ exportStyle
}
}
}
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.scss b/src/components/settings_modal/tabs/style_tab/style_tab.scss
@@ -88,18 +88,10 @@
}
.palette-editor {
- > label:not(.Select) {
+ > .label:not(.Select) {
font-weight: bold;
justify-self: right;
}
-
- .colors {
- display: grid;
- justify-content: space-around;
- grid-template-columns: repeat(4, min-content);
- grid-template-rows: repeat(auto-fit, min-content);
- grid-gap: 0.5em;
- }
}
.component-editor {
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -21,7 +21,7 @@
</button>
<button
class="btn button-default"
- @click="exportTheme"
+ @click="exportStyle"
>
<FAIcon icon="floppy-disk" />
{{ $t('settings.style.themes3.editor.save_style') }}
@@ -69,61 +69,7 @@
</option>
</Select>
</div>
- <div class="colors">
- <ColorInput
- v-model="palette.bg"
- :label="$t('settings.style.themes3.editor.palette.bg')"
- />
- <ColorInput
- v-model="palette.fg"
- :label="$t('settings.style.themes3.editor.palette.fg')"
- />
- <ColorInput
- v-model="palette.text"
- :label="$t('settings.style.themes3.editor.palette.text')"
- />
- <ColorInput
- v-model="palette.link"
- :label="$t('settings.style.themes3.editor.palette.link')"
- :fallback="palette.accent"
- />
- <ColorInput
- v-model="palette.accent"
- :label="$t('settings.style.themes3.editor.palette.accent')"
- :fallback="palette.link"
- />
- <ColorInput
- v-model="palette.cRed"
- :label="$t('settings.style.themes3.editor.palette.cRed')"
- />
- <ColorInput
- v-model="palette.cBlue"
- :label="$t('settings.style.themes3.editor.palette.cBlue')"
- />
- <ColorInput
- v-model="palette.cGreen"
- :label="$t('settings.style.themes3.editor.palette.cGreen')"
- />
- <ColorInput
- v-model="palette.cOrange"
- :label="$t('settings.style.themes3.editor.palette.cOrange')"
- />
- <ColorInput
- v-model="palette.extra1"
- fallback="#000000"
- :label="$t('settings.style.themes3.editor.palette.extra1')"
- />
- <ColorInput
- v-model="palette.extra2"
- fallback="#000000"
- :label="$t('settings.style.themes3.editor.palette.extra2')"
- />
- <ColorInput
- v-model="palette.extra3"
- fallback="#000000"
- :label="$t('settings.style.themes3.editor.palette.extra3')"
- />
- </div>
+ <PaletteEditor v-model="palette" />
</div>
<div class="setting-item component-editor">
<div class="component-selector">
diff --git a/src/services/theme_data/iss_deserializer.js b/src/services/theme_data/iss_deserializer.js
@@ -136,7 +136,7 @@ export const deserialize = (input) => {
output.directives = Object.fromEntries(content.map(d => {
const [property, value] = d.split(':')
- let realValue = value.trim()
+ let realValue = (value || '').trim()
if (property === 'shadow') {
if (realValue === 'none') {
realValue = []
