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

it is working. finally.

Browse source
This commit is contained in:
Henry Jameson 2024-10-02 16:22:28 +03:00
parent ba4be2cb22
commit e8d0e45b5b
7 changed files with 168 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/components/settings_modal/tabs/appearance_tab.js
View file

@ -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')
},
async setPalette (name) {
await this.$store.dispatch('setPalette', name)
setPalette (name) {
this.$store.dispatch('setPalette', name)
this.$store.dispatch('applyTheme')
},
resetTheming (name) {
this.$store.dispatch('resetThemeV2')
this.$store.dispatch('resetThemeV3')
this.$store.dispatch('setStyle', 'stock')
this.$store.dispatch('applyTheme')
},
previewTheme (key, input) {

8
src/components/settings_modal/tabs/appearance_tab.vue
View file

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

2
src/modules/config.js
View file

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

186
src/modules/interface.js
View file

@ -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}'`)
}
styleDataUsed = await styleFetchFunc?.()
result.nameUsed = name
if (result.nameUsed === 'stock') {
result.dataUsed = null
return result
}
if (userPaletteCustomData) {
paletteNameUsed = 'custom' // custom data overrides name
paletteDataUsed = userPaletteCustomData
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)
}
}
result.dataUsed = await fetchFunc()
}
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 {
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}'`)
}
paletteDataUsed = await paletteFetchFunc?.()
}
} 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?.()
}
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')

2
src/services/style_setter/style_setter.js
View file

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

6
src/services/theme_data/theme_data_3.service.js
View file

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

2
static/config.json
View file

@ -24,6 +24,6 @@
"showInstanceSpecificPanel": false,
"sidebarRight": false,
"subjectLineBehavior": "email",
"theme": "pleroma-dark",
"theme": null,
"webPushNotifications": false
}