Display the storage limit in the drive

customize.dist/src/less/toolbar.less

@@ -48,6 +48,7 @@
             background: @toolbar-green;
             border-color: @toolbar-green;
             &:hover {
+                color: #fff;
                 background: #449d44;
                 border: 1px solid #419641;
             }
@@ -64,6 +65,7 @@
             background: #0275d8;
             border-color: #0275d8;
             &:hover {
+                color: #fff;
                 background: #025aa5;
                 border: 1px solid #01549b;
             }
@@ -91,6 +93,48 @@
         }
     }
 
+    button.upgrade {
+        font-size: 14px;
+        vertical-align: top;
+        margin-left: 10px;
+    }
+    .cryptpad-drive-limit {
+        display: inline-block;
+        height: 26px;
+        width: 200px;
+        margin: 2px;
+        box-sizing: border-box;
+        border: 1px solid #999;
+        background: white;
+        position: relative;
+        text-align: center;
+        line-height: 24px;
+        .usage {
+            height: 24px;
+            display: inline-block;
+            background: blue;
+            position: absolute;
+            left: 0;
+            z-index:1;
+            &.normal {
+                background: @toolbar-green;
+            }
+            &.warning {
+                background: orange;
+            }
+            &.above {
+                background: red;
+            }
+        }
+        .usageText {
+            position: relative;
+            color: black;
+            text-shadow: 1px 0 2px white, 0 1px 2px white, -1px 0 2px white, 0 -1px 2px white;
+            z-index: 2;
+            font-size: 16px;
+            font-weight: bold;
+        }
+    }
     .cryptpad-limit {
         box-sizing: content-box;
         height: 16px;

customize.dist/toolbar.css

@@ -132,6 +132,7 @@
 }
 .cryptpad-toolbar button#shareButton:hover,
 .cryptpad-toolbar button.buttonSuccess:hover {
+  color: #fff;
   background: #449d44;
   border: 1px solid #419641;
 }
@@ -151,6 +152,7 @@
 }
 .cryptpad-toolbar button#newdoc:hover,
 .cryptpad-toolbar button.buttonPrimary:hover {
+  color: #fff;
   background: #025aa5;
   border: 1px solid #01549b;
 }
@@ -170,6 +172,48 @@
   background-color: #e6e6e6;
   border-color: #adadad;
 }
+.cryptpad-toolbar button.upgrade {
+  font-size: 14px;
+  vertical-align: top;
+  margin-left: 10px;
+}
+.cryptpad-toolbar .cryptpad-drive-limit {
+  display: inline-block;
+  height: 26px;
+  width: 200px;
+  margin: 2px;
+  box-sizing: border-box;
+  border: 1px solid #999;
+  background: white;
+  position: relative;
+  text-align: center;
+  line-height: 24px;
+}
+.cryptpad-toolbar .cryptpad-drive-limit .usage {
+  height: 24px;
+  display: inline-block;
+  background: blue;
+  position: absolute;
+  left: 0;
+  z-index: 1;
+}
+.cryptpad-toolbar .cryptpad-drive-limit .usage.normal {
+  background: #5cb85c;
+}
+.cryptpad-toolbar .cryptpad-drive-limit .usage.warning {
+  background: orange;
+}
+.cryptpad-toolbar .cryptpad-drive-limit .usage.above {
+  background: red;
+}
+.cryptpad-toolbar .cryptpad-drive-limit .usageText {
+  position: relative;
+  color: black;
+  text-shadow: 1px 0 2px white, 0 1px 2px white, -1px 0 2px white, 0 -1px 2px white;
+  z-index: 2;
+  font-size: 16px;
+  font-weight: bold;
+}
 .cryptpad-toolbar .cryptpad-limit {
   box-sizing: content-box;
   height: 16px;

customize.dist/translations/messages.fr.js

@@ -51,6 +51,10 @@ define(function () {
 
     out.language = "Langue";
 
+    out.upgrade = "Améliorer";
+    out.upgradeTitle = "Améliorer votre compte pour augmenter la limite de stockage";
+    out.MB = "Mo";
+
     out.greenLight = "Tout fonctionne bien";
     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";

customize.dist/translations/messages.js

@@ -53,6 +53,10 @@ define(function () {
 
     out.language = "Language";
 
+    out.upgrade = "Upgrade";
+    out.upgradeTitle = "Upgrade your account to increase the storage limit";
+    out.MB = "MB";
+
     out.greenLight = "Everything is working fine";
     out.orangeLight = "Your slow connection may impact your experience";
     out.redLight = "You are disconnected from the session";
@@ -62,6 +66,8 @@ define(function () {
         "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.pinLimitNotPinned = "You've reached your storage limit.<br>"+
                             "This pad is not stored in your CryptDrive.";
+    out.pinLimitDrive = "You've reached your storage limit.<br>" +
+                        "You can't create new pads.";
 
     out.importButtonTitle = 'Import a pad from a local file';
 

www/common/cryptpad-common.js

@@ -576,7 +576,7 @@ define([
                 var data = makePad(href, name);
                 getStore().pushData(data, function (e) {
                     if (e) {
-                        if (e === 'E_OVER_LIMIT') {
+                        if (e === 'E_OVER_LIMIT' && AppConfig.enablePinLimit) {
                             common.alert(Messages.pinLimitNotPinned, null, true);
                             return;
                         }
@@ -725,14 +725,15 @@ define([
     };
 
     var isOverPinLimit = common.isOverPinLimit = function (cb) {
-        if (!common.isLoggedIn()) { return void cb(null, false); }
+        if (!common.isLoggedIn() || !AppConfig.enablePinLimit) { return void cb(null, false); }
         var usage;
         var andThen = function (e, limit) {
             if (e) { return void cb(e); }
+            var data = {usage: usage, limit: limit};
             if (usage > limit) {
-                return void cb (null, true);
+                return void cb (null, true, data);
             }
-            return void cb (null, false);
+            return void cb (null, false, data);
         };
         var todo = function (e, used) {
             usage = common.bytesToMegabytes(used);

www/common/userObject.js

@@ -570,19 +570,20 @@ define([
             var parentEl = findElement(files, filePath);
             var fileName = getAvailableName(parentEl, name || NEW_FILE_NAME);
             var href = '/' + type + '/#' + Cryptpad.createRandomHash();
-            parentEl[fileName] = href;
 
             pushFileData({
                 href: href,
                 title: fileName,
                 atime: +new Date(),
                 ctime: +new Date()
-            });
+            }, function (err) {
-
+                if (err) { return void cb(err); }
-            var newPath = filePath.slice();
+                parentEl[fileName] = href;
-            newPath.push(fileName);
+                var newPath = filePath.slice();
-            cb({
+                newPath.push(fileName);
-                newPath: newPath
+                cb(void 0, {
+                    newPath: newPath
+                });
             });
         };
         var addFolder = exp.addFolder = function (folderPath, name, cb) {
@@ -591,7 +592,7 @@ define([
             parentEl[folderName] = {};
             var newPath = folderPath.slice();
             newPath.push(folderName);
-            cb({
+            cb(void 0, {
                 newPath: newPath
             });
         };

www/drive/file.css

@@ -66,7 +66,7 @@ li {
 .contextMenu {
   display: none;
   position: absolute;
-  z-index: 50;
+  z-index: 500;
 }
 .contextMenu li {
   padding: 0;

www/drive/file.less

@@ -96,7 +96,7 @@ li {
 .contextMenu {
     display: none;
     position: absolute;
-    z-index: 50;
+    z-index: 500;
     li {
         padding: 0;
         font-size: 16px;

www/drive/main.js

@@ -37,6 +37,9 @@ define([
         return JSONSortify(obj);
     };
 
+    var LIMIT_REFRESH_RATE = 30000; // milliseconds
+    var E_OVER_LIMIT = 'E_OVER_LIMIT';
+
     var SEARCH = "search";
     var SEARCH_NAME = Messages.fm_searchName;
     var ROOT = "root";
@@ -650,7 +653,12 @@ define([
             var w = $menu.outerWidth();
             var wH = window.innerHeight;
             var wW = window.innerWidth;
-            if (e.pageY + h <= wH) {
+            if (h > wH) {
+                $menu.css({
+                    top: '0px',
+                    bottom: ''
+                });
+            } else if (e.pageY + h <= wH) {
                 $menu.css({
                     top: e.pageY+'px',
                     bottom: ''
@@ -661,7 +669,12 @@ define([
                     top: ''
                 });
             }
-            if (e.pageX + w <= wW) {
+            if(w > wW) {
+                $menu.css({
+                    left: '0px',
+                    right: ''
+                });
+            } else if (e.pageX + w <= wW) {
                 $menu.css({
                     left: e.pageX+'px',
                     right: ''
@@ -1229,7 +1242,10 @@ define([
 
             // Handlers
             if (isInRoot) {
-                var onCreated = function (info) {
+                var onCreated = function (err, info) {
+                    if (err && err === E_OVER_LIMIT) {
+                        return void Cryptpad.alert(Messages.pinLimitDrive, null, true);
+                    }
                     module.newFolder = info.newPath;
                     refresh();
                 };
@@ -2074,7 +2090,8 @@ define([
             }
             else if ($(this).hasClass('newfolder')) {
                 if (paths.length !== 1) { return; }
-                var onCreated = function (info) {
+                var onCreated = function (err, info) {
+                    if (err) { return void logError(err); }
                     module.newFolder = info.newPath;
                     module.displayDirectory(paths[0].path);
                 };
@@ -2135,7 +2152,10 @@ define([
         $contentContextMenu.on('click', 'a', function (e) {
             e.stopPropagation();
             var path = $(this).data('path');
-            var onCreated = function (info) {
+            var onCreated = function (err, info) {
+                if (err && err === E_OVER_LIMIT) {
+                    return void Cryptpad.alert(Messages.pinLimitDrive, null, true);
+                }
                 module.newFolder = info.newPath;
                 refresh();
             };
@@ -2310,7 +2330,6 @@ define([
             window.clearInterval(APP.resizeTree);
             APP.resizeTree = undefined;
         });
-console.log(files);
         history.onEnterHistory = function (obj) {
             var files = obj.drive;
             filesOp = FO.init(files, config);
@@ -2452,6 +2471,7 @@ console.log(files);
 
             var $bar = APP.$bar;
             var $rightside = $bar.find('.' + Toolbar.constants.rightside);
+            var $leftside = $bar.find('.' + Toolbar.constants.leftside);
             var $userBlock = $bar.find('.' + Toolbar.constants.userAdmin);
             APP.$displayName = $bar.find('.' + Toolbar.constants.username);
 
@@ -2463,6 +2483,45 @@ console.log(files);
                 $linkToMain.off('click');
             }
 
+            /* add the usage */
+            if (AppConfig.enablePinLimit) {
+                var todo = function (err, state, data) {
+                    $leftside.html('');
+                    if (!data) {
+                        return void window.setTimeout(function () {
+                            Cryptpad.isOverPinLimit(todo);
+                        }, LIMIT_REFRESH_RATE);
+                    }
+                    var usage = data.usage;
+                    var limit = data.limit;
+                    var unit = Messages.MB;
+                    var $limit = $('<span>', {'class': 'cryptpad-drive-limit'}).appendTo($leftside);
+                    var quota = usage/limit;
+                    var width = Math.floor(Math.min(quota, 1)*$limit.width());
+                    var $usage = $('<span>', {'class': 'usage'}).css('width', width+'px');
+
+                    if (quota >= 0.8) {
+                        var $upgrade = $('<button>', {
+                            'class': 'upgrade buttonSuccess',
+                            title: Messages.upgradeTitle
+                        }).text(Messages.upgrade).click(function (e) {
+                            // TODO
+                        }).appendTo($leftside);
+                    }
+
+                    if (quota < 0.8) { $usage.addClass('normal'); }
+                    else if (quota < 1) { $usage.addClass('warning'); }
+                    else { $usage.addClass('above'); }
+                    var $text = $('<span>', {'class': 'usageText'});
+                    $text.text(usage + ' / ' + limit + ' ' + unit);
+                    $limit.append($usage).append($text);
+                    window.setTimeout(function () {
+                        Cryptpad.isOverPinLimit(todo);
+                    }, LIMIT_REFRESH_RATE);
+                };
+                Cryptpad.isOverPinLimit(todo);
+            }
+
             /* add a history button */
             var histConfig = {};
             histConfig.onRender = function (val) {