aboutsummaryrefslogtreecommitdiff
path: root/src/modules
diff options
context:
space:
mode:
Diffstat (limited to 'src/modules')
-rw-r--r--src/modules/config.js106
-rw-r--r--src/modules/instance.js35
-rw-r--r--src/modules/interface.js219
3 files changed, 315 insertions, 45 deletions
diff --git a/src/modules/config.js b/src/modules/config.js
index aa400f77..cf84234a 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -1,10 +1,21 @@
import Cookies from 'js-cookie'
-import { setPreset, applyTheme, applyConfig } from '../services/style_setter/style_setter.js'
+import { applyConfig } from '../services/style_setter/style_setter.js'
import messages from '../i18n/messages'
import { set } from 'lodash'
import localeService from '../services/locale/locale.service.js'
const BACKEND_LANGUAGE_COOKIE_NAME = 'userLanguage'
+const APPEARANCE_SETTINGS_KEYS = new Set([
+ 'sidebarColumnWidth',
+ 'contentColumnWidth',
+ 'notifsColumnWidth',
+ 'textSize',
+ 'navbarSize',
+ 'panelHeaderSize',
+ 'forcedRoundness',
+ 'emojiSize',
+ 'emojiReactionsScale'
+])
const browserLocale = (window.navigator.language || 'en').split('-')[0]
@@ -24,11 +35,30 @@ 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
+ theme3hacks: { // Hacks, user overrides that are independent of theme used
+ underlay: 'none',
+ fonts: {
+ interface: undefined,
+ input: undefined,
+ post: undefined,
+ monospace: undefined
+ }
+ },
+
hideISP: false,
hideInstanceWallpaper: false,
hideShoutbox: false,
@@ -117,7 +147,12 @@ export const defaultState = {
sidebarColumnWidth: '25rem',
contentColumnWidth: '45rem',
notifsColumnWidth: '25rem',
- emojiReactionsScale: 1.0,
+ emojiReactionsScale: undefined,
+ textSize: undefined, // instance default
+ emojiSize: undefined, // instance default
+ navbarSize: undefined, // instance default
+ panelHeaderSize: undefined, // instance default
+ forcedRoundness: undefined, // instance default
navbarColumnStretch: false,
greentext: undefined, // instance default
useAtIcon: undefined, // instance default
@@ -175,6 +210,10 @@ const config = {
}
},
mutations: {
+ setOptionTemporarily (state, { name, value }) {
+ set(state, name, value)
+ applyConfig(state)
+ },
setOption (state, { name, value }) {
set(state, name, value)
},
@@ -205,6 +244,37 @@ const config = {
setHighlight ({ commit, dispatch }, { user, color, type }) {
commit('setHighlight', { user, color, type })
},
+ setOptionTemporarily ({ commit, dispatch, state, rootState }, { name, value }) {
+ if (rootState.interface.temporaryChangesTimeoutId !== null) {
+ console.warn('Can\'t track more than one temporary change')
+ return
+ }
+ const oldValue = state[name]
+
+ commit('setOptionTemporarily', { name, value })
+
+ const confirm = () => {
+ dispatch('setOption', { name, value })
+ commit('clearTemporaryChanges')
+ }
+
+ const revert = () => {
+ commit('setOptionTemporarily', { name, value: oldValue })
+ commit('clearTemporaryChanges')
+ }
+
+ commit('setTemporaryChanges', {
+ timeoutId: setTimeout(revert, 10000),
+ confirm,
+ revert
+ })
+ },
+ 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 })
+ },
setOption ({ commit, dispatch, state }, { name, value }) {
const exceptions = new Set([
'useStreamingApi'
@@ -222,24 +292,26 @@ const config = {
dispatch('disableMastoSockets')
dispatch('setOption', { name: 'useStreamingApi', value: false })
})
+ break
}
}
} else {
commit('setOption', { name, value })
+ if (APPEARANCE_SETTINGS_KEYS.has(name)) {
+ applyConfig(state)
+ }
+ if (name.startsWith('theme3hacks')) {
+ dispatch('setTheme', { recompile: true })
+ }
switch (name) {
case 'theme':
- setPreset(value)
+ if (value === 'custom') break
+ dispatch('setTheme', { themeName: value, recompile: true, saveData: true })
break
- case 'sidebarColumnWidth':
- case 'contentColumnWidth':
- case 'notifsColumnWidth':
- case 'emojiReactionsScale':
- applyConfig(state)
- break
- case 'customTheme':
- case 'customThemeSource':
- applyTheme(value)
+ case 'themeDebug': {
+ dispatch('setTheme', { recompile: true })
break
+ }
case 'interfaceLanguage':
messages.setLanguage(this.getters.i18n, value)
dispatch('loadUnicodeEmojiData', value)
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 0a5c1ae7..99b8b5d5 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -1,5 +1,3 @@
-import { getPreset, applyTheme } from '../services/style_setter/style_setter.js'
-import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
import apiService from '../services/api/api.service.js'
import { instanceDefaultProperties } from './config.js'
import { langCodeToCldrName, ensureFinalFallback } from '../i18n/languages.js'
@@ -44,7 +42,7 @@ const defaultState = {
registrationOpen: true,
server: 'http://localhost:4040/',
textlimit: 5000,
- themeData: undefined,
+ themeData: undefined, // used for theme editor v2
vapidPublicKey: undefined,
// Stuff from static/config.json
@@ -98,6 +96,13 @@ const defaultState = {
sidebarRight: false,
subjectLineBehavior: 'email',
theme: 'pleroma-dark',
+ emojiReactionsScale: 0.5,
+ textSize: '14px',
+ emojiSize: '2.2rem',
+ navbarSize: '3.5rem',
+ panelHeaderSize: '3.2rem',
+ forcedRoundness: -1,
+ fontsOverride: {},
virtualScrolling: true,
sensitiveByDefault: false,
conversationDisplay: 'linear',
@@ -279,9 +284,6 @@ const instance = {
dispatch('initializeSocket')
}
break
- case 'theme':
- dispatch('setTheme', value)
- break
}
},
async getStaticEmoji ({ commit }) {
@@ -370,27 +372,6 @@ const instance = {
console.warn(e)
}
},
-
- setTheme ({ commit, rootState }, themeName) {
- commit('setInstanceOption', { name: 'theme', value: themeName })
- getPreset(themeName)
- .then(themeData => {
- commit('setInstanceOption', { name: 'themeData', value: themeData })
- // No need to apply theme if there's user theme already
- const { customTheme } = rootState.config
- const { themeApplied } = rootState.interface
- if (customTheme || themeApplied) return
-
- // New theme presets don't have 'theme' property, they use 'source'
- const themeSource = themeData.source
- if (!themeData.theme || (themeSource && themeSource.themeEngineVersion === CURRENT_VERSION)) {
- applyTheme(themeSource)
- } else {
- applyTheme(themeData.theme)
- }
- commit('setThemeApplied')
- })
- },
fetchEmoji ({ dispatch, state }) {
if (!state.customEmojiFetched) {
state.customEmojiFetched = true
diff --git a/src/modules/interface.js b/src/modules/interface.js
index 39242b9d..d4f0017a 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -1,5 +1,13 @@
+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,
+ temporaryChangesTimeoutId: null, // used for temporary options that revert after a timeout
+ temporaryChangesConfirm: () => {}, // used for applying temporary options
+ temporaryChangesRevert: () => {}, // used for reverting temporary options
settingsModalState: 'hidden',
settingsModalLoadedUser: false,
settingsModalLoadedAdmin: false,
@@ -14,7 +22,8 @@ const defaultState = {
cssFilter: window.CSS && window.CSS.supports && (
window.CSS.supports('filter', 'drop-shadow(0 0)') ||
window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)')
- )
+ ),
+ localFonts: typeof window.queryLocalFonts === 'function'
},
layoutType: 'normal',
globalNotices: [],
@@ -36,6 +45,17 @@ const interfaceMod = {
state.settings.currentSaveStateNotice = { error: true, errorData: error }
}
},
+ setTemporaryChanges (state, { timeoutId, confirm, revert }) {
+ state.temporaryChangesTimeoutId = timeoutId
+ state.temporaryChangesConfirm = confirm
+ state.temporaryChangesRevert = revert
+ },
+ clearTemporaryChanges (state) {
+ clearTimeout(state.temporaryChangesTimeoutId)
+ state.temporaryChangesTimeoutId = null
+ state.temporaryChangesConfirm = () => {}
+ state.temporaryChangesRevert = () => {}
+ },
setThemeApplied (state) {
state.themeApplied = true
},
@@ -90,6 +110,10 @@ const interfaceMod = {
},
setLastTimeline (state, value) {
state.lastTimeline = value
+ },
+ setFontsList (state, value) {
+ // Set is used here so that we filter out duplicate fonts (possibly same font but with different weight)
+ state.localFonts = [...(new Set(value.map(font => font.family))).values()]
}
},
actions: {
@@ -164,10 +188,203 @@ const interfaceMod = {
commit('setLayoutType', wideLayout ? 'wide' : normalOrMobile)
}
},
+ queryLocalFonts ({ commit, dispatch, state }) {
+ if (state.localFonts !== null) return
+ commit('setFontsList', [])
+ if (!state.browserSupport.localFonts) {
+ return
+ }
+ window
+ .queryLocalFonts()
+ .then((fonts) => {
+ commit('setFontsList', fonts)
+ })
+ .catch((e) => {
+ dispatch('pushGlobalNotice', {
+ messageKey: 'settings.style.themes3.font.font_list_unavailable',
+ messageArgs: {
+ error: e
+ },
+ level: 'error'
+ })
+ })
+ },
setLastTimeline ({ commit }, value) {
commit('setLastTimeline', value)
+ },
+ setTheme ({ commit, rootState }, { themeName, themeData, recompile, saveData } = {}) {
+ const {
+ theme: instanceThemeName
+ } = rootState.instance
+
+ const {
+ theme: userThemeName,
+ customTheme: userThemeSnapshot,
+ customThemeSource: userThemeSource,
+ forceThemeRecompilation,
+ themeDebug,
+ theme3hacks
+ } = rootState.config
+
+ const actualThemeName = userThemeName || instanceThemeName
+
+ const forceRecompile = forceThemeRecompilation || recompile
+
+ let promise = null
+
+ if (themeData) {
+ promise = Promise.resolve(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 => {
+ const realThemeData = normalizeThemeData(themeData)
+ if (actualThemeName === instanceThemeName) {
+ // This sole line is the reason why this whole block is above the recompilation check
+ commit('setInstanceOption', { name: 'themeData', value: { theme: realThemeData } })
+ }
+ return realThemeData
+ })
+ } else {
+ throw new Error('Cannot load any theme!')
+ }
+
+ // If we're not not forced to recompile try using
+ // cache (tryLoadCache return true if load successful)
+ if (!forceRecompile && !themeDebug && tryLoadCache()) {
+ commit('setThemeApplied')
+ return
+ }
+
+ 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]) => {
+ switch (key) {
+ case 'fonts': {
+ Object.entries(theme3hacks.fonts).forEach(([fontKey, font]) => {
+ if (!font?.family) return
+ switch (fontKey) {
+ case 'interface':
+ hacks.push({
+ component: 'Root',
+ directives: {
+ '--font': 'generic | ' + font.family
+ }
+ })
+ break
+ case 'input':
+ hacks.push({
+ component: 'Input',
+ directives: {
+ '--font': 'generic | ' + font.family
+ }
+ })
+ break
+ case 'post':
+ hacks.push({
+ component: 'RichContent',
+ directives: {
+ '--font': 'generic | ' + font.family
+ }
+ })
+ break
+ case 'monospace':
+ hacks.push({
+ component: 'Root',
+ directives: {
+ '--monoFont': 'generic | ' + font.family
+ }
+ })
+ break
+ }
+ })
+ break
+ }
+ 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
+ }
+ hacks.push(newRule)
+ }
+ break
+ }
+ }
+ })
+
+ const ruleset = [
+ ...theme2ruleset,
+ ...hacks
+ ]
+
+ applyTheme(
+ ruleset,
+ () => commit('setThemeApplied'),
+ themeDebug
+ )
+ })
+
+ return promise
}
}
}
export default interfaceMod
+
+export const normalizeThemeData = (input) => {
+ let themeData = input
+
+ if (Array.isArray(themeData)) {
+ themeData = { colors: {} }
+ themeData.colors.bg = input[1]
+ themeData.colors.fg = input[2]
+ themeData.colors.text = input[3]
+ themeData.colors.link = input[4]
+ themeData.colors.cRed = input[5]
+ themeData.colors.cGreen = input[6]
+ themeData.colors.cBlue = input[7]
+ themeData.colors.cOrange = input[8]
+ return generatePreset(themeData).theme
+ }
+
+ 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
+}
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 06:55:13 +0000