From 45aaa172199fde2e073481877984ec1fcc79ed3c Mon Sep 17 00:00:00 2001 From: djmaze Date: Sat, 5 Sep 2020 12:22:46 +0200 Subject: [PATCH] Better boot response by splitting and embedding boot css/html into index.html --- dev/Styles/@Boot.css | 57 ++++++++++++++++ dev/Styles/Animations.less | 4 -- dev/Styles/Layout.less | 23 ------- dev/Styles/Ui.less | 41 ------------ dev/Styles/_progressjs.css | 25 +++---- dev/boot.js | 66 ++++--------------- .../0.0.0/app/libraries/RainLoop/Actions.php | 8 +-- .../0.0.0/app/libraries/RainLoop/Service.php | 6 +- rainloop/v/0.0.0/app/templates/Index.html | 28 +++++++- .../0.0.0/app/templates/Themes/template.less | 4 -- tasks/config.js | 6 ++ tasks/css.js | 27 +++++++- 12 files changed, 142 insertions(+), 153 deletions(-) create mode 100644 dev/Styles/@Boot.css diff --git a/dev/Styles/@Boot.css b/dev/Styles/@Boot.css new file mode 100644 index 000000000..57611da7a --- /dev/null +++ b/dev/Styles/@Boot.css @@ -0,0 +1,57 @@ +html, body { + background-color: #eee; + font-family: "DejaVu Sans", Verdana, Geneva, "Bitstream Vera Sans", "DejaVu LGC Sans", sans-serif; + margin: 0; + padding: 0; +} + +body { + background-color: #aaa; + color: #333; +} + +#rl-content, #rl-loading-error { + display: none; +} + +#rl-loading, #rl-loading-error { + font-size: 30px; + line-height: 130%; + position: fixed; + text-align: center; + top: 50%; + transform: translateY(-50%); + width: 100%; +} + +.e-spinner { + margin: 5px auto 0; + width: 100px; + text-align: center; +} + +.e-spinner .e-bounce { + animation: bouncedelay 1.4s infinite ease-in-out; + background-color: #333; + border-radius: 100%; + box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); + display: inline-block; + height: 15px; + margin: 0 5px; + width: 15px; + /* Prevent first frame from flickering when animation starts */ + animation-fill-mode: both; +} + +.e-spinner .bounce1 { + animation-delay: -0.32s; +} + +.e-spinner .bounce2 { + animation-delay: -0.16s; +} + +@keyframes bouncedelay { + 0%, 80%, 100% { transform: scale(0.0); } + 40% { transform: scale(1.0); } +} diff --git a/dev/Styles/Animations.less b/dev/Styles/Animations.less index 61347e1b5..11262ff4b 100644 --- a/dev/Styles/Animations.less +++ b/dev/Styles/Animations.less @@ -40,10 +40,6 @@ html.rl-started-trigger.no-mobile .b-login-content .loginFormWrapper { opacity: 0.7; }*/ -#rl-loading { - transition: opacity 0.5s linear; -} - html.rl-started-delay { #rl-left { diff --git a/dev/Styles/Layout.less b/dev/Styles/Layout.less index ed370345c..f0e98258b 100644 --- a/dev/Styles/Layout.less +++ b/dev/Styles/Layout.less @@ -419,29 +419,6 @@ html.rl-ctrl-key-pressed { } } -#rl-loading, #rl-loading-error { - position: absolute; - font-size: 30px; - line-height: 130%; - top: 50%; - width: 100%; - height: 65px; - margin: 0; - margin-top: -60px; - background-color: transparent; - text-align: center; - color: #000; -} - -#rl-loading-error { - background-image: none; - display: none; -} - -#rl-app{ - display: none; -} - .rl-content-show { display: block !important; } diff --git a/dev/Styles/Ui.less b/dev/Styles/Ui.less index 910b7f22d..774b11cd8 100644 --- a/dev/Styles/Ui.less +++ b/dev/Styles/Ui.less @@ -152,10 +152,6 @@ } } -.e-spinner { - display: none; -} - .e-mobile-switcher { margin-top: 8px; color: #333; @@ -187,43 +183,6 @@ } } -html { - - .e-spinner { - display: block; - margin: 5px auto 0; - width: 100px; - text-align: center; - } - - .e-spinner .e-bounce { - width: 15px; - height: 15px; - background-color: #ddd; - margin: 0 5px; - box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); - - border-radius: 100%; - display: inline-block; - animation: bouncedelay 1.4s infinite ease-in-out; - /* Prevent first frame from flickering when animation starts */ - animation-fill-mode: both; - } - - .e-spinner .bounce1 { - animation-delay: -0.32s; - } - - .e-spinner .bounce2 { - animation-delay: -0.16s; - } -} - -@keyframes bouncedelay { - 0%, 80%, 100% { transform: scale(0.0); } - 40% { transform: scale(1.0); } -} - .command.command-disabled.hide-on-disabled-command { display:none; } diff --git a/dev/Styles/_progressjs.css b/dev/Styles/_progressjs.css index 4f0844ce5..531fe0283 100644 --- a/dev/Styles/_progressjs.css +++ b/dev/Styles/_progressjs.css @@ -1,11 +1,4 @@ -.progressjs-inner { - width: 0; -} -.progressjs-progress { - z-index: 9999999; -} - -.progressjs-theme-rainloop { +.progressjs { left: 0; position: fixed; top: 0; @@ -13,17 +6,17 @@ z-index: 2000; } -.progressjs-theme-rainloop .progressjs-inner { - +.progressjs-inner { background-color: #939595; - position: relative; - z-index: 2000; height: 3px; overflow: hidden; + position: relative; transition: width .5s; + width: 0; + z-index: 2000; } -.progressjs-theme-rainloop .progressjs-percent { +.progressjs-percent { position: absolute; top: 0; left: 0; @@ -31,10 +24,10 @@ bottom: 0; background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent); background-size: 32px 32px; - animation: simple-pace-stripe-animation 500ms linear infinite; + animation: simple-pace-stripe-animation 500ms linear infinite; } @keyframes simple-pace-stripe-animation { - 0% { transform: none; transform: none; } - 100% { transform: translate(-32px, 0); transform: translate(-32px, 0); } + 0% { transform: none; } + 100% { transform: translate(-32px, 0); } } diff --git a/dev/boot.js b/dev/boot.js index 0851affb6..1012ca6a5 100644 --- a/dev/boot.js +++ b/dev/boot.js @@ -78,9 +78,7 @@ const script.onload = () => resolve(); script.onerror = () => reject(new Error(src)); script.src = src; -// script.type = 'text/javascript'; doc.head.append(script); -// doc.body.append(element); }); }, @@ -97,17 +95,16 @@ const } }; -let container = doc.createElement('div'), - progress = container.appendChild(doc.createElement("div")), +if (!navigator || !navigator.cookieEnabled) { + doc.location.replace('./?/NoCookie'); +} + +let container = doc.querySelector('.progressjs'), + progress = doc.querySelector('.progressjs-inner'), RL_APP_DATA_STORAGE = {}; -container.className = 'progressjs-progress progressjs-theme-rainloop'; -progress.className = "progressjs-inner"; -progress.appendChild(doc.createElement('div')).className = "progressjs-percent"; - p.set(1); -doc.body.append(container); Storage('local'); Storage('session'); @@ -170,25 +167,11 @@ win.__initAppData = appData => { rl.hash.set(); if (appData) { - const css = appData.IncludeCss, - theme = appData.NewThemeLink, - description= appData.LoadingDescriptionEsc || '', - oE = doc.getElementById('rl-loading'), - oElDesc = doc.getElementById('rl-loading-desc'); - - if (theme) { - (doc.getElementById('app-theme-link') || {}).href = theme; + if (appData.NewThemeLink) { + (doc.getElementById('app-theme-link') || {}).href = appData.NewThemeLink; } - css && writeCSS(css); - - if (oElDesc && description) { - oElDesc.innerHTML = description; - } - if (oE && oE.style) { - oE.style.opacity = 0; - setTimeout(() => oE.style.opacity = 1, 300); - } + appData.IncludeCss && writeCSS(appData.IncludeCss); } if ( @@ -246,32 +229,11 @@ win.__initAppData = appData => { } }; -if (!navigator || !navigator.cookieEnabled) { - doc.location.replace('./?/NoCookie'); -} - -writeCSS('#rl-content{display:none;}.internal-hiddden{display:none !important;}'); - if (app) { - app.innerHTML = '
\ -
\ - \ -
\ -
An error occurred.
Please refresh the page and try again.
\ -
\ -
\ -
\ -
\ -
\ -
\ -
\ -
\ -
\ -
'.replace(/[\r\n\t]+/g, ''); + ['app-css','app-theme-link'].forEach(css => { + css = doc.getElementById(css); + css.href = css.dataset.href; + }); loadScript('./?/' + (options.admin ? 'Admin' : '') @@ -285,4 +247,4 @@ if (app) { + '/').then(() => {}); } -})(window); +})(this); diff --git a/rainloop/v/0.0.0/app/libraries/RainLoop/Actions.php b/rainloop/v/0.0.0/app/libraries/RainLoop/Actions.php index 22fc31c69..f3aea0e0f 100644 --- a/rainloop/v/0.0.0/app/libraries/RainLoop/Actions.php +++ b/rainloop/v/0.0.0/app/libraries/RainLoop/Actions.php @@ -1162,7 +1162,7 @@ class Actions /* required by Index.html and rl.js: -NewThemeLink IncludeCss LoadingDescriptionEsc TemplatesLink LangLink IncludeBackground PluginsLink AuthAccountHash +NewThemeLink IncludeCss TemplatesLink LangLink IncludeBackground PluginsLink AuthAccountHash */ $aResult = array( @@ -1176,7 +1176,6 @@ NewThemeLink IncludeCss LoadingDescriptionEsc TemplatesLink LangLink IncludeBack 'DevPassword' => '', 'Title' => $oConfig->Get('webmail', 'title', 'RainLoop Webmail'), 'LoadingDescription' => $oConfig->Get('webmail', 'loading_description', 'RainLoop'), - 'LoadingDescriptionEsc' => 'RainLoop', 'FaviconUrl' => $oConfig->Get('webmail', 'favicon_url', ''), 'LoginDescription' => '', 'LoginLogo' => '', @@ -1218,11 +1217,6 @@ NewThemeLink IncludeCss LoadingDescriptionEsc TemplatesLink LangLink IncludeBack $aResult['AuthAccountHash'] = $sAuthAccountHash; } - if ('' !== $aResult['LoadingDescription'] && 'RainLoop' !== $aResult['LoadingDescription']) - { - $aResult['LoadingDescriptionEsc'] = \htmlspecialchars($aResult['LoadingDescription'], ENT_QUOTES|ENT_IGNORE, 'UTF-8'); - } - $oSettings = null; if (!$bAdmin) diff --git a/rainloop/v/0.0.0/app/libraries/RainLoop/Service.php b/rainloop/v/0.0.0/app/libraries/RainLoop/Service.php index 98f8a6151..19b02cf39 100644 --- a/rainloop/v/0.0.0/app/libraries/RainLoop/Service.php +++ b/rainloop/v/0.0.0/app/libraries/RainLoop/Service.php @@ -242,6 +242,8 @@ class Service $sFaviconPngLink = $sFaviconUrl ? $sFaviconUrl : $this->staticPath('apple-touch-icon.png'); $sAppleTouchLink = $sFaviconUrl ? '' : $this->staticPath('apple-touch-icon.png'); + $LoadingDescription = $this->oActions->Config()->Get('webmail', 'loading_description', 'RainLoop'); + $aTemplateParameters = array( '{{BaseAppHeadScriptLink}}' => '', '{{BaseAppBodyScript}}' => '', @@ -254,7 +256,9 @@ class Service '{{BaseViewport}}' => $bMobile ? 'width=device-width,initial-scale=1,user-scalable=no' : 'width=950,maximum-scale=2', '{{BaseContentSecurityPolicy}}' => '', '{{BaseDir}}' => false && \in_array($sLanguage, array('ar', 'he', 'ur')) ? 'rtl' : 'ltr', - '{{BaseAppManifestLink}}' => $this->staticPath('manifest.json') + '{{BaseAppManifestLink}}' => $this->staticPath('manifest.json'), + '{{BaseAppBootCss}}' => \file_get_contents(APP_VERSION_ROOT_PATH.'static/css/boot'.($bAppCssDebug ? '' : '.min').'.css'), + '{{LoadingDescriptionEsc}}' => \htmlspecialchars($LoadingDescription, ENT_QUOTES|ENT_IGNORE, 'UTF-8') ); $aTemplateParameters['{{RainloopBootData}}'] = \json_encode(array( diff --git a/rainloop/v/0.0.0/app/templates/Index.html b/rainloop/v/0.0.0/app/templates/Index.html index 81b5cc3bd..07afd7321 100644 --- a/rainloop/v/0.0.0/app/templates/Index.html +++ b/rainloop/v/0.0.0/app/templates/Index.html @@ -13,14 +13,36 @@ {{BaseAppFaviconPngLinkTag}} {{BaseAppFaviconTouchLinkTag}} - - + + + -
+
+
+
{{LoadingDescriptionEsc}}
+ +
+
An error occurred.
Please refresh the page and try again.
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/rainloop/v/0.0.0/app/templates/Themes/template.less b/rainloop/v/0.0.0/app/templates/Themes/template.less index 3e0372811..c59a2923e 100644 --- a/rainloop/v/0.0.0/app/templates/Themes/template.less +++ b/rainloop/v/0.0.0/app/templates/Themes/template.less @@ -197,10 +197,6 @@ .thm-rgba-background-color(@message-background-color, @message-rgba-background-color); } -#rl-app{ - display: block; -} - // glass style html.glass { diff --git a/tasks/config.js b/tasks/config.js index 9d6d89fe6..ff0cdc541 100644 --- a/tasks/config.js +++ b/tasks/config.js @@ -57,6 +57,12 @@ config.paths.css = { 'vendors/flags/flags-fixed.css', 'vendors/lightgallery/dist/css/lightgallery.min.css', 'vendors/lightgallery/dist/css/lg-transitions.min.css', + ] + }, + boot: { + name: 'boot.css', + src: [ + 'dev/Styles/@Boot.css', 'dev/Styles/_progressjs.css' ] } diff --git a/tasks/css.js b/tasks/css.js index 9c7b9e681..963592c25 100644 --- a/tasks/css.js +++ b/tasks/css.js @@ -16,6 +16,19 @@ const { del } = require('./common'); const cssClean = () => del(config.paths.staticCSS + '/*.css'); +const cssBootBuild = () => { + const autoprefixer = require('gulp-autoprefixer'), + src = config.paths.css.boot.src; + return gulp + .src(src) + .pipe(expect.real({ errorOnFailure: true }, src)) + .pipe(concat(config.paths.css.boot.name)) + .pipe(autoprefixer()) + .pipe(replace(/\.\.\/(img|images|fonts|svg)\//g, '$1/')) + .pipe(eol('\n', true)) + .pipe(gulp.dest(config.paths.staticCSS)); +}; + const cssMainBuild = () => { const autoprefixer = require('gulp-autoprefixer'), less = require('gulp-less'), @@ -41,6 +54,16 @@ const cssMainBuild = () => { .pipe(livereload()); }; +const cssBootMin = () => { + const cleanCss = require('gulp-clean-css'); + return gulp + .src(config.paths.staticCSS + config.paths.css.boot.name) + .pipe(cleanCss()) + .pipe(rename({ suffix: '.min' })) + .pipe(eol('\n', true)) + .pipe(gulp.dest(config.paths.staticCSS)); +}; + const cssMainMin = () => { const cleanCss = require('gulp-clean-css'); return gulp @@ -51,8 +74,8 @@ const cssMainMin = () => { .pipe(gulp.dest(config.paths.staticCSS)); }; -const cssBuild = gulp.parallel(cssMainBuild); -const cssMin = gulp.parallel(cssMainMin); +const cssBuild = gulp.parallel(cssBootBuild, cssMainBuild); +const cssMin = gulp.parallel(cssBootMin, cssMainMin); const cssLint = (done) => done();