commit: e8d0e45b5b19722555b53f9009f8bc01a9ed8640
parent ba4be2cb22aa508589f89fe0c44e8da241e91321
Author: Henry Jameson <me@hjkos.com>
Date: Wed, 2 Oct 2024 16:22:28 +0300
it is working. finally.
Diffstat:
7 files changed, 167 insertions(+), 63 deletions(-)
diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
@@ -174,7 +174,11 @@ const AppearanceTab = {
},
isCustomThemeUsed () {
const { theme } = this.mergedConfig
- return theme === 'custom' || theme === null
+ return theme === 'custom'
+ },
+ isCustomStyleUsed (name) {
+ const { style } = this.mergedConfig
+ return style === 'custom'
},
...SharedComputedObject()
},
@@ -196,12 +200,26 @@ const AppearanceTab = {
const { theme } = this.mergedConfig
return key === theme
},
- async setTheme (name) {
- await this.$store.dispatch('setTheme', name)
+ isStyleActive (key) {
+ const { style } = this.mergedConfig
+ return key === style
+ },
+ isPaletteActive (key) {
+ const { palette } = this.mergedConfig
+ return key === palette
+ },
+ setTheme (name) {
+ this.$store.dispatch('setTheme', name)
+ this.$store.dispatch('applyTheme')
+ },
+ setPalette (name) {
+ this.$store.dispatch('setPalette', name)
this.$store.dispatch('applyTheme')
},
- async setPalette (name) {
- await this.$store.dispatch('setPalette', name)
+ resetTheming (name) {
+ this.$store.dispatch('resetThemeV2')
+ this.$store.dispatch('resetThemeV3')
+ this.$store.dispatch('setStyle', 'stock')
this.$store.dispatch('applyTheme')
},
previewTheme (key, input) {
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -9,7 +9,8 @@
<button
class="button-default theme-preview"
data-theme-key="stock"
- @click="setTheme(null)"
+ @click="resetTheming"
+ :class="{ toggled: isStyleActive('stock') }"
>
<!-- eslint-disable vue/no-v-text-v-html-on-component -->
<component
@@ -49,7 +50,7 @@
v-html="previewTheme(style.key, style.data)"
/>
<!-- eslint-enable vue/no-v-text-v-html-on-component -->
- <preview :class="{ placeholder: ready }" :id="'theme-preview-' + style.key"/>
+ <preview :id="'theme-preview-' + style.key"/>
<h4 class="theme-name">
{{ style.name }}
<span class="alert neutral version">{{ style.version }}</span>
@@ -61,8 +62,9 @@
<button
v-for="p in availablePalettes"
class="btn button-default palette-entry"
+ :class="{ toggled: isPaletteActive(p.key) }"
:key="p.name"
- @click="() => setPalette(p)"
+ @click="() => setPalette(p.key)"
>
<label>
{{ p.name }}
diff --git a/src/modules/config.js b/src/modules/config.js
@@ -47,6 +47,8 @@ export const defaultState = {
customThemeSource: undefined, // "source", stores original theme data
// V3
+ style: null,
+ palette: null,
themeDebug: false, // debug mode that uses computed backgrounds instead of real ones to debug contrast functions
forceThemeRecompilation: false, // flag that forces recompilation on boot even if cache exists
theme3hacks: { // Hacks, user overrides that are independent of theme used
diff --git a/src/modules/interface.js b/src/modules/interface.js
@@ -223,16 +223,16 @@ const interfaceMod = {
}
},
setPalette ({ dispatch, commit }, value) {
- dispatch('resetV3')
- dispatch('resetV2')
+ dispatch('resetThemeV3Palette')
+ dispatch('resetThemeV2')
commit('setOption', { name: 'palette', value })
dispatch('applyTheme')
},
setPaletteCustom ({ dispatch, commit }, value) {
- dispatch('resetV3')
- dispatch('resetV2')
+ dispatch('resetThemeV3Palette')
+ dispatch('resetThemeV2')
commit('setOption', { name: 'paletteCustomData', value })
@@ -249,16 +249,16 @@ const interfaceMod = {
}
},
setStyle ({ dispatch, commit }, value) {
- dispatch('resetV3')
- dispatch('resetV2')
+ dispatch('resetThemeV3')
+ dispatch('resetThemeV2')
commit('setOption', { name: 'style', value })
dispatch('applyTheme')
},
setStyleCustom ({ dispatch, commit }, value) {
- dispatch('resetV3')
- dispatch('resetV2')
+ dispatch('resetThemeV3')
+ dispatch('resetThemeV2')
commit('setOption', { name: 'styleCustomData', value })
@@ -275,29 +275,33 @@ const interfaceMod = {
}
},
setTheme ({ dispatch, commit }, value) {
- dispatch('resetV3')
- dispatch('resetV2')
+ dispatch('resetThemeV3')
+ dispatch('resetThemeV3Palette')
+ dispatch('resetThemeV2')
commit('setOption', { name: 'theme', value })
dispatch('applyTheme')
},
setThemeCustom ({ dispatch, commit }, value) {
- dispatch('resetV3')
- dispatch('resetV2')
+ dispatch('resetThemeV3')
+ dispatch('resetThemeV3Palette')
+ dispatch('resetThemeV2')
commit('setOption', { name: 'customTheme', value })
commit('setOption', { name: 'customThemeSource', value })
dispatch('applyTheme')
},
- resetV3 ({ dispatch, commit }) {
+ resetThemeV3 ({ dispatch, commit }) {
commit('setOption', { name: 'style', value: null })
commit('setOption', { name: 'styleCustomData', value: null })
+ },
+ resetThemeV3Palette ({ dispatch, commit }) {
commit('setOption', { name: 'palette', value: null })
commit('setOption', { name: 'paletteCustomData', value: null })
},
- resetV2 ({ dispatch, commit }) {
+ resetThemeV2 ({ dispatch, commit }) {
commit('setOption', { name: 'theme', value: null })
commit('setOption', { name: 'customTheme', value: null })
commit('setOption', { name: 'customThemeSource', value: null })
@@ -333,7 +337,6 @@ const interfaceMod = {
theme: userThemeV2Name,
customTheme: userThemeV2Snapshot,
customThemeSource: userThemeV2Source
-
} = rootState.config
const forceRecompile = forceThemeRecompilation || recompile
@@ -343,10 +346,34 @@ const interfaceMod = {
let majorVersionUsed
+ console.log(
+ 'USER V3',
+ userPaletteName,
+ userStyleName
+ )
+ console.log(
+ 'USER V2',
+ userThemeV2Name,
+ userThemeV2Source,
+ userThemeV2Snapshot
+ )
+
+ console.log(
+ 'INST V3',
+ instancePaletteName,
+ instanceStyleName
+ )
+ console.log(
+ 'INST V2',
+ instanceThemeV2Name
+ )
+
if (userPaletteName || userPaletteCustomData ||
userStyleName || userStyleCustomData ||
instancePaletteName ||
- instanceStyleName
+ instanceStyleName ||
+ (instanceThemeV2Name == null &&
+ userThemeV2Name == null)
) {
// Palette and/or style overrides V2 themes
instanceThemeV2Name = null
@@ -364,13 +391,20 @@ const interfaceMod = {
palettesIndex = result[0]
stylesIndex = result[1]
}
- } else {
+ } else if (
+ userThemeV2Name ||
+ userThemeV2Snapshot ||
+ userThemeV2Source ||
+ instanceThemeV2Name
+ ) {
majorVersionUsed = 'v2'
// Promise.all just to be uniform with v3
const result = await Promise.all([
dispatch('fetchThemesIndex')
])
themesIndex = result[0]
+ } else {
+ majorVersionUsed = 'v3'
}
let styleDataUsed = null
@@ -380,52 +414,93 @@ const interfaceMod = {
let themeNameUsed = null
let themeDataUsed = null
- if (majorVersionUsed === 'v3') {
- if (userStyleCustomData) {
- styleNameUsed = 'custom' // custom data overrides name
- styleDataUsed = userStyleCustomData
+ const getData = async (resource, index, customData, name) => {
+ const capitalizedResource = resource[0].toUpperCase() + resource.slice(1)
+ const result = {}
+
+ if (customData) {
+ result.nameUsed = 'custom' // custom data overrides name
+ result.dataUsed = customData
} else {
- styleNameUsed = userStyleName || instanceStyleName
- let styleFetchFunc = stylesIndex[themeNameUsed]
- if (!styleFetchFunc) {
- const newName = Object.keys(stylesIndex)[0]
- styleFetchFunc = stylesIndex[newName]
- console.warn(`Style with id '${styleNameUsed}' not found, falling back to '${newName}'`)
+ result.nameUsed = name
+
+ if (result.nameUsed === 'stock') {
+ result.dataUsed = null
+ return result
}
- styleDataUsed = await styleFetchFunc?.()
- }
- if (userPaletteCustomData) {
- paletteNameUsed = 'custom' // custom data overrides name
- paletteDataUsed = userPaletteCustomData
- } else {
- paletteNameUsed = userPaletteName || instanceStyleName
- let paletteFetchFunc = palettesIndex[themeNameUsed]
- if (!paletteFetchFunc) {
- const newName = Object.keys(palettesIndex)[0]
- paletteFetchFunc = palettesIndex[newName]
- console.warn(`Palette with id '${paletteNameUsed}' not found, falling back to '${newName}'`)
+ let fetchFunc = index[result.nameUsed]
+ // Fallbacks
+ if (!fetchFunc) {
+ const newName = Object.keys(index)[0]
+ fetchFunc = index[newName]
+ console.warn(`${capitalizedResource} with id '${styleNameUsed}' not found, trying back to '${newName}'`)
+ if (!fetchFunc) {
+ console.warn(`${capitalizedResource} doesn't have a fallback, defaulting to stock.`)
+ fetchFunc = () => Promise.resolve(null)
+ }
}
- paletteDataUsed = await paletteFetchFunc?.()
+ result.dataUsed = await fetchFunc()
}
- } else {
- if (userThemeV2Snapshot || userThemeV2Source) {
- themeNameUsed = 'custom' // custom data overrides name
- themeDataUsed = userThemeV2Snapshot || userThemeV2Source
- } else {
- themeNameUsed = userThemeV2Name || instanceThemeV2Name
- let themeFetchFunc = themesIndex[themeNameUsed]
- if (!themeFetchFunc) {
- const newName = Object.keys(themesIndex)[0]
- themeFetchFunc = themesIndex[newName]
- console.warn(`Theme with id '${themeNameUsed}' not found, falling back to '${newName}'`)
- }
- themeDataUsed = await themeFetchFunc?.()
+ return result
+ }
+
+ console.log('VERSION', majorVersionUsed)
+
+ if (majorVersionUsed === 'v3') {
+ const palette = await getData(
+ 'palette',
+ palettesIndex,
+ userPaletteCustomData,
+ userPaletteName || instancePaletteName
+ )
+ paletteNameUsed = palette.nameUsed
+ paletteDataUsed = palette.dataUsed
+ if (Array.isArray(paletteDataUsed)) {
+ const [
+ name,
+ background,
+ foreground,
+ text,
+ link,
+ cRed = '#FF0000',
+ cBlue = '#0000FF',
+ cGreen = '#00FF00',
+ cOrange = '#E3FF00'
+ ] = paletteDataUsed
+ paletteDataUsed = { name, background, foreground, text, link, cRed, cBlue, cGreen, cOrange }
}
+ console.log('PAL', userPaletteName, paletteNameUsed)
+ console.log('PAL', paletteDataUsed)
+
+ const style = await getData(
+ 'style',
+ stylesIndex,
+ userStyleCustomData,
+ userStyleName || instanceStyleName
+ )
+ styleNameUsed = style.nameUsed
+ styleDataUsed = style.dataUsed
+ } else {
+ const theme = await getData(
+ 'theme',
+ themesIndex,
+ userThemeV2Source || userThemeV2Snapshot,
+ userThemeV2Name || instanceThemeV2Name
+ )
+ themeNameUsed = theme.nameUsed
+ themeDataUsed = theme.dataUsed
+
// Themes v2 editor support
commit('setInstanceOption', { name: 'themeData', value: themeDataUsed })
}
+ console.log('STYLE', styleNameUsed, paletteNameUsed, themeNameUsed)
+
+ // commit('setOption', { name: 'palette', value: paletteNameUsed })
+ // commit('setOption', { name: 'style', value: styleNameUsed })
+ // commit('setOption', { name: 'theme', value: themeNameUsed })
+
const paletteIss = (() => {
if (!paletteDataUsed) return null
const result = {
@@ -433,6 +508,7 @@ const interfaceMod = {
directives: {}
}
+ console.log('PALETTE', paletteDataUsed)
Object
.entries(paletteDataUsed)
.filter(([k]) => k !== 'name')
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
@@ -52,7 +52,6 @@ export const generateTheme = async (inputRuleset, callbacks, debug) => {
// Assuming that "worst case scenario background" is panel background since it's the most likely one
const themes3 = init({
inputRuleset,
- ultimateBackgroundColor: inputRuleset[0].directives['--bg']?.split('|')[1].trim() || '#000000',
debug
})
@@ -146,6 +145,7 @@ export const tryLoadCache = () => {
}
export const applyTheme = async (input, onFinish = (data) => {}, debug) => {
+ console.log('INPUT', input)
const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
@@ -230,6 +230,12 @@ export const init = ({
})
.map(({ data }) => data)
+ if (!ultimateBackgroundColor) {
+ console.warn('No ultimate background color provided, falling back to panel color')
+ const rootRule = ruleset.findLast((x) => (x.component === 'Root' && x.directives?.['--bg']))
+ ultimateBackgroundColor = rootRule.directives['--bg'].split('|')[1].trim()
+ }
+
const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name))
const nonEditableComponents = new Set(Object.values(components).filter(c => c.notEditable).map(c => c.name))
diff --git a/static/config.json b/static/config.json
@@ -24,6 +24,6 @@
"showInstanceSpecificPanel": false,
"sidebarRight": false,
"subjectLineBehavior": "email",
- "theme": "pleroma-dark",
+ "theme": null,
"webPushNotifications": false
}
