qugalet/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

palette editor done

Browse source
This commit is contained in:
Henry Jameson 2024-09-29 21:14:31 +03:00
parent d5571216fe
commit d2cce99086
5 changed files with 160 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/color_input/color_input.vue
View file

@ -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"

47
src/components/settings_modal/tabs/style_tab/style_tab.js
View file

@ -56,10 +56,21 @@ export default {
const license = ref('')
const website = ref('')
// ### Initialization stuff
const palette = {
// These are here just to establish order,
// themes should override those
// ### 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',
@ -70,7 +81,20 @@ export default {
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,
@ -377,6 +402,16 @@ export default {
updatePreview
)
watch(
palettes,
updatePreview
)
watch(
editedPalette,
updatePreview
)
watch(
selectedComponentName,
updateSelectedComponent
@ -417,6 +452,8 @@ export default {
author,
license,
website,
palette,
editedPalette,
componentKeys,
componentsMap,
selectedComponent,

20
src/components/settings_modal/tabs/style_tab/style_tab.scss
View file

@ -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;

74
src/components/settings_modal/tabs/style_tab/style_tab.vue
View file

@ -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">

17
src/i18n/en.json
View file

@ -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",