Better boot response by splitting and embedding boot css/html into index.html

This commit is contained in:
djmaze 2020-09-05 12:22:46 +02:00
parent f2d194947d
commit 45aaa17219
12 changed files with 142 additions and 153 deletions

57
dev/Styles/@Boot.css Normal file
View file

@ -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); }
}

View file

@ -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 {

View file

@ -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;
}

View file

@ -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;
}

View file

@ -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;
@ -35,6 +28,6 @@
}
@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); }
}

View file

@ -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 = '<div id="rl-loading" class="thm-loading" style="opacity:0">\
<div id="rl-loading-desc"></div>\
<div class="e-spinner">\
<div class="e-bounce bounce1"></div>\
<div class="e-bounce bounce2"></div>\
<div class="e-bounce bounce3"></div>\
</div>\
</div>\
<div id="rl-loading-error" class="thm-loading">An error occurred.<br/>Please refresh the page and try again.</div>\
<div id="rl-content">\
<div id="rl-popups"></div>\
<div id="rl-center">\
<div id="rl-top"></div>\
<div id="rl-left"></div>\
<div id="rl-right"></div>\
</div>\
</div>\
<div id="rl-templates"></div>\
<div id="rl-hidden"></div>'.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);

View file

@ -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)

View file

@ -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(

View file

@ -13,14 +13,36 @@
<title></title>
{{BaseAppFaviconPngLinkTag}}
{{BaseAppFaviconTouchLinkTag}}
<link type="text/css" rel="stylesheet" href="{{BaseAppMainCssLink}}" />
<link type="text/css" rel="stylesheet" href="{{BaseAppThemeCssLink}}" id="app-theme-link" />
<style>{{BaseAppBootCss}}</style>
<link type="text/css" rel="stylesheet" data-href="{{BaseAppMainCssLink}}" id="app-css" />
<link type="text/css" rel="stylesheet" data-href="{{BaseAppThemeCssLink}}" id="app-theme-link" />
<link rel="manifest" href="{{BaseAppManifestLink}}" />
</head>
<body class="thm-body">
<div id="rl-app" data-boot='{{RainloopBootData}}'></div>
<div id="rl-app" data-boot='{{RainloopBootData}}'>
<div id="rl-loading" class="thm-loading">
<div id="rl-loading-desc">{{LoadingDescriptionEsc}}</div>
<div class="e-spinner">
<div class="e-bounce bounce1"></div>
<div class="e-bounce bounce2"></div>
<div class="e-bounce bounce3"></div>
</div>
</div>
<div id="rl-loading-error" class="thm-loading">An error occurred.<br/>Please refresh the page and try again.</div>
<div id="rl-content">
<div id="rl-popups"></div>
<div id="rl-center">
<div id="rl-top"></div>
<div id="rl-left"></div>
<div id="rl-right"></div>
</div>
</div>
<div id="rl-templates"></div>
<div id="rl-hidden"></div>
</div>
<div id="rl-check"></div>
<div class="progressjs"><div class="progressjs-inner"><div class="progressjs-percent"></div></div></div>
<script type="text/javascript" data-cfasync="false" src="{{BaseAppBootScriptLink}}"></script>
</body>

View file

@ -197,10 +197,6 @@
.thm-rgba-background-color(@message-background-color, @message-rgba-background-color);
}
#rl-app{
display: block;
}
// glass style
html.glass {

View file

@ -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'
]
}

View file

@ -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();