Manual merge, update the CSS in loading.js and document that loading.less does nothing.

This commit is contained in:
Caleb James DeLisle
2017-09-14 10:48:35 +02:00
29 changed files with 177 additions and 680 deletions

View File

@@ -438,12 +438,12 @@ define([
};
var loadingScreen = Pages.loadingScreen = function () {
return h('div#loading',
h('div.loadingContainer', [
h('img.cryptofist', {
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.spinnerContainer',
h('div.cp-loading-spinner-container',
h('span.fa.fa-circle-o-notch.fa-spin.fa-4x.fa-fw')),
h('p'),
])

View File

@@ -5,8 +5,8 @@
@import "../less2/include/colortheme.less";
@import "../less2/include/modal.less";
@import "../less2/include/font.less";
@import "../less2/loading.less";
@import "./bar.less";
@import "./loading.less";
@import "./dropdown.less";
@import "./topbar.less";
@import "./footer.less";
@@ -296,7 +296,7 @@ noscript {
left: 0;
bottom: 0;
right: 0;
z-index: 2;
z-index: 2; // noscriptContainer
#noscript {
width: 1000px;
display: flex;
@@ -341,7 +341,7 @@ noscript {
left: 0;
right: 0;
margin: auto;
z-index: 1;
z-index: 1; // #main, #main_other
font-size: medium;
@@ -607,7 +607,7 @@ noscript {
background: blue;
position: absolute;
left: 0;
z-index:1;
z-index:1; // .usage
&.normal {
background: @toolbar-green;
}
@@ -622,7 +622,7 @@ noscript {
position: relative;
color: black;
text-shadow: 1px 0 2px white, 0 1px 2px white, -1px 0 2px white, 0 -1px 2px white;
z-index: 2;
z-index: 2; // .usageText
font-size: @main-font-size;
font-weight: bold;
}
@@ -644,7 +644,7 @@ noscript {
bottom: 10vh;
opacity: 0.9;
box-sizing: border-box;
z-index: 10000;
z-index: 10000; // #uploadStatusContainer
display: none;
#uploadStatus {
width: 80vw;
@@ -674,7 +674,7 @@ noscript {
left: @upload_pad_v;
top: @upload_pad_h; bottom: @upload_pad_h;
background-color: rgba(0,0,255,0.3);
z-index: -1;
z-index: -1; // .progressContainer
}
.upCancel { text-align: center; }
.fa.cancel {

View File

@@ -259,7 +259,7 @@ body .cryptpad-toolbar {
font: @toolbar-button-font;
width: 100%;
z-index: 9001;
z-index: 10000; // body, .cryptpad-toolbar
.cp-dropdown-container {
//height: 100%;
@@ -792,7 +792,7 @@ body .cryptpad-toolbar {
cursor: pointer;
}
.cryptpad-user-dropdown {
z-index: 10000;
z-index: 10000; // .cryptpad-user-dropdown
//margin-left: 20px;
height: 64px;
width: 64px;
@@ -915,7 +915,7 @@ body .cryptpad-toolbar {
background: @dropdown-bg;
display: flex;
flex-flow: column;
z-index:10000;
z-index:10000; // .drawer-content
color: black;
.fa {
font-size: 17px;

View File

@@ -64,7 +64,7 @@
bottom: 0;
width: 100%;
height: 100%;
z-index: 99999; // alertify container
z-index: 100000; // alertify container
&.forefront {
z-index: @max-z-index; // alertify max forefront
}

View File

@@ -21,6 +21,9 @@
@colortheme_modal-link-visited: lighten(@colortheme_modal-link, 10%);
@colortheme_modal-dim: rgba(0, 0, 0, 0.4);
@colortheme_loading-bg: #222;
@colortheme_loading-color: @colortheme_old-fore;
@colortheme_modal-input: #111;
@colortheme_alertify-red: #E55236;

View File

@@ -28,7 +28,7 @@
background-color: @colortheme_dropdown-bg;
min-width: 250px;
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
z-index: 1000;
z-index: 1000; //Z dropdown content
max-height: 300px;
overflow-y: auto;
font: @dropdown_font;

View File

@@ -10,7 +10,7 @@
bottom: 10vh;
opacity: 0.9;
box-sizing: border-box;
z-index: 1000000;
z-index: 1000000; //Z file upload table container
display: none;
#cp-fileupload-table {
width: 80vw;
@@ -40,7 +40,7 @@
left: @upload_pad_v;
top: @upload_pad_h; bottom: @upload_pad_h;
background-color: rgba(0,0,255,0.3);
z-index: -1;
z-index: -1; //Z file upload progress container
}
.cp-fileupload-table-cancel { text-align: center; }
.fa.cancel {

View File

@@ -117,7 +117,7 @@
.infopages_topbar () {
.cp-topbar {
background: #fff;
z-index: 9001;
z-index: 10000; //Z infopage toolbar
position: fixed;
top: 0;
display: flex;

View File

@@ -20,7 +20,7 @@
.cp-modal-container {
display: none;
z-index: 100000;
z-index: 100000; //Z modal container
position: absolute;
top: 0;
bottom: 0;

View File

@@ -274,7 +274,7 @@
font: @toolbar_button-font;
width: 100%;
z-index: 9001;
z-index: 10000; // cp-toolbar
.cp-dropdown-container {
//height: 100%;
@@ -597,7 +597,7 @@
vertical-align: top;
}
.cp-toolbar-user-dropdown {
z-index: 10000;
z-index: 10000; //Z cp-toolbar-user-dropdown
//margin-left: 20px;
height: 64px;
width: 64px;
@@ -737,7 +737,7 @@
background: @colortheme_dropdown-bg;
display: flex;
flex-flow: column;
z-index:10000;
z-index:10000; //Z cp-toolbar-drawer-content
color: black;
.fa {
font-size: 17px;

View File

@@ -1,31 +1,36 @@
@import "./variables.less";
@import (once) "../less2/include/colortheme.less";
/*
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.less";
@import (once) "./include/browser.less";
#loading {
#cp-loading {
position: fixed;
z-index: 9999999;
z-index: 10000000; // #loading
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background: @bg-loading;
color: @color-loading;
background: @colortheme_loading-bg;
color: @colortheme_loading-color;
text-align: center;
font-size: 1.5em;
.loadingContainer {
.cp-loading-container {
margin-top: 50vh;
transform: translateY(-50%);
}
.cryptofist {
.cp-loading-cryptofist {
margin-left: auto;
margin-right: auto;
height: 300px;
margin-bottom: 2em;
@media screen and (max-height: @media-short-screen) {
@media screen and (max-height: @browser_media-short-screen) {
display: none;
}
}
.spinnerContainer {
.cp-loading-spinner-container {
position: relative;
height: 100px;
> div {
@@ -33,9 +38,9 @@
}
}
}
#loadingTip {
#cp-loading-tip {
position: fixed;
z-index: 99999;
z-index: 100000; // loading tip
top: 80%;
left: 0;
right: 0;
@@ -43,12 +48,12 @@
transition: opacity 750ms;
transition-delay: 3000ms;
@media screen and (max-height: @media-medium-screen) {
@media screen and (max-height: @browser_media-medium-screen) {
display: none;
}
span {
background-color: @bg-loading;
color: @color-loading;
background: @colortheme_loading-bg;
color: @colortheme_loading-color;
text-align: center;
font-size: 1.5em;
opacity: 0.7;
@@ -58,3 +63,4 @@
display: inline-block;
}
}

View File

@@ -1,6 +1,7 @@
@import (once) "../include/infopages.less";
@import (once) "../include/colortheme.less";
@import (once) "../include/alertify.less";
@import (once) "../loading.less";
.infopages_main();
.infopages_topbar();
@@ -75,4 +76,4 @@
.cp-container {
padding-top: 3em;
min-height: 66vh;
}
}

View File

@@ -1,6 +1,7 @@
@import (once) "../include/infopages.less";
@import (once) "../include/colortheme.less";
@import (once) "../include/alertify.less";
@import (once) "../loading.less";
.infopages_main();
.infopages_topbar();

View File

@@ -38,7 +38,7 @@ $(function () {
};
require([
'less!/customize/src/less/loading.less'
'less!/customize/src/less2/loading.less'
], function () {
if (/whiteboard/.test(pathname)) {
$('body').html(h('body', Pages[pathname]()).innerHTML);

View File

@@ -177,7 +177,7 @@ define(function () {
out.fileShare = "Copier le lien";
out.getEmbedCode = "Obtenir le code d'intégration";
out.viewEmbedTitle = "Intégrer le pad dans une page web";
out.viewEmbedTag = "Pour intégrer ce pad, veuillez inclure l'iframe suivant dans votre page là om vous souhaitez l'afficher. Vous pouvez changer sa taille en utilisant du code CSS ou des attributs HTML.";
out.viewEmbedTag = "Pour intégrer ce pad, veuillez inclure l'iframe suivant dans votre page là où vous souhaitez l'afficher. Vous pouvez changer sa taille en utilisant du code CSS ou des attributs HTML.";
out.fileEmbedTitle = "Intégrer le fichier dans une page web";
out.fileEmbedScript = "Pour intégrer un fichier, veuillez inclure le script suivant une fois dans votre page afin de pouvoir charger le Media Tag :";
out.fileEmbedTag = "Ensuite vous pouvez placer ce Media Tag où vous souhaitez dans votre page pour l'intégrer :";