Make automatic pad storage configurable

This commit is contained in:
yflory 2018-08-28 11:42:48 +02:00
parent e8a5244362
commit 9ebb598467
13 changed files with 288 additions and 82 deletions

View File

@ -9,7 +9,7 @@ define([
var Pages = {};
var urlArgs = Config.requireConf.urlArgs;
var setHTML = function (e, html) {
var setHTML = Pages.setHTML = function (e, html) {
e.innerHTML = html;
return e;
};
@ -712,11 +712,15 @@ define([
$(input).change(function () { $(mark).focus(); });
return h('label.cp-radio', labelOpts, [
var radio = h('label', labelOpts, [
input,
mark,
label
]);
$(radio).addClass('cp-radio');
return radio;
};
Pages['/user/'] = Pages['/user/index.html'] = function () {

View File

@ -49,6 +49,12 @@
background-color: @colortheme_checkmark-back2;
border-color: @colortheme_checkmark-back2;
}
&:disabled ~ .cp-checkmark-mark {
background-color: @colortheme_checkmark-disabled;
}
&:disabled ~ .cp-checkmark-label {
color: @colortheme_checkmark-disabled;
}
}
}
&:hover .cp-checkmark-mark {
@ -64,6 +70,12 @@
display: block;
}
}
&:disabled ~ .cp-checkmark-mark {
background-color: @colortheme_checkmark-disabled;
}
&:disabled ~ .cp-checkmark-label {
color: @colortheme_checkmark-disabled;
}
}
.cp-checkmark-label {
@ -128,6 +140,12 @@
&:checked ~ .cp-radio-mark {
background-color: @colortheme_checkmark-back2;
}
&:disabled ~ .cp-checkmark-mark {
background-color: @colortheme_checkmark-disabled;
}
&:disabled ~ .cp-checkmark-label {
color: @colortheme_checkmark-disabled;
}
}
}
&:hover .cp-radio-mark {
@ -143,6 +161,12 @@
display: block;
}
}
&:disabled ~ .cp-checkmark-mark {
background-color: @colortheme_checkmark-disabled;
}
&:disabled ~ .cp-checkmark-label {
color: @colortheme_checkmark-disabled;
}
}
.cp-checkmark-label {

View File

@ -143,3 +143,4 @@
@colortheme_checkmark-col1: @colortheme_form-color;
@colortheme_checkmark-back2: @colortheme_form-bg-alt;
@colortheme_checkmark-col2: @colortheme_form-color-alt;
@colortheme_checkmark-disabled: #AAA;

View File

@ -6,6 +6,7 @@
& {
@corner-button-ok: #2c9b00;
@corner-button-cancel: #990000;
@corner-link: #ffff7a;
@keyframes appear {
0% {
@ -15,6 +16,14 @@
transform: scale(1.0);
}
}
@keyframes minimize {
0% {
transform: scale(1.0);
}
100% {
transform: scale(0.1);
}
}
.cp-corner-container {
position: absolute;
@ -28,18 +37,51 @@
background-color: @colortheme_logo-1;
color: @colortheme_base;
z-index: 999;
scale: 0.1;
transform-origin: bottom right;
animation: appear 0.8s ease-in-out;
box-shadow: 0 0 10px 0 @colortheme_logo-1;
//transform: scale(0.1);
//transform: scale(1);
.cp-corner-filler {
float: left;
clear: left;
height: 21px;
}
.cp-corner-text {
.cp-corner-minimize, .cp-corner-maximize {
position: absolute;
height: 15px;
width: 20px;
top: 0;
right: 0;
font-size: 12px;
text-align: left;
cursor: pointer;
line-height: 15px;
display: none;
&:hover {
color: darken(@colortheme_base, 15%);
}
}
.cp-corner-minimize {
display: inline;
}
&.cp-minimized {
transition: transform 0.8s ease-in-out;
transform: scale(0.1);
animation: none;
.cp-corner-text, .cp-corner-actions, .cp-corner-footer {
display: none;
}
.cp-corner-maximize {
display: inline;
font-size: 130px;
width: 180px;
height: 200px;
line-height: 200px;
}
}
.cp-corner-actions {
min-height: 30px;
margin: 15px auto;
@ -48,6 +90,12 @@
.cp-corner-footer {
font-style: italic;
font-size: 0.8em;
a {
color: @corner-link;
&:hover {
color: darken(@corner-link, 20%);
}
}
}
button {

View File

@ -565,6 +565,14 @@ define(function () {
out.settings_importConfirm = "Are you sure you want to import recent pads from this browser to your user account's CryptDrive?";
out.settings_importDone = "Import completed";
out.settings_autostoreTitle = "Pad storage in CryptDrive";
out.settings_autostoreHint = "<b>Automatic</b> pad storage results in all the pads you visit being stored in your CryptDrive.<br>" +
"<b>Manual (always ask)</b> results in the pads not being stored but a reminder will appear to ask you if you want to store them in CryptDrive.<br>" +
"<b>Manual (never ask)</b> results in the pads not being stored and option to store them will be available but in a hidden way.";
out.settings_autostoreYes = "Automatic";
out.settings_autostoreNo = "Manual (never ask)";
out.settings_autostoreMaybe = "Manual (always ask)";
out.settings_userFeedbackTitle = "Feedback";
out.settings_userFeedbackHint1 = "CryptPad provides some very basic feedback to the server, to let us know how to improve your experience. ";
out.settings_userFeedbackHint2 = "Your pad's content will never be shared with the server.";
@ -1227,10 +1235,13 @@ define(function () {
out.sharedFolders_share = "Share this URL with other registered users to give them access to the shared folder. Once they open this URL, the shared folder will be added to the root directory of their CryptDrive.";
// Manual pad storage popup
out.manual_notstored = "This pad is not stored in your drive. Do you want to store it now?"; // XXX
out.manual_settings = "You can enable automatic pad storage in your Settings page!"; // XXX
out.manual_store = "Store";
out.manual_hide = "Don't store";
out.autostore_notstored = "This pad is not in your CryptDrive. Do you want to store it now?"; // XXX
out.autostore_settings = "You can enable automatic pad storage in your <a href=\"/settings/\">Settings</a> page!"; // XXX
out.autostore_store = "Store";
out.autostore_hide = "Don't store";
out.autostore_error = "Unexpected error: we were unable to store this pad, please try again.";
out.autostore_saved = "The pad was successfully stored in your CryptDrive!";
out.autostore_forceSave = "Store the file in CryptDrive"; // File upload modal
return out;
});

View File

@ -879,9 +879,12 @@ define([
UI.createRadio = Pages.createRadio;
UI.cornerPopup = function (text, actions, footer) {
// XXX create "minimize" icon
UI.cornerPopup = function (text, actions, footer, startHidden) {
var minimize = h('div.cp-corner-minimize.fa.fa-window-minimize');
var maximize = h('div.cp-corner-maximize.fa.fa-window-maximize');
var popup = h('div.cp-corner-container', [
minimize,
maximize,
h('div.cp-corner-filler', { style: "width:130px;" }),
h('div.cp-corner-filler', { style: "width:90px;" }),
h('div.cp-corner-filler', { style: "width:60px;" }),
@ -889,9 +892,20 @@ define([
h('div.cp-corner-filler', { style: "width:20px;" }),
h('div.cp-corner-text', text),
h('div.cp-corner-actions', actions),
h('div.cp-corner-footer', footer)
Pages.setHTML(h('div.cp-corner-footer'), footer)
]);
$(minimize).click(function () {
$(popup).addClass('cp-minimized');
});
$(maximize).click(function () {
$(popup).removeClass('cp-minimized');
});
if (startHidden) {
$(popup).addClass('cp-minimized');
}
var hide = function () {
$(popup).hide();
};
@ -905,6 +919,7 @@ define([
$('body').append(popup);
return {
popup: popup,
hide: hide,
show: show,
delete: deletePopup

View File

@ -2309,22 +2309,27 @@ define([
};
var storePopupState = false;
UIElements.displayStorePadPopup = function (common) {
UIElements.displayStorePadPopup = function (common, data) {
if (storePopupState) { return; }
storePopupState = true;
var text = Messages.manual_notstored;
var footer = Messages.manual_settings;
var text = Messages.autostore_notstored;
var footer = Messages.autostore_settings;
var hide = h('button.cp-corner-cancel', Messages.manual_hide);
var store = h('button.cp-corner-primary', Messages.manual_store);
var hide = h('button.cp-corner-cancel', Messages.autostore_hide);
var store = h('button.cp-corner-primary', Messages.autostore_store);
var actions = h('div', [
store,
hide,
]);
console.log(text, footer);
var modal = UI.cornerPopup(text, actions, footer);
var initialHide = data && data.autoStore && data.autoStore === -1;
var modal = UI.cornerPopup(text, actions, footer, initialHide);
$(modal.popup).find('.cp-corner-footer a').click(function (e) {
e.preventDefault();
common.openURL('/settings/');
});
$(hide).click(function () {
modal.delete();
@ -2334,9 +2339,9 @@ define([
common.getSframeChannel().query("Q_AUTOSTORE_STORE", null, function (err, obj) {
if (err || (obj && obj.error)) {
console.error(err || obj.error);
return void UI.warn("Error"); // XXX
return void UI.warn(Messages.autostore_error);
}
UI.log("Saved"); // XXX
UI.log(Messages.autostore_saved);
});
});

View File

@ -767,12 +767,11 @@ define([
if (!contains) {
var autoStore = Util.find(store.proxy, ['settings', 'general', 'autostore']);
if (autoStore !== 1 && !data.forceSave && !data.path) {
// XXX
// send event to inner to display the corner popup
postMessage(clientId, "AUTOSTORE_DISPLAY_POPUP", {
autoStore: autoStore
});
return void cb({error: "EAUTH"});
return void cb();
} else {
var roHref;
if (h.mode === "view") {

View File

@ -17,6 +17,7 @@ define([
var path = file.path;
var password = file.password;
var forceSave = file.forceSave;
var hash, secret, key, id, href;
var getNewHash = function () {
@ -94,7 +95,7 @@ define([
password: password,
channel: id,
owners: metadata.owners,
// XXX FORCESAVE ??
forceSave: forceSave
};
common.setPadTitle(data, function (err) {
if (err) { return void console.error(err); }

View File

@ -233,6 +233,13 @@ define([
return q;
};
var privateData = common.getMetadataMgr().getPrivateData();
var autoStore = Util.find(privateData, ['settings', 'general', 'autostore']) || 0;
var manualStore = autoStore === 1 ? undefined :
UI.createCheckbox('cp-upload-store', Messages.autostore_forceSave, true, {
input: { disabled: true }
});
// Ask for name, password and owner
var content = h('div', [
h('h4', Messages.upload_modal_title),
@ -247,8 +254,18 @@ define([
UI.createCheckbox('cp-upload-owned', Messages.upload_modal_owner, true),
createHelper('/faq.html#keywords-owned', Messages.creation_owned1)
]),
manualStore
]);
$(content).find('#cp-upload-owned').on('change', function () {
var val = $(content).find('#cp-upload-owned').is(':checked');
if (val) {
$(content).find('#cp-upload-store').prop('checked', true).prop('disabled', true);
} else {
$(content).find('#cp-upload-store').prop('disabled', false);
}
});
UI.confirm(content, function (yes) {
if (!yes) { return void cb(); }
@ -256,6 +273,7 @@ define([
var newName = $(content).find('#cp-upload-name').val();
var password = $(content).find('#cp-upload-password').val() || undefined;
var owned = $(content).find('#cp-upload-owned').is(':checked');
var forceSave = owned || $(content).find('#cp-upload-store').is(':checked');
// Add extension to the name if needed
if (!newName || !newName.trim()) { newName = file.name; }
@ -266,7 +284,8 @@ define([
cb({
name: newName,
password: password,
owned: owned
owned: owned,
forceSave: forceSave
});
});
};
@ -284,6 +303,7 @@ define([
var name = file.name;
var password;
var owned = true;
var forceSave;
var finish = function (abort) {
if (!abort) {
var metadata = {
@ -296,6 +316,7 @@ define([
metadata: metadata,
password: password,
owned: owned,
forceSave: forceSave,
dropEvent: e
});
}
@ -316,6 +337,7 @@ define([
name = obj.name;
password = obj.password;
owned = obj.owned;
forceSave = obj.forceSave;
finish();
});
};

View File

@ -452,8 +452,8 @@ define([
UI.errorLoadingScreen($err, true, true);
});
ctx.sframeChan.on('EV_AUTOSTORE_DISPLAY_POPUP', function () {
UIElements.displayStorePadPopup(funcs);
ctx.sframeChan.on('EV_AUTOSTORE_DISPLAY_POPUP', function (data) {
UIElements.displayStorePadPopup(funcs, data);
});
ctx.metadataMgr.onReady(waitFor());

View File

@ -52,6 +52,16 @@
width: @sidebar_button-width;
}
}
.cp-settings-autostore-radio {
display: flex;
align-items: center;
flex-wrap: wrap;
label {
margin-right: 40px;
}
}
.cp-settings-change-password {
[type="password"], [type="text"] {
width: @sidebar_button-width;

View File

@ -47,8 +47,7 @@ define([
'cp-settings-displayname',
'cp-settings-language-selector',
'cp-settings-logout-everywhere',
'cp-settings-resettips',
'cp-settings-thumbnails',
'cp-settings-autostore',
'cp-settings-userfeedback',
'cp-settings-change-password',
'cp-settings-delete'
@ -60,6 +59,8 @@ define([
'cp-settings-creation-template'
],
'drive': [
'cp-settings-resettips',
'cp-settings-thumbnails',
'cp-settings-drive-backup',
'cp-settings-drive-import-local',
'cp-settings-drive-reset'
@ -208,71 +209,56 @@ define([
return $div;
};
create['resettips'] = function () {
var $div = $('<div>', {'class': 'cp-settings-resettips cp-sidebarlayout-element'});
$('<label>').text(Messages.settings_resetTips).appendTo($div);
create['autostore'] = function () {
var $div = $('<div>', { 'class': 'cp-settings-autostore cp-sidebarlayout-element'});
$('<span>', {'class': 'label'}).text(Messages.settings_autostoreTitle).appendTo($div);
$('<span>', {'class': 'cp-sidebarlayout-description'})
.text(Messages.settings_resetTipsButton).appendTo($div);
var $button = $('<button>', {'id': 'cp-settings-resettips', 'class': 'btn btn-primary'})
.text(Messages.settings_resetTipsAction).appendTo($div);
var localStore = window.cryptpadStore;
$button.click(function () {
Object.keys(localStore).forEach(function (k) {
if(k.slice(0, 9) === "hide-info") {
localStore.put(k, undefined);
}
});
UI.alert(Messages.settings_resetTipsDone);
});
return $div;
};
create['thumbnails'] = function () {
var $div = $('<div>', {'class': 'cp-settings-thumbnails cp-sidebarlayout-element'});
$('<label>').text(Messages.settings_thumbnails).appendTo($div);
// Disable
$('<span>', {'class': 'cp-sidebarlayout-description'})
.text(Messages.settings_disableThumbnailsDescription).appendTo($div);
.append(Messages.settings_autostoreHint).appendTo($div);
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
var $cbox = $(UI.createCheckbox('disableThumbnails',
Messages.settings_disableThumbnailsAction,
false, { label: {class: 'noTitle'} }));
var $checkbox = $cbox.find('input').on('change', function () {
var opt1 = UI.createRadio('cp-settings-autostore', 'cp-settings-autostore-no',
Messages.settings_autostoreNo, false, {
input: { value: -1 },
label: { class: 'noTitle' }
});
var opt2 = UI.createRadio('cp-settings-autostore', 'cp-settings-autostore-maybe',
Messages.settings_autostoreMaybe, true, {
input: { value: 0 },
label: { class: 'noTitle' }
});
var opt3 = UI.createRadio('cp-settings-autostore', 'cp-settings-autostore-yes',
Messages.settings_autostoreYes, false, {
input: { value: 1 },
label: { class: 'noTitle' }
});
var $div2 = $(h('div.cp-settings-autostore-radio', [
opt1,
opt2,
opt3
])).appendTo($div);
$div.find('input[type="radio"]').on('change', function () {
$spinner.show();
$ok.hide();
var val = $checkbox.is(':checked') || false;
common.setAttribute(['general', 'disableThumbnails'], val, function () {
var val = $('input:radio[name="cp-settings-autostore"]:checked').val();
val = Number(val) || 0;
common.setAttribute(['general', 'autostore'], val, function () {
$spinner.hide();
$ok.show();
});
});
$cbox.appendTo($div);
$ok.hide().appendTo($div2);
$spinner.hide().appendTo($div2);
$ok.hide().appendTo($cbox);
$spinner.hide().appendTo($cbox);
common.getAttribute(['general', 'disableThumbnails'], function (e, val) {
$checkbox[0].checked = typeof(val) === "undefined" || val;
});
// Reset
$('<span>', {'class': 'cp-sidebarlayout-description'})
.text(Messages.settings_resetThumbnailsDescription).appendTo($div);
var $button = $('<button>', {'id': 'resetThumbnails', 'class': 'btn btn-primary'})
.text(Messages.settings_resetThumbnailsAction).appendTo($div);
$button.click(function () {
sframeChan.query("Q_THUMBNAIL_CLEAR", null, function (err) {
if (err) { return void console.error("Cannot clear localForage"); }
UI.alert(Messages.settings_resetThumbnailsDone);
});
common.getAttribute(['general', 'autostore'], function (err, val) {
if (val === 1) { return void $('#cp-settings-autostore-yes').prop('checked', true); }
if (val === -1) { return void $('#cp-settings-autostore-no').prop('checked', true); }
$('#cp-settings-autostore-maybe').prop('checked', true);
});
return $div;
@ -759,6 +745,76 @@ define([
// Drive settings
create['resettips'] = function () {
var $div = $('<div>', {'class': 'cp-settings-resettips cp-sidebarlayout-element'});
$('<label>').text(Messages.settings_resetTips).appendTo($div);
$('<span>', {'class': 'cp-sidebarlayout-description'})
.text(Messages.settings_resetTipsButton).appendTo($div);
var $button = $('<button>', {'id': 'cp-settings-resettips', 'class': 'btn btn-primary'})
.text(Messages.settings_resetTipsAction).appendTo($div);
var localStore = window.cryptpadStore;
$button.click(function () {
Object.keys(localStore).forEach(function (k) {
if(k.slice(0, 9) === "hide-info") {
localStore.put(k, undefined);
}
});
UI.alert(Messages.settings_resetTipsDone);
});
return $div;
};
create['thumbnails'] = function () {
var $div = $('<div>', {'class': 'cp-settings-thumbnails cp-sidebarlayout-element'});
$('<label>').text(Messages.settings_thumbnails).appendTo($div);
// Disable
$('<span>', {'class': 'cp-sidebarlayout-description'})
.text(Messages.settings_disableThumbnailsDescription).appendTo($div);
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
var $cbox = $(UI.createCheckbox('disableThumbnails',
Messages.settings_disableThumbnailsAction,
false, { label: {class: 'noTitle'} }));
var $checkbox = $cbox.find('input').on('change', function () {
$spinner.show();
$ok.hide();
var val = $checkbox.is(':checked') || false;
common.setAttribute(['general', 'disableThumbnails'], val, function () {
$spinner.hide();
$ok.show();
});
});
$cbox.appendTo($div);
$ok.hide().appendTo($cbox);
$spinner.hide().appendTo($cbox);
common.getAttribute(['general', 'disableThumbnails'], function (e, val) {
$checkbox[0].checked = typeof(val) === "undefined" || val;
});
// Reset
$('<span>', {'class': 'cp-sidebarlayout-description'})
.text(Messages.settings_resetThumbnailsDescription).appendTo($div);
var $button = $('<button>', {'id': 'resetThumbnails', 'class': 'btn btn-primary'})
.text(Messages.settings_resetThumbnailsAction).appendTo($div);
$button.click(function () {
sframeChan.query("Q_THUMBNAIL_CLEAR", null, function (err) {
if (err) { return void console.error("Cannot clear localForage"); }
UI.alert(Messages.settings_resetThumbnailsDone);
});
});
return $div;
};
create['drive-backup'] = function () {
var $div = $('<div>', {'class': 'cp-settings-drive-backup cp-sidebarlayout-element'});
@ -1052,9 +1108,19 @@ define([
// Content
var $rightside = APP.$rightside;
for (var f in create) {
/*for (var f in create) {
if (typeof create[f] !== "function") { continue; }
$rightside.append(create[f]());
}*/
var addItem = function (cssClass) {
var item = cssClass.slice(12); // remove 'cp-settings-'
if (typeof (create[item]) === "function") {
$rightside.append(create[item]());
}
};
for (var cat in categories) {
if (!Array.isArray(categories[cat])) { continue; }
categories[cat].forEach(addItem);
}
// TODO RPC