From 41f8c3dad59e6513b53f29964e10e7a3a4440cf0 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 11 Jul 2024 14:54:37 +0300 Subject: [PATCH 01/12] fix gaps in sticky headers --- src/App.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.scss b/src/App.scss index 9225075b6..edd0495fa 100644 --- a/src/App.scss +++ b/src/App.scss @@ -211,7 +211,7 @@ nav { .app-layout { --miniColumn: 25rem; --maxiColumn: 45rem; - --columnGap: 1em; + --columnGap: 1rem; --effectiveSidebarColumnWidth: minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn))); --effectiveNotifsColumnWidth: minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn))); --effectiveContentColumnWidth: minmax(var(--miniColumn), var(--contentColumnWidth, var(--maxiColumn))); From 115335e98a675aa9caff747053ea23820ff8e27a Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 12 Jul 2024 02:13:08 +0300 Subject: [PATCH 02/12] move theme application to interface module --- src/modules/instance.js | 85 ---------------------------------------- src/modules/interface.js | 82 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 82 insertions(+), 85 deletions(-) diff --git a/src/modules/instance.js b/src/modules/instance.js index 85a966b89..76661a2a1 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -1,6 +1,3 @@ -import { getPreset, applyTheme, tryLoadCache } from '../services/style_setter/style_setter.js' -import { CURRENT_VERSION, generatePreset } from 'src/services/theme_data/theme_data.service.js' -import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js' import apiService from '../services/api/api.service.js' import { instanceDefaultProperties } from './config.js' import { langCodeToCldrName, ensureFinalFallback } from '../i18n/languages.js' @@ -375,88 +372,6 @@ const instance = { console.warn(e) } }, - - setTheme ({ commit, state, rootState }, { themeName, themeData, recompile } = {}) { - // const { - // themeApplied - // } = rootState.interface - const { - theme: instanceThemeName - } = state - - const { - customTheme: userThemeSnapshot, - customThemeSource: userThemeSource, - forceThemeRecompilation, - themeDebug - } = rootState.config - - const forceRecompile = forceThemeRecompilation || recompile - - // If we're not not forced to recompile try using - // cache (tryLoadCache return true if load successful) - if (!forceRecompile && !themeDebug && tryLoadCache()) { - commit('setThemeApplied') - } - - const normalizeThemeData = (themeData) => { - console.log('NORMAL', themeData) - if (themeData.themeFileVerison === 1) { - return generatePreset(themeData).theme - } - // New theme presets don't have 'theme' property, they use 'source' - const themeSource = themeData.source - - let out // shout, shout let it all out - if (!themeData.theme || (themeSource && themeSource.themeEngineVersion === CURRENT_VERSION)) { - out = themeSource || themeData - } else { - out = themeData.theme - } - - // generatePreset here basically creates/updates "snapshot", - // while also fixing the 2.2 -> 2.3 colors/shadows/etc - return generatePreset(out).theme - } - - let promise = null - - if (themeName) { - // commit('setInstanceOption', { name: 'theme', value: themeName }) - promise = getPreset(themeName) - .then(themeData => { - // commit('setInstanceOption', { name: 'themeData', value: themeData }) - return normalizeThemeData(themeData) - }) - } else if (themeData) { - promise = Promise.resolve(normalizeThemeData(themeData)) - } else { - if (userThemeSource || userThemeSnapshot) { - if (userThemeSource && userThemeSource.themeEngineVersion === CURRENT_VERSION) { - promise = Promise.resolve(normalizeThemeData(userThemeSource)) - } else { - promise = Promise.resolve(normalizeThemeData(userThemeSnapshot)) - } - } else if (instanceThemeName) { - promise = getPreset(themeName).then(themeData => normalizeThemeData(themeData)) - } - } - - promise - .then(realThemeData => { - console.log('FR FR 1', realThemeData) - const ruleset = convertTheme2To3(realThemeData) - console.log('FR FR 2', ruleset) - - applyTheme( - ruleset, - () => commit('setThemeApplied'), - themeDebug - ) - }) - - return promise - }, fetchEmoji ({ dispatch, state }) { if (!state.customEmojiFetched) { state.customEmojiFetched = true diff --git a/src/modules/interface.js b/src/modules/interface.js index 2ccfeef35..d1607919a 100644 --- a/src/modules/interface.js +++ b/src/modules/interface.js @@ -1,3 +1,7 @@ +import { getPreset, applyTheme, tryLoadCache } from '../services/style_setter/style_setter.js' +import { CURRENT_VERSION, generatePreset } from 'src/services/theme_data/theme_data.service.js' +import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js' + const defaultState = { localFonts: null, themeApplied: false, @@ -207,6 +211,84 @@ const interfaceMod = { }, setLastTimeline ({ commit }, value) { commit('setLastTimeline', value) + }, + setTheme ({ commit, rootState }, { themeName, themeData, recompile } = {}) { + // const { + // themeApplied + // } = rootState.interface + const { + theme: instanceThemeName + } = rootState.instance + + const { + customTheme: userThemeSnapshot, + customThemeSource: userThemeSource, + forceThemeRecompilation, + themeDebug + } = rootState.config + + const forceRecompile = forceThemeRecompilation || recompile + + // If we're not not forced to recompile try using + // cache (tryLoadCache return true if load successful) + if (!forceRecompile && !themeDebug && tryLoadCache()) { + commit('setThemeApplied') + } + + const normalizeThemeData = (themeData) => { + if (themeData.themeFileVerison === 1) { + return generatePreset(themeData).theme + } + // New theme presets don't have 'theme' property, they use 'source' + const themeSource = themeData.source + + let out // shout, shout let it all out + if (!themeData.theme || (themeSource && themeSource.themeEngineVersion === CURRENT_VERSION)) { + out = themeSource || themeData + } else { + out = themeData.theme + } + + // generatePreset here basically creates/updates "snapshot", + // while also fixing the 2.2 -> 2.3 colors/shadows/etc + return generatePreset(out).theme + } + + let promise = null + + if (themeName) { + // commit('setInstanceOption', { name: 'theme', value: themeName }) + promise = getPreset(themeName) + .then(themeData => { + // commit('setInstanceOption', { name: 'themeData', value: themeData }) + return normalizeThemeData(themeData) + }) + } else if (themeData) { + promise = Promise.resolve(normalizeThemeData(themeData)) + } else { + if (userThemeSource || userThemeSnapshot) { + if (userThemeSource && userThemeSource.themeEngineVersion === CURRENT_VERSION) { + promise = Promise.resolve(normalizeThemeData(userThemeSource)) + } else { + promise = Promise.resolve(normalizeThemeData(userThemeSnapshot)) + } + } else if (instanceThemeName) { + promise = getPreset(themeName).then(themeData => normalizeThemeData(themeData)) + } + } + + promise + .then(realThemeData => { + const ruleset = convertTheme2To3(realThemeData) + + applyTheme( + ruleset, + () => commit('setThemeApplied'), + themeDebug + ) + }) + + return promise } } } From 82ca01ef71c57bcae2c06525c3f43a8713941933 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 12 Jul 2024 02:14:31 +0300 Subject: [PATCH 03/12] cleanup --- src/modules/instance.js | 1 - src/modules/interface.js | 3 --- 2 files changed, 4 deletions(-) diff --git a/src/modules/instance.js b/src/modules/instance.js index 76661a2a1..49ef391a7 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -42,7 +42,6 @@ const defaultState = { registrationOpen: true, server: 'http://localhost:4040/', textlimit: 5000, - themeData: undefined, vapidPublicKey: undefined, // Stuff from static/config.json diff --git a/src/modules/interface.js b/src/modules/interface.js index d1607919a..23d6c552a 100644 --- a/src/modules/interface.js +++ b/src/modules/interface.js @@ -213,9 +213,6 @@ const interfaceMod = { commit('setLastTimeline', value) }, setTheme ({ commit, rootState }, { themeName, themeData, recompile } = {}) { - // const { - // themeApplied - // } = rootState.interface const { theme: instanceThemeName } = rootState.instance From cd92eb56e097cbc9a42b31ceb9cf2f0bd94967db Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 12 Jul 2024 02:19:38 +0300 Subject: [PATCH 04/12] don't recompile if cache exists --- src/modules/interface.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/modules/interface.js b/src/modules/interface.js index 23d6c552a..a2a7728af 100644 --- a/src/modules/interface.js +++ b/src/modules/interface.js @@ -230,6 +230,7 @@ const interfaceMod = { // cache (tryLoadCache return true if load successful) if (!forceRecompile && !themeDebug && tryLoadCache()) { commit('setThemeApplied') + return } const normalizeThemeData = (themeData) => { From e029732021f67e13ca20c1b80c1315c4935b9f2b Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 12 Jul 2024 02:40:57 +0300 Subject: [PATCH 05/12] use separate action for setting Theme V2 --- .../settings_modal/tabs/theme_tab/theme_tab.js | 12 ++++-------- src/modules/config.js | 11 ++++++----- src/modules/interface.js | 2 -- 3 files changed, 10 insertions(+), 15 deletions(-) diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js index 7ca3b066e..8d025ea4c 100644 --- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js +++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js @@ -499,18 +499,14 @@ export default { } }, setCustomTheme () { - this.$store.dispatch('setOption', { - name: 'customTheme', - value: { + this.$store.dispatch('setThemeV2', { + customTheme: { ignore: true, themeFileVersion: this.selectedVersion, themeEngineVersion: CURRENT_VERSION, ...this.previewTheme - } - }) - this.$store.dispatch('setOption', { - name: 'customThemeSource', - value: { + }, + customThemeSource: { themeFileVersion: this.selectedVersion, themeEngineVersion: CURRENT_VERSION, shadows: this.shadowsLocal, diff --git a/src/modules/config.js b/src/modules/config.js index 56151d2a0..109f2742e 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -255,6 +255,11 @@ const config = { revert }) }, + setThemeV2 ({ commit, dispatch }, { customTheme, customThemeSource }) { + commit('setOption', { name: 'customTheme', value: customTheme }) + commit('setOption', { name: 'customThemeSource', value: customThemeSource }) + dispatch('setTheme', { themeData: customThemeSource, recompile: true }) + }, setOption ({ commit, dispatch, state }, { name, value }) { const exceptions = new Set([ 'useStreamingApi' @@ -272,6 +277,7 @@ const config = { dispatch('disableMastoSockets') dispatch('setOption', { name: 'useStreamingApi', value: false }) }) + break } } } else { @@ -286,11 +292,6 @@ const config = { case 'theme': dispatch('setTheme', { themeName: value, recompile: true }) break - case 'customTheme': - case 'customThemeSource': { - if (!value.ignore) dispatch('setTheme', { themeData: value }) - break - } case 'themeDebug': { dispatch('setTheme', { recompile: true }) break diff --git a/src/modules/interface.js b/src/modules/interface.js index a2a7728af..6a749bc36 100644 --- a/src/modules/interface.js +++ b/src/modules/interface.js @@ -255,10 +255,8 @@ const interfaceMod = { let promise = null if (themeName) { - // commit('setInstanceOption', { name: 'theme', value: themeName }) promise = getPreset(themeName) .then(themeData => { - // commit('setInstanceOption', { name: 'themeData', value: themeData }) return normalizeThemeData(themeData) }) } else if (themeData) { From a378c999b78c9138abb8ea1982dca2f976381f10 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 16 Jul 2024 21:01:20 +0300 Subject: [PATCH 06/12] add ability to override underlay color/opacity regardless of theme --- .../settings_modal/tabs/appearance_tab.js | 4 +-- .../settings_modal/tabs/appearance_tab.vue | 4 +-- src/i18n/en.json | 16 ++++++--- src/modules/config.js | 8 ++--- src/modules/interface.js | 34 +++++++++++++++++-- src/services/theme_data/theme2_to_theme3.js | 4 ++- 6 files changed, 54 insertions(+), 16 deletions(-) diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js index d340fd00e..4f9885087 100644 --- a/src/components/settings_modal/tabs/appearance_tab.js +++ b/src/components/settings_modal/tabs/appearance_tab.js @@ -28,12 +28,12 @@ const AppearanceTab = { forcedRoundnessOptions: ['disabled', 'sharp', 'nonsharp', 'round'].map((mode, i) => ({ key: mode, value: i - 1, - label: this.$t(`settings.forced_roundness_mode_${mode}`) + label: this.$t(`settings.style.themes3.hacks.forced_roundness_mode_${mode}`) })), underlayOverrideModes: ['none', 'opaque', 'transparent'].map((mode, i) => ({ key: mode, value: mode, - label: this.$t(`settings.underlay_override_mode_${mode}`) + label: this.$t(`settings.style.themes3.hacks.underlay_override_mode_${mode}`) })) } }, diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue index d3df76a11..85084e292 100644 --- a/src/components/settings_modal/tabs/appearance_tab.vue +++ b/src/components/settings_modal/tabs/appearance_tab.vue @@ -179,7 +179,7 @@ path="forcedRoundness" :options="forcedRoundnessOptions" > - {{ $t('settings.force_interface_roundness') }} + {{ $t('settings.style.themes3.hacks.force_interface_roundness') }}
  • @@ -188,7 +188,7 @@ path="theme3hacks.underlay" :options="underlayOverrideModes" > - {{ $t('settings.underlay_overrides') }} + {{ $t('settings.style.themes3.hacks.underlay_overrides') }}
  • diff --git a/src/i18n/en.json b/src/i18n/en.json index 770a4a658..a1946aedb 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -386,11 +386,6 @@ "navbar_size": "Top bar size", "panel_header_size": "Panel header size", "visual_tweaks": "Minor visual tweaks", - "force_interface_roundness": "Override interface roundness/sharpness", - "forced_roundness_mode_disabled": "Use theme defaults", - "forced_roundness_mode_sharp": "Force sharp edges", - "forced_roundness_mode_nonsharp": "Force not-so-sharp (1px roundness) edges", - "forced_roundness_mode_round": "Force round edges", "theme_debug": "Show what background theme engine assumes when dealing with transparancy (DEBUG)", "scale_and_layout": "Interface scale and layout", "mfa": { @@ -749,6 +744,17 @@ "update_preview": "Update preview", "themes3": { "define": "Override", + "hacks": { + "underlay_overrides": "Change underlay", + "underlay_override_mode_none": "Theme default", + "underlay_override_mode_opaque": "Replace with solid color", + "underlay_override_mode_transparent": "Remove entirely (might break some themes)", + "force_interface_roundness": "Override interface roundness/sharpness", + "forced_roundness_mode_disabled": "Use theme defaults", + "forced_roundness_mode_sharp": "Force sharp edges", + "forced_roundness_mode_nonsharp": "Force not-so-sharp (1px roundness) edges", + "forced_roundness_mode_round": "Force round edges" + }, "font": { "group-builtin": "Browser default fonts", "builtin" : { diff --git a/src/modules/config.js b/src/modules/config.js index 109f2742e..906a64b02 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -282,12 +282,12 @@ const config = { } } else { commit('setOption', { name, value }) - if ( - name.startsWith('theme3hacks') || - APPEARANCE_SETTINGS_KEYS.has(name) - ) { + if (APPEARANCE_SETTINGS_KEYS.has(name)) { applyConfig(state) } + if (name.startsWith('theme3hacks')) { + dispatch('setTheme', { recompile: true }) + } switch (name) { case 'theme': dispatch('setTheme', { themeName: value, recompile: true }) diff --git a/src/modules/interface.js b/src/modules/interface.js index 6a749bc36..a9cd70e50 100644 --- a/src/modules/interface.js +++ b/src/modules/interface.js @@ -221,7 +221,8 @@ const interfaceMod = { customTheme: userThemeSnapshot, customThemeSource: userThemeSource, forceThemeRecompilation, - themeDebug + themeDebug, + theme3hacks } = rootState.config const forceRecompile = forceThemeRecompilation || recompile @@ -275,7 +276,36 @@ const interfaceMod = { promise .then(realThemeData => { - const ruleset = convertTheme2To3(realThemeData) + const theme2ruleset = convertTheme2To3(realThemeData) + const hacks = [] + + Object.entries(theme3hacks).forEach(([key, value]) => { + switch (key) { + case 'underlay': { + if (value !== 'none') { + const newRule = { + component: 'Underlay', + directives: {} + } + if (value === 'opaque') { + newRule.directives.opacity = 1 + newRule.directives.background = '--wallpaper' + } + if (value === 'transparent') { + newRule.directives.opacity = 0 + } + console.log('NEW RULE', newRule) + hacks.push(newRule) + } + break + } + } + }) + + const ruleset = [ + ...theme2ruleset, + ...hacks + ] applyTheme( ruleset, diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js index b54366bd8..95eb03c19 100644 --- a/src/services/theme_data/theme2_to_theme3.js +++ b/src/services/theme_data/theme2_to_theme3.js @@ -12,7 +12,9 @@ export const basePaletteKeys = new Set([ 'cBlue', 'cRed', 'cGreen', - 'cOrange' + 'cOrange', + + 'wallpaper' ]) export const fontsKeys = new Set([ From 9d76fcc425abe1236304c270765ffdb4e6d0ba6e Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 16 Jul 2024 21:55:57 +0300 Subject: [PATCH 07/12] fix admin combo-dropdowns styles --- src/App.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/App.scss b/src/App.scss index edd0495fa..1145ded46 100644 --- a/src/App.scss +++ b/src/App.scss @@ -671,7 +671,8 @@ option { display: inline-flex; vertical-align: middle; - > * { + > *, + > * .button-default { --_roundness-left: 0; --_roundness-right: 0; @@ -679,11 +680,13 @@ option { flex: 1 1 auto; } - > *:first-child { + > *:first-child, + > *:first-child .button-default { --_roundness-left: var(--roundness); } - > *:last-child { + > *:last-child, + > *:last-child .button-default { --_roundness-right: var(--roundness); } } From 40c9163d215b5ac7b69437f3585586b2174211ca Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 17 Jul 2024 17:19:57 +0300 Subject: [PATCH 08/12] optimizations, WIP theme selector --- src/components/panel.style.js | 10 ++ src/components/root.style.js | 5 + .../settings_modal/tabs/appearance_tab.js | 61 +++++++++- .../settings_modal/tabs/appearance_tab.vue | 30 +++++ .../settings_modal/tabs/theme_tab/preview.vue | 104 ++++++++++++++++- .../tabs/theme_tab/theme_tab.js | 20 ++-- .../tabs/theme_tab/theme_tab.scss | 105 ------------------ src/components/status/post.style.js | 9 ++ src/modules/interface.js | 54 +++++---- src/services/theme_data/css_utils.js | 12 ++ src/services/theme_data/iss_utils.js | 39 ++++++- .../theme_data/theme_data_3.service.js | 70 ++++++++---- 12 files changed, 361 insertions(+), 158 deletions(-) diff --git a/src/components/panel.style.js b/src/components/panel.style.js index ad16c18ff..1bba4766d 100644 --- a/src/components/panel.style.js +++ b/src/components/panel.style.js @@ -20,6 +20,16 @@ export default { 'Tab', 'ListItem' ], + validInnerComponentsLite: [ + 'Text', + 'Link', + 'Icon', + 'Border', + 'Button', + 'Input', + 'PanelHeader', + 'Alert' + ], defaultRules: [ { directives: { diff --git a/src/components/root.style.js b/src/components/root.style.js index f9bdf16e8..4bd735aa5 100644 --- a/src/components/root.style.js +++ b/src/components/root.style.js @@ -12,6 +12,11 @@ export default { 'Alert', 'Button' // mobile post button ], + validInnerComponentsLite: [ + 'Underlay', + 'Scrollbar', + 'ScrollbarElement' + ], defaultRules: [ { directives: { diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js index 4f9885087..10de03977 100644 --- a/src/components/settings_modal/tabs/appearance_tab.js +++ b/src/components/settings_modal/tabs/appearance_tab.js @@ -6,6 +6,18 @@ import UnitSetting, { defaultHorizontalUnits } from '../helpers/unit_setting.vue import FontControl from 'src/components/font_control/font_control.vue' +import { normalizeThemeData } from 'src/modules/interface' + +import { + getThemes +} from 'src/services/style_setter/style_setter.js' +import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js' +import { init } from 'src/services/theme_data/theme_data_3.service.js' +import { + getCssRules, + getScopedVersion +} from 'src/services/theme_data/css_utils.js' + import SharedComputedObject from '../helpers/shared_computed_object.js' import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue' import { library } from '@fortawesome/fontawesome-svg-core' @@ -13,6 +25,8 @@ import { faGlobe } from '@fortawesome/free-solid-svg-icons' +import Preview from './theme_tab/preview.vue' + library.add( faGlobe ) @@ -20,6 +34,7 @@ library.add( const AppearanceTab = { data () { return { + availableStyles: [], thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(mode => ({ key: mode, value: mode, @@ -44,7 +59,32 @@ const AppearanceTab = { FloatSetting, UnitSetting, ProfileSettingIndicator, - FontControl + FontControl, + Preview + }, + created () { + const self = this + + getThemes() + .then((promises) => { + return Promise.all( + Object.entries(promises) + .map(([k, v]) => v.then(res => [k, res])) + ) + }) + .then(themes => themes.reduce((acc, [k, v]) => { + if (v) { + return { + ...acc, + [k]: v + } + } else { + return acc + } + }, {})) + .then((themesComplete) => { + self.availableStyles = themesComplete + }) }, computed: { horizontalUnits () { @@ -77,6 +117,25 @@ const AppearanceTab = { } }, ...SharedComputedObject() + }, + methods: { + previewTheme (input) { + const style = normalizeThemeData(input) + const x = 2 + if (x === 1) return + const theme2 = convertTheme2To3(style) + const theme3 = init({ + inputRuleset: theme2, + ultimateBackgroundColor: '#000000', + liteMode: true, + onlyNormalState: true + }) + + return getScopedVersion( + getCssRules(theme3.eager), + '#theme-preview-' + (input.name || input[0]).replace(/ /g, '_') + ).join('\n') + } } } diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue index 85084e292..2488720d1 100644 --- a/src/components/settings_modal/tabs/appearance_tab.vue +++ b/src/components/settings_modal/tabs/appearance_tab.vue @@ -1,5 +1,21 @@ From d2683a672859cb0fb46037540f62f4fdb07407c1 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 17 Jul 2024 22:10:11 +0300 Subject: [PATCH 11/12] new theme selector, RC --- .../settings_modal/tabs/appearance_tab.js | 17 ++++++--- .../settings_modal/tabs/appearance_tab.vue | 23 +++++++++-- .../tabs/theme_tab/theme_tab.js | 2 +- src/i18n/en.json | 1 + src/modules/config.js | 35 +++++++++++------ src/modules/interface.js | 38 +++++++++++-------- 6 files changed, 78 insertions(+), 38 deletions(-) diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js index ef367e412..7ec22641f 100644 --- a/src/components/settings_modal/tabs/appearance_tab.js +++ b/src/components/settings_modal/tabs/appearance_tab.js @@ -95,7 +95,7 @@ const AppearanceTab = { if (!isIntersecting) return const theme = this.availableStyles.find(x => x.key === target.dataset.themeKey) this.$nextTick(() => { - theme.ready = true + if (theme) theme.ready = true }) observer.unobserve(target) }) @@ -144,13 +144,20 @@ const AppearanceTab = { this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val }) } }, + isCustomThemeUsed () { + const { theme } = this.mergedConfig + return theme === 'custom' || theme === null + }, ...SharedComputedObject() }, methods: { - isThemeActive (key, name) { - console.log(this.$store.getters.mergedConfig) - const { customTheme, themeName, customThemeSource } = this.$store.getters.mergedConfig - console.log(customTheme, customThemeSource, themeName) + isThemeActive (key) { + const { theme } = this.mergedConfig + console.log(key, theme) + return key === theme + }, + setTheme (name) { + this.$store.dispatch('setTheme', { themeName: name, saveData: true, recompile: true }) }, previewTheme (key, input) { const style = normalizeThemeData(input) diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue index 0954d3a7c..748a69ce7 100644 --- a/src/components/settings_modal/tabs/appearance_tab.vue +++ b/src/components/settings_modal/tabs/appearance_tab.vue @@ -3,14 +3,24 @@

    {{ $t('settings.theme') }}

      +