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';