web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Pad creation screen UI improvements

Browse Source
This commit is contained in:
yflory
2018-03-19 16:17:19 +01:00
parent 07e361b88d
commit 4f2a91b82d
4 changed files with 72 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
customize.dist/src/less2/include/creation.less
View File

@@ -36,6 +36,7 @@
} }
.cp-creation-create, .cp-creation-settings { .cp-creation-create, .cp-creation-settings {
margin-top: 0px;
@creation-button: #FF0073; @creation-button: #FF0073;
button { button {
.tools_unselectable(); .tools_unselectable();
@@ -47,6 +48,7 @@
border: none; border: none;
cursor: pointer; cursor: pointer;
outline: none; outline: none;
width: 100%;
&:hover { &:hover {
background: darken(@creation-button, 5%); background: darken(@creation-button, 5%);
} }
@@ -87,22 +89,24 @@
} }
} }
} }
.cp-creation-slider {
display: block;
overflow: hidden;
max-height: 0px;
transition: max-height 0.5s ease-in-out;
width: 100%;
margin-top: 10px;
&.active {
max-height: 40px;
}
}
.cp-creation-expire { .cp-creation-expire {
.cp-creation-expire-picker { .cp-creation-expire-picker {
display: block;
overflow: hidden;
max-height: 0px;
transition: max-height 0.5s ease-in-out;
width: 100%;
text-align: center; text-align: center;
margin-top: 10px;
input { input {
width: 100px; width: 100px;
} }
} }
.cp-creation-expire-picker.active {
max-height: 40px;
}
} }
.cp-creation-settings { .cp-creation-settings {
button { button {
@@ -112,11 +116,20 @@
.cp-filler { flex: 1; } .cp-filler { flex: 1; }
} }
div.cp-creation-remember {
margin-top: 30px;
.cp-creation-remember-help {
font-style: italic;
}
}
div.cp-creation-template { div.cp-creation-template {
width: 100%; width: 100%;
background-color: darken(@colortheme_modal-bg, 3%); background-color: darken(@colortheme_modal-bg, 3%);
padding: 20px; padding: 20px;
margin: 30px 0; margin: 30px 0;
.cp-creation-title {
padding: 0 0 10px 10px;
}
} }
.cp-creation-template-container { .cp-creation-template-container {
width: 100%; width: 100%;
@@ -128,8 +141,8 @@
.cp-creation-template-element { .cp-creation-template-element {
@darker: darken(@colortheme_modal-fg, 30%); @darker: darken(@colortheme_modal-fg, 30%);
width: 125px; width: 135px;
padding: 10px; padding: 5px;
margin: 5px; margin: 5px;
display: inline-flex; display: inline-flex;
flex-flow: column; flex-flow: column;
@@ -164,6 +177,7 @@
} }
.cp-creation-template-element-name { .cp-creation-template-element-name {
flex: 1;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@@ -213,6 +227,7 @@
flex-flow: row; flex-flow: row;
margin: 1px; margin: 1px;
padding: 5px; padding: 5px;
width: 155px;
img { img {
display: none; display: none;
} }

3
customize.dist/translations/messages.fr.js
View File

@@ -1079,8 +1079,9 @@ define(function () {
out.creation_noTemplate = "Pas de modèle"; out.creation_noTemplate = "Pas de modèle";
out.creation_newTemplate = "Nouveau modèle"; out.creation_newTemplate = "Nouveau modèle";
out.creation_create = "Créer"; out.creation_create = "Créer";
out.creation_saveSettings = "Se souvenir de ces paramètres"; out.creation_saveSettings = "Ne plus me demander";
out.creation_settings = "Voir davantage de préférences"; out.creation_settings = "Voir davantage de préférences";
out.creation_rememberHelp = "Ouvrez votre page de Préférences pour annuler cette fonctionnalité";
// Properties about creation data // Properties about creation data
out.creation_owners = "Propriétaires"; out.creation_owners = "Propriétaires";
out.creation_ownedByOther = "Appartient à un autre utilisateur"; out.creation_ownedByOther = "Appartient à un autre utilisateur";

3
customize.dist/translations/messages.js
View File

@@ -1126,8 +1126,9 @@ define(function () {
out.creation_noTemplate = "No template"; out.creation_noTemplate = "No template";
out.creation_newTemplate = "New template"; out.creation_newTemplate = "New template";
out.creation_create = "Create"; out.creation_create = "Create";
out.creation_saveSettings = "Remember these settings"; out.creation_saveSettings = "Don't show this again";
out.creation_settings = "View more settings"; out.creation_settings = "View more settings";
out.creation_rememberHelp = "Visit your Settings page to reset this preference";
// Properties about creation data // Properties about creation data
out.creation_owners = "Owners"; out.creation_owners = "Owners";
out.creation_ownedByOther = "Owned by another user"; out.creation_ownedByOther = "Owned by another user";

62
www/common/common-ui-elements.js
View File

@@ -1825,7 +1825,8 @@ define([
// Title // Title
var colorClass = 'cp-icon-color-'+type; var colorClass = 'cp-icon-color-'+type;
$creation.append(h('h1.cp-creation-title.'+colorClass, Messages['button_new'+type])); $creation.append(h('h2.cp-creation-title', Messages.newButtonTitle));
//$creation.append(h('h2.cp-creation-title.'+colorClass, Messages.newButtonTitle));
// Deleted pad warning // Deleted pad warning
if (metadataMgr.getPrivateData().isDeleted) { if (metadataMgr.getPrivateData().isDeleted) {
@@ -1870,7 +1871,7 @@ define([
Messages.creation_expire Messages.creation_expire
]), ]),
createHelper('faq.html#keywords-expiring', Messages.creation_expire2), createHelper('faq.html#keywords-expiring', Messages.creation_expire2),
h('div.cp-creation-expire-picker', [ h('div.cp-creation-expire-picker.cp-creation-slider', [
h('input#cp-creation-expire-val', { h('input#cp-creation-expire-val', {
type: "number", type: "number",
min: 1, min: 1,
@@ -1889,29 +1890,34 @@ define([
]); ]);
var templates = h('div.cp-creation-template', [ var templates = h('div.cp-creation-template', [
h('h3.cp-creation-title.'+colorClass, Messages['button_new'+type]),
h('div.cp-creation-template-container', [ h('div.cp-creation-template-container', [
h('span.fa.fa-circle-o-notch.fa-spin.fa-4x.fa-fw') h('span.fa.fa-circle-o-notch.fa-spin.fa-4x.fa-fw')
]) ])
]); ]);
var settings = h('div.cp-creation-remember', [ var settings = h('div.cp-creation-remember', [
h('label.cp-checkmark.cp-checkmark-secondary', [ h('label.cp-checkmark', [
h('input', { h('input', {
type: 'checkbox', type: 'checkbox',
id: 'cp-creation-remember', id: 'cp-creation-remember'
checked: 'checked'
}), }),
h('span.cp-checkmark-mark'), h('span.cp-checkmark-mark'),
Messages.creation_saveSettings Messages.creation_saveSettings
]), ]),
createHelper('/settings/#creation', Messages.creation_settings) createHelper('/settings/#creation', Messages.creation_settings),
h('div.cp-creation-remember-help.cp-creation-slider', Messages.creation_rememberHelp)
]); ]);
var createDiv = h('div.cp-creation-create');
var $create = $(createDiv);
$(h('div#cp-creation-form', [ $(h('div#cp-creation-form', [
owned, owned,
expire, expire,
settings,
templates, templates,
settings createDiv
])).appendTo($creation); ])).appendTo($creation);
// Display templates // Display templates
@@ -1927,12 +1933,12 @@ define([
data.unshift({ data.unshift({
name: Messages.creation_noTemplate, name: Messages.creation_noTemplate,
id: 0, id: 0,
icon: h('span.fa.fa-times') icon: h('span.fa.fa-file')
}); });
data.push({ data.push({
name: Messages.creation_newTemplate, name: Messages.creation_newTemplate,
id: -1, id: -1,
icon: h('span.fa.fa-plus') icon: h('span.fa.fa-bookmark')
}); });
var $container = $(templates).find('.cp-creation-template-container').html(''); var $container = $(templates).find('.cp-creation-template-container').html('');
data.forEach(function (obj, idx) { data.forEach(function (obj, idx) {
@@ -1984,6 +1990,16 @@ define([
$creation.focus(); $creation.focus();
}); });
// Display settings help when checkbox checked
$creation.find('#cp-creation-remember').on('change', function () {
if ($(this).is(':checked')) {
$creation.find('.cp-creation-remember-help:not(.active)').addClass('active');
return;
}
$creation.find('.cp-creation-remember-help').removeClass('active');
$creation.focus();
});
// Keyboard shortcuts // Keyboard shortcuts
$creation.find('#cp-creation-expire-val').keydown(function (e) { $creation.find('#cp-creation-expire-val').keydown(function (e) {
if (e.which === 9) { if (e.which === 9) {
@@ -2001,6 +2017,9 @@ define([
if (!cfg.owned && typeof cfg.owned !== "undefined") { if (!cfg.owned && typeof cfg.owned !== "undefined") {
$creation.find('#cp-creation-owned').attr('checked', false); $creation.find('#cp-creation-owned').attr('checked', false);
} }
if (cfg.skip) {
$creation.find('#cp-creation-remember').attr('checked', 'checked');
}
UIElements.setExpirationValue(cfg.expire, $creation); UIElements.setExpirationValue(cfg.expire, $creation);
// Create the pad // Create the pad
@@ -2032,16 +2051,20 @@ define([
var create = function () { var create = function () {
var val = getFormValues(); var val = getFormValues();
if ($('#cp-creation-remember').is(':checked')) { var skip = $('#cp-creation-remember').is(':checked');
common.setAttribute(['general', 'creation', 'owned'], common.setAttribute(['general', 'creation', 'skip'], skip, function (e) {
val.owned, function (e) { if (e) { return void console.error(e); }
if (e) { return void console.error(e); } });
}); common.setAttribute(['general', 'creation', 'noTemplate'], skip, function (e) {
common.setAttribute(['general', 'creation', 'expire'], if (e) { return void console.error(e); }
val.expire, function (e) { });
if (e) { return void console.error(e); }
}); common.setAttribute(['general', 'creation', 'owned'], val.owned, function (e) {
} if (e) { return void console.error(e); }
});
common.setAttribute(['general', 'creation', 'expire'], val.expire, function (e) {
if (e) { return void console.error(e); }
});
$creationContainer.remove(); $creationContainer.remove();
common.createPad(val, function () { common.createPad(val, function () {
@@ -2049,7 +2072,6 @@ define([
}); });
}; };
var $create = $(h('div.cp-creation-create')).appendTo($creation);
var $button = $('<button>').text(Messages.creation_create).appendTo($create); var $button = $('<button>').text(Messages.creation_create).appendTo($create);
$button.addClass('cp-creation-button-selected'); $button.addClass('cp-creation-button-selected');