infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

New loading screen

pull/1/head
yflory 2018-04-11 18:56:03 +02:00
parent bf520c2cb4
commit 4a23b57655
11 changed files with 231 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
customize.dist/pages.js
View File

@ -633,7 +633,7 @@ define([
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-4x.fa-fw')),
h('span.fa.fa-circle-o-notch.fa-spin.fa-8x.fa-fw')),
h('p'),
])
);

3
customize.dist/src/less2/include/checkmark.less
View File

@ -5,7 +5,7 @@
@width: round(@size / 8);
@dim1: round(@size / 3);
@dim2: round(2 * @size / 3);
@top: round(@size / 12);
@top: round(@size / 12) - 1;
// <label.cp-checkmark><input><span.cp-checkmark-mark></span>Text</label>
.cp-checkmark {
margin: 0;
@ -51,6 +51,7 @@
background-color: @colortheme_checkmark-back0;
display: flex;
justify-content: center;
border: 1px solid @colortheme_form-border;
&:after {
content: "";
display: none;

26
customize.dist/src/less2/include/colortheme.less
View File

@ -2,6 +2,9 @@
@colortheme_app-font-size: 16px;
@colortheme_app-font: @colortheme_app-font-size @colortheme_font;
@colortheme_logo-1: #326599;
@colortheme_logo-2: #4591c4;
@colortheme_link-color: #0275D8;
@colortheme_link-color-visited: #005999;
@colortheme_info-background: #fafafa;
@ -15,13 +18,22 @@
@colortheme_cp-red: #FA5858; // remove red
@colortheme_cp-green: #46E981;
@colortheme_form-border: #bbbbbb;
@colortheme_form-bg: @colortheme_logo-2;
@colortheme_form-color: #ffffff;
@colortheme_form-bg-alt: #ffffff;
@colortheme_form-color-alt: @colortheme_logo-1;
@colortheme_form-warning: #f49842;
@colortheme_form-warning-hov: darken(@colortheme_form-warning, 5%);
@colortheme_modal-bg: #222;
@colortheme_modal-fg: #fff;
@colortheme_modal-link: #eee;
@colortheme_modal-link-visited: lighten(@colortheme_modal-link, 10%);
@colortheme_modal-dim: rgba(0, 0, 0, 0.4);
@colortheme_loading-bg: #222;
@colortheme_loading-bg: @colortheme_logo-1;
@colortheme_loading-bg-alt: @colortheme_logo-2;
@colortheme_loading-color: @colortheme_old-fore;
@colortheme_modal-input: #111;
@ -110,9 +122,9 @@
@cryptpad_header_col: #1E1F1F;
@cryptpad_text_col: #3F4141;
@colortheme_checkmark-back0: #ffffff;
@colortheme_checkmark-back0-active: #bbbbbb;
@colortheme_checkmark-back1: #FF0073;
@colortheme_checkmark-col1: #ffffff;
@colortheme_checkmark-back2: #FFFFFF;
@colortheme_checkmark-col2: #000000;
@colortheme_checkmark-back0: @colortheme_form-bg-alt;
@colortheme_checkmark-back0-active: @colortheme_form-border;
@colortheme_checkmark-back1: @colortheme_form-bg;
@colortheme_checkmark-col1: @colortheme_form-color;
@colortheme_checkmark-back2: @colortheme_form-bg-alt;
@colortheme_checkmark-col2: @colortheme_form-color-alt;

224
customize.dist/src/less2/include/creation.less
View File

@ -3,7 +3,15 @@
@import (once) "./checkmark.less";
@import (once) './icon-colors.less';
.creation_main() {
.creation_main(
@color: @colortheme_default-color, // Color of the text for the toolbar
@bg-color: @colortheme_default-bg, // color of the toolbar background
@warn-color: @colortheme_default-warn, // color of the warning text in the toolbar
) {
@colortheme_creation-modal-bg: #fff;
@colortheme_creation-modal: #666;
@colortheme_creation-modal-title: @colortheme_loading-bg;
.tippy-popper {
z-index: 100000001 !important;
}
@ -11,37 +19,65 @@
position: absolute;
z-index: 100000000; // #loading * 10
top: 0px;
background: @colortheme_loading-bg;
//background: @colortheme_loading-bg;
background: linear-gradient(to right, @colortheme_loading-bg 0%, @colortheme_loading-bg 50%, @colortheme_loading-bg-alt 50%, @colortheme_loading-bg-alt 100%);
color: @colortheme_loading-color;
display: flex;
flex-flow: column; /* we need column so that the child can shrink vertically */
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
overflow: auto;
.cp-creation-logo {
height: 300px;
width: 300px;
margin-top: 50px;
flex: 0 1 auto; /* allows shrink */
min-height: 0;
text-align: center;
img {
max-width: 100%;
max-height: 100%;
}
}
}
#cp-creation {
flex: 0 1 auto; /* allows shrink */
min-height: 0;
overflow: auto;
text-align: center;
background: @colortheme_creation-modal-bg;
color: @colortheme_creation-modal;
font: @colortheme_app-font;
width: 100%;
outline: none;
width: 700px;
max-width: 90vw;
height: 500px;
max-height: calc(~"100vh - 20px");
margin: 50px;
flex-shrink: 0;
display: flex;
flex-flow: column;
& > div {
width: 60vw;
width: 100%;
max-width: 100%;
margin: 40px auto;
margin: auto;
text-align: left;
}
.cp-creation-create, .cp-creation-settings {
.cp-creation-title {
color: @colortheme_creation-modal-title;
font-weight: bold;
margin: 15px;
}
.cp-creation-create {
margin-top: 0px;
@creation-button: #30B239;
button {
.tools_unselectable();
padding: 15px;
background: @creation-button;
background: linear-gradient(to right, @colortheme_logo-2, @colortheme_logo-1);
color: #FFF;
font-weight: bold;
margin: 3px 10px;
@ -50,8 +86,9 @@
outline: none;
width: 100%;
&:hover {
background: linear-gradient(to right, lighten(@colortheme_logo-2, 5%), lighten(@colortheme_logo-1, 5%));
//background: darken(@creation-button, 5%);
background: lighten(@creation-button, 5%);
//background: lighten(@creation-button, 5%);
}
}
}
@ -70,6 +107,7 @@
display: flex;
flex-flow: column;
align-items: center;
flex: 1;
& > div {
width: 400px;
max-width: 100%;
@ -88,31 +126,49 @@
padding: 0 10px;
}
}
.cp-creation-help {
font-size: 18px;
color: white;
&:hover {
color: #AAA;
text-decoration: none;
}
}
.cp-creation-help, .cp-creation-warning {
font-size: 18px;
color: @colortheme_form-warning;
&:hover {
color: @colortheme_form-warning-hov;
text-decoration: none;
}
}
.cp-creation-slider {
display: block;
overflow: hidden;
max-height: 0px;
transition: max-height 0.5s ease-in-out;
width: 100%;
margin-top: 10px;
//margin-top: 10px;
&.active {
max-height: 40px;
transition: max-height 0.5s ease-in-out;
max-height: 100px;
}
}
.cp-creation-expire {
.cp-creation-expire-picker {
text-align: center;
input, select {
font-size: 14px;
border: 1px solid @colortheme_form-border;
height: 28px;
background-color: @colortheme_form-bg;
color: @colortheme_form-color;
}
input {
width: 100px;
width: 50px;
margin: 0 5px;
}
select {
margin-right: 5px;
}
}
&.active {
label {
flex: unset;
}
.cp-creation-slider {
flex: 1;
}
}
}
@ -125,31 +181,32 @@
}
div.cp-creation-remember {
margin-top: 30px;
.cp-creation-remember-help {
font-style: italic;
width: 100%;
//font-style: italic;
font-size: 12px;
font-weight: bold;
color: @colortheme_form-bg;
line-height: 20px;
.fa {
margin-right: 10px;
}
}
}
div.cp-creation-template {
width: 100%;
background-color: darken(@colortheme_modal-bg, 3%);
padding: 20px;
margin: 30px 0;
.cp-creation-title {
padding: 0 0 10px 10px;
margin: auto;
}
flex: 1;
}
.cp-creation-template-container {
width: 100%;
flex: 1;
display: flex;
flex-wrap: wrap;
justify-content: center;
overflow-y: auto;
align-items: center;
.cp-creation-template-element {
@darker: darken(@colortheme_modal-fg, 30%);
box-shadow: 2px 2px 7px @colortheme_form-border;
width: 135px;
padding: 5px;
margin: 5px;
@ -162,19 +219,23 @@
line-height: 1em;
cursor: pointer;
background-color: #111;
color: @darker;
color: black;
border: 1px solid transparent;
&.cp-creation-template-selected {
border: 1px solid white;
background-color: #222;
color: @color !important;
background-color: @bg-color !important;
.fa {
color: @color;
}
}
transition: all 0.1s;
&:hover {
color: @colortheme_modal-fg;
//color: @colortheme_modal-fg;
background-color: @colortheme_form-border;
box-shadow: none;
}
align-items: center;
@ -196,6 +257,7 @@
max-width: 100%;
}
.fa {
color: @bg-color;
cursor: pointer;
width: 100px;
height: 100px;
@ -218,44 +280,70 @@
}
}
.checkmark_main(30px);
.checkmark_main(20px);
}
@media screen and (max-width: @browser_media-narrow-screen) {
& > div {
width: 95%;
margin: 10px auto;
@media screen and (max-height: 700px) {
#cp-creation-container {
.cp-creation-logo {
//flex-shrink: 0;
display: none;
}
}
}
@media screen and (max-width: @browser_media-medium-screen) {
#cp-creation-form {
div.cp-creation-template {
margin: 0;
padding: 5px;
.cp-creation-template-container {
.cp-creation-template-element {
flex-flow: row;
margin: 1px;
padding: 5px;
width: 155px;
img {
display: none;
@media screen and (max-width: 500px) {
#cp-creation {
#cp-creation-form {
& > div {
width: 95%;
margin: 10px auto;
}
.cp-creation-expire {
&.active {
label {
flex: 1;
}
.fa {
font-size: 18px;
width: 20px;
height: 20px;
line-height: 20px;
display: inline !important;
}
.cp-creation-template-element-name {
margin: 0;
margin-left: 5px;
.cp-creation-slider {
flex: unset;
order: 10;
width: 100%;
}
}
}
}
}
}
@media screen and (max-width: @browser_media-medium-screen) {
#cp-creation {
height: auto;
#cp-creation-form {
div.cp-creation-template {
margin: 0;
padding: 5px;
.cp-creation-template-container {
.cp-creation-template-element {
flex-flow: row;
margin: 1px;
padding: 5px;
width: 155px;
img {
display: none;
}
.fa {
font-size: 18px;
width: 20px;
height: 20px;
line-height: 20px;
display: inline !important;
}
.cp-creation-template-element-name {
margin: 0;
margin-left: 5px;
}
}
}
}
}
}
}
}
}

6
customize.dist/src/less2/include/framework.less
View File

@ -13,6 +13,10 @@
.fileupload_main();
.alertify_main();
.tokenfield_main();
.creation_main();
.creation_main(
@bg-color: @bg-color,
@warn-color: @warn-color,
@color: @color
);
}

4
www/common/common-interface.js
View File

@ -574,14 +574,14 @@ define([
$spinner.show();
$('body').append($loading);
}
if (Messages.tips && !hideTips) {
/*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.

45
www/common/common-ui-elements.js
View File

@ -1858,11 +1858,15 @@ define([
var $body = $('body');
var $creationContainer = $('<div>', { id: 'cp-creation-container' }).appendTo($body);
var urlArgs = (Config.requireConf && Config.requireConf.urlArgs) || '';
var l = h('div.cp-creation-logo', h('img', { src: '/customize/alt-favicon.png?' + urlArgs }));
$(l).appendTo($creationContainer);
var $creation = $('<div>', { id: 'cp-creation', tabindex: 1 }).appendTo($creationContainer);
// Title
var colorClass = 'cp-icon-color-'+type;
$creation.append(h('h2.cp-creation-title', Messages.newButtonTitle));
//$creation.append(h('h2.cp-creation-title', Messages.newButtonTitle));
$creation.append(h('h3.cp-creation-title', Messages['button_new'+type]));
//$creation.append(h('h2.cp-creation-title.'+colorClass, Messages.newButtonTitle));
// Deleted pad warning
@ -1874,7 +1878,7 @@ define([
var origin = common.getMetadataMgr().getPrivateData().origin;
var createHelper = function (href, text) {
var q = h('a.cp-creation-help.fa.fa-question', {
var q = h('a.cp-creation-help.fa.fa-question-circle', {
title: text,
href: origin + href,
target: "_blank"
@ -1907,8 +1911,7 @@ define([
h('span.cp-checkmark-mark'),
Messages.creation_expire
]),
createHelper('/faq.html#keywords-expiring', Messages.creation_expire2),
h('div.cp-creation-expire-picker.cp-creation-slider', [
h('span.cp-creation-expire-picker.cp-creation-slider', [
h('input#cp-creation-expire-val', {
type: "number",
min: 1,
@ -1923,18 +1926,14 @@ define([
selected: 'selected'
}, Messages.creation_expireMonths)
])
])
]),
createHelper('/faq.html#keywords-expiring', Messages.creation_expire2),
]);
var createDiv = h('div.cp-creation-create');
var $create = $(createDiv);
var templates = h('div.cp-creation-template', [
h('h3.cp-creation-title.'+colorClass, Messages['button_new'+type]),
h('div.cp-creation-template-container', [
h('span.fa.fa-circle-o-notch.fa-spin.fa-4x.fa-fw')
]),
createDiv
])
]);
var settings = h('div.cp-creation-remember', [
@ -1947,14 +1946,21 @@ define([
Messages.creation_saveSettings
]),
createHelper('/settings/#creation', Messages.creation_settings),
h('div.cp-creation-remember-help.cp-creation-slider', Messages.creation_rememberHelp)
h('div.cp-creation-remember-help.cp-creation-slider', [
h('span.fa.fa-exclamation-circle.cp-creation-warning'),
Messages.creation_rememberHelp
])
]);
var createDiv = h('div.cp-creation-create');
var $create = $(createDiv);
$(h('div#cp-creation-form', [
owned,
expire,
settings,
templates
templates,
createDiv
])).appendTo($creation);
// Display templates
@ -1963,20 +1969,21 @@ define([
if (!res.data || !Array.isArray(res.data)) {
return void console.error("Error: get the templates list");
}
// TODO Sort the templates by number of use?
var data = res.data.slice().sort(function (a, b) {
if (a.name === b.name) { return 0; }
return a.name < b.name ? -1 : 1;
}).slice(0, 2);
data.unshift({
name: Messages.creation_newTemplate,
id: -1,
icon: h('span.fa.fa-bookmark')
});
data.unshift({
name: Messages.creation_noTemplate,
id: 0,
icon: h('span.fa.fa-file')
});
data.push({
name: Messages.creation_newTemplate,
id: -1,
icon: h('span.fa.fa-bookmark')
});
var $container = $(templates).find('.cp-creation-template-container').html('');
data.forEach(function (obj, idx) {
var name = obj.name;
@ -2019,10 +2026,12 @@ define([
$creation.find('#cp-creation-expire').on('change', function () {
if ($(this).is(':checked')) {
$creation.find('.cp-creation-expire-picker:not(.active)').addClass('active');
$creation.find('.cp-creation-expire:not(.active)').addClass('active');
$creation.find('#cp-creation-expire-val').focus();
return;
}
$creation.find('.cp-creation-expire-picker').removeClass('active');
$creation.find('.cp-creation-expire').removeClass('active');
$creation.focus();
});

19
www/common/loading.js
View File

@ -1,3 +1,5 @@
// dark #326599
// light #4591c4
define([], function () {
var loadingStyle = (function(){/*
#cp-loading {
@ -9,24 +11,29 @@ define([], function () {
bottom: 0px;
left: 0px;
right: 0px;
background: #222;
background: linear-gradient(to right, #326599 0%, #326599 50%, #4591c4 50%, #4591c4 100%);
color: #fafafa;
text-align: center;
font-size: 1.5em;
opacity: 1;
display: flex;
justify-content: center;
}
#cp-loading.cp-loading-hidden {
opacity: 0;
visibility: hidden;
}
#cp-loading .cp-loading-container {
margin-top: 50vh;
transform: translateY(-50%);
align-self: center;
}
#cp-loading .cp-loading-cryptofist {
margin-left: auto;
margin-right: auto;
height: 300px;
//height: 300px;
max-width: 90vw;
max-height: 300px;
width: auto;
height: auto;
margin-bottom: 2em;
}
@media screen and (max-height: 450px) {
@ -76,11 +83,11 @@ define([], function () {
loadingStyle,
'</style>',
'<div class="cp-loading-container">',
'<img class="cp-loading-cryptofist" src="/customize/cryptpad-new-logo-colors-logoonly.png?' + urlArgs + '">',
'<img class="cp-loading-cryptofist" src="/customize/alt-favicon.png?' + urlArgs + '">',
'<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>',
//'<p id="cp-loading-message"></p>',
'</div>'
].join('');
var intr;

2
www/common/sframe-app-framework.js
View File

@ -308,7 +308,7 @@ define([
if (!readOnly) { onLocal(); }
evOnReady.fire(newPad);
UI.removeLoadingScreen(emitResize);
//UI.removeLoadingScreen(emitResize);
var privateDat = cpNfInner.metadataMgr.getPrivateData();
var hash = privateDat.availableHashes.editHash ||

13
www/poll/app-poll.less
View File

@ -1,22 +1,15 @@
@import (once) "../../customize/src/less2/include/browser.less";
@import (once) "../../customize/src/less2/include/toolbar.less";
@import (once) "../../customize/src/less2/include/markdown.less";
@import (once) '../../customize/src/less2/include/fileupload.less';
@import (once) '../../customize/src/less2/include/alertify.less';
@import (once) '../../customize/src/less2/include/tokenfield.less';
@import (once) '../../customize/src/less2/include/tools.less';
@import (once) '../../customize/src/less2/include/avatar.less';
@import (once) '../../customize/src/less2/include/creation.less';
@import (once) "../../customize/src/less2/include/framework.less";
.toolbar_main(
.framework_main(
@bg-color: @colortheme_poll-bg,
@warn-color: @colortheme_poll-warn,
@color: @colortheme_poll-color
);
.fileupload_main();
.alertify_main();
.tokenfield_main();
.creation_main();
@poll-fore: #555;

12
www/whiteboard/app-whiteboard.less
View File

@ -1,21 +1,13 @@
@import (once) "../../customize/src/less2/include/browser.less";
@import (once) "../../customize/src/less2/include/toolbar.less";
@import (once) "../../customize/src/less2/include/markdown.less";
@import (once) '../../customize/src/less2/include/fileupload.less';
@import (once) '../../customize/src/less2/include/alertify.less';
@import (once) '../../customize/src/less2/include/tools.less';
@import (once) '../../customize/src/less2/include/tokenfield.less';
@import (once) '../../customize/src/less2/include/creation.less';
@import (once) "../../customize/src/less2/include/framework.less";
.toolbar_main(
.framework_main(
@bg-color: @colortheme_whiteboard-bg,
@warn-color: @colortheme_whiteboard-warn,
@color: @colortheme_whiteboard-color
);
.fileupload_main();
.alertify_main();
.tokenfield_main();
.creation_main();
// body
&.cp-app-whiteboard {