splashscreen is now smaller, big cleanup on aisle themes - removed a lot unnecessary sync/awaits and promises that were sequential anyway
This commit is contained in:
Henry Jameson
parent
6c5fc53789
commit
7550b8cbd2
197
index.html
197
index.html
|
|
@ -4,6 +4,101 @@
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
|
||||||
<link rel="icon" type="image/png" href="/favicon.png">
|
<link rel="icon" type="image/png" href="/favicon.png">
|
||||||
|
<style id="splashscreen">
|
||||||
|
#webpack-hot-middleware-clientOverlay {
|
||||||
|
z-index: 9999999999999999999999999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
#splash {
|
||||||
|
--scale: 1;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
grid-template-columns: auto;
|
||||||
|
align-content: center;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
justify-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
background: #0f161e;
|
||||||
|
font-family: sans-serif;
|
||||||
|
color: #b9b9ba;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 9999;
|
||||||
|
font-size: calc(1vw + 1vh + 1vmin);
|
||||||
|
}
|
||||||
|
|
||||||
|
#splash-container {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mascot-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mascot:not(.orz) {
|
||||||
|
margin-bottom: 2em
|
||||||
|
object-position: 2.5em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mascot-temp.orz {
|
||||||
|
margin-bottom: 2em
|
||||||
|
object-position: 2.5em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mascot,
|
||||||
|
#mascot-temp {
|
||||||
|
width: calc(10em * var(--scale));
|
||||||
|
height: calc(8em * var(--scale));
|
||||||
|
object-fit: contain;
|
||||||
|
object-position: bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
#throbber {
|
||||||
|
display: grid;
|
||||||
|
width: calc(5em * 0.5 * var(--scale));
|
||||||
|
height: calc(8em * 0.5 * var(--scale));
|
||||||
|
grid-template-rows: repeat(8, 1fr);
|
||||||
|
grid-template-columns: repeat(5, 1fr);
|
||||||
|
grid-template-areas: "P P . L L"
|
||||||
|
"P P . L L"
|
||||||
|
"P P . L L"
|
||||||
|
"P P . L L"
|
||||||
|
"P P . . ."
|
||||||
|
"P P . . ."
|
||||||
|
"P P . E E"
|
||||||
|
"P P . E E";
|
||||||
|
}
|
||||||
|
|
||||||
|
.chunk {
|
||||||
|
background-color: #e2b188;
|
||||||
|
box-shadow: 0.01em 0.01em 0.1em 0 #e2b188;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chunk-P {
|
||||||
|
grid-area: P;
|
||||||
|
border-top-left-radius: calc(var(--logoChunkSize) / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
#chunk-L {
|
||||||
|
grid-area: L;
|
||||||
|
border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
#chunk-E {
|
||||||
|
grid-area: E;
|
||||||
|
border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
#status {
|
||||||
|
line-height: 2;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
<style id="pleroma-eager-styles" type="text/css"></style>
|
<style id="pleroma-eager-styles" type="text/css"></style>
|
||||||
<style id="pleroma-lazy-styles" type="text/css"></style>
|
<style id="pleroma-lazy-styles" type="text/css"></style>
|
||||||
<!--server-generated-meta-->
|
<!--server-generated-meta-->
|
||||||
|
|
@ -11,95 +106,23 @@
|
||||||
<body style="margin: 0; padding: 0">
|
<body style="margin: 0; padding: 0">
|
||||||
<noscript>To use Pleroma, please enable JavaScript.</noscript>
|
<noscript>To use Pleroma, please enable JavaScript.</noscript>
|
||||||
<!-- putting styles here to avoid having to wait for styles to load up -->
|
<!-- putting styles here to avoid having to wait for styles to load up -->
|
||||||
<div id="splash" style="
|
<div id="splash">
|
||||||
width: 100vw;
|
<div id="splash-container">
|
||||||
height: 100vh;
|
<div id="mascot-container">
|
||||||
display: flex;
|
<div id="throbber">
|
||||||
align-items: center;
|
<div class="chunk" id="chunk-P">
|
||||||
justify-content: center;
|
</div>
|
||||||
flex-direction: column;
|
<div class="chunk" id="chunk-L">
|
||||||
background: #0f161e;
|
</div>
|
||||||
font-family: sans-serif;
|
<div class="chunk" id="chunk-E">
|
||||||
color: #b9b9ba;
|
</div>
|
||||||
position: absolute;
|
</div>
|
||||||
z-index: 999999;
|
<img id="mascot" src="/static/pleromatan_apology_fox.png">
|
||||||
"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
style="
|
|
||||||
width: 30vh;
|
|
||||||
margin-top: 1vh;
|
|
||||||
margin-bottom: 0.5vh;
|
|
||||||
"
|
|
||||||
src="/static/pleromatan_apology_fox.png"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
id="throbber"
|
|
||||||
style='
|
|
||||||
--logoChunkSize: 2vh;
|
|
||||||
display: grid;
|
|
||||||
margin-top: 2.5vh;
|
|
||||||
margin-bottom: 0.5vh;
|
|
||||||
width: 30vw;
|
|
||||||
grid-template-rows: repeat(8, var(--logoChunkSize));
|
|
||||||
grid-template-columns: repeat(5, var(--logoChunkSize));
|
|
||||||
grid-template-areas: "P P . L L"
|
|
||||||
"P P . L L"
|
|
||||||
"P P . L L"
|
|
||||||
"P P . L L"
|
|
||||||
"P P . . ."
|
|
||||||
"P P . . ."
|
|
||||||
"P P . E E"
|
|
||||||
"P P . E E";
|
|
||||||
width: auto;
|
|
||||||
'
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
background-color: #e2b188;
|
|
||||||
grid-area: P;
|
|
||||||
border-top-left-radius: calc(var(--logoChunkSize) / 2);
|
|
||||||
box-shadow: 0.1vh 0.1vh 1vh 0 #e2b188;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div id="status" class="css-ok">
|
||||||
style="
|
<!-- (｡>﹏<) -->
|
||||||
width: 100%;
|
<span class="initial-text">(｡>﹏<)</span>
|
||||||
height: 100%;
|
|
||||||
background-color: #e2b188;
|
|
||||||
grid-area: L;
|
|
||||||
border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
|
|
||||||
box-shadow: 0.1vh 0.1vh 1vh 0 #e2b188;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
|
||||||
style="
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #e2b188;
|
|
||||||
grid-area: E;
|
|
||||||
border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
|
|
||||||
box-shadow: 0.1vh 0.1vh 1vh 0 #e2b188;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="status"
|
|
||||||
class="css-ok"
|
|
||||||
style="
|
|
||||||
margin-top: 3.5vh;
|
|
||||||
height: 4vh;
|
|
||||||
line-height: 4vh;
|
|
||||||
font-size: 4vh;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<!-- (｡>﹏<) -->
|
|
||||||
<span class="initial-text">(｡>﹏<)</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="app" class="hidden"></div>
|
<div id="app" class="hidden"></div>
|
||||||
|
|
|
||||||
79
src/App.scss
79
src/App.scss
|
|
@ -919,7 +919,6 @@ option {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
transition: opacity 2s;
|
transition: opacity 2s;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
z-index: 9999999999999999999999999999;
|
|
||||||
|
|
||||||
&.hidden {
|
&.hidden {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
@ -938,13 +937,80 @@ option {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#mascot-container {
|
||||||
|
perspective: 60em;
|
||||||
|
perspective-origin: 0 -15em;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
}
|
||||||
|
|
||||||
#throbber {
|
#throbber {
|
||||||
animation-duration: 2s;
|
animation-duration: 3s;
|
||||||
animation-name: bounce;
|
animation-name: bounce;
|
||||||
animation-iteration-count: infinite;
|
animation-iteration-count: infinite;
|
||||||
animation-direction: normal;
|
animation-direction: normal;
|
||||||
transform-origin: bottom center;
|
transform-origin: bottom center;
|
||||||
|
|
||||||
|
--defaultY: 0;
|
||||||
|
|
||||||
|
&.dead {
|
||||||
|
animation-name: dead;
|
||||||
|
animation-duration: 3s;
|
||||||
|
// animation-iteration-count: 1;
|
||||||
|
animation-iteration-count: 1;
|
||||||
|
transform: rotateX(90deg) rotateY(0) rotateZ(-45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes dead {
|
||||||
|
0% {
|
||||||
|
transform: rotateX(0) rotateY(0) rotateZ(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
5% {
|
||||||
|
transform: rotateX(0) rotateY(0) rotateZ(1deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
10% {
|
||||||
|
transform: rotateX(0) rotateY(0) rotateZ(-2deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
15% {
|
||||||
|
transform: rotateX(0) rotateY(0) rotateZ(3deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
20% {
|
||||||
|
transform: rotateX(0) rotateY(0) rotateZ(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
25% {
|
||||||
|
transform: rotateX(0) rotateY(0) rotateZ(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
30% {
|
||||||
|
transform: rotateX(10deg) rotateY(0) rotateZ(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
35% {
|
||||||
|
transform: rotateX(-10deg) rotateY(0) rotateZ(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
transform: rotateX(10deg) rotateY(0) rotateZ(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
45% {
|
||||||
|
transform: rotateX(-10deg) rotateY(0) rotateZ(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: rotateX(10deg) rotateY(0) rotateZ(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotateX(90deg) rotateY(0) rotateZ(-45deg);
|
||||||
|
transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); /* easeInQuint */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes bounce {
|
@keyframes bounce {
|
||||||
0% {
|
0% {
|
||||||
scale: 1 1;
|
scale: 1 1;
|
||||||
|
|
@ -955,24 +1021,28 @@ option {
|
||||||
10% {
|
10% {
|
||||||
scale: 1.2 0.8;
|
scale: 1.2 0.8;
|
||||||
translate: 0 0;
|
translate: 0 0;
|
||||||
|
transform: rotateZ(var(--defaultZ));
|
||||||
animation-timing-function: ease-out;
|
animation-timing-function: ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
30% {
|
30% {
|
||||||
scale: 0.9 1.1;
|
scale: 0.9 1.1;
|
||||||
translate: 0 -40%;
|
translate: 0 -40%;
|
||||||
|
transform: rotateZ(var(--defaultZ));
|
||||||
animation-timing-function: ease-in;
|
animation-timing-function: ease-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
40% {
|
40% {
|
||||||
scale: 1.1 0.9;
|
scale: 1.1 0.9;
|
||||||
translate: 0 -50%;
|
translate: 0 -50%;
|
||||||
|
transform: rotateZ(var(--defaultZ));
|
||||||
animation-timing-function: ease-in;
|
animation-timing-function: ease-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
45% {
|
45% {
|
||||||
scale: 0.9 1.1;
|
scale: 0.9 1.1;
|
||||||
translate: 0 -45%;
|
translate: 0 -45%;
|
||||||
|
transform: rotateZ(var(--defaultZ));
|
||||||
animation-timing-function: ease-in;
|
animation-timing-function: ease-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -985,30 +1055,35 @@ option {
|
||||||
55% {
|
55% {
|
||||||
scale: 0.985 1.025;
|
scale: 0.985 1.025;
|
||||||
translate: 0 -35%;
|
translate: 0 -35%;
|
||||||
|
transform: rotateZ(var(--defaultZ));
|
||||||
animation-timing-function: ease-in;
|
animation-timing-function: ease-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
60% {
|
60% {
|
||||||
scale: 1.0125 0.9985;
|
scale: 1.0125 0.9985;
|
||||||
translate: 0 -30%;
|
translate: 0 -30%;
|
||||||
|
transform: rotateZ(var(--defaultZ));
|
||||||
animation-timing-function: ease-in;
|
animation-timing-function: ease-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
80% {
|
80% {
|
||||||
scale: 1.0063 0.9938;
|
scale: 1.0063 0.9938;
|
||||||
translate: 0 -10%;
|
translate: 0 -10%;
|
||||||
|
transform: rotateZ(var(--defaultZ));
|
||||||
animation-timing-function: ease-in-ou;
|
animation-timing-function: ease-in-ou;
|
||||||
}
|
}
|
||||||
|
|
||||||
90% {
|
90% {
|
||||||
scale: 1.2 0.8;
|
scale: 1.2 0.8;
|
||||||
translate: 0 0;
|
translate: 0 0;
|
||||||
|
transform: rotateZ(var(--defaultZ));
|
||||||
animation-timing-function: ease-out;
|
animation-timing-function: ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
scale: 1 1;
|
scale: 1 1;
|
||||||
translate: 0 0;
|
translate: 0 0;
|
||||||
|
transform: rotateZ(var(--defaultZ));
|
||||||
animation-timing-function: ease-out;
|
animation-timing-function: ease-out;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -327,11 +327,7 @@ const setConfig = async ({ store }) => {
|
||||||
|
|
||||||
const checkOAuthToken = async ({ store }) => {
|
const checkOAuthToken = async ({ store }) => {
|
||||||
if (store.getters.getUserToken()) {
|
if (store.getters.getUserToken()) {
|
||||||
try {
|
return store.dispatch('loginUser', store.getters.getUserToken())
|
||||||
await store.dispatch('loginUser', store.getters.getUserToken())
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
return Promise.resolve()
|
return Promise.resolve()
|
||||||
}
|
}
|
||||||
|
|
@ -349,10 +345,15 @@ const afterStoreSetup = async ({ store, i18n }) => {
|
||||||
const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin
|
const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin
|
||||||
store.dispatch('setInstanceOption', { name: 'server', value: server })
|
store.dispatch('setInstanceOption', { name: 'server', value: server })
|
||||||
|
|
||||||
|
document.querySelector('#status').textContent = i18n.global.t('splash.settings')
|
||||||
await setConfig({ store })
|
await setConfig({ store })
|
||||||
await store.dispatch('setTheme')
|
|
||||||
|
|
||||||
document.querySelector('#status').textContent = i18n.global.t('splash.theme')
|
document.querySelector('#status').textContent = i18n.global.t('splash.theme')
|
||||||
|
try {
|
||||||
|
await store.dispatch('setTheme').catch((e) => { console.log(e) })
|
||||||
|
} catch (e) {
|
||||||
|
return Promise.reject(e)
|
||||||
|
}
|
||||||
|
|
||||||
applyConfig(store.state.config, i18n.global)
|
applyConfig(store.state.config, i18n.global)
|
||||||
|
|
||||||
// Now we can try getting the server settings and logging in
|
// Now we can try getting the server settings and logging in
|
||||||
|
|
@ -363,7 +364,7 @@ const afterStoreSetup = async ({ store, i18n }) => {
|
||||||
getInstancePanel({ store }),
|
getInstancePanel({ store }),
|
||||||
getNodeInfo({ store }),
|
getNodeInfo({ store }),
|
||||||
getInstanceConfig({ store })
|
getInstanceConfig({ store })
|
||||||
])
|
]).catch(e => Promise.reject(e))
|
||||||
|
|
||||||
// Start fetching things that don't need to block the UI
|
// Start fetching things that don't need to block the UI
|
||||||
store.dispatch('fetchMutes')
|
store.dispatch('fetchMutes')
|
||||||
|
|
|
||||||
|
|
@ -1406,11 +1406,12 @@
|
||||||
"loading": "Loading...",
|
"loading": "Loading...",
|
||||||
"theme": "Applying theme, please wait warmly...",
|
"theme": "Applying theme, please wait warmly...",
|
||||||
"instance": "Getting instance info...",
|
"instance": "Getting instance info...",
|
||||||
"splines": "Reticulating splines...",
|
"settings": "Applying settings...",
|
||||||
"almost": "Almost there!",
|
"almost": "Reticulating splines...",
|
||||||
"fun_1": "Drink more water!",
|
"fun_1": "Drink more water",
|
||||||
"fun_2": "Take it easy!",
|
"fun_2": "Take it easy!",
|
||||||
"fun_3": "Suya..",
|
"fun_3": "Suya...",
|
||||||
"fun_4": "#cofe"
|
"fun_4": "My Pleroma machine is full power!",
|
||||||
|
"error": "Something went wrong"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
110
src/main.js
110
src/main.js
|
|
@ -48,6 +48,16 @@ const i18n = createI18n({
|
||||||
|
|
||||||
messages.setLanguage(i18n.global, currentLocale)
|
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 = {
|
const persistedStateOptions = {
|
||||||
paths: [
|
paths: [
|
||||||
'serverSideStorage.cache',
|
'serverSideStorage.cache',
|
||||||
|
|
@ -58,57 +68,61 @@ const persistedStateOptions = {
|
||||||
};
|
};
|
||||||
|
|
||||||
(async () => {
|
(async () => {
|
||||||
let storageError = false
|
|
||||||
const plugins = [pushNotifications]
|
|
||||||
try {
|
try {
|
||||||
const persistedState = await createPersistedState(persistedStateOptions)
|
let storageError
|
||||||
plugins.push(persistedState)
|
const plugins = [pushNotifications]
|
||||||
} catch (e) {
|
try {
|
||||||
console.error(e)
|
const persistedState = await createPersistedState(persistedStateOptions)
|
||||||
storageError = true
|
plugins.push(persistedState)
|
||||||
}
|
} catch (e) {
|
||||||
document.querySelector('#status').removeAttribute('class')
|
console.error('Storage error', e)
|
||||||
document.querySelector('#status').textContent = i18n.global.t('splash.loading')
|
storageError = e
|
||||||
const store = createStore({
|
}
|
||||||
modules: {
|
document.querySelector('#status').removeAttribute('class')
|
||||||
i18n: {
|
document.querySelector('#status').textContent = i18n.global.t('splash.loading')
|
||||||
getters: {
|
const store = createStore({
|
||||||
i18n: () => i18n.global
|
modules: {
|
||||||
}
|
i18n: {
|
||||||
|
getters: {
|
||||||
|
i18n: () => i18n.global
|
||||||
|
}
|
||||||
|
},
|
||||||
|
interface: interfaceModule,
|
||||||
|
instance: instanceModule,
|
||||||
|
// TODO refactor users/statuses modules, they depend on each other
|
||||||
|
users: usersModule,
|
||||||
|
statuses: statusesModule,
|
||||||
|
notifications: notificationsModule,
|
||||||
|
lists: listsModule,
|
||||||
|
api: apiModule,
|
||||||
|
config: configModule,
|
||||||
|
profileConfig: profileConfigModule,
|
||||||
|
serverSideStorage: serverSideStorageModule,
|
||||||
|
adminSettings: adminSettingsModule,
|
||||||
|
shout: shoutModule,
|
||||||
|
oauth: oauthModule,
|
||||||
|
authFlow: authFlowModule,
|
||||||
|
mediaViewer: mediaViewerModule,
|
||||||
|
oauthTokens: oauthTokensModule,
|
||||||
|
reports: reportsModule,
|
||||||
|
polls: pollsModule,
|
||||||
|
postStatus: postStatusModule,
|
||||||
|
editStatus: editStatusModule,
|
||||||
|
statusHistory: statusHistoryModule,
|
||||||
|
chats: chatsModule,
|
||||||
|
announcements: announcementsModule
|
||||||
},
|
},
|
||||||
interface: interfaceModule,
|
plugins,
|
||||||
instance: instanceModule,
|
strict: false // Socket modifies itself, let's ignore this for now.
|
||||||
// TODO refactor users/statuses modules, they depend on each other
|
// strict: process.env.NODE_ENV !== 'production'
|
||||||
users: usersModule,
|
})
|
||||||
statuses: statusesModule,
|
if (storageError) {
|
||||||
notifications: notificationsModule,
|
store.dispatch('pushGlobalNotice', { messageKey: 'errors.storage_unavailable', level: 'error' })
|
||||||
lists: listsModule,
|
}
|
||||||
api: apiModule,
|
return await afterStoreSetup({ store, i18n })
|
||||||
config: configModule,
|
} catch (e) {
|
||||||
profileConfig: profileConfigModule,
|
splashError(i18n, e)
|
||||||
serverSideStorage: serverSideStorageModule,
|
|
||||||
adminSettings: adminSettingsModule,
|
|
||||||
shout: shoutModule,
|
|
||||||
oauth: oauthModule,
|
|
||||||
authFlow: authFlowModule,
|
|
||||||
mediaViewer: mediaViewerModule,
|
|
||||||
oauthTokens: oauthTokensModule,
|
|
||||||
reports: reportsModule,
|
|
||||||
polls: pollsModule,
|
|
||||||
postStatus: postStatusModule,
|
|
||||||
editStatus: editStatusModule,
|
|
||||||
statusHistory: statusHistoryModule,
|
|
||||||
chats: chatsModule,
|
|
||||||
announcements: announcementsModule
|
|
||||||
},
|
|
||||||
plugins,
|
|
||||||
strict: false // Socket modifies itself, let's ignore this for now.
|
|
||||||
// strict: process.env.NODE_ENV !== 'production'
|
|
||||||
})
|
|
||||||
if (storageError) {
|
|
||||||
store.dispatch('pushGlobalNotice', { messageKey: 'errors.storage_unavailable', level: 'error' })
|
|
||||||
}
|
}
|
||||||
afterStoreSetup({ store, i18n })
|
|
||||||
})()
|
})()
|
||||||
|
|
||||||
// These are inlined by webpack's DefinePlugin
|
// These are inlined by webpack's DefinePlugin
|
||||||
|
|
|
||||||
|
|
@ -230,27 +230,27 @@ const interfaceMod = {
|
||||||
|
|
||||||
const forceRecompile = forceThemeRecompilation || recompile
|
const forceRecompile = forceThemeRecompilation || recompile
|
||||||
|
|
||||||
let promise = null
|
let result = null
|
||||||
|
|
||||||
if (themeData) {
|
if (themeData) {
|
||||||
promise = Promise.resolve(normalizeThemeData(themeData))
|
result = normalizeThemeData(themeData)
|
||||||
} else if (themeName) {
|
} else if (themeName) {
|
||||||
promise = getPreset(themeName).then(themeData => normalizeThemeData(themeData))
|
result = normalizeThemeData(getPreset(themeName))
|
||||||
|
.then(themeData => normalizeThemeData(themeData))
|
||||||
} else if (userThemeSource || userThemeSnapshot) {
|
} else if (userThemeSource || userThemeSnapshot) {
|
||||||
promise = Promise.resolve(normalizeThemeData({
|
result = normalizeThemeData({
|
||||||
_pleroma_theme_version: 2,
|
_pleroma_theme_version: 2,
|
||||||
theme: userThemeSnapshot,
|
theme: userThemeSnapshot,
|
||||||
source: userThemeSource
|
source: userThemeSource
|
||||||
}))
|
|
||||||
} else if (actualThemeName && actualThemeName !== 'custom') {
|
|
||||||
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 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
|
||||||
} else {
|
} else {
|
||||||
throw new Error('Cannot load any theme!')
|
throw new Error('Cannot load any theme!')
|
||||||
}
|
}
|
||||||
|
|
@ -259,95 +259,91 @@ const interfaceMod = {
|
||||||
// cache (tryLoadCache return true if load successful)
|
// cache (tryLoadCache return true if load successful)
|
||||||
if (!forceRecompile && !themeDebug && tryLoadCache()) {
|
if (!forceRecompile && !themeDebug && tryLoadCache()) {
|
||||||
dispatch('setThemeApplied')
|
dispatch('setThemeApplied')
|
||||||
return
|
return Promise.resolve()
|
||||||
}
|
}
|
||||||
|
|
||||||
promise
|
const realThemeData = result
|
||||||
.then(realThemeData => {
|
const theme2ruleset = convertTheme2To3(realThemeData)
|
||||||
const theme2ruleset = convertTheme2To3(realThemeData)
|
|
||||||
|
|
||||||
if (saveData) {
|
if (saveData) {
|
||||||
commit('setOption', { name: 'theme', value: themeName || actualThemeName })
|
commit('setOption', { name: 'theme', value: themeName || actualThemeName })
|
||||||
commit('setOption', { name: 'customTheme', value: realThemeData })
|
commit('setOption', { name: 'customTheme', value: realThemeData })
|
||||||
commit('setOption', { name: 'customThemeSource', 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
|
||||||
}
|
}
|
||||||
const hacks = []
|
case 'underlay': {
|
||||||
|
if (value !== 'none') {
|
||||||
Object.entries(theme3hacks).forEach(([key, value]) => {
|
const newRule = {
|
||||||
switch (key) {
|
component: 'Underlay',
|
||||||
case 'fonts': {
|
directives: {}
|
||||||
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 === 'opaque') {
|
||||||
if (value !== 'none') {
|
newRule.directives.opacity = 1
|
||||||
const newRule = {
|
newRule.directives.background = '--wallpaper'
|
||||||
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 = [
|
const ruleset = [
|
||||||
...theme2ruleset,
|
...theme2ruleset,
|
||||||
...hacks
|
...hacks
|
||||||
]
|
]
|
||||||
|
|
||||||
applyTheme(
|
applyTheme(
|
||||||
ruleset,
|
ruleset,
|
||||||
() => dispatch('setThemeApplied'),
|
() => dispatch('setThemeApplied'),
|
||||||
themeDebug
|
themeDebug
|
||||||
)
|
)
|
||||||
})
|
|
||||||
|
|
||||||
return promise
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -43,16 +43,16 @@ const adoptStyleSheets = (styles) => {
|
||||||
// is nothing to do here.
|
// is nothing to do here.
|
||||||
}
|
}
|
||||||
|
|
||||||
export const generateTheme = async (inputRuleset, callbacks, debug) => {
|
export const generateTheme = (inputRuleset, callbacks, debug) => {
|
||||||
const {
|
const {
|
||||||
onNewRule = (rule, isLazy) => {},
|
onNewRule = (rule, isLazy) => {},
|
||||||
onLazyFinished = () => {},
|
onLazyFinished = () => {},
|
||||||
onEagerFinished = () => {}
|
onEagerFinished = () => {}
|
||||||
} = callbacks
|
} = callbacks
|
||||||
|
|
||||||
// Assuming that "worst case scenario background" is panel background since it's the most likely one
|
|
||||||
const themes3 = init({
|
const themes3 = init({
|
||||||
inputRuleset,
|
inputRuleset,
|
||||||
|
// Assuming that "worst case scenario background" is panel background since it's the most likely one
|
||||||
ultimateBackgroundColor: inputRuleset[0].directives['--bg'].split('|')[1].trim(),
|
ultimateBackgroundColor: inputRuleset[0].directives['--bg'].split('|')[1].trim(),
|
||||||
debug
|
debug
|
||||||
})
|
})
|
||||||
|
|
@ -146,11 +146,11 @@ export const tryLoadCache = () => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const applyTheme = async (input, onFinish = (data) => {}, debug) => {
|
export const applyTheme = (input, onFinish = (data) => {}, debug) => {
|
||||||
const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
|
const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
|
||||||
const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
|
const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
|
||||||
|
|
||||||
const { lazyProcessFunc } = await generateTheme(
|
const { lazyProcessFunc } = generateTheme(
|
||||||
input,
|
input,
|
||||||
{
|
{
|
||||||
onNewRule (rule, isLazy) {
|
onNewRule (rule, isLazy) {
|
||||||
|
|
@ -185,8 +185,6 @@ export const applyTheme = async (input, onFinish = (data) => {}, debug) => {
|
||||||
)
|
)
|
||||||
|
|
||||||
setTimeout(lazyProcessFunc, 0)
|
setTimeout(lazyProcessFunc, 0)
|
||||||
|
|
||||||
return Promise.resolve()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const extractStyleConfig = ({
|
const extractStyleConfig = ({
|
||||||
|
|
|
||||||
|
|
@ -196,6 +196,11 @@ export const init = ({
|
||||||
return rule
|
return rule
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const i = 4
|
||||||
|
if (2 + 2 === i) {
|
||||||
|
throw new Error('test')
|
||||||
|
}
|
||||||
|
|
||||||
const ruleset = rulesetUnsorted
|
const ruleset = rulesetUnsorted
|
||||||
.map((data, index) => ({ data, index }))
|
.map((data, index) => ({ data, index }))
|
||||||
.sort(({ data: a, index: ai }, { data: b, index: bi }) => {
|
.sort(({ data: a, index: ai }, { data: b, index: bi }) => {
|
||||||
|
|
|
||||||
BIN
static/pleromatan_orz.png
Normal file
BIN
static/pleromatan_orz.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
static/pleromatan_orz_fox.png
Normal file
BIN
static/pleromatan_orz_fox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Loading…
Reference in a new issue