From 79ae297121e6fc7e880f0ba4f97dcffceef8d6a2 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 12 Dec 2024 15:04:51 +0200 Subject: [PATCH 1/5] breezy update --- static/styles/Breezy DX.piss | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/static/styles/Breezy DX.piss b/static/styles/Breezy DX.piss index 033561f94..0203fec24 100644 --- a/static/styles/Breezy DX.piss +++ b/static/styles/Breezy DX.piss @@ -52,13 +52,21 @@ Button:hover { } Button:toggled { - background: $blend(--bg 0.8 --accent) + background: $blend(--bg 0.3 --accent) } Button:pressed { background: $blend(--bg 0.8 --accent) } +Button:pressed:toggled { + background: $blend(--bg 0.2 --accent) +} + +Button:toggled:hover { + background: $blend(--bg 0.3 --accent) +} + Input { shadow: --defaultInputBevel } From 179fb9e5272671cf93cab7f139a70945bc021a55 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 12 Dec 2024 15:07:12 +0200 Subject: [PATCH 2/5] include theme checksum for future use --- src/services/theme_data/theme_data_3.service.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js index ad9b1607b..9de47a7d8 100644 --- a/src/services/theme_data/theme_data_3.service.js +++ b/src/services/theme_data/theme_data_3.service.js @@ -567,6 +567,7 @@ export const init = ({ lazy, eager, staticVars, - engineChecksum + engineChecksum, + themeChecksum: sum([lazy, eager]) } } From 3cc9afc15fc123bf3d8a869b237645eace2cafe3 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 12 Dec 2024 15:42:03 +0200 Subject: [PATCH 3/5] remove useless strings, hide loader on eager finish --- src/boot/after_store.js | 5 +- src/i18n/en.json | 3 - src/main.js | 5 + src/modules/interface.js | 196 +++++++++++----------- src/services/style_setter/style_setter.js | 3 +- 5 files changed, 109 insertions(+), 103 deletions(-) diff --git a/src/boot/after_store.js b/src/boot/after_store.js index fec96580d..6153608e1 100644 --- a/src/boot/after_store.js +++ b/src/boot/after_store.js @@ -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 diff --git a/src/i18n/en.json b/src/i18n/en.json index 7febbf9f0..5ec6b731d 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -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...", diff --git a/src/main.js b/src/main.js index bcfc80b0e..772bc8db6 100644 --- a/src/main.js +++ b/src/main.js @@ -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] diff --git a/src/modules/interface.js b/src/modules/interface.js index 442b482a0..cd06e429e 100644 --- a/src/modules/interface.js +++ b/src/modules/interface.js @@ -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) + } } } } diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index b5014ff17..d0a0ee084 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -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]) From 8c25620c6bc41547b421fe48f2bc1e44d782819f Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 12 Dec 2024 15:47:07 +0200 Subject: [PATCH 4/5] fix logo round corners --- index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/index.html b/index.html index 461f5acc1..d505db85c 100644 --- a/index.html +++ b/index.html @@ -70,6 +70,8 @@ "P P . . ." "P P . E E" "P P . E E"; + + --logoChunkSize: calc(2em * 0.5 * var(--scale)) } .chunk { From 452859fb0f9abcda7093f2c19039985350a69278 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 12 Dec 2024 15:58:18 +0200 Subject: [PATCH 5/5] display error and stack --- index.html | 23 +++++++++++++++++++++++ src/main.js | 4 ++++ 2 files changed, 27 insertions(+) diff --git a/index.html b/index.html index d505db85c..66eec0777 100644 --- a/index.html +++ b/index.html @@ -101,6 +101,27 @@ text-align: center; } + #statusError { + display: none; + margin-top: 1em; + font-size: calc(1vw + 1vh + 1vmin); + line-height: 2; + width: 100%; + text-align: center; + } + + #statusStack { + display: none; + margin-top: 1em; + font-size: calc((1vw + 1vh + 1vmin) / 2.5); + width: calc(100vw - 5em); + padding: 1em; + text-overflow: ellipsis; + overflow-x: hidden; + text-align: left; + line-height: 2; + } + @media (prefers-reduced-motion) { #throbber { animation: none !important; @@ -135,6 +156,8 @@ + + 

       
     
     
diff --git a/src/main.js b/src/main.js
index 772bc8db6..f63deb490 100644
--- a/src/main.js
+++ b/src/main.js
@@ -68,6 +68,10 @@ const persistedStateOptions = {
     throbber.classList.add('dead')
     document.querySelector('#status').textContent = i18n.global.t('splash.error')
     console.error('PleromaFE failed to initialize: ', e)
+    document.querySelector('#statusError').textContent = e
+    document.querySelector('#statusStack').textContent = e.stack
+    document.querySelector('#statusError').style = 'display: block'
+    document.querySelector('#statusStack').style = 'display: block'
   }
 
   window.splashError = e => splashError(i18n, e)