diff --git a/customize.dist/main.css b/customize.dist/main.css
index 910b5073f..831d70b8a 100644
--- a/customize.dist/main.css
+++ b/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
- needed to position the dropdown content */
.dropdown-bar {
position: relative;
diff --git a/customize.dist/src/less/loading.less b/customize.dist/src/less/loading.less
index fefc533fe..28886066a 100644
--- a/customize.dist/src/less/loading.less
+++ b/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%;
+ }
+}
diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js
index 2b604b662..95fb8d0b6 100644
--- a/customize.dist/translations/messages.js
+++ b/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;
});
diff --git a/www/common/cryptpad-common.js b/www/common/cryptpad-common.js
index d90b6fd54..68f8ba4b6 100644
--- a/www/common/cryptpad-common.js
+++ b/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 = $('
', {'id': 'loadingTip'});
+ var $tip = $('', {'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(); }