From fbea4f9986bb08b85d89dee1c458611e98460d3d Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 3 Apr 2024 21:27:19 +0300 Subject: fix shout --- src/services/style_setter/style_setter.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'src/services/style_setter/style_setter.js') diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 0a6b9428..4b0e05c4 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -61,6 +61,8 @@ export const applyTheme = async (input) => { parts[0], ', ', parts[0].replace(/\.modal-view/, '#modal'), + ', ', + parts[0].replace(/\.modal-view/, '.shout-panel'), ' {', parts[1], '}' -- cgit v1.2.3-70-g09d2 From dd4867d8decff931d8a2cb74022fdddd6418dadf Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 3 Apr 2024 22:42:34 +0300 Subject: refactor style setter to separate theme generation from theme application --- src/services/style_setter/style_setter.js | 50 +++++++++++++++++++++++-------- 1 file changed, 37 insertions(+), 13 deletions(-) (limited to 'src/services/style_setter/style_setter.js') diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 4b0e05c4..3c48bf89 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -6,7 +6,13 @@ import { getCssRules } from '../theme_data/css_utils.js' import { defaultState } from '../../modules/config.js' import { chunk } from 'lodash' -export const applyTheme = async (input) => { +export const generateTheme = async (input, callbacks) => { + const { + onNewRule = (rule) => {}, + onLazyFinished = () => {}, + onEagerFinished = () => {} + } = callbacks + let extraRules if (input.themeFileVersion === 1) { extraRules = convertTheme2To3(input) @@ -17,11 +23,6 @@ export const applyTheme = async (input) => { // Assuming that "worst case scenario background" is panel background since it's the most likely one const themes3 = init(extraRules, extraRules[0].directives['--bg'].split('|')[1].trim()) - const body = document.body - - const styleSheet = new CSSStyleSheet() - document.adoptedStyleSheets = [styleSheet] - body.classList.add('hidden') getCssRules(themes3.eager, themes3.staticVars).forEach(rule => { // Hacks to support multiple selectors on same component @@ -37,13 +38,12 @@ export const applyTheme = async (input) => { parts[1], '}' ].join('') - styleSheet.insertRule(newRule, 'index-max') + onNewRule(newRule) } else { - styleSheet.insertRule(rule, 'index-max') + onNewRule(rule) } }) - - body.classList.remove('hidden') + onEagerFinished() // Optimization - instead of processing all lazy rules in one go, process them in small chunks // so that UI can do other things and be somewhat responsive while less important rules are being @@ -67,9 +67,9 @@ export const applyTheme = async (input) => { parts[1], '}' ].join('') - styleSheet.insertRule(newRule, 'index-max') + onNewRule(newRule) } else { - styleSheet.insertRule(rule, 'index-max') + onNewRule(rule) } }) // const t1 = performance.now() @@ -78,10 +78,34 @@ export const applyTheme = async (input) => { counter += 1 if (counter < chunks.length) { setTimeout(processChunk, 0) + } else { + onLazyFinished() } }) } - setTimeout(processChunk, 0) + + return { lazyProcessFunc: processChunk } +} + +export const applyTheme = async (input) => { + const body = document.body + body.classList.add('hidden') + + const styleSheet = new CSSStyleSheet() + document.adoptedStyleSheets = [styleSheet] + + const { lazyProcessFunc } = await generateTheme( + input, + { + onNewRule (rule) { + styleSheet.insertRule(rule, 'index-max') + } + } + ) + + body.classList.remove('hidden') + + setTimeout(lazyProcessFunc, 0) return Promise.resolve() } -- cgit v1.2.3-70-g09d2 From 9806eea12ea4cde8b78741cfb1ddfe1d3e64ba9b Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 3 Apr 2024 22:52:12 +0300 Subject: only show interface after theme has been applied --- src/App.vue | 1 + src/boot/after_store.js | 1 + src/modules/instance.js | 1 + src/modules/interface.js | 4 ++++ src/services/style_setter/style_setter.js | 5 ----- 5 files changed, 7 insertions(+), 5 deletions(-) (limited to 'src/services/style_setter/style_setter.js') diff --git a/src/App.vue b/src/App.vue index fe214ce7..e12f919d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,6 +2,7 @@
{ } else { applyTheme(customTheme) } + store.commit('setThemeApplied') } else if (theme) { // do nothing, it will load asynchronously } else { diff --git a/src/modules/instance.js b/src/modules/instance.js index c7a2cad1..76269ece 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -386,6 +386,7 @@ const instance = { } else { applyTheme(themeData.theme) } + commit('setThemeApplied') }) }, fetchEmoji ({ dispatch, state }) { diff --git a/src/modules/interface.js b/src/modules/interface.js index f8d62d87..39242b9d 100644 --- a/src/modules/interface.js +++ b/src/modules/interface.js @@ -1,4 +1,5 @@ const defaultState = { + themeApplied: false, settingsModalState: 'hidden', settingsModalLoadedUser: false, settingsModalLoadedAdmin: false, @@ -35,6 +36,9 @@ const interfaceMod = { state.settings.currentSaveStateNotice = { error: true, errorData: error } } }, + setThemeApplied (state) { + state.themeApplied = true + }, setNotificationPermission (state, permission) { state.notificationPermission = permission }, diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 3c48bf89..e6724d60 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -88,9 +88,6 @@ export const generateTheme = async (input, callbacks) => { } export const applyTheme = async (input) => { - const body = document.body - body.classList.add('hidden') - const styleSheet = new CSSStyleSheet() document.adoptedStyleSheets = [styleSheet] @@ -103,8 +100,6 @@ export const applyTheme = async (input) => { } ) - body.classList.remove('hidden') - setTimeout(lazyProcessFunc, 0) return Promise.resolve() -- cgit v1.2.3-70-g09d2 From 1c23a16bac6eef604159da8e3043b2dd21c70fb0 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 3 Apr 2024 22:57:44 +0300 Subject: try to apply lazy part in one go while still having chunked processing --- src/services/style_setter/style_setter.js | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) (limited to 'src/services/style_setter/style_setter.js') diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index e6724d60..95198ec7 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -8,7 +8,7 @@ import { chunk } from 'lodash' export const generateTheme = async (input, callbacks) => { const { - onNewRule = (rule) => {}, + onNewRule = (rule, isLazy) => {}, onLazyFinished = () => {}, onEagerFinished = () => {} } = callbacks @@ -38,9 +38,9 @@ export const generateTheme = async (input, callbacks) => { parts[1], '}' ].join('') - onNewRule(newRule) + onNewRule(newRule, false) } else { - onNewRule(rule) + onNewRule(rule, false) } }) onEagerFinished() @@ -67,9 +67,9 @@ export const generateTheme = async (input, callbacks) => { parts[1], '}' ].join('') - onNewRule(newRule) + onNewRule(newRule, true) } else { - onNewRule(rule) + onNewRule(rule, true) } }) // const t1 = performance.now() @@ -89,13 +89,23 @@ export const generateTheme = async (input, callbacks) => { export const applyTheme = async (input) => { const styleSheet = new CSSStyleSheet() - document.adoptedStyleSheets = [styleSheet] + const lazyStyleSheet = new CSSStyleSheet() const { lazyProcessFunc } = await generateTheme( input, { - onNewRule (rule) { - styleSheet.insertRule(rule, 'index-max') + onNewRule (rule, isLazy) { + if (isLazy) { + lazyStyleSheet.insertRule(rule, 'index-max') + } else { + styleSheet.insertRule(rule, 'index-max') + } + }, + onEagerFinished () { + document.adoptedStyleSheets = [styleSheet] + }, + onLazyFinished () { + document.adoptedStyleSheets = [styleSheet, lazyStyleSheet] } } ) -- cgit v1.2.3-70-g09d2