Add the storage limit warning in the toolbar

customize.dist/src/less/toolbar.less

@@ -79,6 +79,22 @@
         }
     }
 
+    .cryptpad-limit {
+        color: red;
+        box-sizing: content-box;
+        height: 16px;
+        width: 16px;
+        display: inline-block;
+        padding: 3px;
+        margin: 3px;
+        margin-right: 6px;
+        font-size: 20px;
+        span {
+            cursor: pointer;
+            margin: auto;
+        }
+    }
+
     .cryptpad-lag {
         box-sizing: content-box;
         height: 16px;

customize.dist/toolbar.css

@@ -150,6 +150,20 @@
 .cryptpad-toolbar button.hidden {
   display: none;
 }
+.cryptpad-toolbar .cryptpad-limit {
+  color: red;
+  box-sizing: content-box;
+  height: 16px;
+  width: 16px;
+  display: inline-block;
+  padding: 3px;
+  margin: 3px;
+  margin-right: 6px;
+  font-size: 20px;
+}
+.cryptpad-toolbar .cryptpad-limit span {
+  margin: auto;
+}
 .cryptpad-toolbar .cryptpad-lag {
   box-sizing: content-box;
   height: 16px;

customize.dist/translations/messages.fr.js

@@ -55,6 +55,10 @@ define(function () {
     out.orangeLight = "Votre connexion est lente, ce qui réduit la qualité de l'éditeur";
     out.redLight = "Vous êtes déconnectés de la session";
 
+    out.pinLimitReached = "Vous avez atteint votre limite de stockage";
+    out.pinLimitReachedAlert = "Vous avez atteint votre limite de stockage. Ce pad ne sera pas enregistré dans votre CrypDrive.<br>" +
+        "Pour résoudre ce problème, vous pouvez soit supprimer des pads de votre CryptDrive (y compris la corbeille), soit vous abonner à une offre premium pour augmenter la limite maximale.";
+
     out.importButtonTitle = 'Importer un pad depuis un fichier local';
 
     out.exportButtonTitle = 'Exporter ce pad vers un fichier local';

customize.dist/translations/messages.js

@@ -57,6 +57,10 @@ define(function () {
     out.orangeLight = "Your slow connection may impact your experience";
     out.redLight = "You are disconnected from the session";
 
+    out.pinLimitReached = "You've reached your storage limit";
+    out.pinLimitReachedAlert = "You've reached your storage limit. This pad won't be stored in your CryptDrive.<br>" +
+        "To fix this problem, you can either remove pads from your CryptDrive (including the trash) or subscribe to a premium offer to increase your limit.";
+
     out.importButtonTitle = 'Import a pad from a local file';
 
     out.exportButtonTitle = 'Export this pad to a local file';

www/code/main.js

@@ -382,7 +382,7 @@ define([
                 userList = info.userList;
 
                 var configTb = {
-                    displayed: ['useradmin', 'spinner', 'lag', 'state', 'share', 'userlist', 'newpad'],
+                    displayed: ['useradmin', 'spinner', 'lag', 'state', 'share', 'userlist', 'newpad', 'limit'],
                     userData: userData,
                     readOnly: readOnly,
                     ifrw: ifrw,

www/common/cryptpad-common.js

@@ -708,6 +708,10 @@ define([
         });
     };
 
+    var getPinLimit = common.getPinLimit = function (cb) {
+        cb(void 0, 10);
+    };
+
     var createButton = common.createButton = function (type, rightside, data, callback) {
         var button;
         var size = "17px";

www/common/toolbar.js

@@ -16,6 +16,8 @@ define([
     /** Id of the div containing the lag info. */
     var LAG_ELEM_CLS = Bar.constants.lag = 'cryptpad-lag';
 
+    var LIMIT_ELEM_CLS = Bar.constants.lag = 'cryptpad-limit';
+
     /** The toolbar class which contains the user list, debug link and lag. */
     var TOOLBAR_CLS = Bar.constants.toolbar = 'cryptpad-toolbar';
 
@@ -488,6 +490,28 @@ define([
             $userContainer.append($lag);
         }
 
+        if (config.displayed.indexOf('limit') !== -1 && Config.enablePinning) {
+            var usage;
+            var $limitIcon = $('<span>', {'class': 'fa fa-exclamation-triangle'});
+            var $limit = $('<span>', {
+                'class': LIMIT_ELEM_CLS,
+                'title': Messages.pinLimitReached
+            }).append($limitIcon).hide().appendTo($userContainer);
+            var andThen = function (e, limit) {
+                if (usage > limit) {
+                    $limit.show().click(function () {
+                        Cryptpad.alert(Messages.pinLimitReachedAlert, null, true);
+                    });
+                }
+            };
+            var todo = function (e, used) {
+                usage = Cryptpad.bytesToMegabytes(used);
+                if (e) { console.error("Unable tog et the pinned usage"); return; }
+                Cryptpad.getPinLimit(andThen);
+            };
+            Cryptpad.getPinnedUsage(todo);
+        }
+
         if (config.displayed.indexOf('newpad') !== -1) {
             var pads_options = [];
             Config.availablePadTypes.forEach(function (p) {