infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Add the usage bar in the settings page

pull/1/head
yflory 2017-05-15 18:16:22 +02:00
parent 716245f864
commit dc2cdb7c08
9 changed files with 147 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
customize.dist/main.css
View File

@ -577,7 +577,7 @@ html.cp,
font-size: .875em;
background-color: #fafafa;
color: #555;
font-family: Georgia,Cambria,serif;
font-family: Ubuntu,Georgia,Cambria,serif;
height: 100%;
}
.cp {
@ -1090,6 +1090,48 @@ html.cp,
color: #FA5858;
cursor: pointer !important;
}
/* Pin limit */
.limit-container .cryptpad-limit-bar {
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;
vertical-align: middle;
}
.limit-container .cryptpad-limit-bar .usage {
height: 24px;
display: inline-block;
background: blue;
position: absolute;
left: 0;
z-index: 1;
}
.limit-container .cryptpad-limit-bar .usage.normal {
background: #5cb85c;
}
.limit-container .cryptpad-limit-bar .usage.warning {
background: orange;
}
.limit-container .cryptpad-limit-bar .usage.above {
background: red;
}
.limit-container .cryptpad-limit-bar .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;
}
.limit-container .upgrade {
margin-left: 10px;
}
#cors-store {
display: none;
}

49
customize.dist/src/less/cryptpad.less
View File

@ -8,12 +8,14 @@
@import "./topbar.less";
@import "./footer.less";
@toolbar-green: #5cb85c;
html.cp, .cp body {
font-size: .875em;
background-color: @page-white; //@base;
color: @fore;
font-family: Georgia,Cambria,serif;
font-family: Ubuntu,Georgia,Cambria,serif;
height: 100%;
}
@ -536,6 +538,51 @@ noscript {
}
}
/* Pin limit */
.limit-container {
.cryptpad-limit-bar {
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;
vertical-align: middle;
.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;
}
}
.upgrade {
margin-left: 10px;
}
}
// hack for our cross-origin iframe
#cors-store {
display: none;

37
customize.dist/src/less/toolbar.less
View File

@ -105,43 +105,6 @@
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: border-box;
height: 26px;

37
customize.dist/toolbar.css
View File

@ -183,43 +183,6 @@
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: border-box;
height: 26px;

44
www/common/cryptpad-common.js
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";

2
www/drive/file.css
View File

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

2
www/drive/file.less
View File

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

43
www/drive/main.js
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 */

27
www/settings/main.js
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);