diff options
| -rw-r--r-- | src/components/settings_modal/tabs/appearance_tab.js | 17 | ||||
| -rw-r--r-- | src/components/settings_modal/tabs/appearance_tab.vue | 23 | ||||
| -rw-r--r-- | src/components/settings_modal/tabs/theme_tab/theme_tab.js | 2 | ||||
| -rw-r--r-- | src/i18n/en.json | 1 | ||||
| -rw-r--r-- | src/modules/config.js | 35 | ||||
| -rw-r--r-- | 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 ef367e41..7ec22641 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 0954d3a7..748a69ce 100644 --- a/src/components/settings_modal/tabs/appearance_tab.vue +++ b/src/components/settings_modal/tabs/appearance_tab.vue @@ -3,14 +3,24 @@ <div class="setting-item"> <h2>{{ $t('settings.theme') }}</h2> <ul - class="input theme-list" + class="theme-list" ref="themeList" > <button + v-if="isCustomThemeUsed" + disabled + class="button-default theme-preview" + > + <preview /> + <h4 class="theme-name">{{ $t('settings.style.custom_theme_used') }}</h4> + </button> + <button v-for="style in availableStyles" :data-theme-key="style.key" :key="style.key" class="button-default theme-preview" + :class="{ toggled: isThemeActive(style.key) }" + @click="setTheme(style.key)" > <!-- eslint-disable vue/no-v-text-v-html-on-component --> <component @@ -260,14 +270,17 @@ list-style: none; display: flex; flex-wrap: wrap; - margin: 0 -0.5em; - height: 15em; + margin: -0.5em 0; + height: 25em; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; + border-radius: var(--roundness); + border: 1px solid var(--border); + padding: 0; .theme-preview { - width: 21rem; + width: 19rem; display: flex; flex-direction: column; align-items: center; @@ -278,9 +291,11 @@ } .preview-container { + pointer-events: none; zoom: 0.5; border: none; border-radius: var(--roundness); + text-align: left; } } } 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 a19550d1..39dc372e 100644 --- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js +++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js @@ -606,7 +606,7 @@ export default { normalizeLocalState (theme, version = 0, source, forceSource = false) { let input if (typeof source !== 'undefined') { - if (forceSource || source.themeEngineVersion === CURRENT_VERSION) { + if (forceSource || source?.themeEngineVersion === CURRENT_VERSION) { input = source version = source.themeEngineVersion } else { diff --git a/src/i18n/en.json b/src/i18n/en.json index a1946aed..c3357ef5 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -740,6 +740,7 @@ "enable_web_push_always_show_tip": "Some browsers (Chromium, Chrome) require that push messages always result in a notification, otherwise generic 'Website was updated in background' is shown, enable this to prevent this notification from showing, as Chrome seem to hide push notifications if tab is in focus. Can result in showing duplicate notifications on other browsers.", "more_settings": "More settings", "style": { + "custom_theme_used": "(Custom theme)", "themes2_outdated": "Editor for Themes V2 is no longer supported and presented here for sake of legacy.", "update_preview": "Update preview", "themes3": { diff --git a/src/modules/config.js b/src/modules/config.js index 906a64b0..e54a883c 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -35,11 +35,26 @@ export const multiChoiceProperties = [ export const defaultState = { expertLevel: 0, // used to track which settings to show and hide - colors: {}, - theme: undefined, - customTheme: undefined, - customThemeSource: undefined, - forceThemeRecompilation: false, + + // Theme stuff + theme: undefined, // Very old theme store, stores preset name, still in use + + // V1 + colors: {}, // VERY old theme store, just colors of V1, probably not even used anymore + + // V2 + customTheme: undefined, // "snapshot", previously was used as actual theme store for V2 so it's still used in case of PleromaFE downgrade event. + customThemeSource: undefined, // "source", stores original theme data + + // V3 + 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 + palette: null, // not used yet, will be used for V3 + theme3hacks: { // Hacks, user overrides that are independent of theme used + underlay: 'none', + badgeColor: null + }, + hideISP: false, hideInstanceWallpaper: false, hideShoutbox: false, @@ -92,11 +107,6 @@ export const defaultState = { chatMention: true, polls: true }, - palette: null, - theme3hacks: { - underlay: 'none', - badgeColor: null - }, webPushNotifications: false, webPushAlwaysShowNotifications: false, muteWords: [], @@ -164,7 +174,6 @@ export const defaultState = { maxDepthInThread: undefined, // instance default autocompleteSelect: undefined, // instance default closingDrawerMarksAsSeen: undefined, // instance default - themeDebug: false, unseenAtTop: undefined, // instance default ignoreInactionableSeen: undefined // instance default } @@ -256,6 +265,7 @@ const config = { }) }, setThemeV2 ({ commit, dispatch }, { customTheme, customThemeSource }) { + commit('setOption', { name: 'theme', value: 'custom' }) commit('setOption', { name: 'customTheme', value: customTheme }) commit('setOption', { name: 'customThemeSource', value: customThemeSource }) dispatch('setTheme', { themeData: customThemeSource, recompile: true }) @@ -290,7 +300,8 @@ const config = { } switch (name) { case 'theme': - dispatch('setTheme', { themeName: value, recompile: true }) + if (value === 'custom') break + dispatch('setTheme', { themeName: value, recompile: true, saveData: true }) break case 'themeDebug': { dispatch('setTheme', { recompile: true }) diff --git a/src/modules/interface.js b/src/modules/interface.js index a0746052..b56b60ec 100644 --- a/src/modules/interface.js +++ b/src/modules/interface.js @@ -212,12 +212,13 @@ const interfaceMod = { setLastTimeline ({ commit }, value) { commit('setLastTimeline', value) }, - setTheme ({ commit, rootState }, { themeName, themeData, recompile } = {}) { + setTheme ({ commit, rootState }, { themeName, themeData, recompile, saveData } = {}) { const { theme: instanceThemeName } = rootState.instance const { + theme: userThemeName, customTheme: userThemeSnapshot, customThemeSource: userThemeSource, forceThemeRecompilation, @@ -225,6 +226,8 @@ const interfaceMod = { theme3hacks } = rootState.config + const actualThemeName = userThemeName || instanceThemeName + const forceRecompile = forceThemeRecompilation || recompile // If we're not not forced to recompile try using @@ -236,28 +239,31 @@ const interfaceMod = { let promise = null - if (themeName) { - promise = getPreset(themeName) - .then(themeData => { - return normalizeThemeData(themeData) - }) - } else if (themeData) { + 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)) + } else if (themeName) { + promise = getPreset(themeName).then(themeData => 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 (actualThemeName && actualThemeName !== 'custom') { + promise = getPreset(actualThemeName).then(themeData => normalizeThemeData(themeData)) + } else { + throw new Error('Cannot load any theme!') } promise .then(realThemeData => { const theme2ruleset = convertTheme2To3(realThemeData) + + if (saveData) { + commit('setOption', { name: 'theme', value: themeName || actualThemeName }) + commit('setOption', { name: 'customTheme', value: realThemeData }) + commit('setOption', { name: 'customThemeSource', value: realThemeData }) + } const hacks = [] Object.entries(theme3hacks).forEach(([key, value]) => { |