Display the storage limit in the drive

This commit is contained in:
yflory 2017-05-02 17:14:53 +02:00
parent 1d3b8188b3
commit ef89451a83
9 changed files with 179 additions and 20 deletions

View File

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

View File

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

View File

@ -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";

View File

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

View File

@ -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);

View File

@ -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
});
};

View File

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

View File

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

View File

@ -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) {