From 4b305376f7f0543bbe0635459cb2cc9d3161dc30 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 10 Dec 2018 16:53:12 +0000 Subject: [PATCH 1/3] Add counter of selected templates and folders MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Being able to see how many things you have selected gives you positive feedback that reinforces that what you’ve done has been recognised. It helps you understand the implications of your actions (ie you see ‘3 selected’ before you press the ‘Move’ button). And it gives you an escape hatch the get out of the state you’re in by providing the ‘Clear’ button. We also found in prototyping that having a ‘Nothing selected’ message helps draws people’s attention to the checkboxes when they first encounter the folders feature. This commit implements the counter and the cancel button. It tries to follow the existing patterns for this module. --- app/assets/javascripts/templateFolderForm.js | 55 ++++++++++++++----- .../stylesheets/components/message.scss | 7 +++ 2 files changed, 49 insertions(+), 13 deletions(-) diff --git a/app/assets/javascripts/templateFolderForm.js b/app/assets/javascripts/templateFolderForm.js index 744b0c4f6..2d5ee8d98 100644 --- a/app/assets/javascripts/templateFolderForm.js +++ b/app/assets/javascripts/templateFolderForm.js @@ -25,8 +25,9 @@ {key: 'add-new-template', $el: this.$form.find('#add_new_template_form'), cancellable: true} ]; - // cancel buttons only relevant if JS enabled, so + // cancel/clear buttons only relevant if JS enabled, so this.states.filter(state => state.cancellable).forEach((x) => this.addCancelButton(x)); + this.states.filter(state => state.key === 'items-selected-buttons').forEach(x => this.addClearButton(x)); // first off show the new template / new folder buttons this.currentState = this.$form.data('prev-state') || 'unknown'; @@ -41,23 +42,42 @@ }; this.addCancelButton = function(state) { - let $cancel = $('') - .html('Cancel') - .attr('class', 'page-footer-js-cancel') - .attr('tabindex', '0') - .on('click keydown', (event) => { - event.preventDefault(); - // clear existing data - state.$el.find('input:radio').prop('checked', false); - state.$el.find('input:text').val(''); + let $cancel = this.makeButton('Cancel', () => { - // go back to action buttons - this.selectActionButtons(); - }); + // clear existing data + state.$el.find('input:radio').prop('checked', false); + state.$el.find('input:text').val(''); + + // go back to action buttons + this.selectActionButtons(); + }); state.$el.append($cancel); }; + this.addClearButton = function(state) { + + let $clear = this.makeButton('Clear', () => { + + // uncheck all templates and folders + this.$form.find('input:checkbox').prop('checked', false); + + // go back to action buttons + this.selectActionButtons(); + }); + + state.$el.find('.template-list-selected-counter').append($clear); + }; + + this.makeButton = (text, fn) => $('') + .html(text) + .addClass('page-footer-js-cancel') + .attr('tabindex', '0') + .on('click keydown', event => { + event.preventDefault(); + fn(); + }); + this.selectActionButtons = function () { // If we want to show one of the grey choose actions state, we can pretend we're in the choose actions state, // and then pretend a checkbox was clicked to work out whether to show zero or non-zero options. @@ -85,6 +105,9 @@ } this.render(); + + $('.template-list-selected-counter-count').html(numSelected); + }; this.countSelectedCheckboxes = function() { @@ -102,6 +125,9 @@
+
+ Nothing selected +
`; @@ -109,6 +135,9 @@
+
+ 1 selected   +
`; }; diff --git a/app/assets/stylesheets/components/message.scss b/app/assets/stylesheets/components/message.scss index c4833d8dc..c36c7bae1 100644 --- a/app/assets/stylesheets/components/message.scss +++ b/app/assets/stylesheets/components/message.scss @@ -108,6 +108,13 @@ padding: $gutter-half 0 $gutter-one-third 0; } + &-selected-counter { + position: absolute; + right: $gutter-half; + top: $gutter - 1px; + color: $secondary-text-colour; + } + } .folder-heading { From 0c71ca0f0eeae76af15b2786eeff4f865e7ae1b0 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 10 Dec 2018 17:07:30 +0000 Subject: [PATCH 2/3] Move cancel buttons alongside submit buttons This is better because it saves vertical space for the contents of the pop-up menu. This commit also adds some padding to the cancel and clear buttons, to make them easier targets to hit. --- app/assets/javascripts/templateFolderForm.js | 6 ++--- .../stylesheets/components/page-footer.scss | 22 ++++-------------- .../stick-at-top-when-scrolling.scss | 23 +++++++++++++++++++ 3 files changed, 30 insertions(+), 21 deletions(-) diff --git a/app/assets/javascripts/templateFolderForm.js b/app/assets/javascripts/templateFolderForm.js index 2d5ee8d98..8ff36863e 100644 --- a/app/assets/javascripts/templateFolderForm.js +++ b/app/assets/javascripts/templateFolderForm.js @@ -52,7 +52,7 @@ this.selectActionButtons(); }); - state.$el.append($cancel); + state.$el.find('[type=submit]').after($cancel); }; this.addClearButton = function(state) { @@ -71,7 +71,7 @@ this.makeButton = (text, fn) => $('') .html(text) - .addClass('page-footer-js-cancel') + .addClass('js-cancel') .attr('tabindex', '0') .on('click keydown', event => { event.preventDefault(); @@ -136,7 +136,7 @@
- 1 selected   + 1 selected
`; diff --git a/app/assets/stylesheets/components/page-footer.scss b/app/assets/stylesheets/components/page-footer.scss index d1076397a..e4073d47f 100644 --- a/app/assets/stylesheets/components/page-footer.scss +++ b/app/assets/stylesheets/components/page-footer.scss @@ -67,6 +67,10 @@ padding: 0.52632em 0.78947em 0.26316em 0.78947em; } + .js-cancel { + margin: 0; + } + } .align-button-with-textbox { @@ -86,21 +90,3 @@ } } - -.page-footer-js-cancel { - - text-decoration: underline; - color: $govuk-blue; - cursor: pointer; - - &:hover { - color: $link-hover-colour; - } - - &:focus, - &:active, { - background: $yellow; - color: $govuk-blue; - outline: 3px solid $yellow; - } -} diff --git a/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss b/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss index 8357a262e..062d900f7 100644 --- a/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss +++ b/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss @@ -122,3 +122,26 @@ display: block; margin-bottom: 5px; } + +.js-cancel { + + display: inline-block; + padding: 10px 10px 5px 10px; + margin-top: -10px; + margin-right: -10px; + text-decoration: underline; + color: $govuk-blue; + cursor: pointer; + + &:hover { + color: $link-hover-colour; + } + + &:focus, + &:active, { + background: $yellow; + color: $govuk-blue; + outline: none; + } + +} From ce86604a491c547fdfb93efdb2542e08868b2d2f Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 10 Dec 2018 17:32:36 +0000 Subject: [PATCH 3/3] Only trigger clear/cancel buttons on certain keys MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit It’s annoying having these buttons triggered by the tab or command keys. --- app/assets/javascripts/templateFolderForm.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/templateFolderForm.js b/app/assets/javascripts/templateFolderForm.js index 8ff36863e..c5fa90448 100644 --- a/app/assets/javascripts/templateFolderForm.js +++ b/app/assets/javascripts/templateFolderForm.js @@ -74,8 +74,11 @@ .addClass('js-cancel') .attr('tabindex', '0') .on('click keydown', event => { - event.preventDefault(); - fn(); + // space, enter or no keyCode (must be mouse input) + if ([13, 32, undefined].indexOf(event.keyCode) > -1) { + event.preventDefault(); + fn(); + } }); this.selectActionButtons = function () {