darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-04-28 21:20:56 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #622 from GSA/616-remove-sticky-position

Browse Source 
616 remove sticky position
This commit is contained in:
Carlo Costino
2023-07-14 10:57:59 -04:00
committed by GitHub
parent 508bba6510 bbc03d2ddb
commit c34439976e
5 changed files with 42 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/assets/javascripts/main.js
View File

@@ -9,9 +9,6 @@ if (window.GOVUK.hasConsentFor('analytics', consentData)) {
$(() => $("time.timeago").timeago());
$(() => GOVUK.stickAtTopWhenScrolling.init());
$(() => GOVUK.stickAtBottomWhenScrolling.init());
var showHideContent = new GOVUK.ShowHideContent();
showHideContent.init();

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

@@ -285,9 +285,6 @@
if (['move-to-existing-folder', 'add-new-template'].indexOf(this.currentState) !== -1) {
mode = 'dialog';
}
GOVUK.stickAtBottomWhenScrolling.setMode(mode);
// make sticky JS recalculate its cache of the element's position
GOVUK.stickAtBottomWhenScrolling.recalculate();
if (currentStateObj && ('setFocus' in currentStateObj)) {
scrollTop = $(window).scrollTop();
@@ -299,10 +296,12 @@
this.nothingSelectedButtons = $(`
<div id="nothing_selected">
<div class="js-stick-at-bottom-when-scrolling">
<button class="usa-button usa-button--event" value="add-new-template" aria-expanded="false">
New template
</button>
<button class="usa-button usa-button--event" value="add-new-folder" aria-expanded="false">New folder</button>
<div class="usa-button-group">
<button class="usa-button usa-button--event" value="add-new-template" aria-expanded="false">
New template
</button>
<button class="usa-button usa-button--event" value="add-new-folder" aria-expanded="false">New folder</button>
</div>
<div class="template-list-selected-counter">
<span class="template-list-selected-counter__count" aria-hidden="true">
${this.selectionStatus.default}
@@ -315,10 +314,12 @@
this.itemsSelectedButtons = $(`
<div id="items_selected">
<div class="js-stick-at-bottom-when-scrolling">
<button class="usa-button usa-button--event" value="move-to-existing-folder" aria-expanded="false">
Move<span class="usa-sr-only"> selection to folder</span>
</button>
<button class="usa-button usa-button--event" value="move-to-new-folder" aria-expanded="false">Add to new folder</button>
<div class="usa-button-group">
<button class="usa-button usa-button--event" value="move-to-existing-folder" aria-expanded="false">
Move<span class="usa-sr-only"> selection to folder</span>
</button>
<button class="usa-button usa-button--event" value="move-to-new-folder" aria-expanded="false">Add to new folder</button>
</div>
<div class="template-list-selected-counter" aria-hidden="true">
<span class="template-list-selected-counter__count" aria-hidden="true">
${this.selectionStatus.selected(1)}

28
app/assets/sass/uswds/_uswds-theme-custom-styles.scss
View File

@@ -195,3 +195,31 @@ td.table-empty-message {
border: 1px solid color("gray-60");
}
}
.usa-hint {
display: block;
}
.js-stick-at-bottom-when-scrolling {
margin: 0 0 units(5);
padding: units(2) 0;
display: flex;
align-items: center;
justify-content: space-between;
overflow: visible;
button {
margin-right: units(2);
}
.template-list-selected-counter {
position: relative;
top: 0;
}
}
.sticky-template-form {
margin: 0;
padding: 0;
&:focus {
outline-offset: units(1);
}
}

1
gulpfile.js
View File

@@ -108,7 +108,6 @@ const javascripts = () => {
paths.src + 'javascripts/govuk/cookie-functions.js',
paths.src + 'javascripts/consent.js',
paths.src + 'javascripts/cookieMessage.js',
paths.src + 'javascripts/stick-to-window-when-scrolling.js',
paths.src + 'javascripts/copyToClipboard.js',
paths.src + 'javascripts/autofocus.js',
paths.src + 'javascripts/enhancedTextbox.js',

78
tests/javascripts/templateFolderForm.test.js
View File

@@ -299,20 +299,6 @@ describe('TemplateFolderForm', () => {
});
test("should make the current controls sticky", () => {
// the class the sticky JS hooks into should be present
expect(formControls.querySelector('#nothing_selected .js-stick-at-bottom-when-scrolling')).not.toBeNull();
// .recalculate should have been called so the sticky JS picks up the controls
expect(GOVUK.stickAtBottomWhenScrolling.recalculate.mock.calls.length).toEqual(1);
// mode should have been set to 'default' as the controls only have one part
expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls.length).toEqual(1);
expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls[0][0]).toEqual('default');
});
});
describe("Click 'New template' for single channel service", () => {
@@ -421,20 +407,6 @@ describe('TemplateFolderForm', () => {
});
test("should make the current controls sticky", () => {
// the classes the sticky JS hooks into should be present for both parts
expect(formControls.querySelectorAll('#add_new_template_form .js-stick-at-bottom-when-scrolling').length).toEqual(2);
// .recalculate should have been called so the sticky JS picks up the controls
expect(GOVUK.stickAtBottomWhenScrolling.recalculate.mock.calls.length).toEqual(1);
// the mode should be set to 'dialog' so both parts can be sticky
expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls.length).toEqual(1);
expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls[0][0]).toEqual('dialog');
});
describe("When the 'Cancel' link is clicked after choosing to add a new template", () => {
let addNewTemplateButton;
@@ -533,17 +505,13 @@ describe('TemplateFolderForm', () => {
});
test("should make the current controls sticky", () => {
test("", () => {
// the class the sticky JS hooks into should be present
expect(formControls.querySelector('#add_new_folder_form .js-stick-at-bottom-when-scrolling')).not.toBeNull();
// .recalculate should have been called so the sticky JS picks up the controls
expect(GOVUK.stickAtBottomWhenScrolling.recalculate.mock.calls.length).toEqual(1);
// mode should have been set to 'default' as the controls only have one part
expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls.length).toEqual(1);
expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls[0][0]).toEqual('default');
expect(GOVUK.stickAtBottomWhenScrolling.recalculate.mock.calls.length).toEqual(0);
});
@@ -607,20 +575,6 @@ describe('TemplateFolderForm', () => {
});
test("should make the current controls sticky", () => {
// the class the sticky JS hooks into should be present
expect(formControls.querySelector('#items_selected .js-stick-at-bottom-when-scrolling')).not.toBeNull();
// .recalculate should have been called so the sticky JS picks up the controls
expect(GOVUK.stickAtBottomWhenScrolling.recalculate.mock.calls.length).toEqual(1);
// mode should have been set to 'default' as the controls only have one part
expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls.length).toEqual(1);
expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls[0][0]).toEqual('default');
});
describe("'Clear selection' link", () => {
let clearLink;
@@ -755,20 +709,6 @@ describe('TemplateFolderForm', () => {
});
test("should make the current controls sticky", () => {
// the classes the sticky JS hooks into should be present for both parts
expect(formControls.querySelectorAll('#move_to_folder_radios .js-stick-at-bottom-when-scrolling').length).toEqual(2);
// .recalculate should have been called so the sticky JS picks up the controls
expect(GOVUK.stickAtBottomWhenScrolling.recalculate.mock.calls.length).toEqual(1);
// the mode should be set to 'dialog' so both parts can be sticky
expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls.length).toEqual(1);
expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls[0][0]).toEqual('dialog');
});
describe("When the 'Cancel' link is clicked after choosing to move a template or folder", () => {
let moveToFolderButton;
@@ -857,20 +797,6 @@ describe('TemplateFolderForm', () => {
});
test("should make the current controls sticky", () => {
// the class the sticky JS hooks into should be present
expect(formControls.querySelector('#move_to_new_folder_form .js-stick-at-bottom-when-scrolling')).not.toBeNull();
// .recalculate should have been called so the sticky JS picks up the controls
expect(GOVUK.stickAtBottomWhenScrolling.recalculate.mock.calls.length).toEqual(1);
// mode should have been set to 'default' as the controls only have one part
expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls.length).toEqual(1);
expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls[0][0]).toEqual('default');
});
describe("When the 'Cancel' link is clicked after choosing to add a template or folder to a new folder", () => {
let moveToNewFolderButton;