mirror of
https://github.com/the-djmaze/snappymail.git
synced 2024-12-24 08:04:16 +08:00
Better boot response by splitting and embedding boot css/html into index.html
This commit is contained in:
djmaze
parent
f2d194947d
commit
45aaa17219
12 changed files with 142 additions and 153 deletions
57
dev/Styles/@Boot.css
Normal file
57
dev/Styles/@Boot.css
Normal 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); }
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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); }
|
||||
}
|
||||
|
|
|
|||
66
dev/boot.js
66
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 = '<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);
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -197,10 +197,6 @@
|
|||
.thm-rgba-background-color(@message-background-color, @message-rgba-background-color);
|
||||
}
|
||||
|
||||
#rl-app{
|
||||
display: block;
|
||||
}
|
||||
|
||||
// glass style
|
||||
html.glass {
|
||||
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
]
|
||||
}
|
||||
|
|
|
|||
27
tasks/css.js
27
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();
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue