Ability to display tips in the loading screen

customize.dist/main.css

@@ -319,6 +319,7 @@
 .cp #loading .cryptofist {
   margin-left: auto;
   margin-right: auto;
+  height: 300px;
 }
 @media screen and (max-height: 450px) {
   .cp #loading .cryptofist {
@@ -332,6 +333,24 @@
 .cp #loading .spinnerContainer > div {
   height: 100px;
 }
+.cp #loadingTip {
+  position: fixed;
+  z-index: 99999;
+  top: 80%;
+  left: 0;
+  right: 0;
+  text-align: center;
+}
+.cp #loadingTip span {
+  background-color: #302B28;
+  color: #fafafa;
+  text-align: center;
+  font-size: 1.5em;
+  opacity: 0.7;
+  font-family: lato, Helvetica, sans-serif;
+  padding: 15px;
+  max-width: 60%;
+}
 /* The container <div> - needed to position the dropdown content */
 .dropdown-bar {
   position: relative;

customize.dist/src/less/loading.less

@@ -16,6 +16,7 @@
     .cryptofist {
         margin-left: auto;
         margin-right: auto;
+        height: 300px;
         @media screen and (max-height: @media-short-screen) {
             display: none;
         }
@@ -28,4 +29,21 @@
         }
     }
 }
-
+.cp #loadingTip {
+    position: fixed;
+    z-index: 99999;
+    top: 80%;
+    left: 0;
+    right: 0;
+    text-align: center;
+    span {
+        background-color: @bg-loading;
+        color: @color-loading;
+        text-align: center;
+        font-size: 1.5em;
+        opacity: 0.7;
+        font-family: lato, Helvetica, sans-serif;
+        padding: 15px;
+        max-width: 60%;
+    }
+}

customize.dist/translations/messages.js

@@ -385,6 +385,8 @@ define(function () {
         '  - Your slides are updated in realtime'
     ].join('');
 
+    // Readme
+
     out.driveReadmeTitle = "What is CryptDrive?";
     out.readme_welcome = "Welcome to CryptPad !";
     out.readme_p1 = "Welcome to CryptPad, this is where you can take note of things alone and with friends.";
@@ -406,5 +408,15 @@ define(function () {
     out.readme_cat3_l2 = "With CryptPad slide editor, you can make quick presentations using Markdown";
     out.readme_cat3_l3 = "With CryptPoll you can take quick votes, especially for scheduling meetings which fit with everybody's calendar";
 
+    // Tips
+    // TODO
+    /*out.tips = {};
+    out.tips.multiselect = "Ctrl+click to select multiple elements in CryptDrive";
+    out.tips.dragdrop = "Drag and drop files and folders in your drive. You can't drop folder into the 'unsorted files' category.";
+    out.tips.register = "Sign up to access your pads everywhere. Don't worry, everything is encrypted so we don't know anything about your account.";
+    out.tips.other = "Pew pew pew pew pew";*/
+
+
+
     return out;
 });

www/common/cryptpad-common.js

@@ -855,6 +855,12 @@ define([
     };
 
     var LOADING = 'loading';
+    var getRandomTip = function () {
+        if (!Messages.tips || !Object.keys(Messages.tips).length) { return ''; }
+        var keys = Object.keys(Messages.tips);
+        var rdm = Math.floor(Math.random() * keys.length);
+        return Messages.tips[keys[rdm]];
+    };
     common.addLoadingScreen = function (loadingText) {
         if ($('#' + LOADING).length) {
             $('#' + LOADING).show();
@@ -869,9 +875,24 @@ define([
         $container.append($spinner).append($text);
         $loading.append($container);
         $('body').append($loading);
+        if (Messages.tips) {
+            var $loadingTip = $('<div>', {'id': 'loadingTip'});
+            var $tip = $('<span>', {'class': 'tips'}).text(getRandomTip()).appendTo($loadingTip);
+            console.log($('body').height());
+            console.log($container.height());
+            console.log($('body'));
+            console.log($container);
+            $loadingTip.css({
+                'top': $('body').height()/2 + $container.height()/2 + 20 + 'px'
+            });
+            $('body').append($loadingTip);
+        }
     };
     common.removeLoadingScreen = function (cb) {
         $('#' + LOADING).fadeOut(750, cb);
+        window.setTimeout(function () {
+            $('#loadingTip').fadeOut(750);
+        }, 2000);
     };
     common.errorLoadingScreen = function (error, transparent) {
         if (!$('#' + LOADING).is(':visible')) { common.addLoadingScreen(); }