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

Merge branch 'themes3-grand-finale-maybe' into shigusegubu-themes3

Browse source
This commit is contained in:
Henry Jameson 2024-12-04 14:04:04 +02:00
commit 4503bd77d7
5 changed files with 91 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -361,8 +361,27 @@ const AppearanceTab = {
onlyNormalState: true
})
} else if (version === 'v3') {
const palette = input.find(x => x.component === '@palette')
let paletteRule
if (palette) {
const { directives } = palette
directives.link = directives.link || directives.accent
directives.accent = directives.accent || directives.link
paletteRule = {
component: 'Root',
directives: Object.fromEntries(
Object
.entries(directives)
.filter(([k, v]) => k && k !== 'name')
.map(([k, v]) => ['--' + k, 'color | ' + v])
)
}
} else {
paletteRule = null
}
theme3 = init({
inputRuleset: input,
inputRuleset: [...input, paletteRule].filter(x => x),
ultimateBackgroundColor: '#000000',
liteMode: true,
debug: true,

4
src/i18n/en.json
View file

@ -701,7 +701,7 @@
"use_websockets": "Use websockets (Realtime updates)",
"text": "Text",
"theme": "Theme",
"theme_old": "Theme (old)",
"theme_old": "Theme editor (old)",
"theme_help": "Use hex color codes (#rrggbb) to customize your color theme.",
"theme_help_v2_1": "You can also override certain component's colors and opacity by toggling the checkbox, use \"Clear all\" button to clear all overrides.",
"theme_help_v2_2": "Icons underneath some entries are background/text contrast indicators, hover over for detailed info. Please keep in mind that when using transparency contrast indicators show the worst possible case.",
@ -781,7 +781,7 @@
"imported": "Imported"
},
"editor": {
"title": "Style",
"title": "Style editor",
"reset_style": "Reset",
"load_style": "Open from file",
"save_style": "Save",

61
src/modules/interface.js
View file

@ -3,6 +3,10 @@ import { CURRENT_VERSION, generatePreset } from 'src/services/theme_data/theme_d
import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
import { deserialize } from '../services/theme_data/iss_deserializer.js'
// helper for debugging
// eslint-disable-next-line no-unused-vars
const toValue = (x) => JSON.parse(JSON.stringify(x === undefined ? 'null' : x))
const defaultState = {
localFonts: null,
themeApplied: false,
@ -264,6 +268,7 @@ const interfaceMod = {
setStyle ({ dispatch, commit }, value) {
dispatch('resetThemeV3')
dispatch('resetThemeV2')
dispatch('resetThemeV3Palette')
commit('setOption', { name: 'style', value })
@ -272,6 +277,7 @@ const interfaceMod = {
setStyleCustom ({ dispatch, commit }, value) {
dispatch('resetThemeV3')
dispatch('resetThemeV2')
dispatch('resetThemeV3Palette')
commit('setOption', { name: 'styleCustomData', value })
@ -443,14 +449,47 @@ const interfaceMod = {
console.debug('Version used', majorVersionUsed)
if (majorVersionUsed === 'v3') {
state.themeDataUsed = null
state.themeNameUsed = null
const style = await getData(
'style',
stylesIndex,
userStyleCustomData,
userStyleName || instanceStyleName
)
state.styleNameUsed = style.nameUsed
state.styleDataUsed = style.dataUsed
let firstStylePaletteName = null
style
.dataUsed
?.filter(x => x.component === '@palette')
.map(x => {
const cleanDirectives = Object.fromEntries(
Object
.entries(x.directives)
.filter(([k, v]) => k)
)
return { name: x.variant, ...cleanDirectives }
})
.forEach(palette => {
const key = 'style.' + palette.name.toLowerCase().replace(/ /, '_')
if (!firstStylePaletteName) firstStylePaletteName = key
palettesIndex[key] = () => Promise.resolve(palette)
})
const palette = await getData(
'palette',
palettesIndex,
userPaletteCustomData,
userPaletteName || instancePaletteName
userPaletteName || firstStylePaletteName || instancePaletteName
)
state.paletteNameUsed = palette.nameUsed
state.paletteDataUsed = palette.dataUsed
if (state.paletteDataUsed) {
state.paletteDataUsed.link = state.paletteDataUsed.link || state.paletteDataUsed.accent
state.paletteDataUsed.accent = state.paletteDataUsed.accent || state.paletteDataUsed.link
@ -481,23 +520,19 @@ const interfaceMod = {
}
}
console.debug('Palette data used', palette.dataUsed)
const style = await getData(
'style',
stylesIndex,
userStyleCustomData,
userStyleName || instanceStyleName
)
state.styleNameUsed = style.nameUsed
state.styleDataUsed = style.dataUsed
} else {
state.styleNameUsed = null
state.styleDataUsed = null
state.paletteNameUsed = null
state.paletteDataUsed = null
const theme = await getData(
'theme',
themesIndex,
userThemeV2Source || userThemeV2Snapshot,
userThemeV2Name || instanceThemeV2Name
)
// themeNameUsed = theme.nameUsed
state.themeNameUsed = theme.nameUsed
state.themeDataUsed = theme.dataUsed
}
},
@ -519,10 +554,6 @@ const interfaceMod = {
}
await dispatch('getThemeData')
// commit('setOption', { name: 'palette', value: paletteNameUsed })
// commit('setOption', { name: 'style', value: styleNameUsed })
// commit('setOption', { name: 'theme', value: themeNameUsed })
const paletteIss = (() => {
if (!state.paletteDataUsed) return null
const result = {

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

@ -122,16 +122,28 @@ export const applyTheme = (input, onFinish = (data) => {}, debug) => {
const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
const insertRule = (styles, rule) => {
if (rule.indexOf('webkit') >= 0) {
try {
styles.sheet.insertRule(rule, 'index-max')
styles.rules.push(rule)
} catch (e) {
console.warn('Can\'t insert rule due to lack of support', e)
}
} else {
styles.sheet.insertRule(rule, 'index-max')
styles.rules.push(rule)
}
}
const { lazyProcessFunc } = generateTheme(
input,
{
onNewRule (rule, isLazy) {
if (isLazy) {
lazyStyles.sheet.insertRule(rule, 'index-max')
lazyStyles.rules.push(rule)
insertRule(lazyStyles, rule)
} else {
eagerStyles.sheet.insertRule(rule, 'index-max')
eagerStyles.rules.push(rule)
insertRule(eagerStyles, rule)
}
},
onEagerFinished () {

15
src/services/theme_data/css_utils.js
View file

@ -82,7 +82,7 @@ export const getCssRules = (rules, debug) => rules.map(rule => {
`
}
if (v === 'transparent') {
if (rule.component === 'Root') return []
if (rule.component === 'Root') return null
return [
rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + v) : '',
' --background: ' + v
@ -114,7 +114,7 @@ export const getCssRules = (rules, debug) => rules.map(rule => {
}
default:
if (k.startsWith('--')) {
const [type, value] = v.split('|').map(x => x.trim()) // woah, Extreme!
const [type, value] = v.split('|').map(x => x.trim())
switch (type) {
case 'color': {
const color = rule.dynamicVars[k]
@ -127,21 +127,20 @@ export const getCssRules = (rules, debug) => rules.map(rule => {
case 'generic':
return k + ': ' + value
default:
return ''
return null
}
}
return ''
return null
}
}).filter(x => x).map(x => ' ' + x).join(';\n')
}).filter(x => x).map(x => ' ' + x + ';').join('\n')
return [
header,
directives + ';',
directives,
(rule.component === 'Text' && rule.state.indexOf('faint') < 0 && rule.directives.textNoCssColor !== 'yes') ? ' color: var(--text);' : '',
'',
virtualDirectives,
footer
].join('\n')
].filter(x => x).join('\n')
}).filter(x => x)
export const getScopedVersion = (rules, newScope) => {