From 4f2a91b82d661cdec58c3ee4ba4aa2e5fb05c6e6 Mon Sep 17 00:00:00 2001 From: yflory Date: Mon, 19 Mar 2018 16:17:19 +0100 Subject: [PATCH] Pad creation screen UI improvements --- .../src/less2/include/creation.less | 37 +++++++---- customize.dist/translations/messages.fr.js | 3 +- customize.dist/translations/messages.js | 3 +- www/common/common-ui-elements.js | 62 +++++++++++++------ 4 files changed, 72 insertions(+), 33 deletions(-) diff --git a/customize.dist/src/less2/include/creation.less b/customize.dist/src/less2/include/creation.less index c07fcc849..9b7c865f6 100644 --- a/customize.dist/src/less2/include/creation.less +++ b/customize.dist/src/less2/include/creation.less @@ -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; } diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js index b238fc22b..d195a5202 100644 --- a/customize.dist/translations/messages.fr.js +++ b/customize.dist/translations/messages.fr.js @@ -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"; diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js index 884b4bb62..118334c86 100644 --- a/customize.dist/translations/messages.js +++ b/customize.dist/translations/messages.js @@ -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"; diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index ba7779eca..fdcf17682 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -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 = $('