blitzwing/cryptpad
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add a settings category for the pad creation screen

Browse source
This commit is contained in:
yflory 2018-01-11 16:02:05 +01:00
parent 8c9490868b
commit ef480fea79
9 changed files with 622 additions and 240 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
customize.dist/src/less2/include/sidebar-layout.less
View file

@ -48,6 +48,9 @@
display: block;
color: @description-color;
margin-bottom: 5px;
p {
margin-bottom: 0;
}
}
margin-bottom: 20px;
}

9
customize.dist/translations/messages.fr.js
View file

@ -487,6 +487,7 @@ define(function () {
out.settings_cat_drive = "CryptDrive";
out.settings_cat_code = "Code";
out.settings_cat_pad = "Documents texte";
out.settings_cat_creation = "Nouveau pad";
out.settings_title = "Préférences";
out.settings_save = "Sauver";
@ -547,6 +548,14 @@ define(function () {
out.settings_padWidthHint = "L'éditeur de documents texte occupe toute la largeur de l'écran disponible par défaut, ce qui peut rendre le texte difficile à lire. Vous pouvez ici réduire la largeur de l'éditeur.";
out.settings_padWidthLabel = "Réduire la largeur de l'éditeur";
out.settings_creationSkip = "Passer l'écran de création de pad";
out.settings_creationSkipHint = "L'écran de création de pad offre de nouvelles options pour créer un pad, permettant d'avoir plus de contrôle et de sécurité concernant vos données. Toutefois, il peut ralentir votre travail en ajoutant une étape supplémentaire et donc, ici, vous avez la possibilité de choisir de passer cet écran et d'utiliser les paramètres par défaut choisis au-dessus.";
out.settings_creationSkipTrue = "Passer";
out.settings_creationSkipFalse = "Afficher";
out.settings_templateSkip = "Passer la fenêtre de choix d'un modèle";
out.settings_templateSkipHint = "Quand vous créez un nouveau pad, et si vous possédez des modèles pour ce type de pad, une fenêtre peut apparaître pour demander si vous souhaitez importer un modèle. Ici vous pouvez choisir de ne jamais montrer cette fenêtre et donc de ne jamais utiliser de modèle.";
out.upload_title = "Hébergement de fichiers";
out.upload_rename = "Souhaitez-vous renommer <b>{0}</b> avant son stockage en ligne ?<br>" +
"<em>L'extension du fichier ({1}) sera ajoutée automatiquement. "+

11
customize.dist/translations/messages.js
View file

@ -493,6 +493,7 @@ define(function () {
out.settings_cat_drive = "CryptDrive";
out.settings_cat_code = "Code";
out.settings_cat_pad = "Rich text";
out.settings_cat_creation = "New pad";
out.settings_title = "Settings";
out.settings_save = "Save";
@ -553,6 +554,14 @@ define(function () {
out.settings_padWidthHint = "Rich text pads use by default the maximum available width on your screen and it can be difficult to read. You can reduce the editor's width here.";
out.settings_padWidthLabel = "Reduce the editor's width";
out.settings_creationSkip = "Skip the pad creation screen";
out.settings_creationSkipHint = "The pad creation screen offers new options to create a pad, providing you more control and security over your data. However, it may slow down your workflow by adding one additionnal step so, here, you have the option to skip this screen and use the default settings selected above.";
out.settings_creationSkipTrue = "Skip";
out.settings_creationSkipFalse = "Display";
out.settings_templateSkip = "Skip the template selection modal";
out.settings_templateSkipHint = "When you create a new empty pad, if you have stored templates for this type of pad, a modal appears to ask if you want to use a template. Here you can choose to never show this modal and so to never use a template.";
out.upload_title = "File upload";
out.upload_rename = "Do you want to rename <b>{0}</b> before uploading it to the server?<br>" +
"<em>The file extension ({1}) will be added automatically. "+
@ -819,7 +828,7 @@ define(function () {
out.creation_expireHours = "Hours";
out.creation_expireDays = "Days";
out.creation_expireMonths = "Months";
out.creation_expire1 = "By default, a pad stored by a registered users will never be removed from the server, unless it is requested by its owner.";
out.creation_expire1 = "By default, a pad stored by a registered user will never be removed from the server, unless it is requested by its owner.";
out.creation_expire2 = "If you prefer, you can set a life time to make sure the pad will be permanently deleted from the server and unavailable after the specified date.";
out.creation_createTitle = "Create a pad";
out.creation_createFromTemplate = "From template";

33
www/common/common-ui-elements.js
View file

@ -1317,7 +1317,29 @@ define([
});
};
UIElements.getPadCreationScreen = function (common, cb) {
UIElements.setExpirationValue = function (val, $expire) {
if (val && typeof (val) === "number") {
$expire.find('#cp-creation-expire-true').attr('checked', true);
if (val % (3600 * 24 * 30) === 0) {
$expire.find('#cp-creation-expire-unit').val("month");
$expire.find('#cp-creation-expire-val').val(val / (3600 * 24 * 30));
return;
}
if (val % (3600 * 24) === 0) {
$expire.find('#cp-creation-expire-unit').val("day");
$expire.find('#cp-creation-expire-val').val(val / (3600 * 24));
return;
}
if (val % 3600 === 0) {
$expire.find('#cp-creation-expire-unit').val("hour");
$expire.find('#cp-creation-expire-val').val(val / 3600);
return;
}
// if we're here, it means we don't have a valid value so we should check unlimited
$expire.find('#cp-creation-expire-false').attr('checked', true);
}
};
UIElements.getPadCreationScreen = function (common, cfg, cb) {
if (!common.isLoggedIn()) { return void cb(); }
var sframeChan = common.getSframeChannel();
var metadataMgr = common.getMetadataMgr();
@ -1372,6 +1394,11 @@ define([
]);
$creation.append(owned);
// If set to "open pad" or not set, check "open pad"
if (!cfg.owned && typeof cfg.owned !== "undefined") {
$creation.find('#cp-creation-owned-false').attr('checked', true);
}
// Life time
var expire = h('div.cp-creation-expire', [
h('h2', [
@ -1413,6 +1440,8 @@ define([
]);
$creation.append(expire);
UIElements.setExpirationValue(cfg.expire, $creation);
// Create the pad
var create = function (template) {
// Type of pad
@ -1430,7 +1459,7 @@ define([
expireVal = ($('#cp-creation-expire-val').val() || 0) * unit;
}
sframeChan.query("Q_CREATE_PAD", {
common.createPad({
owned: ownedVal,
expire: expireVal,
template: template

11
www/common/sframe-app-framework.js
View file

@ -300,7 +300,9 @@ define([
}
}
if (newPad && !AppConfig.displayCreationScreen) {
var skipTemp = Util.find(privateDat, ['settings', 'general', 'creation', 'noTemplate']);
var skipCreation = Util.find(privateDat, ['settings', 'general', 'creation', 'skip']);
if (newPad && (!skipTemp && skipCreation)) {
common.openTemplatePicker();
}
};
@ -402,8 +404,11 @@ define([
}).nThen(function (waitFor) {
Test.registerInner(common.getSframeChannel());
if (!AppConfig.displayCreationScreen) { return; }
if (common.getMetadataMgr().getPrivateData().isNewFile) {
common.getPadCreationScreen(waitFor());
var priv = common.getMetadataMgr().getPrivateData();
if (priv.isNewFile) {
var c = (priv.settings.general && priv.settings.general.creation) || {};
if (c.skip) { return void common.createPad(c, waitFor()); }
common.getPadCreationScreen(c, waitFor());
}
}).nThen(function (waitFor) {
cpNfInner = common.startRealtime({

8
www/common/sframe-common.js
View file

@ -165,6 +165,14 @@ define([
};
// Store
funcs.createPad = function (cfg, cb) {
ctx.sframeChan.query("Q_CREATE_PAD", {
owned: cfg.owned,
expire: cfg.expire,
template: cfg.template
}, cb);
};
funcs.sendAnonRpcMsg = function (msg, content, cb) {
ctx.sframeChan.query('Q_ANON_RPC_MESSAGE', {
msg: msg,

2
www/drive/inner.js
View file

@ -2604,7 +2604,6 @@ define([
moveElements(pathsList, [TRASH], false, refresh);
}
else if ($(this).hasClass('cp-app-drive-context-deleteowned')) {
var pathsListD = [];
var msgD = Messages.fm_deleteOwnedPads;
UI.confirm(msgD, function(res) {
$(window).focus();
@ -2716,7 +2715,6 @@ define([
moveElements(pathsList, [TRASH], false, refresh);
}
else if ($(this).hasClass('cp-app-drive-context-deleteowned')) {
var pathsListD = [];
var msgD = Messages.fm_deleteOwnedPads;
UI.confirm(msgD, function(res) {
$(window).focus();

76
www/settings/app-settings.less
View file

@ -5,6 +5,7 @@
@import (once) '../../customize/src/less2/include/alertify.less';
@import (once) '../../customize/src/less2/include/sidebar-layout.less';
@import (once) "../../customize/src/less2/include/limit-bar.less";
@import (once) "../../customize/src/less2/include/creation.less";
.toolbar_main(
@bg-color: @colortheme_settings-bg,
@ -14,6 +15,7 @@
.alertify_main();
.sidebar-layout_main();
.limit-bar_main();
.creation_main();
// body
&.cp-app-settings {
@ -55,7 +57,7 @@
width: @sidebar_button-width;
}
}
.cp-settings-backup-drive {
.cp-settings-drive-backup {
button {
span.fa {
margin-right: 5px;
@ -63,6 +65,78 @@
margin-right: 5px;
}
}
.cp-settings-creation-owned, .cp-settings-creation-expire,
.cp-settings-creation-skip, .cp-settings-creation-template {
input[type="radio"] {
display: none;
&:checked {
& + label {
font-weight: bold;
background-color: lighten(@colortheme_loading-bg, 20%);
cursor: default;
border: 1px solid #c1158e;
color: @colortheme_loading-color;
&:hover {
background-color: lighten(@colortheme_loading-bg, 20%);
}
}
}
}
input[type="radio"] + label {
.tools_unselectable();
display: inline-flex;
align-items: center;
justify-content: center;
width: 200px;
height: 50px;
padding: 5px;
margin: 0 20px;
border: 1px solid black;
cursor: pointer;
&:hover {
background-color: lighten(@colortheme_loading-bg, 10%);
}
}
.fa {
display: none;
margin-left: 50px;
}
}
.cp-settings-creation-skipped {
display: none !important; // we have to override an inline style attribute
}
.cp-settings-creation-expire {
#cp-creation-expire-true {
display: none;
&:checked {
& + label {
height: 100px;
.cp-creation-expire-picker {
display: inline;
}
}
}
}
label[for="cp-creation-expire-true"] {
flex-wrap: wrap;
.cp-creation-expire-picker {
display: none;
}
input {
width: 70px;
}
select {
width: 100px;
}
input, select {
border: none;
height: 30px;
background: @colortheme_loading-bg;
color: @colortheme_loading-color;
border-radius: 3px;
}
}
}
}
}
}

709
www/settings/inner.js
View file

@ -4,9 +4,11 @@ define([
'/bower_components/nthen/index.js',
'/common/sframe-common.js',
'/common/common-interface.js',
'/common/common-ui-elements.js',
'/common/common-util.js',
'/common/common-hash.js',
'/customize/messages.js',
'/common/hyperscript.js',
'/bower_components/file-saver/FileSaver.min.js',
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
@ -18,9 +20,11 @@ define([
nThen,
SFCommon,
UI,
UIElements,
Util,
Hash,
Messages
Messages,
h
)
{
var saveAs = window.saveAs;
@ -41,21 +45,31 @@ define([
'cp-settings-thumbnails',
'cp-settings-userfeedback'
],
'creation': [
'cp-settings-creation-owned',
'cp-settings-creation-expire',
'cp-settings-creation-skip',
'cp-settings-creation-template'
],
'drive': [
'cp-settings-backup-drive',
'cp-settings-import-local-pads',
'cp-settings-reset-drive'
'cp-settings-drive-backup',
'cp-settings-drive-import-local',
'cp-settings-drive-reset'
],
'pad': [
'cp-settings-pad-width',
],
'code': [
'cp-settings-indent-unit',
'cp-settings-indent-type'
'cp-settings-code-indent-unit',
'cp-settings-code-indent-type'
]
};
var createInfoBlock = function () {
var create = {};
// Account settings
create['info-block'] = function () {
var $div = $('<div>', {'class': 'cp-settings-info-block'});
var $account = $('<div>', {'class': 'cp-sidebarlayout-element'}).appendTo($div);
@ -81,7 +95,7 @@ define([
};
// Create the block containing the display name field
var createDisplayNameInput = function () {
create['displayname'] = function () {
var $div = $('<div>', {'class': 'cp-settings-displayname cp-sidebarlayout-element'});
$('<label>', {'for' : 'cp-settings-displayname'}).text(Messages.user_displayName).appendTo($div);
var $inputBlock = $('<div>', {'class': 'cp-sidebarlayout-input-block'}).appendTo($div);
@ -124,111 +138,49 @@ define([
return $div;
};
var createIndentUnitSelector = function () {
var $div = $('<div>', {
'class': 'cp-settings-indent-unit cp-sidebarlayout-element'
});
$('<label>').text(Messages.settings_codeIndentation).appendTo($div);
var $inputBlock = $('<div>', {
'class': 'cp-sidebarlayout-input-block',
}).appendTo($div);
var $input = $('<input>', {
'min': 1,
'max': 8,
type: 'number',
}).on('change', function () {
var val = parseInt($input.val());
if (typeof(val) !== 'number') { return; }
common.setAttribute(['codemirror', 'indentUnit'], val);
}).appendTo($inputBlock);
common.getAttribute(['codemirror', 'indentUnit'], function (e, val) {
if (e) { return void console.error(e); }
if (typeof(val) !== 'number') {
$input.val(2);
} else {
$input.val(val);
}
});
create['language-selector'] = function () {
var $div = $('<div>', {'class': 'cp-settings-language-selector cp-sidebarlayout-element'});
$('<label>').text(Messages.language).appendTo($div);
var $b = common.createLanguageSelector($div);
$b.find('button').addClass('btn btn-secondary');
return $div;
};
var createIndentTypeSelector = function () {
var key = 'indentWithTabs';
var $div = $('<div>', {
'class': 'cp-settings-indent-type cp-sidebarlayout-element'
});
$('<label>').text(Messages.settings_codeUseTabs).appendTo($div);
var $inputBlock = $('<div>', {
'class': 'cp-sidebarlayout-input-block',
}).css('flex-flow', 'column')
.appendTo($div);
var $input = $('<input>', {
type: 'checkbox',
}).on('change', function () {
var val = $input.is(':checked');
if (typeof(val) !== 'boolean') { return; }
common.setAttribute(['codemirror', key], val);
}).appendTo($inputBlock);
/*proxy.on('change', ['settings', 'codemirror', key], function (o, n) {
$input[0].checked = !!n;
});*/
common.getAttribute(['codemirror', key], function (e, val) {
if (e) { return void console.error(e); }
$input[0].checked = !!val;
});
return $div;
};
var createPadWidthSelector = function () {
var $div = $('<div>', {
'class': 'cp-settings-pad-width cp-sidebarlayout-element'
});
$('<span>', {'class': 'label'}).text(Messages.settings_padWidth).appendTo($div);
create['logout-everywhere'] = function () {
if (!common.isLoggedIn()) { return; }
var $div = $('<div>', { 'class': 'cp-settings-logout-everywhere cp-sidebarlayout-element'});
$('<label>', { 'for': 'cp-settings-logout-everywhere'})
.text(Messages.settings_logoutEverywhereTitle).appendTo($div);
$('<span>', {'class': 'cp-sidebarlayout-description'})
.text(Messages.settings_padWidthHint).appendTo($div);
.text(Messages.settings_logoutEverywhere).appendTo($div);
var $button = $('<button>', {
id: 'cp-settings-logout-everywhere',
'class': 'btn btn-primary'
}).text(Messages.settings_logoutEverywhereButton)
.appendTo($div);
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved}).hide().appendTo($div);
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'}).hide().appendTo($div);
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
$button.click(function () {
var $label = $('<label>', { 'for': 'cp-settings-padwidth', 'class': 'noTitle' })
.text(Messages.settings_padWidthLabel);
var $input = $('<input>', {
type: 'checkbox',
id: 'cp-settings-padwidth'
}).on('change', function () {
$spinner.show();
$ok.hide();
var val = $input.is(':checked');
common.setAttribute(['pad', 'width'], val, function () {
$spinner.hide();
$ok.show();
UI.confirm(Messages.settings_logoutEverywhereConfirm, function (yes) {
if (!yes) { return; }
$spinner.show();
$ok.hide();
sframeChan.query('Q_SETTINGS_LOGOUT', null, function () {
$spinner.hide();
$ok.show();
window.setTimeout(function () {
$ok.fadeOut(1500);
}, 2500);
});
});
}).appendTo($div);
$label.appendTo($div);
$ok.hide().appendTo($div);
$spinner.hide().appendTo($div);
common.getAttribute(['pad', 'width'], function (e, val) {
if (e) { return void console.error(e); }
if (val) {
$input.attr('checked', 'checked');
}
});
return $div;
};
var createResetTips = function () {
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'})
@ -249,7 +201,7 @@ define([
return $div;
};
var createThumbnails = function () {
create['thumbnails'] = function () {
var $div = $('<div>', {'class': 'cp-settings-thumbnails cp-sidebarlayout-element'});
$('<label>').text(Messages.settings_thumbnails).appendTo($div);
@ -301,8 +253,286 @@ define([
return $div;
};
var createBackupDrive = function () {
var $div = $('<div>', {'class': 'cp-settings-backup-drive cp-sidebarlayout-element'});
create['userfeedback'] = function () {
var $div = $('<div>', { 'class': 'cp-settings-userfeedback cp-sidebarlayout-element'});
$('<span>', {'class': 'label'}).text(Messages.settings_userFeedbackTitle).appendTo($div);
var $label = $('<label>', { 'for': 'cp-settings-userfeedback', 'class': 'noTitle' })
.text(Messages.settings_userFeedback);
$('<span>', {'class': 'cp-sidebarlayout-description'})
.append(Messages.settings_userFeedbackHint1)
.append(Messages.settings_userFeedbackHint2).appendTo($div);
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
var $checkbox = $('<input>', {
'type': 'checkbox',
id: 'cp-settings-userfeedback'
}).on('change', function () {
$spinner.show();
$ok.hide();
var val = $checkbox.is(':checked') || false;
common.setAttribute(['general', 'allowUserFeedback'], val, function () {
$spinner.hide();
$ok.show();
});
});
$checkbox.appendTo($div);
$label.appendTo($div);
$ok.hide().appendTo($div);
$spinner.hide().appendTo($div);
if (privateData.feedbackAllowed) {
$checkbox[0].checked = true;
}
return $div;
};
// Pad Creation settings
var setHTML = function (e, html) {
e.innerHTML = html;
return e;
};
create['creation-owned'] = function () {
if (!common.isLoggedIn()) { return; }
var owned = h('div.cp-settings-creation-owned.cp-sidebarlayout-element', [
h('label', [
Messages.creation_ownedTitle
]),
setHTML(h('p.cp-sidebarlayout-description'),
Messages.creation_owned1 + '<br>' + Messages.creation_owned2),
h('input#cp-creation-owned-true.cp-creation-owned-value', {
type: 'radio',
name: 'cp-creation-owned',
value: 1,
}),
h('label', { 'for': 'cp-creation-owned-true' }, Messages.creation_ownedTrue),
h('input#cp-creation-owned-false.cp-creation-owned-value', {
type: 'radio',
name: 'cp-creation-owned',
value: 0,
checked: 'checked'
}),
h('label', { 'for': 'cp-creation-owned-false' }, Messages.creation_ownedFalse),
h('span.fa.fa-check', {title: Messages.saved}),
h('span.fa.fa-spinner.fa-pulse'),
]);
var $owned = $(owned);
var $ok = $owned.find('.fa-check');
var $spinner = $owned.find('.fa-spinner');
$owned.find('input').change(function () {
$spinner.show();
$ok.hide();
var val = parseInt($owned.find('[name="cp-creation-owned"]:checked').val());
common.setAttribute(['general', 'creation', 'owned'], val, function (e) {
if (e) { return void console.error(e); }
$spinner.hide();
$ok.show();
});
});
common.getAttribute(['general', 'creation', 'owned'], function (e, val) {
if (val) {
$owned.find('#cp-creation-owned-true').attr('checked', true);
}
});
return $owned;
};
create['creation-expire'] = function () {
if (!common.isLoggedIn()) { return; }
var expire = h('div.cp-settings-creation-expire.cp-sidebarlayout-element', [
h('label', [
Messages.creation_expireTitle
]),
setHTML(h('p.cp-sidebarlayout-description'),
Messages.creation_expire1 + '<br>' + Messages.creation_expire2),
h('input#cp-creation-expire-false.cp-creation-expire-value', {
type: 'radio',
name: 'cp-creation-expire',
value: 0,
checked: 'checked'
}),
h('label', { 'for': 'cp-creation-expire-false' }, Messages.creation_expireFalse),
h('input#cp-creation-expire-true.cp-creation-expire-value', {
type: 'radio',
name: 'cp-creation-expire',
value: 1
}),
h('label', { 'for': 'cp-creation-expire-true' }, [
Messages.creation_expireTrue,
h('span.cp-creation-expire-picker', [
h('input#cp-creation-expire-val', {
type: "number",
min: 1,
max: 100,
value: 3
}),
h('select#cp-creation-expire-unit', [
h('option', { value: 'hour' }, Messages.creation_expireHours),
h('option', { value: 'day' }, Messages.creation_expireDays),
h('option', {
value: 'month',
selected: 'selected'
}, Messages.creation_expireMonths)
])
])
]),
h('span.fa.fa-check', {title: Messages.saved}),
h('span.fa.fa-spinner.fa-pulse'),
]);
var $expire = $(expire);
var $ok = $expire.find('.fa-check');
var $spinner = $expire.find('.fa-spinner');
var getValue = function () {
if(!parseInt($expire.find('[name="cp-creation-expire"]:checked').val())) { return 0; }
var unit = 0;
switch ($expire.find('#cp-creation-expire-unit').val()) {
case "hour" : unit = 3600; break;
case "day" : unit = 3600 * 24; break;
case "month": unit = 3600 * 24 * 30; break;
default: unit = 0;
}
return ($expire.find('#cp-creation-expire-val').val() || 0) * unit;
};
$expire.find('input, select').change(function () {
$spinner.show();
$ok.hide();
common.setAttribute(['general', 'creation', 'expire'], getValue(), function (e) {
if (e) { return void console.error(e); }
$spinner.hide();
$ok.show();
});
});
common.getAttribute(['general', 'creation', 'expire'], function (e, val) {
UIElements.setExpirationValue(val, $expire);
});
return $expire;
};
create['creation-skip'] = function () {
if (!common.isLoggedIn()) { return; }
var skip = h('div.cp-settings-creation-skip.cp-sidebarlayout-element', [
h('label', [
Messages.settings_creationSkip
]),
setHTML(h('p.cp-sidebarlayout-description'), Messages.settings_creationSkipHint),
h('input#cp-creation-skip-true.cp-creation-skip-value', {
type: 'radio',
name: 'cp-creation-skip',
value: 1,
}),
h('label', { 'for': 'cp-creation-skip-true' }, Messages.settings_creationSkipTrue),
h('input#cp-creation-skip-false.cp-creation-skip-value', {
type: 'radio',
name: 'cp-creation-skip',
value: 0,
checked: 'checked'
}),
h('label', { 'for': 'cp-creation-skip-false' }, Messages.settings_creationSkipFalse),
h('span.fa.fa-check', {title: Messages.saved}),
h('span.fa.fa-spinner.fa-pulse'),
]);
var $div = $(skip);
var $ok = $div.find('.fa-check');
var $spinner = $div.find('.fa-spinner');
$div.find('input').change(function () {
$spinner.show();
$ok.hide();
var val = parseInt($div.find('[name="cp-creation-skip"]:checked').val());
// If we don't skip the pad creation screen, we dont' need settings to hide the templates
// modal
if (!val) {
$('.cp-settings-creation-template').addClass('cp-settings-creation-skipped');
} else {
$('.cp-settings-creation-template').removeClass('cp-settings-creation-skipped');
}
common.setAttribute(['general', 'creation', 'skip'], val, function (e) {
if (e) { return void console.error(e); }
$spinner.hide();
$ok.show();
});
});
common.getAttribute(['general', 'creation', 'skip'], function (e, val) {
if (val) {
$div.find('#cp-creation-skip-true').attr('checked', true);
return;
}
// If we don't skip the pad creation screen, we dont' need settings to hide the templates
// modal
$('.cp-settings-creation-template').addClass('cp-settings-creation-skipped');
});
return $div;
};
create['creation-template'] = function () {
var skip = h('div.cp-settings-creation-template.cp-sidebarlayout-element', [
h('label', [
Messages.settings_templateSkip
]),
setHTML(h('p.cp-sidebarlayout-description'), Messages.settings_templateSkipHint),
h('input#cp-creation-template-true.cp-creation-template-value', {
type: 'radio',
name: 'cp-creation-template',
value: 1,
}),
h('label', { 'for': 'cp-creation-template-true' }, Messages.settings_creationSkipTrue),
h('input#cp-creation-template-false.cp-creation-template-value', {
type: 'radio',
name: 'cp-creation-template',
value: 0,
checked: 'checked'
}),
h('label', { 'for': 'cp-creation-template-false' }, Messages.settings_creationSkipFalse),
h('span.fa.fa-check', {title: Messages.saved}),
h('span.fa.fa-spinner.fa-pulse'),
]);
var $div = $(skip);
var $ok = $div.find('.fa-check');
var $spinner = $div.find('.fa-spinner');
$div.find('input').change(function () {
$spinner.show();
$ok.hide();
var val = parseInt($div.find('[name="cp-creation-template"]:checked').val());
common.setAttribute(['general', 'creation', 'noTemplate'], val, function (e) {
if (e) { return void console.error(e); }
$spinner.hide();
$ok.show();
});
});
common.getAttribute(['general', 'creation', 'noTemplate'], function (e, val) {
if (val) {
$div.find('#cp-creation-template-true').attr('checked', true);
}
});
return $div;
};
// Drive settings
create['drive-backup'] = function () {
var $div = $('<div>', {'class': 'cp-settings-drive-backup cp-sidebarlayout-element'});
var accountName = privateData.accountName;
var displayName = metadataMgr.getUserData().name || '';
@ -350,113 +580,9 @@ define([
return $div;
};
var createResetDrive = function () {
var $div = $('<div>', {'class': 'cp-settings-reset-drive cp-sidebarlayout-element'});
$('<label>').text(Messages.settings_resetNewTitle).appendTo($div);
$('<span>', {'class': 'cp-sidebarlayout-description'})
.text(Messages.settings_reset).appendTo($div);
var $button = $('<button>', {'id': 'cp-settings-reset-drive', 'class': 'btn btn-danger'})
.text(Messages.settings_resetButton).appendTo($div);
$button.click(function () {
UI.prompt(Messages.settings_resetPrompt, "", function (val) {
if (val !== "I love CryptPad") {
UI.alert(Messages.settings_resetError);
return;
}
sframeChan.query("Q_SETTINGS_DRIVE_RESET", null, function (err) {
if (err) { return void console.error(err); }
UI.alert(Messages.settings_resetDone);
});
}, undefined, true);
});
return $div;
};
var createUserFeedbackToggle = function () {
var $div = $('<div>', { 'class': 'cp-settings-userfeedback cp-sidebarlayout-element'});
$('<span>', {'class': 'label'}).text(Messages.settings_userFeedbackTitle).appendTo($div);
var $label = $('<label>', { 'for': 'cp-settings-userfeedback', 'class': 'noTitle' })
.text(Messages.settings_userFeedback);
$('<span>', {'class': 'cp-sidebarlayout-description'})
.append(Messages.settings_userFeedbackHint1)
.append(Messages.settings_userFeedbackHint2).appendTo($div);
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
var $checkbox = $('<input>', {
'type': 'checkbox',
id: 'cp-settings-userfeedback'
}).on('change', function () {
$spinner.show();
$ok.hide();
var val = $checkbox.is(':checked') || false;
common.setAttribute(['general', 'allowUserFeedback'], val, function () {
$spinner.hide();
$ok.show();
});
});
$checkbox.appendTo($div);
$label.appendTo($div);
$ok.hide().appendTo($div);
$spinner.hide().appendTo($div);
if (privateData.feedbackAllowed) {
$checkbox[0].checked = true;
}
return $div;
};
var createUsageButton = function () {
common.createUsageBar(function (err, $bar) {
if (err) { return void console.error(err); }
APP.$usage.html('').append($bar);
}, true);
};
var createLogoutEverywhere = function () {
var $div = $('<div>', { 'class': 'cp-settings-logout-everywhere cp-sidebarlayout-element'});
$('<label>', { 'for': 'cp-settings-logout-everywhere'})
.text(Messages.settings_logoutEverywhereTitle).appendTo($div);
$('<span>', {'class': 'cp-sidebarlayout-description'})
.text(Messages.settings_logoutEverywhere).appendTo($div);
var $button = $('<button>', {
id: 'cp-settings-logout-everywhere',
'class': 'btn btn-primary'
}).text(Messages.settings_logoutEverywhereButton)
.appendTo($div);
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved}).hide().appendTo($div);
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'}).hide().appendTo($div);
$button.click(function () {
UI.confirm(Messages.settings_logoutEverywhereConfirm, function (yes) {
if (!yes) { return; }
$spinner.show();
$ok.hide();
sframeChan.query('Q_SETTINGS_LOGOUT', null, function () {
$spinner.hide();
$ok.show();
window.setTimeout(function () {
$ok.fadeOut(1500);
}, 2500);
});
});
});
return $div;
};
var createImportLocalPads = function () {
create['drive-import-local'] = function () {
if (!common.isLoggedIn()) { return; }
var $div = $('<div>', {'class': 'cp-settings-import-local-pads cp-sidebarlayout-element'});
var $div = $('<div>', {'class': 'cp-settings-drive-import-local cp-sidebarlayout-element'});
$('<label>', {'for' : 'cp-settings-import-local-pads'})
.text(Messages.settings_import).appendTo($div);
$('<span>', {'class': 'cp-sidebarlayout-description'})
@ -484,14 +610,146 @@ define([
return $div;
};
var createLanguageSelector = function () {
var $div = $('<div>', {'class': 'cp-settings-language-selector cp-sidebarlayout-element'});
$('<label>').text(Messages.language).appendTo($div);
var $b = common.createLanguageSelector($div);
$b.find('button').addClass('btn btn-secondary');
create['drive-reset'] = function () {
var $div = $('<div>', {'class': 'cp-settings-drive-reset cp-sidebarlayout-element'});
$('<label>').text(Messages.settings_resetNewTitle).appendTo($div);
$('<span>', {'class': 'cp-sidebarlayout-description'})
.text(Messages.settings_reset).appendTo($div);
var $button = $('<button>', {'id': 'cp-settings-reset-drive', 'class': 'btn btn-danger'})
.text(Messages.settings_resetButton).appendTo($div);
$button.click(function () {
UI.prompt(Messages.settings_resetPrompt, "", function (val) {
if (val !== "I love CryptPad") {
UI.alert(Messages.settings_resetError);
return;
}
sframeChan.query("Q_SETTINGS_DRIVE_RESET", null, function (err) {
if (err) { return void console.error(err); }
UI.alert(Messages.settings_resetDone);
});
}, undefined, true);
});
return $div;
};
// Rich text pads settings
create['pad-width'] = function () {
var $div = $('<div>', {
'class': 'cp-settings-pad-width cp-sidebarlayout-element'
});
$('<span>', {'class': 'label'}).text(Messages.settings_padWidth).appendTo($div);
$('<span>', {'class': 'cp-sidebarlayout-description'})
.text(Messages.settings_padWidthHint).appendTo($div);
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
var $label = $('<label>', { 'for': 'cp-settings-padwidth', 'class': 'noTitle' })
.text(Messages.settings_padWidthLabel);
var $input = $('<input>', {
type: 'checkbox',
id: 'cp-settings-padwidth'
}).on('change', function () {
$spinner.show();
$ok.hide();
var val = $input.is(':checked');
common.setAttribute(['pad', 'width'], val, function () {
$spinner.hide();
$ok.show();
});
}).appendTo($div);
$label.appendTo($div);
$ok.hide().appendTo($div);
$spinner.hide().appendTo($div);
common.getAttribute(['pad', 'width'], function (e, val) {
if (e) { return void console.error(e); }
if (val) {
$input.attr('checked', 'checked');
}
});
return $div;
};
// Code settings
create['code-indent-unit'] = function () {
var $div = $('<div>', {
'class': 'cp-settings-code-indent-unit cp-sidebarlayout-element'
});
$('<label>').text(Messages.settings_codeIndentation).appendTo($div);
var $inputBlock = $('<div>', {
'class': 'cp-sidebarlayout-input-block',
}).appendTo($div);
var $input = $('<input>', {
'min': 1,
'max': 8,
type: 'number',
}).on('change', function () {
var val = parseInt($input.val());
if (typeof(val) !== 'number') { return; }
common.setAttribute(['codemirror', 'indentUnit'], val);
}).appendTo($inputBlock);
common.getAttribute(['codemirror', 'indentUnit'], function (e, val) {
if (e) { return void console.error(e); }
if (typeof(val) !== 'number') {
$input.val(2);
} else {
$input.val(val);
}
});
return $div;
};
create['code-indent-type'] = function () {
var key = 'indentWithTabs';
var $div = $('<div>', {
'class': 'cp-settings-code-indent-type cp-sidebarlayout-element'
});
$('<label>').text(Messages.settings_codeUseTabs).appendTo($div);
var $inputBlock = $('<div>', {
'class': 'cp-sidebarlayout-input-block',
}).css('flex-flow', 'column')
.appendTo($div);
var $input = $('<input>', {
type: 'checkbox',
}).on('change', function () {
var val = $input.is(':checked');
if (typeof(val) !== 'boolean') { return; }
common.setAttribute(['codemirror', key], val);
}).appendTo($inputBlock);
/*proxy.on('change', ['settings', 'codemirror', key], function (o, n) {
$input[0].checked = !!n;
});*/
common.getAttribute(['codemirror', key], function (e, val) {
if (e) { return void console.error(e); }
$input[0].checked = !!val;
});
return $div;
};
// Settings app
var createUsageButton = function () {
common.createUsageBar(function (err, $bar) {
if (err) { return void console.error(err); }
APP.$usage.html('').append($bar);
}, true);
};
var hideCategories = function () {
APP.$rightside.find('> div').hide();
@ -514,6 +772,7 @@ define([
if (key === 'drive') { $category.append($('<span>', {'class': 'fa fa-hdd-o'})); }
if (key === 'code') { $category.append($('<span>', {'class': 'fa fa-file-code-o' })); }
if (key === 'pad') { $category.append($('<span>', {'class': 'fa fa-file-word-o' })); }
if (key === 'creation') { $category.append($('<span>', {'class': 'fa fa-plus-circle' })); }
if (key === active) {
$category.addClass('cp-leftside-active');
@ -561,22 +820,10 @@ define([
// Content
var $rightside = APP.$rightside;
$rightside.append(createInfoBlock());
$rightside.append(createDisplayNameInput());
$rightside.append(createLanguageSelector());
$rightside.append(createIndentUnitSelector());
$rightside.append(createIndentTypeSelector());
if (common.isLoggedIn()) {
$rightside.append(createLogoutEverywhere());
for (var f in create) {
if (typeof create[f] !== "function") { continue; }
$rightside.append(create[f]());
}
$rightside.append(createResetTips());
$rightside.append(createThumbnails());
$rightside.append(createBackupDrive());
$rightside.append(createImportLocalPads());
$rightside.append(createResetDrive());
$rightside.append(createUserFeedbackToggle());
$rightside.append(createPadWidthSelector());
// TODO RPC
//obj.proxy.on('change', [], refresh);