dnrops
/
cryptpad
mirror of https://github.com/xwiki-labs/cryptpad
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Pad creation screen UI improvements

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
Show Stats 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 {
margin-top: 0px;
@creation-button: #FF0073;
button {
.tools_unselectable();
@ -47,6 +48,7 @@
border: none;
cursor: pointer;
outline: none;
width: 100%;
&:hover {
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-picker {
display: block;
overflow: hidden;
max-height: 0px;
transition: max-height 0.5s ease-in-out;
width: 100%;
text-align: center;
margin-top: 10px;
input {
width: 100px;
}
}
.cp-creation-expire-picker.active {
max-height: 40px;
}
}
.cp-creation-settings {
button {
@ -112,11 +116,20 @@
.cp-filler { flex: 1; }
}
div.cp-creation-remember {
margin-top: 30px;
.cp-creation-remember-help {
font-style: italic;
}
}
div.cp-creation-template {
width: 100%;
background-color: darken(@colortheme_modal-bg, 3%);
padding: 20px;
margin: 30px 0;
.cp-creation-title {
padding: 0 0 10px 10px;
}
}
.cp-creation-template-container {
width: 100%;
@ -128,8 +141,8 @@
.cp-creation-template-element {
@darker: darken(@colortheme_modal-fg, 30%);
width: 125px;
padding: 10px;
width: 135px;
padding: 5px;
margin: 5px;
display: inline-flex;
flex-flow: column;
@ -164,6 +177,7 @@
}
.cp-creation-template-element-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@ -213,6 +227,7 @@
flex-flow: row;
margin: 1px;
padding: 5px;
width: 155px;
img {
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_newTemplate = "Nouveau modèle";
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_rememberHelp = "Ouvrez votre page de Préférences pour annuler cette fonctionnalité";
// Properties about creation data
out.creation_owners = "Propriétaires";
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_newTemplate = "New template";
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_rememberHelp = "Visit your Settings page to reset this preference";
// Properties about creation data
out.creation_owners = "Owners";
out.creation_ownedByOther = "Owned by another user";

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

@ -1825,7 +1825,8 @@ define([
// Title
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
if (metadataMgr.getPrivateData().isDeleted) {
@ -1870,7 +1871,7 @@ define([
Messages.creation_expire
]),
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', {
type: "number",
min: 1,
@ -1889,29 +1890,34 @@ define([
]);
var templates = h('div.cp-creation-template', [
h('h3.cp-creation-title.'+colorClass, Messages['button_new'+type]),
h('div.cp-creation-template-container', [
h('span.fa.fa-circle-o-notch.fa-spin.fa-4x.fa-fw')
])
]);
var settings = h('div.cp-creation-remember', [
h('label.cp-checkmark.cp-checkmark-secondary', [
h('label.cp-checkmark', [
h('input', {
type: 'checkbox',
id: 'cp-creation-remember',
checked: 'checked'
id: 'cp-creation-remember'
}),
h('span.cp-checkmark-mark'),
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', [
owned,
expire,
settings,
templates,
settings
createDiv
])).appendTo($creation);
// Display templates
@ -1927,12 +1933,12 @@ define([
data.unshift({
name: Messages.creation_noTemplate,
id: 0,
icon: h('span.fa.fa-times')
icon: h('span.fa.fa-file')
});
data.push({
name: Messages.creation_newTemplate,
id: -1,
icon: h('span.fa.fa-plus')
icon: h('span.fa.fa-bookmark')
});
var $container = $(templates).find('.cp-creation-template-container').html('');
data.forEach(function (obj, idx) {
@ -1984,6 +1990,16 @@ define([
$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
$creation.find('#cp-creation-expire-val').keydown(function (e) {
if (e.which === 9) {
@ -2001,6 +2017,9 @@ define([
if (!cfg.owned && typeof cfg.owned !== "undefined") {
$creation.find('#cp-creation-owned').attr('checked', false);
}
if (cfg.skip) {
$creation.find('#cp-creation-remember').attr('checked', 'checked');
}
UIElements.setExpirationValue(cfg.expire, $creation);
// Create the pad
@ -2032,16 +2051,20 @@ define([
var create = function () {
var val = getFormValues();
if ($('#cp-creation-remember').is(':checked')) {
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); }
});
}
var skip = $('#cp-creation-remember').is(':checked');
common.setAttribute(['general', 'creation', 'skip'], skip, function (e) {
if (e) { return void console.error(e); }
});
common.setAttribute(['general', 'creation', 'noTemplate'], skip, 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();
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);
$button.addClass('cp-creation-button-selected');