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

make classes in folder dialog states consistent

Browse Source 
make sure the class is applied to a child element, so that `$el.find`
will always find something for `js-will-stick-at-bottom-when-scrolling`.

Also, clean up code by treating all stickies on the template folder
form as dialogs - they all are after all all dialogs - modals that
expect your attention on top of the main page content.
This commit is contained in:
Leo Hemsted
2019-01-25 16:47:49 +00:00
parent 05c455250c
commit d5e95af446
2 changed files with 27 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,12 +17,12 @@
// all the diff states that we want to show or hide // all the diff states that we want to show or hide
this.states = [ this.states = [
{key: 'nothing-selected-buttons', $el: this.$form.find('#nothing_selected'), cancellable: false, isStickyGroup: false}, {key: 'nothing-selected-buttons', $el: this.$form.find('#nothing_selected'), cancellable: false},
{key: 'items-selected-buttons', $el: this.$form.find('#items_selected'), cancellable: false, isStickyGroup: false}, {key: 'items-selected-buttons', $el: this.$form.find('#items_selected'), cancellable: false},
{key: 'move-to-existing-folder', $el: this.$form.find('#move_to_folder_radios'), cancellable: true, isStickyGroup: true}, {key: 'move-to-existing-folder', $el: this.$form.find('#move_to_folder_radios'), cancellable: true},
{key: 'move-to-new-folder', $el: this.$form.find('#move_to_new_folder_form'), cancellable: true, isStickyGroup: false}, {key: 'move-to-new-folder', $el: this.$form.find('#move_to_new_folder_form'), cancellable: true},
{key: 'add-new-folder', $el: this.$form.find('#add_new_folder_form'), cancellable: true, isStickyGroup: false}, {key: 'add-new-folder', $el: this.$form.find('#add_new_folder_form'), cancellable: true},
{key: 'add-new-template', $el: this.$form.find('#add_new_template_form'), cancellable: true, isStickyGroup: true} {key: 'add-new-template', $el: this.$form.find('#add_new_template_form'), cancellable: true}
]; ];
// cancel/clear buttons only relevant if JS enabled, so // cancel/clear buttons only relevant if JS enabled, so
@@ -45,12 +45,12 @@
}; };
this.activateStickyElements = function() { this.activateStickyElements = function() {
var oldClass = '.js-will-stick-at-bottom-when-scrolling'; var oldClass = 'js-will-stick-at-bottom-when-scrolling';
var newClass = 'js-stick-at-bottom-when-scrolling'; var newClass = 'js-stick-at-bottom-when-scrolling';
this.states.forEach(state => { this.states.forEach(state => {
state.$el state.$el
.find(oldClass) .find('.' + oldClass)
.removeClass(oldClass) .removeClass(oldClass)
.addClass(newClass); .addClass(newClass);
}); });
@@ -146,29 +146,29 @@
// make sticky JS recalculate its cache of the element's position // make sticky JS recalculate its cache of the element's position
// use dialog mode for states which contain more than one form control // use dialog mode for states which contain more than one form control
if (['move-to-existing-folder', 'add-new-template'].includes(this.currentState)) { GOVUK.stickAtBottomWhenScrolling.recalculate({ 'mode': 'dialog' });
GOVUK.stickAtBottomWhenScrolling.recalculate({ 'mode': 'dialog' });
} else {
GOVUK.stickAtBottomWhenScrolling.recalculate();
}
}; };
this.nothingSelectedButtons = $(` this.nothingSelectedButtons = $(`
<div id="nothing_selected" class="js-stick-at-bottom-when-scrolling"> <div id="nothing_selected">
<button class="button-secondary" value="add-new-template">New template</button> <div class="js-stick-at-bottom-when-scrolling">
<button class="button-secondary" value="add-new-folder">New folder</button> <button class="button-secondary" value="add-new-template">New template</button>
<div class="template-list-selected-counter"> <button class="button-secondary" value="add-new-folder">New folder</button>
Nothing selected <div class="template-list-selected-counter">
Nothing selected
</div>
</div> </div>
</div> </div>
`).get(0); `).get(0);
this.itemsSelectedButtons = $(` this.itemsSelectedButtons = $(`
<div id="items_selected" class="js-stick-at-bottom-when-scrolling"> <div id="items_selected">
<button class="button-secondary" value="move-to-existing-folder">Move</button> <div class="js-stick-at-bottom-when-scrolling">
<button class="button-secondary" value="move-to-new-folder">Add to a new folder</button> <button class="button-secondary" value="move-to-existing-folder">Move</button>
<div class="template-list-selected-counter"> <button class="button-secondary" value="move-to-new-folder">Add to a new folder</button>
<span class="template-list-selected-counter-count">1</span> selected <div class="template-list-selected-counter">
<span class="template-list-selected-counter-count">1</span> selected
</div>
</div> </div>
</div> </div>
`).get(0); `).get(0);

8
app/templates/views/templates/_move_to.html
View File

@@ -13,16 +13,16 @@
{{ page_footer('Move', button_name='operation', button_value='move-to-existing-folder') }} {{ page_footer('Move', button_name='operation', button_value='move-to-existing-folder') }}
</div> </div>
</div> </div>
<div id="move_to_new_folder_form" class="js-will-stick-at-bottom-when-scrolling"> <div id="move_to_new_folder_form">
<fieldset> <fieldset class="js-will-stick-at-bottom-when-scrolling">
<legend class="visuallyhidden">Move to a new folder</legend> <legend class="visuallyhidden">Move to a new folder</legend>
{{ textbox(templates_and_folders_form.move_to_new_folder_name) }} {{ textbox(templates_and_folders_form.move_to_new_folder_name) }}
{{ page_footer('Move to a new folder', button_name='operation', button_value='move-to-new-folder') }} {{ page_footer('Move to a new folder', button_name='operation', button_value='move-to-new-folder') }}
</fieldset> </fieldset>
</div> </div>
{% endif %} {% endif %}
<div id="add_new_folder_form" class="js-will-stick-at-bottom-when-scrolling"> <div id="add_new_folder_form">
<fieldset> <fieldset class="js-will-stick-at-bottom-when-scrolling">
<legend class="visuallyhidden">Add a new folder</legend> <legend class="visuallyhidden">Add a new folder</legend>
{{ textbox(templates_and_folders_form.add_new_folder_name) }} {{ textbox(templates_and_folders_form.add_new_folder_name) }}
{{ page_footer('New folder', button_name='operation', button_value='add-new-folder') }} {{ page_footer('New folder', button_name='operation', button_value='add-new-folder') }}