darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-09 19:04:33 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add counter of selected templates and folders

Browse Source 
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.
This commit is contained in:
Chris Hill-Scott
2018-12-10 16:53:12 +00:00
parent 77c61238e9
commit 4b305376f7
2 changed files with 49 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
app/assets/javascripts/templateFolderForm.js
View File

@@ -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 = $('<a></a>')
.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) => $('<a></a>')
.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 @@
<div id="nothing_selected">
<button class="button-secondary" value="add-new-template">New template</button>
<button class="button-secondary" value="add-new-folder">New folder</button>
<div class="template-list-selected-counter">
Nothing selected
</div>
</div>
`;
@@ -109,6 +135,9 @@
<div id="items_selected">
<button class="button-secondary" value="move-to-existing-folder">Move</button>
<button class="button-secondary" value="move-to-new-folder">Add to a new folder</button>
<div class="template-list-selected-counter">
<span class="template-list-selected-counter-count">1</span> selected &ensp;
</div>
</div>
`;
};