commit: bae4836349961f92dbddec22a9a23d9aebc6fccf
parent 3f55c08693560f634ec129889b19a2031e93a67e
Author: Henry Jameson <me@hjkos.com>
Date: Sun, 6 Oct 2024 01:16:24 +0300
palettes editor done
Diffstat:
5 files changed, 82 insertions(+), 50 deletions(-)
diff --git a/src/components/palette_editor/palette_editor.vue b/src/components/palette_editor/palette_editor.vue
@@ -1,31 +1,27 @@
<template>
<div class="PaletteEditor">
- <div class="colors">
- <ColorInput
- v-for="key in paletteKeys"
- :key="key"
- :model-value="props.modelValue[key]"
- :fallback="fallback(key)"
- :label="$t('settings.style.themes3.palette.' + key)"
- @update:modelValue="value => updatePalette(key, value)"
- />
- </div>
- <div class="controls">
- <button
- class="btn button-default"
- @click="importPalette"
- >
- <FAIcon icon="file-import" />
- {{ $t('settings.style.themes3.palette.import') }}
- </button>
- <button
- class="btn button-default"
- @click="exportPalette"
- >
- <FAIcon icon="file-export" />
- {{ $t('settings.style.themes3.palette.export') }}
- </button>
- </div>
+ <ColorInput
+ v-for="key in paletteKeys"
+ :key="key"
+ :model-value="props.modelValue[key]"
+ :fallback="fallback(key)"
+ :label="$t('settings.style.themes3.palette.' + key)"
+ @update:modelValue="value => updatePalette(key, value)"
+ />
+ <button
+ class="btn button-default palette-import-button"
+ @click="importPalette"
+ >
+ <FAIcon icon="file-import" />
+ {{ $t('settings.style.themes3.palette.import') }}
+ </button>
+ <button
+ class="btn button-default palette-export-button"
+ @click="exportPalette"
+ >
+ <FAIcon icon="file-export" />
+ {{ $t('settings.style.themes3.palette.export') }}
+ </button>
</div>
</template>
@@ -106,18 +102,23 @@ const updatePalette = (paletteKey, value) => {
<style lang="scss">
.PaletteEditor {
- .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;
+ display: grid;
+ justify-content: space-around;
+ grid-template-columns: repeat(4, 1fr);
+ grid-template-rows: repeat(3, 1fr) auto;
+ grid-gap: 0.5em;
+ align-items: space-between;
+
+ .palette-import-button {
+ grid-column: 1 / span 2;
+ }
+
+ .palette-export-button {
+ grid-column: 3 / span 2;
}
- .controls {
- display: grid;
- grid-template-columns: 1fr 1fr;
- grid-gap: 0.5em;
+ .color-input.style-control {
+ margin: 0;
}
}
</style>
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -72,8 +72,9 @@ export default {
})
// ### Palette stuff
- const palettes = reactive({
- light: {
+ const palettes = reactive([
+ {
+ name: 'light',
bg: '#f2f6f9',
fg: '#d6dfed',
text: '#304055',
@@ -85,7 +86,8 @@ export default {
cOrange: '#ffa500',
border: '#d8e6f9'
},
- dark: {
+ {
+ name: 'dark',
bg: '#121a24',
fg: '#182230',
text: '#b9b9ba',
@@ -96,10 +98,11 @@ export default {
cGreen: '#0fa00f',
cOrange: '#ffa500'
}
- })
+ ])
const palettesOut = computed(() => {
- return Object.entries(palettes).map(([name, palette]) => {
+ console.log('WORK DAMN', palettes)
+ return palettes.map(({ name, ...palette }) => {
const entries = Object
.entries(palette)
.map(([slot, data]) => ` ${slot}: ${data};`)
@@ -109,9 +112,10 @@ export default {
}).join('\n\n')
})
- const editedPalette = ref('dark')
+ const editedPalette = ref(0)
const palette = computed({
get () {
+ console.log(palettes, editedPalette.value)
return palettes[editedPalette.value]
},
set (newPalette) {
@@ -435,10 +439,12 @@ export default {
const updatePreview = () => {
try {
+ const { name, ...paletteData } = palette.value
+ console.log('WORK', paletteData)
const rules = init({
inputRuleset: editorFriendlyToOriginal.value,
initialStaticVars: {
- ...palette.value
+ ...paletteData
},
ultimateBackgroundColor: '#000000',
rootComponentName: selectedComponentName.value,
@@ -529,6 +535,7 @@ export default {
license,
website,
palette,
+ palettes,
editedPalette,
getNewPalette,
componentKeys,
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.scss b/src/components/settings_modal/tabs/style_tab/style_tab.scss
@@ -89,10 +89,33 @@
.palette-editor {
display: grid;
+ grid-template-areas:
+ "label editor"
+ "selector editor"
+ "motion editor";
+ grid-template-columns: auto 1fr;
+ grid-template-rows: auto 1fr auto;
+ grid-gap: 0.5em;
+
+ .palette-editor-edit {
+ grid-area: editor;
+ }
.palette-selector {
&-label {
font-weight: bold;
+ grid-area: label;
+ margin: 0;
+ }
+ }
+
+ .palette-list {
+ grid-area: selector;
+ margin: 0;
+
+ &-movement {
+ grid-area: motion;
+ margin: 0;
}
}
}
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -271,14 +271,14 @@
id="palette-selector"
v-model="editedPalette"
class="palette-list"
- size="10"
+ size="9"
>
<option
v-for="(p, index) in palettes"
- :key="p"
+ :key="p.name"
:value="index"
>
- {{ p }}
+ {{ p.name }}
</option>
</Select>
<SelectMotion
@@ -286,9 +286,12 @@
v-model="palettes"
:selected-id="editedPalette"
:get-add-value="getNewPalette"
- @update:selectedId="e => editecPalette = e"
+ @update:selectedId="e => editedPalette = e"
/>
- <PaletteEditor v-model="palette" />
+ <PaletteEditor
+ class="palette-editor-edit"
+ v-model="palette"
+ />
</div>
</tab-switcher>
</div>
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -760,8 +760,6 @@
"label": "Palette",
"import": "Import",
"export": "Export",
- "dark": "Dark mode",
- "light": "Light mode",
"bg": "Panel background",
"fg": "Buttons etc.",
"text": "Text",
