palettes editor done
This commit is contained in:
Henry Jameson
parent
3f55c08693
commit
bae4836349
|
|
@ -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;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: 0.5em;
|
||||
.palette-export-button {
|
||||
grid-column: 3 / span 2;
|
||||
}
|
||||
|
||||
.color-input.style-control {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -760,8 +760,6 @@
|
|||
"label": "Palette",
|
||||
"import": "Import",
|
||||
"export": "Export",
|
||||
"dark": "Dark mode",
|
||||
"light": "Light mode",
|
||||
"bg": "Panel background",
|
||||
"fg": "Buttons etc.",
|
||||
"text": "Text",
|
||||
|
|
|
|||
Loading…
Reference in a new issue