+
+
-
diff --git a/src/App.scss b/src/App.scss
index 5e7d36566..f52ba06b9 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -937,12 +937,6 @@ option {
}
}
- #mascot-container {
- perspective: 60em;
- perspective-origin: 0 -15em;
- transform-style: preserve-3d;
- }
-
#throbber {
animation-duration: 3s;
animation-name: bounce;
@@ -950,12 +944,9 @@ option {
animation-direction: normal;
transform-origin: bottom center;
- --defaultY: 0;
-
&.dead {
animation-name: dead;
- animation-duration: 3s;
- // animation-iteration-count: 1;
+ animation-duration: 2s;
animation-iteration-count: 1;
transform: rotateX(90deg) rotateY(0) rotateZ(-45deg);
}
diff --git a/src/assets/pleromatan_apology.png b/src/assets/pleromatan_apology.png
deleted file mode 100644
index 36ad7aeb8..000000000
Binary files a/src/assets/pleromatan_apology.png and /dev/null differ
diff --git a/src/assets/pleromatan_apology.png b/src/assets/pleromatan_apology.png
new file mode 120000
index 000000000..a7f6191f6
--- /dev/null
+++ b/src/assets/pleromatan_apology.png
@@ -0,0 +1 @@
+../../static/pleromatan_apology.png
\ No newline at end of file
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index 356b09fa7..55dd01a9c 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -349,7 +349,7 @@ const afterStoreSetup = async ({ store, i18n }) => {
await setConfig({ store })
document.querySelector('#status').textContent = i18n.global.t('splash.theme')
try {
- await store.dispatch('setTheme').catch((e) => { console.log(e) })
+ await store.dispatch('setTheme').catch((e) => { console.error('Error setting theme', e) })
} catch (e) {
return Promise.reject(e)
}
diff --git a/src/main.js b/src/main.js
index 4ccdabb95..81fa09db4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -48,16 +48,6 @@ const i18n = createI18n({
messages.setLanguage(i18n.global, currentLocale)
-const splashError = (i18n, e) => {
- document.querySelector('#mascot').src = (Math.floor(Math.random() * 2) > 0)
- ? '/static/pleromatan_orz_fox.png'
- : '/static/pleromatan_orz.png'
- document.querySelector('#mascot').classList.add('orz')
- document.querySelector('#throbber').classList.add('dead')
- document.querySelector('#status').textContent = i18n.global.t('splash.error')
- console.error('PleromaFE failed to initialize: ', e)
-}
-
const persistedStateOptions = {
paths: [
'serverSideStorage.cache',
@@ -68,6 +58,18 @@ const persistedStateOptions = {
};
(async () => {
+ const isFox = Math.floor(Math.random() * 2) > 0 ? '_fox' : ''
+
+ const splashError = (i18n, e) => {
+ const throbber = document.querySelector('#throbber')
+ throbber.addEventListener('animationend', () => {
+ document.querySelector('#mascot').src = `/static/pleromatan_orz${isFox}.png`
+ })
+ throbber.classList.add('dead')
+ document.querySelector('#status').textContent = i18n.global.t('splash.error')
+ console.error('PleromaFE failed to initialize: ', e)
+ }
+
try {
let storageError
const plugins = [pushNotifications]
@@ -78,6 +80,7 @@ const persistedStateOptions = {
console.error('Storage error', e)
storageError = e
}
+ document.querySelector('#mascot').src = `/static/pleromatan_apology${isFox}.png`
document.querySelector('#status').removeAttribute('class')
document.querySelector('#status').textContent = i18n.global.t('splash.loading')
document.querySelector('#splash-credit').textContent = i18n.global.t('update.art_by', { linkToArtist: 'pipivovott' })
diff --git a/src/modules/interface.js b/src/modules/interface.js
index 68b51015d..57bfe0c61 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -56,6 +56,9 @@ const interfaceMod = {
state.temporaryChangesConfirm = () => {}
state.temporaryChangesRevert = () => {}
},
+ setThemeApplied (state) {
+ state.themeApplied = true
+ },
setNotificationPermission (state, permission) {
state.notificationPermission = permission
},
@@ -117,9 +120,6 @@ const interfaceMod = {
setPageTitle ({ rootState }, option = '') {
document.title = `${option} ${rootState.instance.name}`
},
- setThemeApplied ({ state, rootGetters }) {
- state.themeApplied = true
- },
settingsSaved ({ commit, dispatch }, { success, error }) {
commit('settingsSaved', { success, error })
},
@@ -212,7 +212,7 @@ const interfaceMod = {
setLastTimeline ({ commit }, value) {
commit('setLastTimeline', value)
},
- setTheme ({ dispatch, commit, rootState }, { themeName, themeData, recompile, saveData } = {}) {
+ setTheme ({ commit, rootState }, { themeName, themeData, recompile, saveData } = {}) {
const {
theme: instanceThemeName
} = rootState.instance
@@ -230,27 +230,27 @@ const interfaceMod = {
const forceRecompile = forceThemeRecompilation || recompile
- let result = null
+ let promise = null
if (themeData) {
- result = normalizeThemeData(themeData)
+ promise = Promise.resolve(normalizeThemeData(themeData))
} else if (themeName) {
- result = normalizeThemeData(getPreset(themeName))
- .then(themeData => normalizeThemeData(themeData))
+ promise = getPreset(themeName).then(themeData => normalizeThemeData(themeData))
} else if (userThemeSource || userThemeSnapshot) {
- result = normalizeThemeData({
+ promise = Promise.resolve(normalizeThemeData({
_pleroma_theme_version: 2,
theme: userThemeSnapshot,
source: userThemeSource
- })
+ }))
} else if (actualThemeName && actualThemeName !== 'custom') {
- const themeData = actualThemeName
- 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 } })
- }
- result = realThemeData
+ 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!')
}
@@ -258,92 +258,96 @@ const interfaceMod = {
// If we're not not forced to recompile try using
// cache (tryLoadCache return true if load successful)
if (!forceRecompile && !themeDebug && tryLoadCache()) {
- dispatch('setThemeApplied')
- return Promise.resolve()
+ commit('setThemeApplied')
+ return
}
- const realThemeData = result
- const theme2ruleset = convertTheme2To3(realThemeData)
+ 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
+ if (saveData) {
+ commit('setOption', { name: 'theme', value: themeName || actualThemeName })
+ commit('setOption', { name: 'customTheme', value: realThemeData })
+ commit('setOption', { name: 'customThemeSource', value: realThemeData })
}
- case 'underlay': {
- if (value !== 'none') {
- const newRule = {
- component: 'Underlay',
- directives: {}
+ 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
}
- if (value === 'opaque') {
- newRule.directives.opacity = 1
- newRule.directives.background = '--wallpaper'
+ 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
}
- if (value === 'transparent') {
- newRule.directives.opacity = 0
- }
- hacks.push(newRule)
}
- break
- }
- }
- })
+ })
- const ruleset = [
- ...theme2ruleset,
- ...hacks
- ]
+ const ruleset = [
+ ...theme2ruleset,
+ ...hacks
+ ]
- applyTheme(
- ruleset,
- () => dispatch('setThemeApplied'),
- themeDebug
- )
+ applyTheme(
+ ruleset,
+ () => commit('setThemeApplied'),
+ themeDebug
+ )
+ })
+
+ return promise
}
}
}
diff --git a/static/pleromatan_apology.png b/static/pleromatan_apology.png
new file mode 100644
index 000000000..36ad7aeb8
Binary files /dev/null and b/static/pleromatan_apology.png differ
+
+ 
- (｡>﹏<)
+
+