Merge branch 'tippy-prune' into staging

customize.dist/src/less2/include/colortheme.less

@@ -1,5 +1,6 @@
 @colortheme_font: 'Open Sans', 'Helvetica Neue', sans-serif;
 @colortheme_app-font-size: 16px;
+@colortheme_app-font-size-small: 13px;
 @colortheme_app-font: @colortheme_app-font-size @colortheme_font;
 
 @colortheme_logo-1: #326599;
@@ -167,6 +168,7 @@
 
 @cryptpad_color_blue: #4591C4;
 @cryptpad_color_grey: #999999;
+@cryptpad_color_light_grey: #e0e0e0; 
 @cryptpad_header_col: #1E1F1F;
 @cryptpad_text_col: #3F4141;
 @cryptpad_color_light_blue: #00b7d8;

customize.dist/src/less2/include/limit-bar.less

@@ -7,27 +7,25 @@
     .cp-limit-container {
         @colortheme_green: #5cb85c;
         display: inline-flex;
-        flex-flow: column-reverse;
+        flex-flow: column;
         width: 100%;
-        margin-top: 20px;
+        margin: 20px 0px;
         .cp-limit-bar {
             display: inline-flex;
             justify-content: center;
             align-items: center;
-
             max-width: 100%;
-            margin: 3px;
+            margin: 5px;
             box-sizing: border-box;
-            border-top: 1px solid #999;
+            border-radius: 3px;
             background: white;
             position: relative;
             text-align: center;
-            width: ~"calc(100% - 6px)";
+            width: ~"calc(100% - 10px)";
-            height: 35px;
+            height: 10px;
-            line-height: 25px;
             overflow: hidden;
             .cp-limit-usage {
-                height: 100%;
+                height: 10px;
                 display: inline-block;
                 background: blue;
                 position: absolute;
@@ -44,15 +42,15 @@
                     background: red;
                 }
             }
-            .cp-limit-usage-text {
-                position: relative;
-                color: grey;
-                text-shadow: 1px 0 2px white, 0 1px 2px white, -1px 0 2px white, 0 -1px 2px white;
-                z-index: 2; // .usageText
-                font-size: @colortheme_app-font-size;
-                font-weight: bold;
-            }
         }
+
+        .cp-limit-usage-text {
+            color: @cryptpad_text_col;
+            margin-left: 5px;
+            z-index: 2; // .usageText
+            font-size: @colortheme_app-font-size-small; 
+        }
+                
         .cp-limit-buttons {
             display: flex;
             flex-wrap: wrap;
@@ -62,7 +60,8 @@
                 height: 25px;
                 display: inline-flex;
                 align-items: center;
-                min-width: 200px;
+                min-width: 150px;
+                margin: 3px 5px;
                 width: 50%;
                 padding-top: 0;
                 padding-bottom: 0;

customize.dist/src/less2/include/tippy.less

@@ -6,13 +6,29 @@
 & {
     .tippy-tooltip.cryptpad-theme {
         /* Your styling here. Example: */
-        background-color: white;
+        background-color: @cryptpad_color_light_grey;
-        box-shadow: 2px 2px 10px #000;
+        border-radius: 0px;
-        font-weight: bold;
+        // box-shadow: 2px 2px 10px #000;
+        // font-weight: bold;
         color: #333;
         overflow-wrap: break-word;
         [x-circle] {
             background-color: unset;
         }
     }
+    .tippy-popper {
+        @arrow-color:@cryptpad_color_light_grey;
+        &[x-placement^='top'] .tippy-arrow {
+          border-top-color: @arrow-color;
+        }
+        &[x-placement^='bottom'] .tippy-arrow {
+          border-bottom-color: @arrow-color;
+        }
+        &[x-placement^='left'] .tippy-arrow {
+          border-left-color: @arrow-color;
+        }
+        &[x-placement^='right'] .tippy-arrow {
+          border-right-color: @arrow-color;
+        }
+    }
 }

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "cryptpad",
-  "version": "3.0.1",
+  "version": "3.4.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -103,7 +103,7 @@
       "resolved": "https://registry.npmjs.org/chainpad-crypto/-/chainpad-crypto-0.2.2.tgz",
       "integrity": "sha512-7MJ7qPz/C4sJPsDhPMjdSRmliOCPoRO0XM1vUomcgXA6HINlW+if9AAt/H4q154nYhZ/b57njgC6cWgd/RDidg==",
       "requires": {
-        "tweetnacl": "git://github.com/dchest/tweetnacl-js.git#v0.12.2"
+        "tweetnacl": "git://github.com/dchest/tweetnacl-js.git#8a21381d696acdc4e99c9f706f1ad23285795f79"
       },
       "dependencies": {
         "tweetnacl": {

www/common/common-ui-elements.js

@@ -2288,13 +2288,14 @@ define([
                 prettyUsage = Messages._getKey('formattedMB', [usage]);
                 prettyLimit = Messages._getKey('formattedMB', [limit]);
             }
-
+            
             if (quota < 0.8) { $usage.addClass('cp-limit-usage-normal'); }
             else if (quota < 1) { $usage.addClass('cp-limit-usage-warning'); }
             else { $usage.addClass('cp-limit-usage-above'); }
             var $text = $('<span>', {'class': 'cp-limit-usage-text'});
-            $text.text(usage + ' / ' + prettyLimit);
+            $text.html(Messages._getKey('storageStatus', [prettyUsage, prettyLimit]));
-            $limit.append($usage).append($text);
+            $container.prepend($text);
+            $limit.append($usage);
         };
 
         var updateUsage = Util.notAgainForAnother(function () {

www/common/drive-ui.js

@@ -1841,7 +1841,9 @@ define([
             var $name = $('<span>', {'class': 'cp-app-drive-element-name'}).text(name);
             $element.append($name);
             $element.append($state);
-            $element.attr('title', name);
+            if (getViewMode() === 'grid') {
+                $element.attr('title', name);
+            }
 
             // display the thumbnail
             // if the thumbnail has already been displayed once, do not reload it, keep the same url
@@ -2536,7 +2538,6 @@ define([
 
             // Custom style:
             $block.find('button').addClass('cp-app-drive-toolbar-new');
-            $block.find('button').attr('title', Messages.fm_newButtonTitle);
 
             addNewPadHandlers($block, isInRoot);
 
@@ -2843,7 +2844,6 @@ define([
             }).prepend($addIcon.clone()).appendTo($list);
             $element.append($('<span>', {'class': 'cp-app-drive-element-name'})
                 .text(Messages.fm_newFile));
-            $element.attr('title', Messages.fm_newFile);
             $element.click(function () {
                 var $modal = UIElements.createModal({
                     id: 'cp-app-drive-new-ghost-dialog',

www/common/translations/messages.json

@@ -73,6 +73,7 @@
     "upgrade": "Upgrade",
     "upgradeTitle": "Upgrade your account to increase the storage limit",
     "upgradeAccount": "Upgrade account",
+    "storageStatus": "Storage:<br /><b>{0}</b> used out of <b>{1}</b>",
     "MB": "MB",
     "GB": "GB",
     "KB": "KB",
@@ -380,7 +381,7 @@
     "fm_tags_used": "Number of uses",
     "fm_restoreDrive": "Resetting your drive to an earlier state. For best results, avoid making changes to your drive until this process is complete.",
     "fm_moveNestedSF": "You can't place one shared folder within another. The folder {0} was not moved.",
-    "fm_passwordProtected": "This document is protected with a password",
+    "fm_passwordProtected": "Password protected",
     "fc_newfolder": "New folder",
     "fc_newsharedfolder": "New shared folder",
     "fc_rename": "Rename",
@@ -1027,7 +1028,7 @@
     "crowdfunding_popup_never": "Don't ask me again",
     "survey": "CryptPad survey",
     "markdown_toc": "Contents",
-    "fm_expirablePad": "This pad will expire on {0}",
+    "fm_expirablePad": "Expires: {0}",
     "admin_authError": "Only administrators can access this page",
     "admin_cat_general": "General",
     "admin_cat_stats": "Statistics",

www/drive/inner.js

@@ -188,7 +188,6 @@ define([
                 common.createUsageBar(null, function (err, $limitContainer) {
                     if (err) { return void DriveUI.logError(err); }
                     APP.$limit = $limitContainer;
-                    $limitContainer.attr('title', Messages.drive_quota);
                 }, true);
             }