New loading screen

2018-04-11 18:56:03 +02:00
parent bf520c2cb4
commit 4a23b57655
11 changed files with 231 additions and 125 deletions
--- a/www/common/common-interface.js
+++ b/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.
--- a/www/common/common-ui-elements.js
+++ b/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('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();
        });

--- a/www/common/loading.js
+++ b/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;
-  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;
--- a/www/common/sframe-app-framework.js
+++ b/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 ||