From ef89451a831b8c5cc94b1b29612e1277aff0c356 Mon Sep 17 00:00:00 2001 From: yflory Date: Tue, 2 May 2017 17:14:53 +0200 Subject: [PATCH] Display the storage limit in the drive --- customize.dist/src/less/toolbar.less | 44 ++++++++++++++ customize.dist/toolbar.css | 44 ++++++++++++++ customize.dist/translations/messages.fr.js | 4 ++ customize.dist/translations/messages.js | 6 ++ www/common/cryptpad-common.js | 9 +-- www/common/userObject.js | 17 +++--- www/drive/file.css | 2 +- www/drive/file.less | 2 +- www/drive/main.js | 71 ++++++++++++++++++++-- 9 files changed, 179 insertions(+), 20 deletions(-) diff --git a/customize.dist/src/less/toolbar.less b/customize.dist/src/less/toolbar.less index 055bb14ed..00c514269 100644 --- a/customize.dist/src/less/toolbar.less +++ b/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; diff --git a/customize.dist/toolbar.css b/customize.dist/toolbar.css index 37cdd8501..1934d11c4 100644 --- a/customize.dist/toolbar.css +++ b/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; diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js index 030817836..49da1acda 100644 --- a/customize.dist/translations/messages.fr.js +++ b/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"; diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js index 0c4c74a95..b0b7a9304 100644 --- a/customize.dist/translations/messages.js +++ b/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.
"+ "This pad is not stored in your CryptDrive."; + out.pinLimitDrive = "You've reached your storage limit.
" + + "You can't create new pads."; out.importButtonTitle = 'Import a pad from a local file'; diff --git a/www/common/cryptpad-common.js b/www/common/cryptpad-common.js index 6d51c999c..4c1e5c970 100644 --- a/www/common/cryptpad-common.js +++ b/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); diff --git a/www/common/userObject.js b/www/common/userObject.js index f3638c74e..5d8232d3f 100644 --- a/www/common/userObject.js +++ b/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() - }); - - var newPath = filePath.slice(); - newPath.push(fileName); - cb({ - newPath: newPath + }, function (err) { + if (err) { return void cb(err); } + parentEl[fileName] = href; + var newPath = filePath.slice(); + newPath.push(fileName); + 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 }); }; diff --git a/www/drive/file.css b/www/drive/file.css index 38b314d56..29101fe33 100644 --- a/www/drive/file.css +++ b/www/drive/file.css @@ -66,7 +66,7 @@ li { .contextMenu { display: none; position: absolute; - z-index: 50; + z-index: 500; } .contextMenu li { padding: 0; diff --git a/www/drive/file.less b/www/drive/file.less index 03bc4750f..8a22a1884 100644 --- a/www/drive/file.less +++ b/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; diff --git a/www/drive/main.js b/www/drive/main.js index 6702cf895..4d5e34091 100644 --- a/www/drive/main.js +++ b/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 = $('', {'class': 'cryptpad-drive-limit'}).appendTo($leftside); + var quota = usage/limit; + var width = Math.floor(Math.min(quota, 1)*$limit.width()); + var $usage = $('', {'class': 'usage'}).css('width', width+'px'); + + if (quota >= 0.8) { + var $upgrade = $('