commit: d2cce990863725634653baf5cda86505e12a6b41
parent d5571216fee0ea9c8b3ad0ff64eb04a019a42997
Author: Henry Jameson <me@hjkos.com>
Date: Sun, 29 Sep 2024 21:14:31 +0300
palette editor done
Diffstat:
5 files changed, 160 insertions(+), 20 deletions(-)
diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue
@@ -15,7 +15,7 @@
:model-value="present"
:disabled="disabled"
class="opt"
- @update:modelValue="update(typeof modelValue === 'undefined' ? fallback : undefined)"
+ @update:modelValue="updateValue(typeof modelValue === 'undefined' ? fallback : undefined)"
/>
<div
class="input color-input-field"
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -56,21 +56,45 @@ export default {
const license = ref('')
const website = ref('')
- // ### Initialization stuff
- const palette = {
- // These are here just to establish order,
- // themes should override those
- bg: '#121a24',
- fg: '#182230',
- text: '#b9b9ba',
- link: '#d8a070',
- accent: '#d8a070',
- cRed: '#FF0000',
- cBlue: '#0095ff',
- cGreen: '#0fa00f',
- cOrange: '#ffa500'
- }
+ // ### Palette stuff
+ const palettes = reactive({
+ light: {
+ bg: '#f2f6f9',
+ fg: '#d6dfed',
+ text: '#304055',
+ underlay: '#5d6086',
+ accent: '#f55b1b',
+ cBlue: '#0095ff',
+ cRed: '#d31014',
+ cGreen: '#0fa00f',
+ cOrange: '#ffa500',
+ border: '#d8e6f9'
+ },
+ dark: {
+ bg: '#121a24',
+ fg: '#182230',
+ text: '#b9b9ba',
+ link: '#d8a070',
+ accent: '#d8a070',
+ cRed: '#FF0000',
+ cBlue: '#0095ff',
+ cGreen: '#0fa00f',
+ cOrange: '#ffa500'
+ }
+ })
+
+ const editedPalette = ref('dark')
+ const palette = computed({
+ get () {
+ return palettes[editedPalette.value]
+ },
+ set (newPalette) {
+ console.log(newPalette)
+ palettes[editedPalette.value] = newPalette
+ }
+ })
+ // ### I18n stuff
// The paths in i18n are getting ridicously long, this effectively shortens them
const getI18nPath = (componentName) => `settings.style.themes3.editor.components.${componentName}`
const getFriendlyNamePath = (componentName) => getI18nPath(componentName) + '.friendlyName'
@@ -85,6 +109,7 @@ export default {
: `${getI18nPath(componentName)}.states.${state}`
}
+ // ### Initialization stuff
// Getting existing components
const componentsContext = require.context('src', true, /\.style.js(on)?$/)
const componentKeysAll = componentsContext.keys()
@@ -356,7 +381,7 @@ export default {
previewRules.push(...init({
inputRuleset: editorFriendlyToOriginal.value,
initialStaticVars: {
- ...palette
+ ...palette.value
},
ultimateBackgroundColor: '#000000',
rootComponentName: selectedComponentName.value,
@@ -378,6 +403,16 @@ export default {
)
watch(
+ palettes,
+ updatePreview
+ )
+
+ watch(
+ editedPalette,
+ updatePreview
+ )
+
+ watch(
selectedComponentName,
updateSelectedComponent
)
@@ -417,6 +452,8 @@ export default {
author,
license,
website,
+ palette,
+ editedPalette,
componentKeys,
componentsMap,
selectedComponent,
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.scss b/src/components/settings_modal/tabs/style_tab/style_tab.scss
@@ -9,16 +9,13 @@
margin-right: 0.5em;
flex: 1 1 0;
line-height: 2;
+ min-height: 2em;
}
&.suboption {
margin-left: 1em;
}
- .opt {
- margin: 0.5em;
- }
-
.color-input {
flex: 0 0 0;
}
@@ -90,6 +87,21 @@
}
}
+ .palette-editor {
+ > 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 {
display: grid;
grid-template-columns: 6fr 3fr 4fr;
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -51,6 +51,80 @@
</li>
</ul>
</div>
+ <div class="setting-item palette-editor">
+ <div class="label">
+ <label for="palette-selector">
+ {{ $t('settings.style.themes3.editor.palette.label') }}
+ {{ ' ' }}
+ </label>
+ <Select
+ v-model="editedPalette"
+ id="palette-selector"
+ >
+ <option key="dark" value="dark">
+ {{ $t('settings.style.themes3.editor.palette.dark') }}
+ </option>
+ <option key="light" value="light">
+ {{ $t('settings.style.themes3.editor.palette.light') }}
+ </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>
+ </div>
<div class="setting-item component-editor">
<div class="component-selector">
<label for="component-selector">
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -778,6 +778,23 @@
"preserve": "Keep color",
"no-auto": "Disabled"
},
+ "palette": {
+ "label": "Edited palette",
+ "dark": "Dark mode",
+ "light": "Light mode",
+ "bg": "Panel background",
+ "fg": "Buttons etc.",
+ "text": "Text",
+ "link": "Links",
+ "accent": "Accent color",
+ "cRed": "Red color",
+ "cBlue": "Blue color",
+ "cGreen": "Green color",
+ "cOrange": "Orange color",
+ "extra1": "Extra 1",
+ "extra2": "Extra 2",
+ "extra3": "Extra 3"
+ },
"components": {
"normal": {
"state": "Normal",
