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.
+
+
+
+