commit: 86585cc64487ced2f97ac022f4416fc6a88751dc
parent d787fb1a608f4e8bec7f7f0c01344c4f9d0b6b3b
Author: Henry Jameson <me@hjkos.com>
Date: Tue, 12 Nov 2024 23:24:28 +0200
allow setting palettes from style
Diffstat:
9 files changed, 143 insertions(+), 46 deletions(-)
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
@@ -390,6 +390,13 @@ const afterStoreSetup = async ({ store, i18n }) => {
app.use(store)
app.use(i18n)
+ // Little thing to get out of invalid theme state
+ window.resetThemes = () => {
+ store.dispatch('resetThemeV3')
+ store.dispatch('resetThemeV3Palette')
+ store.dispatch('resetThemeV2')
+ }
+
app.use(vClickOutside)
app.use(VBodyScrollLock)
app.use(VueVirtualScroller)
diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
@@ -33,7 +33,7 @@ const AppearanceTab = {
data () {
return {
availableStyles: [],
- availablePalettes: [],
+ bundledPalettes: [],
fileImporter: newImporter({
accept: '.json, .piss',
validator: this.importValidator,
@@ -41,8 +41,8 @@ const AppearanceTab = {
onImportFailure: this.onImportFailure
}),
palettesKeys: [
- 'background',
- 'foreground',
+ 'bg',
+ 'fg',
'link',
'text',
'cRed',
@@ -103,13 +103,13 @@ const AppearanceTab = {
}))
})
- updateIndex('palette').then(palettes => {
- palettes.forEach(([key, palettePromise]) => palettePromise.then(v => {
+ updateIndex('palette').then(bundledPalettes => {
+ bundledPalettes.forEach(([key, palettePromise]) => palettePromise.then(v => {
if (Array.isArray(v)) {
const [
name,
- background,
- foreground,
+ bg,
+ fg,
text,
link,
cRed = '#FF0000',
@@ -117,9 +117,9 @@ const AppearanceTab = {
cBlue = '#0000FF',
cOrange = '#E3FF00'
] = v
- this.availablePalettes.push({ key, name, background, foreground, text, link, cRed, cBlue, cGreen, cOrange })
+ this.bundledPalettes.push({ key, name, bg, fg, text, link, cRed, cBlue, cGreen, cOrange })
} else {
- this.availablePalettes.push({ key, ...v })
+ this.bundledPalettes.push({ key, ...v })
}
}))
})
@@ -147,6 +147,50 @@ const AppearanceTab = {
})
},
computed: {
+ availablePalettes () {
+ return [
+ ...this.bundledPalettes,
+ ...this.stylePalettes
+ ]
+ },
+ stylePalettes () {
+ if (!this.mergedConfig.styleCustomData) return
+ const meta = this.mergedConfig.styleCustomData
+ .find(x => x.component === '@meta')
+ const result = this.mergedConfig.styleCustomData
+ .filter(x => x.component.startsWith('@palette'))
+ .map(x => {
+ const {
+ variant,
+ bg,
+ fg,
+ text,
+ link,
+ accent,
+ cRed,
+ cBlue,
+ cGreen,
+ cOrange,
+ wallpaper
+ } = x
+
+ const result = {
+ name: `${meta.name}: ${variant}`,
+ bg,
+ fg,
+ text,
+ link,
+ accent,
+ cRed,
+ cBlue,
+ cGreen,
+ cOrange,
+ wallpaper
+ }
+ return Object.fromEntries(Object.entries(result).filter(([k, v]) => v))
+ })
+ return result
+ },
noIntersectionObserver () {
return !window.IntersectionObserver
},
@@ -253,6 +297,11 @@ const AppearanceTab = {
this.$store.dispatch('setPalette', name)
this.$store.dispatch('applyTheme')
},
+ setPaletteCustom (p) {
+ this.$store.dispatch('resetThemeV2')
+ this.$store.dispatch('setPaletteCustom', p)
+ this.$store.dispatch('applyTheme')
+ },
resetTheming (name) {
this.$store.dispatch('resetThemeV2')
this.$store.dispatch('resetThemeV3')
diff --git a/src/components/settings_modal/tabs/appearance_tab.scss b/src/components/settings_modal/tabs/appearance_tab.scss
@@ -25,6 +25,7 @@
grid-template-columns: 1fr 1fr;
grid-gap: 0.5em;
+ h4,
.unsupported-theme-v2 {
grid-column: 1 / span 2;
}
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -72,8 +72,9 @@
<h3>{{ $t('settings.style.themes3.palette.label') }}</h3>
<div class="palettes">
<template v-if="customThemeVersion === 'v3'">
+ <h4>{{ $t('settings.style.themes3.palette.bundled') }}</h4>
<button
- v-for="p in availablePalettes"
+ v-for="p in bundledPalettes"
:key="p.name"
class="btn button-default palette-entry"
:class="{ toggled: isPaletteActive(p.key) }"
@@ -89,6 +90,26 @@
:style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
/>
</button>
+ <h4 v-if="stylePalettes?.length > 0">
+ {{ $t('settings.style.themes3.palette.style') }}
+ </h4>
+ <button
+ v-for="p in stylePalettes || []"
+ :key="p.name"
+ class="btn button-default palette-entry"
+ :class="{ toggled: isPaletteActive(p.key) }"
+ @click="() => setPaletteCustom(p)"
+ >
+ <label>
+ {{ p.name }}
+ </label>
+ <span
+ v-for="c in palettesKeys"
+ :key="c"
+ class="palette-square"
+ :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
+ />
+ </button>
</template>
<template v-else-if="customThemeVersion === 'v2'">
<div class="alert neutral theme-notice unsupported-theme-v2">
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -101,6 +101,14 @@ export default {
].join('\n')
})
+ const metaRule = computed(() => ({
+ component: '@meta',
+ name: exports.name.value,
+ author: exports.author.value,
+ license: exports.license.value,
+ website: exports.website.value
+ }))
+
// ## Palette stuff
const palettes = reactive([
{
@@ -169,6 +177,22 @@ export default {
cOrange: '#ffa500'
})
+ // Raw format
+ const palettesRule = computed(() => {
+ return palettes.map(palette => {
+ const { name, ...rest } = palette
+ return {
+ component: '@palette',
+ variant: name,
+ ...Object
+ .entries(rest)
+ .filter(([k, v]) => v)
+ .reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})
+ }
+ })
+ })
+
+ // Text format
const palettesOut = computed(() => {
return palettes.map(({ name, ...palette }) => {
const entries = Object
@@ -519,6 +543,15 @@ export default {
virtualDirectives.value = value
}
+ // Raw format
+ const virtualDirectivesRule = computed(() => ({
+ component: 'Root',
+ directives: Object.fromEntries(
+ virtualDirectives.value.map(vd => [`--${vd.name}`, `${vd.valType} | ${vd.value}`])
+ )
+ }))
+
+ // Text format
const virtualDirectivesOut = computed(() => {
return [
'Root {',
@@ -548,25 +581,6 @@ export default {
)
})
- const paletteRule = computed(() => {
- const { name, ...rest } = selectedPalette.value
- return {
- component: 'Root',
- directives: Object
- .entries(rest)
- .filter(([k, v]) => v)
- .map(([k, v]) => ['--' + k, v])
- .reduce((acc, [k, v]) => ({ ...acc, [k]: `color | ${v}` }), {})
- }
- })
-
- const virtualDirectivesRule = computed(() => ({
- component: 'Root',
- directives: Object.fromEntries(
- virtualDirectives.value.map(vd => [`--${vd.name}`, `${vd.valType} | ${vd.value}`])
- )
- }))
-
// ## Export and Import
const styleExporter = newExporter({
filename: () => exports.name.value ?? 'pleroma_theme',
@@ -613,6 +627,15 @@ export default {
}
})
+ // Raw format
+ const exportRules = computed(() => [
+ metaRule.value,
+ ...palettesRule.value,
+ virtualDirectivesRule.value,
+ ...editorFriendlyToOriginal.value
+ ])
+
+ // Text format
const exportStyleData = computed(() => {
return [
metaOut.value,
@@ -630,12 +653,6 @@ export default {
styleImporter.importData()
}
- const exportRules = computed(() => [
- paletteRule.value,
- virtualDirectivesRule.value,
- ...editorFriendlyToOriginal.value
- ])
-
exports.applyStyle = () => {
store.dispatch('setStyleCustom', exportRules.value)
}
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -771,7 +771,9 @@
"cGreen": "Green color",
"cOrange": "Orange color",
"wallpaper": "Wallpaper",
- "v2_unsupported": "Older v2 themes don't support palettes. Switch to v3 theme to make use of palettes"
+ "v2_unsupported": "Older v2 themes don't support palettes. Switch to v3 theme to make use of palettes",
+ "bundled": "Bundled palettes",
+ "style": "Palettes provided by selected style"
},
"editor": {
"title": "Style",
diff --git a/src/modules/interface.js b/src/modules/interface.js
@@ -460,8 +460,8 @@ const interfaceMod = {
if (Array.isArray(paletteDataUsed)) {
const [
name,
- background,
- foreground,
+ bg,
+ fg,
text,
link,
cRed = '#FF0000',
@@ -469,10 +469,10 @@ const interfaceMod = {
cBlue = '#0000FF',
cOrange = '#E3FF00'
] = paletteDataUsed
- paletteDataUsed = { name, background, foreground, text, link, cRed, cBlue, cGreen, cOrange }
+ paletteDataUsed = { name, bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
}
+ console.log(paletteDataUsed)
- console.log('USCD', userStyleCustomData)
const style = await getData(
'style',
stylesIndex,
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
@@ -227,8 +227,8 @@ export const init = ({
bScore += b.component === 'Text' ? 1 : 0
// Debug
- a.specifityScore = aScore
- b.specifityScore = bScore
+ a._specificityScore = aScore
+ b._specificityScore = bScore
if (aScore === bScore) {
return ai - bi
diff --git a/static/palettes/index.json b/static/palettes/index.json
@@ -3,8 +3,8 @@
"pleroma-light": [ "Pleroma Light", "#f2f4f6", "#dbe0e8", "#304055", "#f86f0f", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ],
"classic-dark": {
"name": "Classic Dark",
- "background": "#161c20",
- "foreground": "#282e32",
+ "bg": "#161c20",
+ "fg": "#282e32",
"text": "#b9b9b9",
"link": "#baaa9c",
"cRed": "#d31014",
@@ -16,8 +16,8 @@
"pleroma-amoled": [ "Pleroma Dark AMOLED", "#000000", "#111111", "#b0b0b1", "#d8a070", "#aa0000", "#0fa00f", "#0095ff", "#d59500"],
"tomorrow-night": {
"name": "Tomorrow Night",
- "background": "#1d1f21",
- "foreground": "#373b41",
+ "bg": "#1d1f21",
+ "fg": "#373b41",
"link": "#81a2be",
"text": "#c5c8c6",
"cRed": "#cc6666",
