Add the usage bar in the settings page

customize.dist/main.css

@@ -577,7 +577,7 @@ html.cp,
   font-size: .875em;
   background-color: #fafafa;
   color: #555;
-  font-family: Georgia,Cambria,serif;
+  font-family: Ubuntu,Georgia,Cambria,serif;
   height: 100%;
 }
 .cp {
@@ -1090,6 +1090,48 @@ html.cp,
   color: #FA5858;
   cursor: pointer !important;
 }
+/* Pin limit */
+.limit-container .cryptpad-limit-bar {
+  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;
+  vertical-align: middle;
+}
+.limit-container .cryptpad-limit-bar .usage {
+  height: 24px;
+  display: inline-block;
+  background: blue;
+  position: absolute;
+  left: 0;
+  z-index: 1;
+}
+.limit-container .cryptpad-limit-bar .usage.normal {
+  background: #5cb85c;
+}
+.limit-container .cryptpad-limit-bar .usage.warning {
+  background: orange;
+}
+.limit-container .cryptpad-limit-bar .usage.above {
+  background: red;
+}
+.limit-container .cryptpad-limit-bar .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;
+}
+.limit-container .upgrade {
+  margin-left: 10px;
+}
 #cors-store {
   display: none;
 }

customize.dist/src/less/cryptpad.less

@@ -8,12 +8,14 @@
 @import "./topbar.less";
 @import "./footer.less";
 
+@toolbar-green: #5cb85c;
+
 html.cp, .cp body {
     font-size: .875em;
     background-color: @page-white; //@base;
     color: @fore;
 
-    font-family: Georgia,Cambria,serif;
+    font-family: Ubuntu,Georgia,Cambria,serif;
     height: 100%;
 }
 
@@ -536,6 +538,51 @@ noscript {
 }
 }
 
+/* Pin limit */
+.limit-container {
+    .cryptpad-limit-bar {
+        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;
+        vertical-align: middle;
+        .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;
+        }
+    }
+    .upgrade {
+        margin-left: 10px;
+    }
+}
+
 // hack for our cross-origin iframe
 #cors-store {
     display: none;

customize.dist/src/less/toolbar.less

@@ -105,43 +105,6 @@
         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: border-box;
         height: 26px;

customize.dist/toolbar.css

@@ -183,43 +183,6 @@
   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: border-box;
   height: 26px;

www/common/cryptpad-common.js

@@ -772,6 +772,50 @@ define([
         common.getPinnedUsage(todo);
     };
 
+    var LIMIT_REFRESH_RATE = 30000; // milliseconds
+    common.createUsageBar = function (cb) {
+        var todo = function (err, state, data) {
+            var $container = $('<span>', {'class':'limit-container'});
+            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-limit-bar'}).appendTo($container);
+            var quota = usage/limit;
+            var width = Math.floor(Math.min(quota, 1)*200); // the bar is 200px width
+            var $usage = $('<span>', {'class': 'usage'}).css('width', width+'px');
+
+            if (quota >= 0.8) {
+                var origin = encodeURIComponent(window.location.origin);
+                var $upgradeLink = $('<a>', {
+                    href: "https://account.cryptpad.fr/#!on=" + origin,
+                    rel: "noreferrer noopener",
+                    target: "_blank",
+                }).appendTo($container);
+                $('<button>', {
+                    'class': 'upgrade buttonSuccess',
+                    title: Messages.upgradeTitle
+                }).text(Messages.upgrade).appendTo($upgradeLink);
+            }
+
+            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);
+            cb(err, $container);
+        };
+        Cryptpad.isOverPinLimit(todo);
+    };
+
     common.createButton = function (type, rightside, data, callback) {
         var button;
         var size = "17px";

www/drive/file.css

@@ -547,7 +547,7 @@ span.fa-folder-open {
 }
 #driveToolbar #contextButtonsContainer {
   float: right;
-  margin: 5px;
+  margin: 2px;
 }
 #driveToolbar #contextButtonsContainer button {
   vertical-align: top;

www/drive/file.less

@@ -617,7 +617,7 @@ span {
     }
     #contextButtonsContainer {
         float: right;
-        margin: 5px;
+        margin: 2px;
         button {
             vertical-align: top;
         }

www/drive/main.js

@@ -37,7 +37,6 @@ define([
         return JSONSortify(obj);
     };
 
-    var LIMIT_REFRESH_RATE = 30000; // milliseconds
     var E_OVER_LIMIT = 'E_OVER_LIMIT';
 
     var SEARCH = "search";
@@ -2703,45 +2702,11 @@ define([
 
             /* add the usage */
             if (AppConfig.enablePinLimit) {
-                var todo = function (err, state, data) {
+                Cryptpad.createUsageBar(function (err, $limitContainer) {
+                    if (err) { return void logError(err); }
                     $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 origin = encodeURIComponent(window.location.origin);
-                        var $upgradeLink = $('<a>', {
-                            href: "https://account.cryptpad.fr/#!on=" + origin,
-                            rel: "noreferrer noopener",
-                            target: "_blank",
-                        }).appendTo($leftside);
-                        $('<button>', {
-                            'class': 'upgrade buttonSuccess',
-                            title: Messages.upgradeTitle
-                        }).text(Messages.upgrade).appendTo($upgradeLink);
-                    }
-
-                    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);
+                    $leftside.append($limitContainer);
+                });
             }
 
             /* add a history button */

www/settings/main.js

@@ -230,26 +230,11 @@ define([
             .text(Messages.settings_usageTitle)
             .append('<br>');
 
-        $('<button>', {
-            'class': 'btn btn-primary', // fa fa-hdd-o ?
-        })
-        .text(Messages.settings_usage)
-        .click(function () {
-            if (!(proxy.edPublic && proxy.edPrivate)) {
-                // suggest that they login/register
-                Cryptpad.alert(Messages.settings_pinningNotAvailable);
-                return;
-            }
-            Cryptpad.getPinnedUsage(function (e, bytes) {
-                if (e) {
-                    Cryptpad.alert(Messages.settings_pinningError);
-                    return;
-                }
-                Cryptpad.alert(Messages._getKey('settings_usageAmount', [Cryptpad.bytesToMegabytes(bytes)]));
+        Cryptpad.createUsageBar(function (err, $bar) {
+            $div.find('.limit-container').remove();
+            $bar.find('.upgrade').addClass('btn btn-success');
+            $div.append($bar);
         });
-        })
-        .appendTo($div);
-
         return $div;
     };
 
@@ -335,10 +320,10 @@ define([
             APP.$container.append(createLogoutEverywhere(obj));
         }
         APP.$container.append(createResetTips());
+        APP.$container.append(createUsageButton(obj));
         APP.$container.append(createBackupDrive(obj));
         APP.$container.append(createImportLocalPads(obj));
         APP.$container.append(createResetDrive(obj));
-        APP.$container.append(createUsageButton(obj));
         APP.$container.append(createUserFeedbackToggle(obj));
         obj.proxy.on('change', [], refresh);
         obj.proxy.on('remove', [], refresh);