biome format --write
This commit is contained in:
Henry Jameson
parent
8372348148
commit
9262e803ec
415 changed files with 54076 additions and 17419 deletions
|
|
@ -1,7 +1,14 @@
|
|||
import { defineStore } from 'pinia'
|
||||
|
||||
import { CURRENT_VERSION, generatePreset } from 'src/services/theme_data/theme_data.service.js'
|
||||
import { getResourcesIndex, applyTheme, tryLoadCache } from '../services/style_setter/style_setter.js'
|
||||
import {
|
||||
CURRENT_VERSION,
|
||||
generatePreset,
|
||||
} from 'src/services/theme_data/theme_data.service.js'
|
||||
import {
|
||||
getResourcesIndex,
|
||||
applyTheme,
|
||||
tryLoadCache,
|
||||
} from '../services/style_setter/style_setter.js'
|
||||
import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
|
||||
import { deserialize } from '../services/theme_data/iss_deserializer.js'
|
||||
|
||||
|
|
@ -19,9 +26,9 @@ export const useInterfaceStore = defineStore('interface', {
|
|||
themeNameUsed: null,
|
||||
themeDataUsed: null,
|
||||
temporaryChangesTimeoutId: null,
|
||||
temporaryChangesCountdown: -1, // used for temporary options that revert after a timeout
|
||||
temporaryChangesCountdown: -1, // used for temporary options that revert after a timeout
|
||||
temporaryChangesConfirm: () => {}, // used for applying temporary options
|
||||
temporaryChangesRevert: () => {}, // used for reverting temporary options
|
||||
temporaryChangesRevert: () => {}, // used for reverting temporary options
|
||||
settingsModalState: 'hidden',
|
||||
settingsModalLoadedUser: false,
|
||||
settingsModalLoadedAdmin: false,
|
||||
|
|
@ -30,22 +37,23 @@ export const useInterfaceStore = defineStore('interface', {
|
|||
settings: {
|
||||
currentSaveStateNotice: null,
|
||||
noticeClearTimeout: null,
|
||||
notificationPermission: null
|
||||
notificationPermission: null,
|
||||
},
|
||||
browserSupport: {
|
||||
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'
|
||||
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: [],
|
||||
layoutHeight: 0,
|
||||
lastTimeline: null
|
||||
lastTimeline: null,
|
||||
}),
|
||||
actions: {
|
||||
setTemporaryChanges ({ confirm, revert }) {
|
||||
setTemporaryChanges({ confirm, revert }) {
|
||||
this.temporaryChangesCountdown = 10
|
||||
this.temporaryChangesConfirm = confirm
|
||||
this.temporaryChangesRevert = revert
|
||||
|
|
@ -60,38 +68,42 @@ export const useInterfaceStore = defineStore('interface', {
|
|||
}
|
||||
this.temporaryChangesTimeoutId = setTimeout(countdownFunc, 1000)
|
||||
},
|
||||
clearTemporaryChanges () {
|
||||
this.temporaryChangesTimeoutId ?? clearTimeout(this.temporaryChangesTimeoutId)
|
||||
clearTemporaryChanges() {
|
||||
this.temporaryChangesTimeoutId ??
|
||||
clearTimeout(this.temporaryChangesTimeoutId)
|
||||
this.temporaryChangesTimeoutId = null
|
||||
this.temporaryChangesCountdown = -1
|
||||
this.temporaryChangesConfirm = () => {}
|
||||
this.temporaryChangesRevert = () => {}
|
||||
},
|
||||
setPageTitle (option = '') {
|
||||
setPageTitle(option = '') {
|
||||
try {
|
||||
document.title = `${option} ${window.vuex.state.instance.name}`
|
||||
} catch (error) {
|
||||
console.error(`${error}`)
|
||||
}
|
||||
},
|
||||
settingsSaved ({ success, error }) {
|
||||
settingsSaved({ success, error }) {
|
||||
if (success) {
|
||||
if (this.noticeClearTimeout) {
|
||||
clearTimeout(this.noticeClearTimeout)
|
||||
}
|
||||
this.settings.currentSaveStateNotice = { error: false, data: success }
|
||||
this.settings.noticeClearTimeout = setTimeout(() => delete this.settings.currentSaveStateNotice, 2000)
|
||||
this.settings.noticeClearTimeout = setTimeout(
|
||||
() => delete this.settings.currentSaveStateNotice,
|
||||
2000,
|
||||
)
|
||||
} else {
|
||||
this.settings.currentSaveStateNotice = { error: true, errorData: error }
|
||||
}
|
||||
},
|
||||
setNotificationPermission (permission) {
|
||||
setNotificationPermission(permission) {
|
||||
this.notificationPermission = permission
|
||||
},
|
||||
closeSettingsModal () {
|
||||
closeSettingsModal() {
|
||||
this.settingsModalState = 'hidden'
|
||||
},
|
||||
openSettingsModal (value) {
|
||||
openSettingsModal(value) {
|
||||
this.settingsModalMode = value
|
||||
this.settingsModalState = 'visible'
|
||||
if (value === 'user') {
|
||||
|
|
@ -104,7 +116,7 @@ export const useInterfaceStore = defineStore('interface', {
|
|||
}
|
||||
}
|
||||
},
|
||||
togglePeekSettingsModal () {
|
||||
togglePeekSettingsModal() {
|
||||
switch (this.settingsModalState) {
|
||||
case 'minimized':
|
||||
this.settingsModalState = 'visible'
|
||||
|
|
@ -116,27 +128,26 @@ export const useInterfaceStore = defineStore('interface', {
|
|||
throw new Error('Illegal minimization state of settings modal')
|
||||
}
|
||||
},
|
||||
clearSettingsModalTargetTab () {
|
||||
clearSettingsModalTargetTab() {
|
||||
this.settingsModalTargetTab = null
|
||||
},
|
||||
openSettingsModalTab (value, mode = 'user') {
|
||||
openSettingsModalTab(value, mode = 'user') {
|
||||
this.settingsModalTargetTab = value
|
||||
this.openSettingsModal(mode)
|
||||
},
|
||||
removeGlobalNotice (notice) {
|
||||
this.globalNotices = this.globalNotices.filter(n => n !== notice)
|
||||
removeGlobalNotice(notice) {
|
||||
this.globalNotices = this.globalNotices.filter((n) => n !== notice)
|
||||
},
|
||||
pushGlobalNotice (
|
||||
{
|
||||
messageKey,
|
||||
messageArgs = {},
|
||||
level = 'error',
|
||||
timeout = 0
|
||||
}) {
|
||||
pushGlobalNotice({
|
||||
messageKey,
|
||||
messageArgs = {},
|
||||
level = 'error',
|
||||
timeout = 0,
|
||||
}) {
|
||||
const notice = {
|
||||
messageKey,
|
||||
messageArgs,
|
||||
level
|
||||
level,
|
||||
}
|
||||
|
||||
this.globalNotices.push(notice)
|
||||
|
|
@ -150,10 +161,10 @@ export const useInterfaceStore = defineStore('interface', {
|
|||
|
||||
return newNotice
|
||||
},
|
||||
setLayoutHeight (value) {
|
||||
setLayoutHeight(value) {
|
||||
this.layoutHeight = value
|
||||
},
|
||||
setLayoutWidth (value) {
|
||||
setLayoutWidth(value) {
|
||||
let width = value
|
||||
if (value !== undefined) {
|
||||
this.layoutWidth = value
|
||||
|
|
@ -171,10 +182,10 @@ export const useInterfaceStore = defineStore('interface', {
|
|||
this.layoutType = wideLayout ? 'wide' : normalOrMobile
|
||||
}
|
||||
},
|
||||
setFontsList (value) {
|
||||
this.localFonts = [...(new Set(value.map(font => font.family))).values()]
|
||||
setFontsList(value) {
|
||||
this.localFonts = [...new Set(value.map((font) => font.family)).values()]
|
||||
},
|
||||
queryLocalFonts () {
|
||||
queryLocalFonts() {
|
||||
if (this.localFonts !== null) return
|
||||
this.setFontsList([])
|
||||
|
||||
|
|
@ -190,27 +201,33 @@ export const useInterfaceStore = defineStore('interface', {
|
|||
this.pushGlobalNotice({
|
||||
messageKey: 'settings.style.themes3.font.font_list_unavailable',
|
||||
messageArgs: {
|
||||
error: e
|
||||
error: e,
|
||||
},
|
||||
level: 'error'
|
||||
level: 'error',
|
||||
})
|
||||
})
|
||||
},
|
||||
setLastTimeline (value) {
|
||||
setLastTimeline(value) {
|
||||
this.lastTimeline = value
|
||||
},
|
||||
async fetchPalettesIndex () {
|
||||
async fetchPalettesIndex() {
|
||||
try {
|
||||
const value = await getResourcesIndex('/static/palettes/index.json')
|
||||
window.vuex.commit('setInstanceOption', { name: 'palettesIndex', value })
|
||||
window.vuex.commit('setInstanceOption', {
|
||||
name: 'palettesIndex',
|
||||
value,
|
||||
})
|
||||
return value
|
||||
} catch (e) {
|
||||
console.error('Could not fetch palettes index', e)
|
||||
window.vuex.commit('setInstanceOption', { name: 'palettesIndex', value: { _error: e } })
|
||||
window.vuex.commit('setInstanceOption', {
|
||||
name: 'palettesIndex',
|
||||
value: { _error: e },
|
||||
})
|
||||
return Promise.resolve({})
|
||||
}
|
||||
},
|
||||
setPalette (value) {
|
||||
setPalette(value) {
|
||||
this.resetThemeV3Palette()
|
||||
this.resetThemeV2()
|
||||
|
||||
|
|
@ -218,7 +235,7 @@ export const useInterfaceStore = defineStore('interface', {
|
|||
|
||||
this.applyTheme({ recompile: true })
|
||||
},
|
||||
setPaletteCustom (value) {
|
||||
setPaletteCustom(value) {
|
||||
this.resetThemeV3Palette()
|
||||
this.resetThemeV2()
|
||||
|
||||
|
|
@ -226,21 +243,24 @@ export const useInterfaceStore = defineStore('interface', {
|
|||
|
||||
this.applyTheme({ recompile: true })
|
||||
},
|
||||
async fetchStylesIndex () {
|
||||
async fetchStylesIndex() {
|
||||
try {
|
||||
const value = await getResourcesIndex(
|
||||
'/static/styles/index.json',
|
||||
deserialize
|
||||
deserialize,
|
||||
)
|
||||
window.vuex.commit('setInstanceOption', { name: 'stylesIndex', value })
|
||||
return value
|
||||
} catch (e) {
|
||||
console.error('Could not fetch styles index', e)
|
||||
window.vuex.commit('setInstanceOption', { name: 'stylesIndex', value: { _error: e } })
|
||||
window.vuex.commit('setInstanceOption', {
|
||||
name: 'stylesIndex',
|
||||
value: { _error: e },
|
||||
})
|
||||
return Promise.resolve({})
|
||||
}
|
||||
},
|
||||
setStyle (value) {
|
||||
setStyle(value) {
|
||||
this.resetThemeV3()
|
||||
this.resetThemeV2()
|
||||
this.resetThemeV3Palette()
|
||||
|
|
@ -252,7 +272,7 @@ export const useInterfaceStore = defineStore('interface', {
|
|||
this.useStylePalette = false
|
||||
})
|
||||
},
|
||||
setStyleCustom (value) {
|
||||
setStyleCustom(value) {
|
||||
this.resetThemeV3()
|
||||
this.resetThemeV2()
|
||||
this.resetThemeV3Palette()
|
||||
|
|
@ -264,18 +284,21 @@ export const useInterfaceStore = defineStore('interface', {
|
|||
this.useStylePalette = false
|
||||
})
|
||||
},
|
||||
async fetchThemesIndex () {
|
||||
async fetchThemesIndex() {
|
||||
try {
|
||||
const value = await getResourcesIndex('/static/styles.json')
|
||||
window.vuex.commit('setInstanceOption', { name: 'themesIndex', value })
|
||||
return value
|
||||
} catch (e) {
|
||||
console.error('Could not fetch themes index', e)
|
||||
window.vuex.commit('setInstanceOption', { name: 'themesIndex', value: { _error: e } })
|
||||
window.vuex.commit('setInstanceOption', {
|
||||
name: 'themesIndex',
|
||||
value: { _error: e },
|
||||
})
|
||||
return Promise.resolve({})
|
||||
}
|
||||
},
|
||||
setTheme (value) {
|
||||
setTheme(value) {
|
||||
this.resetThemeV3()
|
||||
this.resetThemeV3Palette()
|
||||
this.resetThemeV2()
|
||||
|
|
@ -284,7 +307,7 @@ export const useInterfaceStore = defineStore('interface', {
|
|||
|
||||
this.applyTheme({ recompile: true })
|
||||
},
|
||||
setThemeCustom (value) {
|
||||
setThemeCustom(value) {
|
||||
this.resetThemeV3()
|
||||
this.resetThemeV3Palette()
|
||||
this.resetThemeV2()
|
||||
|
|
@ -294,22 +317,29 @@ export const useInterfaceStore = defineStore('interface', {
|
|||
|
||||
this.applyTheme({ recompile: true })
|
||||
},
|
||||
resetThemeV3 () {
|
||||
resetThemeV3() {
|
||||
window.vuex.commit('setOption', { name: 'style', value: null })
|
||||
window.vuex.commit('setOption', { name: 'styleCustomData', value: null })
|
||||
},
|
||||
resetThemeV3Palette () {
|
||||
resetThemeV3Palette() {
|
||||
window.vuex.commit('setOption', { name: 'palette', value: null })
|
||||
window.vuex.commit('setOption', { name: 'paletteCustomData', value: null })
|
||||
window.vuex.commit('setOption', {
|
||||
name: 'paletteCustomData',
|
||||
value: null,
|
||||
})
|
||||
},
|
||||
resetThemeV2 () {
|
||||
resetThemeV2() {
|
||||
window.vuex.commit('setOption', { name: 'theme', value: null })
|
||||
window.vuex.commit('setOption', { name: 'customTheme', value: null })
|
||||
window.vuex.commit('setOption', { name: 'customThemeSource', value: null })
|
||||
window.vuex.commit('setOption', {
|
||||
name: 'customThemeSource',
|
||||
value: null,
|
||||
})
|
||||
},
|
||||
async getThemeData () {
|
||||
async getThemeData() {
|
||||
const getData = async (resource, index, customData, name) => {
|
||||
const capitalizedResource = resource[0].toUpperCase() + resource.slice(1)
|
||||
const capitalizedResource =
|
||||
resource[0].toUpperCase() + resource.slice(1)
|
||||
const result = {}
|
||||
|
||||
if (customData) {
|
||||
|
|
@ -331,9 +361,13 @@ export const useInterfaceStore = defineStore('interface', {
|
|||
}
|
||||
const newName = Object.keys(index)[0]
|
||||
fetchFunc = index[newName]
|
||||
console.warn(`${capitalizedResource} with id '${this.styleNameUsed}' not found, trying back to '${newName}'`)
|
||||
console.warn(
|
||||
`${capitalizedResource} with id '${this.styleNameUsed}' not found, trying back to '${newName}'`,
|
||||
)
|
||||
if (!fetchFunc) {
|
||||
console.warn(`${capitalizedResource} doesn't have a fallback, defaulting to stock.`)
|
||||
console.warn(
|
||||
`${capitalizedResource} doesn't have a fallback, defaulting to stock.`,
|
||||
)
|
||||
fetchFunc = () => Promise.resolve(null)
|
||||
}
|
||||
}
|
||||
|
|
@ -342,52 +376,52 @@ export const useInterfaceStore = defineStore('interface', {
|
|||
return result
|
||||
}
|
||||
|
||||
const {
|
||||
style: instanceStyleName,
|
||||
palette: instancePaletteName
|
||||
} = window.vuex.state.instance
|
||||
const { style: instanceStyleName, palette: instancePaletteName } =
|
||||
window.vuex.state.instance
|
||||
|
||||
let {
|
||||
theme: instanceThemeV2Name,
|
||||
themesIndex,
|
||||
stylesIndex,
|
||||
palettesIndex
|
||||
palettesIndex,
|
||||
} = window.vuex.state.instance
|
||||
|
||||
const {
|
||||
style: userStyleName,
|
||||
styleCustomData: userStyleCustomData,
|
||||
palette: userPaletteName,
|
||||
paletteCustomData: userPaletteCustomData
|
||||
paletteCustomData: userPaletteCustomData,
|
||||
} = window.vuex.state.config
|
||||
|
||||
let {
|
||||
theme: userThemeV2Name,
|
||||
customTheme: userThemeV2Snapshot,
|
||||
customThemeSource: userThemeV2Source
|
||||
customThemeSource: userThemeV2Source,
|
||||
} = window.vuex.state.config
|
||||
|
||||
let majorVersionUsed
|
||||
|
||||
console.debug(
|
||||
`User V3 palette: ${userPaletteName}, style: ${userStyleName} , custom: ${!!userStyleCustomData}`
|
||||
`User V3 palette: ${userPaletteName}, style: ${userStyleName} , custom: ${!!userStyleCustomData}`,
|
||||
)
|
||||
console.debug(
|
||||
`User V2 name: ${userThemeV2Name}, source: ${!!userThemeV2Source}, snapshot: ${!!userThemeV2Snapshot}`
|
||||
`User V2 name: ${userThemeV2Name}, source: ${!!userThemeV2Source}, snapshot: ${!!userThemeV2Snapshot}`,
|
||||
)
|
||||
|
||||
console.debug(`Instance V3 palette: ${instancePaletteName}, style: ${instanceStyleName}`)
|
||||
console.debug(
|
||||
`Instance V3 palette: ${instancePaletteName}, style: ${instanceStyleName}`,
|
||||
)
|
||||
console.debug('Instance V2 theme: ' + instanceThemeV2Name)
|
||||
|
||||
if (userPaletteName || userPaletteCustomData ||
|
||||
userStyleName || userStyleCustomData ||
|
||||
(
|
||||
// User V2 overrides instance V3
|
||||
(instancePaletteName ||
|
||||
instanceStyleName) &&
|
||||
instanceThemeV2Name == null &&
|
||||
userThemeV2Name == null
|
||||
)
|
||||
if (
|
||||
userPaletteName ||
|
||||
userPaletteCustomData ||
|
||||
userStyleName ||
|
||||
userStyleCustomData ||
|
||||
// User V2 overrides instance V3
|
||||
((instancePaletteName || instanceStyleName) &&
|
||||
instanceThemeV2Name == null &&
|
||||
userThemeV2Name == null)
|
||||
) {
|
||||
// Palette and/or style overrides V2 themes
|
||||
instanceThemeV2Name = null
|
||||
|
|
@ -397,10 +431,10 @@ export const useInterfaceStore = defineStore('interface', {
|
|||
|
||||
majorVersionUsed = 'v3'
|
||||
} else if (
|
||||
(userThemeV2Name ||
|
||||
userThemeV2Snapshot ||
|
||||
userThemeV2Source ||
|
||||
instanceThemeV2Name)
|
||||
userThemeV2Name ||
|
||||
userThemeV2Snapshot ||
|
||||
userThemeV2Source ||
|
||||
instanceThemeV2Name
|
||||
) {
|
||||
majorVersionUsed = 'v2'
|
||||
} else {
|
||||
|
|
@ -411,16 +445,14 @@ export const useInterfaceStore = defineStore('interface', {
|
|||
if (majorVersionUsed === 'v3') {
|
||||
const result = await Promise.all([
|
||||
this.fetchPalettesIndex(),
|
||||
this.fetchStylesIndex()
|
||||
this.fetchStylesIndex(),
|
||||
])
|
||||
|
||||
palettesIndex = result[0]
|
||||
stylesIndex = result[1]
|
||||
} else {
|
||||
// Promise.all just to be uniform with v3
|
||||
const result = await Promise.all([
|
||||
this.fetchThemesIndex()
|
||||
])
|
||||
const result = await Promise.all([this.fetchThemesIndex()])
|
||||
|
||||
themesIndex = result[0]
|
||||
}
|
||||
|
|
@ -437,25 +469,22 @@ export const useInterfaceStore = defineStore('interface', {
|
|||
'style',
|
||||
stylesIndex,
|
||||
userStyleCustomData,
|
||||
userStyleName || instanceStyleName
|
||||
userStyleName || instanceStyleName,
|
||||
)
|
||||
this.styleNameUsed = style.nameUsed
|
||||
this.styleDataUsed = style.dataUsed
|
||||
|
||||
let firstStylePaletteName = null
|
||||
style
|
||||
.dataUsed
|
||||
?.filter(x => x.component === '@palette')
|
||||
.map(x => {
|
||||
style.dataUsed
|
||||
?.filter((x) => x.component === '@palette')
|
||||
.map((x) => {
|
||||
const cleanDirectives = Object.fromEntries(
|
||||
Object
|
||||
.entries(x.directives)
|
||||
.filter(([k]) => k)
|
||||
Object.entries(x.directives).filter(([k]) => k),
|
||||
)
|
||||
|
||||
return { name: x.variant, ...cleanDirectives }
|
||||
})
|
||||
.forEach(palette => {
|
||||
.forEach((palette) => {
|
||||
const key = 'style.' + palette.name.toLowerCase().replace(/ /g, '_')
|
||||
if (!firstStylePaletteName) firstStylePaletteName = key
|
||||
palettesIndex[key] = () => Promise.resolve(palette)
|
||||
|
|
@ -465,19 +494,26 @@ export const useInterfaceStore = defineStore('interface', {
|
|||
'palette',
|
||||
palettesIndex,
|
||||
userPaletteCustomData,
|
||||
this.useStylePalette ? firstStylePaletteName : (userPaletteName || instancePaletteName)
|
||||
this.useStylePalette
|
||||
? firstStylePaletteName
|
||||
: userPaletteName || instancePaletteName,
|
||||
)
|
||||
|
||||
if (this.useStylePalette) {
|
||||
window.vuex.commit('setOption', { name: 'palette', value: firstStylePaletteName })
|
||||
window.vuex.commit('setOption', {
|
||||
name: 'palette',
|
||||
value: firstStylePaletteName,
|
||||
})
|
||||
}
|
||||
|
||||
this.paletteNameUsed = palette.nameUsed
|
||||
this.paletteDataUsed = palette.dataUsed
|
||||
|
||||
if (this.paletteDataUsed) {
|
||||
this.paletteDataUsed.link = this.paletteDataUsed.link || this.paletteDataUsed.accent
|
||||
this.paletteDataUsed.accent = this.paletteDataUsed.accent || this.paletteDataUsed.link
|
||||
this.paletteDataUsed.link =
|
||||
this.paletteDataUsed.link || this.paletteDataUsed.accent
|
||||
this.paletteDataUsed.accent =
|
||||
this.paletteDataUsed.accent || this.paletteDataUsed.link
|
||||
}
|
||||
if (Array.isArray(this.paletteDataUsed)) {
|
||||
const [
|
||||
|
|
@ -489,7 +525,7 @@ export const useInterfaceStore = defineStore('interface', {
|
|||
cRed = '#FF0000',
|
||||
cGreen = '#00FF00',
|
||||
cBlue = '#0000FF',
|
||||
cOrange = '#E3FF00'
|
||||
cOrange = '#E3FF00',
|
||||
] = palette.dataUsed
|
||||
this.paletteDataUsed = {
|
||||
name,
|
||||
|
|
@ -501,7 +537,7 @@ export const useInterfaceStore = defineStore('interface', {
|
|||
cRed,
|
||||
cBlue,
|
||||
cGreen,
|
||||
cOrange
|
||||
cOrange,
|
||||
}
|
||||
}
|
||||
console.debug('Palette data used', palette.dataUsed)
|
||||
|
|
@ -515,23 +551,18 @@ export const useInterfaceStore = defineStore('interface', {
|
|||
'theme',
|
||||
themesIndex,
|
||||
userThemeV2Source || userThemeV2Snapshot,
|
||||
userThemeV2Name || instanceThemeV2Name
|
||||
userThemeV2Name || instanceThemeV2Name,
|
||||
)
|
||||
this.themeNameUsed = theme.nameUsed
|
||||
this.themeDataUsed = theme.dataUsed
|
||||
}
|
||||
},
|
||||
async setThemeApplied () {
|
||||
async setThemeApplied() {
|
||||
this.themeApplied = true
|
||||
},
|
||||
async applyTheme (
|
||||
{ recompile = false } = {}
|
||||
) {
|
||||
const {
|
||||
forceThemeRecompilation,
|
||||
themeDebug,
|
||||
theme3hacks
|
||||
} = window.vuex.state.config
|
||||
async applyTheme({ recompile = false } = {}) {
|
||||
const { forceThemeRecompilation, themeDebug, theme3hacks } =
|
||||
window.vuex.state.config
|
||||
this.themeChangeInProgress = true
|
||||
// If we're not forced to recompile try using
|
||||
// cache (tryLoadCache return true if load successful)
|
||||
|
|
@ -540,7 +571,7 @@ export const useInterfaceStore = defineStore('interface', {
|
|||
|
||||
await this.getThemeData()
|
||||
|
||||
if (!forceRecompile && !themeDebug && await tryLoadCache()) {
|
||||
if (!forceRecompile && !themeDebug && (await tryLoadCache())) {
|
||||
this.themeChangeInProgress = false
|
||||
return this.setThemeApplied()
|
||||
}
|
||||
|
|
@ -551,11 +582,10 @@ export const useInterfaceStore = defineStore('interface', {
|
|||
if (!this.paletteDataUsed) return null
|
||||
const result = {
|
||||
component: 'Root',
|
||||
directives: {}
|
||||
directives: {},
|
||||
}
|
||||
|
||||
Object
|
||||
.entries(this.paletteDataUsed)
|
||||
Object.entries(this.paletteDataUsed)
|
||||
.filter(([k]) => k !== 'name')
|
||||
.forEach(([k, v]) => {
|
||||
let issRootDirectiveName
|
||||
|
|
@ -574,7 +604,9 @@ export const useInterfaceStore = defineStore('interface', {
|
|||
return result
|
||||
})()
|
||||
|
||||
const theme2ruleset = this.themeDataUsed && convertTheme2To3(normalizeThemeData(this.themeDataUsed))
|
||||
const theme2ruleset =
|
||||
this.themeDataUsed &&
|
||||
convertTheme2To3(normalizeThemeData(this.themeDataUsed))
|
||||
const hacks = []
|
||||
|
||||
Object.entries(theme3hacks).forEach(([key, value]) => {
|
||||
|
|
@ -587,32 +619,32 @@ export const useInterfaceStore = defineStore('interface', {
|
|||
hacks.push({
|
||||
component: 'Root',
|
||||
directives: {
|
||||
'--font': 'generic | ' + font.family
|
||||
}
|
||||
'--font': 'generic | ' + font.family,
|
||||
},
|
||||
})
|
||||
break
|
||||
case 'input':
|
||||
hacks.push({
|
||||
component: 'Input',
|
||||
directives: {
|
||||
'--font': 'generic | ' + font.family
|
||||
}
|
||||
'--font': 'generic | ' + font.family,
|
||||
},
|
||||
})
|
||||
break
|
||||
case 'post':
|
||||
hacks.push({
|
||||
component: 'RichContent',
|
||||
directives: {
|
||||
'--font': 'generic | ' + font.family
|
||||
}
|
||||
'--font': 'generic | ' + font.family,
|
||||
},
|
||||
})
|
||||
break
|
||||
case 'monospace':
|
||||
hacks.push({
|
||||
component: 'Root',
|
||||
directives: {
|
||||
'--monoFont': 'generic | ' + font.family
|
||||
}
|
||||
'--monoFont': 'generic | ' + font.family,
|
||||
},
|
||||
})
|
||||
break
|
||||
}
|
||||
|
|
@ -623,7 +655,7 @@ export const useInterfaceStore = defineStore('interface', {
|
|||
if (value !== 'none') {
|
||||
const newRule = {
|
||||
component: 'Underlay',
|
||||
directives: {}
|
||||
directives: {},
|
||||
}
|
||||
if (value === 'opaque') {
|
||||
newRule.directives.opacity = 1
|
||||
|
|
@ -643,8 +675,8 @@ export const useInterfaceStore = defineStore('interface', {
|
|||
theme2ruleset,
|
||||
this.styleDataUsed,
|
||||
paletteIss,
|
||||
hacks
|
||||
].filter(x => x)
|
||||
hacks,
|
||||
].filter((x) => x)
|
||||
|
||||
return applyTheme(
|
||||
rulesetArray.flat(),
|
||||
|
|
@ -652,13 +684,13 @@ export const useInterfaceStore = defineStore('interface', {
|
|||
() => {
|
||||
this.themeChangeInProgress = false
|
||||
},
|
||||
themeDebug
|
||||
themeDebug,
|
||||
)
|
||||
} catch (e) {
|
||||
window.splashError(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
export const normalizeThemeData = (input) => {
|
||||
|
|
@ -669,15 +701,15 @@ export const normalizeThemeData = (input) => {
|
|||
return generatePreset(input).theme
|
||||
} else if (
|
||||
Object.hasOwn(input, '_pleroma_theme_version') ||
|
||||
Object.hasOwn(input, 'source') ||
|
||||
Object.hasOwn(input, 'theme')
|
||||
Object.hasOwn(input, 'source') ||
|
||||
Object.hasOwn(input, 'theme')
|
||||
) {
|
||||
// We got passed a full theme file
|
||||
themeData = input.theme
|
||||
themeSource = input.source
|
||||
} else if (
|
||||
Object.hasOwn(input, 'themeEngineVersion') ||
|
||||
Object.hasOwn(input, 'colors')
|
||||
Object.hasOwn(input, 'colors')
|
||||
) {
|
||||
// We got passed a source/snapshot
|
||||
themeData = input
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue