From 7f9ab03447dd76cd408d1132cdf2c8bde6f67abe Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 3 Dec 2024 19:30:35 +0200 Subject: [PATCH 1/4] fix firefox --- src/services/style_setter/style_setter.js | 20 ++++++++++++++++---- src/services/theme_data/css_utils.js | 15 +++++++-------- 2 files changed, 23 insertions(+), 12 deletions(-) diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index f57fd80e9..b5014ff17 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -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 () { diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js index e33960831..48935ea0e 100644 --- a/src/services/theme_data/css_utils.js +++ b/src/services/theme_data/css_utils.js @@ -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) => { From 3c929416643ef64d6f5996a6466363ba4d65a96d Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 4 Dec 2024 10:46:24 +0200 Subject: [PATCH 2/4] properly reset v3 stuff when applying v2 theme --- src/modules/interface.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/modules/interface.js b/src/modules/interface.js index 26bfe2955..c08ca4e49 100644 --- a/src/modules/interface.js +++ b/src/modules/interface.js @@ -490,6 +490,8 @@ const interfaceMod = { ) state.styleNameUsed = style.nameUsed state.styleDataUsed = style.dataUsed + state.themeDataUsed = null + state.themeNameUsed = null } else { const theme = await getData( 'theme', @@ -497,8 +499,12 @@ const interfaceMod = { userThemeV2Source || userThemeV2Snapshot, userThemeV2Name || instanceThemeV2Name ) - // themeNameUsed = theme.nameUsed + state.themeNameUsed = theme.nameUsed state.themeDataUsed = theme.dataUsed + state.styleNameUsed = null + state.styleDataUsed = null + state.paletteNameUsed = null + state.paletteDataUsed = null } }, async applyTheme ( @@ -519,10 +525,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 = { From 9a9d89229f2654edaf2e096e23f1ad46a0b7a964 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 4 Dec 2024 11:27:35 +0200 Subject: [PATCH 3/4] add "editor" to tab names for better clarity --- src/i18n/en.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/i18n/en.json b/src/i18n/en.json index 685a0652d..7febbf9f0 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -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", From 3af29e78b93ce2b784f4ccafad595f5daf1c45bb Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 4 Dec 2024 14:03:27 +0200 Subject: [PATCH 4/4] when switching to new style, use "native" palette, also show it in appearance tab --- .../settings_modal/tabs/appearance_tab.js | 21 ++++++- src/modules/interface.js | 61 ++++++++++++++----- 2 files changed, 65 insertions(+), 17 deletions(-) diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js index 1e4e64d62..d910c79b7 100644 --- a/src/components/settings_modal/tabs/appearance_tab.js +++ b/src/components/settings_modal/tabs/appearance_tab.js @@ -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, diff --git a/src/modules/interface.js b/src/modules/interface.js index c08ca4e49..130ab0969 100644 --- a/src/modules/interface.js +++ b/src/modules/interface.js @@ -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,18 +520,12 @@ 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 - state.themeDataUsed = null - state.themeNameUsed = null } else { + state.styleNameUsed = null + state.styleDataUsed = null + state.paletteNameUsed = null + state.paletteDataUsed = null + const theme = await getData( 'theme', themesIndex, @@ -501,10 +534,6 @@ const interfaceMod = { ) state.themeNameUsed = theme.nameUsed state.themeDataUsed = theme.dataUsed - state.styleNameUsed = null - state.styleDataUsed = null - state.paletteNameUsed = null - state.paletteDataUsed = null } }, async applyTheme (