Add the usage bar in the settings page

This commit is contained in:
yflory
2017-05-15 18:16:22 +02:00
parent 716245f864
commit dc2cdb7c08
9 changed files with 147 additions and 138 deletions

View File

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

View File

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

View File

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

View File

@@ -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 */

View File

@@ -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)]));
});
})
.appendTo($div);
Cryptpad.createUsageBar(function (err, $bar) {
$div.find('.limit-container').remove();
$bar.find('.upgrade').addClass('btn btn-success');
$div.append($bar);
});
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);