diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js index d910c79b7..1e4e64d62 100644 --- a/src/components/settings_modal/tabs/appearance_tab.js +++ b/src/components/settings_modal/tabs/appearance_tab.js @@ -361,27 +361,8 @@ 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, paletteRule].filter(x => x), + inputRuleset: input, ultimateBackgroundColor: '#000000', liteMode: true, debug: true, diff --git a/src/i18n/en.json b/src/i18n/en.json index 7febbf9f0..685a0652d 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 editor (old)", + "theme_old": "Theme (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 editor", + "title": "Style", "reset_style": "Reset", "load_style": "Open from file", "save_style": "Save", diff --git a/src/modules/interface.js b/src/modules/interface.js index 130ab0969..26bfe2955 100644 --- a/src/modules/interface.js +++ b/src/modules/interface.js @@ -3,10 +3,6 @@ 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, @@ -268,7 +264,6 @@ const interfaceMod = { setStyle ({ dispatch, commit }, value) { dispatch('resetThemeV3') dispatch('resetThemeV2') - dispatch('resetThemeV3Palette') commit('setOption', { name: 'style', value }) @@ -277,7 +272,6 @@ const interfaceMod = { setStyleCustom ({ dispatch, commit }, value) { dispatch('resetThemeV3') dispatch('resetThemeV2') - dispatch('resetThemeV3Palette') commit('setOption', { name: 'styleCustomData', value }) @@ -449,47 +443,14 @@ 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 || firstStylePaletteName || instancePaletteName + userPaletteName || 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 @@ -520,19 +481,23 @@ const interfaceMod = { } } console.debug('Palette data used', palette.dataUsed) - } else { - state.styleNameUsed = null - state.styleDataUsed = null - state.paletteNameUsed = null - state.paletteDataUsed = null + const style = await getData( + 'style', + stylesIndex, + userStyleCustomData, + userStyleName || instanceStyleName + ) + state.styleNameUsed = style.nameUsed + state.styleDataUsed = style.dataUsed + } else { const theme = await getData( 'theme', themesIndex, userThemeV2Source || userThemeV2Snapshot, userThemeV2Name || instanceThemeV2Name ) - state.themeNameUsed = theme.nameUsed + // themeNameUsed = theme.nameUsed state.themeDataUsed = theme.dataUsed } }, @@ -554,6 +519,10 @@ 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 = { diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index b5014ff17..f57fd80e9 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -122,28 +122,16 @@ 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) { - insertRule(lazyStyles, rule) + lazyStyles.sheet.insertRule(rule, 'index-max') + lazyStyles.rules.push(rule) } else { - insertRule(eagerStyles, rule) + eagerStyles.sheet.insertRule(rule, 'index-max') + eagerStyles.rules.push(rule) } }, onEagerFinished () { diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js index 48935ea0e..e33960831 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 null + if (rule.component === 'Root') return [] 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()) + const [type, value] = v.split('|').map(x => x.trim()) // woah, Extreme! switch (type) { case 'color': { const color = rule.dynamicVars[k] @@ -127,20 +127,21 @@ export const getCssRules = (rules, debug) => rules.map(rule => { case 'generic': return k + ': ' + value default: - return null + return '' } } - return null + return '' } - }).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 - ].filter(x => x).join('\n') + ].join('\n') }).filter(x => x) export const getScopedVersion = (rules, newScope) => {