New loading screen

customize.dist/pages.js

@@ -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'),
             ])
         );

customize.dist/src/less2/include/checkmark.less

@@ -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;

customize.dist/src/less2/include/colortheme.less

@@ -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: @colortheme_form-bg-alt;
-@colortheme_checkmark-back0-active: #bbbbbb;
+@colortheme_checkmark-back0-active: @colortheme_form-border;
-@colortheme_checkmark-back1: #FF0073;
+@colortheme_checkmark-back1: @colortheme_form-bg;
-@colortheme_checkmark-col1: #ffffff;
+@colortheme_checkmark-col1: @colortheme_form-color;
-@colortheme_checkmark-back2: #FFFFFF;
+@colortheme_checkmark-back2: @colortheme_form-bg-alt;
-@colortheme_checkmark-col2: #000000;
+@colortheme_checkmark-col2: @colortheme_form-color-alt;

customize.dist/src/less2/include/creation.less

@@ -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 {
-    #cp-creation {
+            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 {
         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;
+                //margin-top: 10px;
-                width: 100%;
-                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%);
+                flex: 1;
-                padding: 20px;
-                margin: 30px 0;
-                .cp-creation-title {
-                    padding: 0 0 10px 10px;
-                    margin: auto;
-                }
             }
             .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: black;
-                    color: @darker;
                     border: 1px solid transparent;
 
                     &.cp-creation-template-selected {
-                        border: 1px solid white;
+                        color: @color !important;
-                        background-color: #222;
+                        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,15 +280,42 @@
             }
         }
 
-        .checkmark_main(30px);
+        .checkmark_main(20px);
+    }
 
-        @media screen and (max-width: @browser_media-narrow-screen) {
+        @media screen and (max-height: 700px) {
+            #cp-creation-container {
+                .cp-creation-logo {
+                    //flex-shrink: 0;
+                    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;
+                            }
+                            .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;
@@ -256,6 +345,5 @@
                     }
                 }
             }
-
         }
 }

customize.dist/src/less2/include/framework.less

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

www/common/common-interface.js

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

www/common/common-ui-elements.js

@@ -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('span.cp-creation-expire-picker.cp-creation-slider', [
-            h('div.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();
         });
 

www/common/loading.js

@@ -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;
+  align-self: center;
-  transform: translateY(-50%);
 }
 #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;

www/common/sframe-app-framework.js

@@ -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 ||

www/poll/app-poll.less

@@ -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;
 

www/whiteboard/app-whiteboard.less

@@ -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/framework.less";
-@import (once) '../../customize/src/less2/include/creation.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 {