commit: d2683a672859cb0fb46037540f62f4fdb07407c1
parent 9bbdad1a6f4c3d52569f4c58c04dace95d9a6bb3
Author: Henry Jameson <me@hjkos.com>
Date: Wed, 17 Jul 2024 22:10:11 +0300
new theme selector, RC
Diffstat:
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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]) => {
