Fix loading screen in login and register
parent
a51e41c883
commit
a773c47950
Binary file not shown.
After Width: | Height: | Size: 23 KiB |
|
@ -0,0 +1,145 @@
|
|||
// dark #326599
|
||||
// light #4591c4
|
||||
define([], function () {
|
||||
var loadingStyle = (function(){/*
|
||||
#cp-loading {
|
||||
transition: opacity 0.75s, visibility 0s 0.75s;
|
||||
visibility: visible;
|
||||
position: fixed;
|
||||
z-index: 10000000;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
background: linear-gradient(to right, #326599 0%, #326599 50%, #4591c4 50%, #4591c4 100%);
|
||||
color: #fafafa;
|
||||
font-size: 1.5em;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
#cp-loading.cp-loading-hidden {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
#cp-loading .cp-loading-logo {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
margin-top: 50px;
|
||||
flex: 0 1 auto;
|
||||
min-height: 0;
|
||||
text-align: center;
|
||||
}
|
||||
#cp-loading .cp-loading-logo img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
#cp-loading .cp-loading-container {
|
||||
width: 700px;
|
||||
max-width: 90vw;
|
||||
height: 500px;
|
||||
max-height: calc(100vh - 20px);
|
||||
margin: 50px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
}
|
||||
@media screen and (max-height: 800px) {
|
||||
#cp-loading .cp-loading-container {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
#cp-loading .cp-loading-container {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
#cp-loading .cp-loading-cryptofist {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
//height: 300px;
|
||||
max-width: 90vw;
|
||||
max-height: 300px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
@media screen and (max-height: 450px) {
|
||||
#cp-loading .cp-loading-cryptofist {
|
||||
}
|
||||
}
|
||||
#cp-loading-message {
|
||||
background: #FFF;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
display: none;
|
||||
}
|
||||
#cp-loading .cp-loading-spinner-container {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
}
|
||||
#cp-loading .cp-loading-spinner-container > div {
|
||||
height: 100px;
|
||||
}
|
||||
#cp-loading-tip {
|
||||
position: fixed;
|
||||
z-index: 10000000;
|
||||
top: 80%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
transition: opacity 750ms;
|
||||
transition-delay: 3000ms;
|
||||
}
|
||||
@media screen and (max-height: 600px) {
|
||||
#cp-loading-tip {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
#cp-loading-tip span {
|
||||
background: #222;
|
||||
color: #fafafa;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
opacity: 0.7;
|
||||
font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
padding: 15px;
|
||||
max-width: 60%;
|
||||
display: inline-block;
|
||||
}
|
||||
*/}).toString().slice(14, -3);
|
||||
var urlArgs = window.location.href.replace(/^.*\?([^\?]*)$/, function (all, x) { return x; });
|
||||
var elem = document.createElement('div');
|
||||
elem.setAttribute('id', 'cp-loading');
|
||||
elem.innerHTML = [
|
||||
'<style>',
|
||||
loadingStyle,
|
||||
'</style>',
|
||||
'<div class="cp-loading-logo">',
|
||||
'<img class="cp-loading-cryptofist" src="/customize/loading-logo.png?' + urlArgs + '">',
|
||||
'</div>',
|
||||
'<div class="cp-loading-container">',
|
||||
'<div class="cp-loading-spinner-container">',
|
||||
'<span class="fa fa-circle-o-notch fa-spin fa-4x fa-fw"></span>',
|
||||
'</div>',
|
||||
'<p id="cp-loading-message"></p>',
|
||||
'</div>'
|
||||
].join('');
|
||||
return function () {
|
||||
var intr;
|
||||
var append = function () {
|
||||
if (!document.body) { return; }
|
||||
clearInterval(intr);
|
||||
document.body.appendChild(elem);
|
||||
};
|
||||
intr = setInterval(append, 100);
|
||||
append();
|
||||
};
|
||||
});
|
|
@ -213,6 +213,7 @@ define([
|
|||
loadingText: Messages.login_hashing,
|
||||
hideTips: true,
|
||||
});
|
||||
|
||||
// We need a setTimeout(cb, 0) otherwise the loading screen is only displayed
|
||||
// after hashing the password
|
||||
window.setTimeout(function () {
|
||||
|
|
|
@ -626,19 +626,6 @@ define([
|
|||
];
|
||||
};
|
||||
|
||||
var loadingScreen = Pages.loadingScreen = function () {
|
||||
return h('div#cp-loading',
|
||||
h('div.cp-loading-container', [
|
||||
h('img.cp-loading-cryptofist', {
|
||||
src: '/customize/cryptpad-new-logo-colors-logoonly.png?' + urlArgs
|
||||
}),
|
||||
h('div.cp-loading-spinner-container',
|
||||
h('span.fa.fa-circle-o-notch.fa-spin.fa-8x.fa-fw')),
|
||||
h('p'),
|
||||
])
|
||||
);
|
||||
};
|
||||
|
||||
Pages.createCheckbox = function (id, labelTxt, checked, opts) {
|
||||
opts = opts|| {};
|
||||
// Input properties
|
||||
|
@ -722,12 +709,6 @@ define([
|
|||
]);
|
||||
};
|
||||
|
||||
var hiddenLoader = function () {
|
||||
var loader = loadingScreen();
|
||||
loader.style.display = 'none';
|
||||
return loader;
|
||||
};
|
||||
|
||||
Pages['/user/'] = Pages['/user/index.html'] = function () {
|
||||
return h('div#container');
|
||||
};
|
||||
|
@ -789,7 +770,6 @@ define([
|
|||
]),
|
||||
|
||||
infopageFooter(),
|
||||
hiddenLoader(),
|
||||
])];
|
||||
};
|
||||
|
||||
|
@ -825,7 +805,6 @@ define([
|
|||
]),
|
||||
]),
|
||||
infopageFooter(),
|
||||
hiddenLoader(),
|
||||
])];
|
||||
};
|
||||
|
||||
|
|
|
@ -1,73 +0,0 @@
|
|||
/*
|
||||
WARNING: THIS FILE DOES NOTHING
|
||||
It exists only as a proposal of what CSS you should use in loading.js
|
||||
The CSS inside of loading.js is precompiled in order to save 200ish milliseconds to the loading screen.
|
||||
*/
|
||||
@import (once) "./include/colortheme-all.less";
|
||||
@import (once) "./include/browser.less";
|
||||
|
||||
#cp-loading {
|
||||
transition: opacity 0.75s, visibility 0s 0.75s;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
position: fixed;
|
||||
z-index: 10000000; // #loading
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
background: @colortheme_loading-bg;
|
||||
color: @colortheme_loading-color;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
.cp-loading-container {
|
||||
margin-top: 50vh;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.cp-loading-cryptofist {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
height: 300px;
|
||||
margin-bottom: 2em;
|
||||
@media screen and (max-height: @browser_media-short-screen) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.cp-loading-spinner-container {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
> div {
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
&.cp-loading-hidden {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
#cp-loading-tip {
|
||||
position: fixed;
|
||||
z-index: 10000000; // loading tip
|
||||
top: 80%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
|
||||
transition: opacity 750ms;
|
||||
transition-delay: 3000ms;
|
||||
@media screen and (max-height: @browser_media-medium-screen) {
|
||||
display: none;
|
||||
}
|
||||
span {
|
||||
background: @colortheme_loading-bg;
|
||||
color: @colortheme_loading-color;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
opacity: 0.7;
|
||||
font-family: @colortheme_font;
|
||||
padding: 15px;
|
||||
max-width: 60%;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,6 @@
|
|||
@import (once) "../include/colortheme-all.less";
|
||||
@import (once) "../include/alertify.less";
|
||||
@import (once) "../include/checkmark.less";
|
||||
@import (once) "../loading.less";
|
||||
|
||||
.infopages_main();
|
||||
.infopages_topbar();
|
||||
|
|
|
@ -2,7 +2,6 @@
|
|||
@import (once) "../include/colortheme-all.less";
|
||||
@import (once) "../include/alertify.less";
|
||||
@import (once) "../include/checkmark.less";
|
||||
@import (once) "../loading.less";
|
||||
|
||||
.infopages_main();
|
||||
.infopages_topbar();
|
||||
|
|
|
@ -9,12 +9,13 @@ define([
|
|||
'/common/tippy/tippy.min.js',
|
||||
'/customize/pages.js',
|
||||
'/common/hyperscript.js',
|
||||
'/customize/loading.js',
|
||||
'/common/test.js',
|
||||
|
||||
'/bower_components/bootstrap-tokenfield/dist/bootstrap-tokenfield.js',
|
||||
'css!/common/tippy/tippy.css',
|
||||
], function ($, Messages, Util, Hash, Notifier, AppConfig,
|
||||
Alertify, Tippy, Pages, h, Test) {
|
||||
Alertify, Tippy, Pages, h, Loading, Test) {
|
||||
var UI = {};
|
||||
|
||||
/*
|
||||
|
@ -551,7 +552,7 @@ define([
|
|||
//var hideTips = config.hideTips || AppConfig.hideLoadingScreenTips;
|
||||
var hideLogo = config.hideLogo;
|
||||
var $loading, $container;
|
||||
if ($('#' + LOADING).length) {
|
||||
var todo = function () {
|
||||
$loading = $('#' + LOADING); //.show();
|
||||
$loading.css('display', '');
|
||||
$loading.removeClass('cp-loading-hidden');
|
||||
|
@ -561,27 +562,13 @@ define([
|
|||
} else {
|
||||
$('#' + LOADING).find('p').hide().text('');
|
||||
}
|
||||
$container = $loading.find('.cp-loading-container');
|
||||
};
|
||||
if ($('#' + LOADING).length) {
|
||||
todo();
|
||||
} else {
|
||||
$loading = $(Pages.loadingScreen());
|
||||
$container = $loading.find('.cp-loading-container');
|
||||
if (hideLogo) {
|
||||
$loading.find('img').hide();
|
||||
} else {
|
||||
$loading.find('img').show();
|
||||
}
|
||||
var $spinner = $loading.find('.cp-loading-spinner-container');
|
||||
$spinner.show();
|
||||
$('body').append($loading);
|
||||
Loading();
|
||||
todo();
|
||||
}
|
||||
/*if (Messages.tips && !hideTips) {
|
||||
var $loadingTip = $('<div>', {'id': 'cp-loading-tip'});
|
||||
$('<span>', {'class': 'tips'}).text(getRandomTip()).appendTo($loadingTip);
|
||||
$loadingTip.css({
|
||||
'bottom': $('body').height()/2 - $container.height()/2 + 20 + 'px'
|
||||
});
|
||||
$('body').append($loadingTip);
|
||||
}*/
|
||||
};
|
||||
UI.removeLoadingScreen = function (cb) {
|
||||
// Release the test blocker, hopefully every test has been registered.
|
||||
|
@ -591,7 +578,6 @@ define([
|
|||
|
||||
$('#' + LOADING).addClass("cp-loading-hidden");
|
||||
setTimeout(cb, 750);
|
||||
//$('#' + LOADING).fadeOut(750, cb);
|
||||
var $tip = $('#cp-loading-tip').css('top', '')
|
||||
// loading.less sets transition-delay: $wait-time
|
||||
// and transition: opacity $fadeout-time
|
||||
|
|
|
@ -1,141 +1,3 @@
|
|||
// dark #326599
|
||||
// light #4591c4
|
||||
define([], function () {
|
||||
var loadingStyle = (function(){/*
|
||||
#cp-loading {
|
||||
transition: opacity 0.75s, visibility 0s 0.75s;
|
||||
visibility: visible;
|
||||
position: fixed;
|
||||
z-index: 10000000;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
background: linear-gradient(to right, #326599 0%, #326599 50%, #4591c4 50%, #4591c4 100%);
|
||||
color: #fafafa;
|
||||
font-size: 1.5em;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
#cp-loading.cp-loading-hidden {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
#cp-loading .cp-loading-logo {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
margin-top: 50px;
|
||||
flex: 0 1 auto;
|
||||
min-height: 0;
|
||||
text-align: center;
|
||||
}
|
||||
#cp-loading .cp-loading-logo img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
#cp-loading .cp-loading-container {
|
||||
width: 700px;
|
||||
max-width: 90vw;
|
||||
height: 500px;
|
||||
max-height: calc(100vh - 20px);
|
||||
margin: 50px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@media screen and (max-height: 800px) {
|
||||
#cp-loading .cp-loading-container {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
#cp-loading .cp-loading-container {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
#cp-loading .cp-loading-cryptofist {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
//height: 300px;
|
||||
max-width: 90vw;
|
||||
max-height: 300px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
@media screen and (max-height: 450px) {
|
||||
#cp-loading .cp-loading-cryptofist {
|
||||
}
|
||||
}
|
||||
#cp-loading-message {
|
||||
background: #FFF;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
color: #000;
|
||||
display: none;
|
||||
}
|
||||
#cp-loading .cp-loading-spinner-container {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
}
|
||||
#cp-loading .cp-loading-spinner-container > div {
|
||||
height: 100px;
|
||||
}
|
||||
#cp-loading-tip {
|
||||
position: fixed;
|
||||
z-index: 10000000;
|
||||
top: 80%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
transition: opacity 750ms;
|
||||
transition-delay: 3000ms;
|
||||
}
|
||||
@media screen and (max-height: 600px) {
|
||||
#cp-loading-tip {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
#cp-loading-tip span {
|
||||
background: #222;
|
||||
color: #fafafa;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
opacity: 0.7;
|
||||
font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
padding: 15px;
|
||||
max-width: 60%;
|
||||
display: inline-block;
|
||||
}
|
||||
*/}).toString().slice(14, -3);
|
||||
var urlArgs = window.location.href.replace(/^.*\?([^\?]*)$/, function (all, x) { return x; });
|
||||
var elem = document.createElement('div');
|
||||
elem.setAttribute('id', 'cp-loading');
|
||||
elem.innerHTML = [
|
||||
'<style>',
|
||||
loadingStyle,
|
||||
'</style>',
|
||||
'<div class="cp-loading-logo">',
|
||||
'<img class="cp-loading-cryptofist" src="/customize/loading-logo.png?' + urlArgs + '">',
|
||||
'</div>',
|
||||
'<div class="cp-loading-container">',
|
||||
'<div class="cp-loading-spinner-container">',
|
||||
'<span class="fa fa-circle-o-notch fa-spin fa-4x fa-fw"></span>',
|
||||
'</div>',
|
||||
'<p id="cp-loading-message"></p>',
|
||||
'</div>'
|
||||
].join('');
|
||||
var intr;
|
||||
var append = function () {
|
||||
if (!document.body) { return; }
|
||||
clearInterval(intr);
|
||||
document.body.appendChild(elem);
|
||||
};
|
||||
intr = setInterval(append, 100);
|
||||
append();
|
||||
require(['/customize/loading.js'], function (Loading) {
|
||||
Loading();
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue