From 6d5a4722255587de7ff406c4272469d91c5b98c6 Mon Sep 17 00:00:00 2001 From: Maxime Cesson Date: Fri, 19 Aug 2022 16:17:03 +0200 Subject: [PATCH 1/5] Handle placeholder deletion before animation fallback --- customize.dist/pre-loading.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/customize.dist/pre-loading.js b/customize.dist/pre-loading.js index 3e7bc5b51..d5068759f 100644 --- a/customize.dist/pre-loading.js +++ b/customize.dist/pre-loading.js @@ -19,8 +19,10 @@ document.addEventListener('DOMContentLoaded', function() { document.body.appendChild(elem); // fallback if CSS animations not available setTimeout(() => { - document.querySelector('.placeholder-logo-container').style.opacity = 100; - document.querySelector('.placeholder-message-container').style.opacity = 100; + try { + document.querySelector('.placeholder-logo-container').style.opacity = 100; + document.querySelector('.placeholder-message-container').style.opacity = 100; + } catch (e) {} }, 3000); }); }()); From 5cc042d7d8028171a27cef25912ce60296c66305 Mon Sep 17 00:00:00 2001 From: Maxime Cesson Date: Fri, 19 Aug 2022 16:30:21 +0200 Subject: [PATCH 2/5] Fix bug with "code" app: vertical separator over the placeholder --- customize.dist/src/pre-loading.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/customize.dist/src/pre-loading.css b/customize.dist/src/pre-loading.css index bacb667fe..78be2ebdc 100644 --- a/customize.dist/src/pre-loading.css +++ b/customize.dist/src/pre-loading.css @@ -9,6 +9,10 @@ font-style: normal; } +.cp-app-noscroll #placeholder { + z-index: 9999999; /* loading screen -1 */ +} + #placeholder { visibility: visible; position: fixed; From 06a8e7c866d6653fd8fe1dab52ae678dd5aa4aa6 Mon Sep 17 00:00:00 2001 From: Maxime Cesson Date: Fri, 19 Aug 2022 16:39:20 +0200 Subject: [PATCH 3/5] Improve transition from outer placeholder to inner one --- customize.dist/pre-loading.js | 18 ++++++++++++++++++ customize.dist/src/pre-loading.css | 7 +++++++ www/common/sframe-common-outer.js | 3 ++- 3 files changed, 27 insertions(+), 1 deletion(-) diff --git a/customize.dist/pre-loading.js b/customize.dist/pre-loading.js index d5068759f..df1dd26c9 100644 --- a/customize.dist/pre-loading.js +++ b/customize.dist/pre-loading.js @@ -15,8 +15,26 @@ elem.innerHTML = [ '' ].join(''); +var req; +try { + req = JSON.parse(decodeURIComponent(window.location.hash.substring(1))); + } +} catch (e) {} + document.addEventListener('DOMContentLoaded', function() { document.body.appendChild(elem); + window.CP_preloadingTime = +new Date(); + + // soft transition between inner and outer placeholders + if (req && req.time && (+new Date() - req.time > 2000)) { + var logo = document.querySelector('.placeholder-logo-container'); + var message = document.querySelector('.placeholder-message-container'); + logo.style.opacity = 100; + message.style.opacity = 100; + logo.style.animation = 'none'; + message.style.animation = 'none'; + } + // fallback if CSS animations not available setTimeout(() => { try { diff --git a/customize.dist/src/pre-loading.css b/customize.dist/src/pre-loading.css index 78be2ebdc..5420509fb 100644 --- a/customize.dist/src/pre-loading.css +++ b/customize.dist/src/pre-loading.css @@ -9,8 +9,12 @@ font-style: normal; } +.cp-app-noscroll body { + background: transparent; +} .cp-app-noscroll #placeholder { z-index: 9999999; /* loading screen -1 */ + background-color: transparent; } #placeholder { @@ -65,6 +69,9 @@ opacity: 0; animation: fadein 5s ease 2s forwards; } +#placeholder .placeholder-message-container p { + margin-top: 0; +} #placeholder .placeholder-logo { margin-left: auto; margin-right: auto; diff --git a/www/common/sframe-common-outer.js b/www/common/sframe-common-outer.js index 18fdc92f8..8c8c808ca 100644 --- a/www/common/sframe-common-outer.js +++ b/www/common/sframe-common-outer.js @@ -51,7 +51,8 @@ define([ pfx: window.location.origin, theme: localStorage[themeKey], themeOS: localStorage[themeKey+'_default'], - lang: lang + lang: lang, + time: window.CP_preloadingTime }; window.rc = requireConfig; window.apiconf = ApiConfig; From 59458a74278bfdcd9950d7075e16661850b20238 Mon Sep 17 00:00:00 2001 From: Maxime Cesson Date: Fri, 19 Aug 2022 16:41:42 +0200 Subject: [PATCH 4/5] Adjust light & dark themes --- customize.dist/pre-loading.js | 10 ++++++++++ customize.dist/src/pre-loading.css | 9 ++++----- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/customize.dist/pre-loading.js b/customize.dist/pre-loading.js index df1dd26c9..2c5f3b42d 100644 --- a/customize.dist/pre-loading.js +++ b/customize.dist/pre-loading.js @@ -15,9 +15,19 @@ elem.innerHTML = [ '' ].join(''); +var key = 'CRYPTPAD_STORE|colortheme'; // handle outer +if (localStorage[key] && localStorage[key] === 'dark') { + elem.classList.add('dark-theme'); +} +if (!localStorage[key] && localStorage[key+'_default'] && localStorage[key+'_default'] === 'dark') { + elem.classList.add('dark-theme'); +} + var req; try { req = JSON.parse(decodeURIComponent(window.location.hash.substring(1))); + if ((req.theme || req.themeOS) === 'dark') { // handle inner + elem.classList.add('dark-theme'); } } catch (e) {} diff --git a/customize.dist/src/pre-loading.css b/customize.dist/src/pre-loading.css index 5420509fb..cda870bab 100644 --- a/customize.dist/src/pre-loading.css +++ b/customize.dist/src/pre-loading.css @@ -36,12 +36,11 @@ align-items: center; font: 20px 'Open Sans', 'Helvetica Neue', sans-serif !important; } -@media (prefers-color-scheme: dark) { - #placeholder { - background-color: #212121; /* @cp_loading-bg (dark) */ - color: #EEEEEE; /* @cp_loading-fg (dark) */ - } +#placeholder.dark-theme { + background-color: #212121; /* @cp_loading-bg (dark) */ + color: #EEEEEE; /* @cp_loading-fg (dark) */ } + #placeholder .placeholder-logo-container { height: 300px; width: 300px; From dc5f9e2b955c3c798563943273a4300102fa8e56 Mon Sep 17 00:00:00 2001 From: ansuz Date: Tue, 30 Aug 2022 14:12:02 +0530 Subject: [PATCH 5/5] avoid a possible type error on the loading screen --- customize.dist/pre-loading.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/customize.dist/pre-loading.js b/customize.dist/pre-loading.js index 2c5f3b42d..731b9b677 100644 --- a/customize.dist/pre-loading.js +++ b/customize.dist/pre-loading.js @@ -37,12 +37,16 @@ document.addEventListener('DOMContentLoaded', function() { // soft transition between inner and outer placeholders if (req && req.time && (+new Date() - req.time > 2000)) { - var logo = document.querySelector('.placeholder-logo-container'); - var message = document.querySelector('.placeholder-message-container'); - logo.style.opacity = 100; - message.style.opacity = 100; - logo.style.animation = 'none'; - message.style.animation = 'none'; + try { + var logo = document.querySelector('.placeholder-logo-container'); + var message = document.querySelector('.placeholder-message-container'); + logo.style.opacity = 100; + message.style.opacity = 100; + logo.style.animation = 'none'; + message.style.animation = 'none'; + } catch (err) { + console.error(err); + } } // fallback if CSS animations not available