Add the usage bar in the settings page
This commit is contained in:
@@ -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";
|
||||
|
||||
@@ -547,7 +547,7 @@ span.fa-folder-open {
|
||||
}
|
||||
#driveToolbar #contextButtonsContainer {
|
||||
float: right;
|
||||
margin: 5px;
|
||||
margin: 2px;
|
||||
}
|
||||
#driveToolbar #contextButtonsContainer button {
|
||||
vertical-align: top;
|
||||
|
||||
@@ -617,7 +617,7 @@ span {
|
||||
}
|
||||
#contextButtonsContainer {
|
||||
float: right;
|
||||
margin: 5px;
|
||||
margin: 2px;
|
||||
button {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
@@ -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 */
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user