qugalet/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

remove useless strings, hide loader on eager finish

Browse source
This commit is contained in:
Henry Jameson 2024-12-12 15:42:03 +02:00
parent 179fb9e527
commit 3cc9afc15f
5 changed files with 109 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/boot/after_store.js
View file

@ -348,12 +348,11 @@ const afterStoreSetup = async ({ store, i18n }) => {
const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin
store.dispatch('setInstanceOption', { name: 'server', value: server })
document.querySelector('#status').textContent = i18n.global.t('splash.settings')
await setConfig({ store })
document.querySelector('#status').textContent = i18n.global.t('splash.theme')
try {
await store.dispatch('applyTheme').catch((e) => { console.error('Error setting theme', e) })
} catch (e) {
window.splashError(e)
return Promise.reject(e)
}
@ -361,7 +360,6 @@ const afterStoreSetup = async ({ store, i18n }) => {
// Now we can try getting the server settings and logging in
// Most of these are preloaded into the index.html so blocking is minimized
document.querySelector('#status').textContent = i18n.global.t('splash.instance')
await Promise.all([
checkOAuthToken({ store }),
getInstancePanel({ store }),
@ -408,7 +406,6 @@ const afterStoreSetup = async ({ store, i18n }) => {
// remove after vue 3.3
app.config.unwrapInjectedRef = true
document.querySelector('#status').textContent = i18n.global.t('splash.almost')
app.mount('#app')
return app

3
src/i18n/en.json
View file

@ -1494,9 +1494,6 @@
"splash": {
"loading": "Loading...",
"theme": "Applying theme, please wait warmly...",
"instance": "Getting instance info...",
"settings": "Applying settings...",
"almost": "Reticulating splines...",
"fun_1": "Drink more water",
"fun_2": "Take it easy!",
"fun_3": "Suya...",

5
src/main.js
View file

@ -70,6 +70,11 @@ const persistedStateOptions = {
console.error('PleromaFE failed to initialize: ', e)
}
window.splashError = e => splashError(i18n, e)
window.splashUpdate = key => {
document.querySelector('#status').textContent = i18n.global.t(key)
}
try {
let storageError
const plugins = [pushNotifications]

196
src/modules/interface.js
View file

@ -563,112 +563,118 @@ const interfaceMod = {
if (!forceRecompile && !themeDebug && await tryLoadCache()) {
return commit('setThemeApplied')
}
window.splashUpdate('splash.theme')
await dispatch('getThemeData')
const paletteIss = (() => {
if (!state.paletteDataUsed) return null
const result = {
component: 'Root',
directives: {}
}
try {
const paletteIss = (() => {
if (!state.paletteDataUsed) return null
const result = {
component: 'Root',
directives: {}
}
Object
.entries(state.paletteDataUsed)
.filter(([k]) => k !== 'name')
.forEach(([k, v]) => {
let issRootDirectiveName
switch (k) {
case 'background':
issRootDirectiveName = 'bg'
break
case 'foreground':
issRootDirectiveName = 'fg'
break
default:
issRootDirectiveName = k
}
result.directives['--' + issRootDirectiveName] = 'color | ' + v
})
return result
})()
const theme2ruleset = state.themeDataUsed && convertTheme2To3(normalizeThemeData(state.themeDataUsed))
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
}
})
Object
.entries(state.paletteDataUsed)
.filter(([k]) => k !== 'name')
.forEach(([k, v]) => {
let issRootDirectiveName
switch (k) {
case 'background':
issRootDirectiveName = 'bg'
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
}
})
case 'foreground':
issRootDirectiveName = 'fg'
break
default:
issRootDirectiveName = k
}
result.directives['--' + issRootDirectiveName] = 'color | ' + v
})
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)
return result
})()
const theme2ruleset = state.themeDataUsed && convertTheme2To3(normalizeThemeData(state.themeDataUsed))
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
}
break
}
}
})
})
const rulesetArray = [
theme2ruleset,
state.styleDataUsed,
paletteIss,
hacks
].filter(x => x)
const rulesetArray = [
theme2ruleset,
state.styleDataUsed,
paletteIss,
hacks
].filter(x => x)
return applyTheme(
rulesetArray.flat(),
() => commit('setThemeApplied'),
themeDebug
)
return applyTheme(
rulesetArray.flat(),
() => commit('setThemeApplied'),
() => {},
themeDebug
)
} catch (e) {
window.splashError(e)
}
}
}
}

3
src/services/style_setter/style_setter.js
View file

@ -118,7 +118,7 @@ export const tryLoadCache = async () => {
}
}
export const applyTheme = (input, onFinish = (data) => {}, debug) => {
export const applyTheme = (input, onEagerFinish = data => {}, onFinish = data => {}, debug) => {
const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
@ -148,6 +148,7 @@ export const applyTheme = (input, onFinish = (data) => {}, debug) => {
},
onEagerFinished () {
adoptStyleSheets([eagerStyles])
onEagerFinish()
},
onLazyFinished () {
adoptStyleSheets([eagerStyles, lazyStyles])