From 5de149394932407d49a0002c0592fed22ac3bfa6 Mon Sep 17 00:00:00 2001 From: Rachid Mrad Date: Thu, 6 Feb 2025 17:10:53 -0500 Subject: [PATCH 1/6] Change sort icon and sort header ui --- src/registrar/assets/js/uswds-edited.js | 20 +++++++++- .../assets/src/js/getgov/formset-forms.js | 1 + .../assets/src/sass/_theme/_tables.scss | 39 ++++++++++++++----- 3 files changed, 49 insertions(+), 11 deletions(-) diff --git a/src/registrar/assets/js/uswds-edited.js b/src/registrar/assets/js/uswds-edited.js index 9d4dd2e51..ae246b05c 100644 --- a/src/registrar/assets/js/uswds-edited.js +++ b/src/registrar/assets/js/uswds-edited.js @@ -5695,19 +5695,35 @@ const createHeaderButton = (header, headerName) => { buttonEl.setAttribute("tabindex", "0"); buttonEl.classList.add(SORT_BUTTON_CLASS); // ICON_SOURCE + // ---- END DOTGOV EDIT + // Change icons on sort, use source from arro_upward and arrow_downward + // buttonEl.innerHTML = Sanitizer.escapeHTML` + // + // + // + // + // + // + // + // + // + // + // + // `; buttonEl.innerHTML = Sanitizer.escapeHTML` - + - + `; + // ---- END DOTGOV EDIT header.appendChild(buttonEl); updateSortLabel(header, headerName); }; diff --git a/src/registrar/assets/src/js/getgov/formset-forms.js b/src/registrar/assets/src/js/getgov/formset-forms.js index 27b85212e..faad54639 100644 --- a/src/registrar/assets/src/js/getgov/formset-forms.js +++ b/src/registrar/assets/src/js/getgov/formset-forms.js @@ -208,6 +208,7 @@ function hideDeletedForms() { * it everywhere. */ export function initFormsetsForms() { + console.log('init formsets'); let formIdentifier = "form" let repeatableForm = document.querySelectorAll(".repeatable-form"); let container = document.querySelector("#form-container"); diff --git a/src/registrar/assets/src/sass/_theme/_tables.scss b/src/registrar/assets/src/sass/_theme/_tables.scss index 37ae22b1b..d13cb8b0a 100644 --- a/src/registrar/assets/src/sass/_theme/_tables.scss +++ b/src/registrar/assets/src/sass/_theme/_tables.scss @@ -1,4 +1,5 @@ @use "uswds-core" as *; +@use "cisa_colors" as *; td, th { @@ -68,7 +69,9 @@ th { border-bottom: 1px solid color('base-lighter'); } - thead th { + thead th, + thead th[aria-sort], + thead th[aria-sort] { color: color('primary-darker'); border-bottom: 2px solid color('base-light'); } @@ -93,17 +96,35 @@ th { } } - @include at-media(tablet-lg) { - th[data-sortable] .usa-table__header__button { - right: auto; - - &[aria-sort=ascending], - &[aria-sort=descending], - &:not([aria-sort]) { - right: auto; + th[aria-sort], + th[data-sortable][aria-sort=ascending], + th[data-sortable][aria-sort=descending] { + background-color: transparent; + .usa-table__header__button { + background-color: rgba(214, 233, 242, 0.6); + background-color: $theme-color-accent-cool-lightest; + border-radius: 4px; + // position: relative; + // left: 4px; + // top: 16px; + color: color('primary-darker'); + + &:hover { + background-color: rgba(214, 233, 242, 0.6); } } } + + @include at-media(tablet-lg) { + th[data-sortable] .usa-table__header__button, + th[data-sortable] .usa-table__header__button:not([aria-sort]), + th[data-sortable][aria-sort=ascending] .usa-table__header__button, + th[data-sortable][aria-sort=descending] .usa-table__header__button { + right: auto; + top: 12px; + transform: translateX(10px); + } + } } .dotgov-table--cell-padding-2 { From ec9df83154565e8d1ae74e4cbeed4ba6594b0454 Mon Sep 17 00:00:00 2001 From: Rachid Mrad Date: Thu, 6 Feb 2025 20:01:15 -0500 Subject: [PATCH 2/6] Finish tweaking the UI --- .../assets/src/sass/_theme/_tables.scss | 49 ++++++++++--------- 1 file changed, 26 insertions(+), 23 deletions(-) diff --git a/src/registrar/assets/src/sass/_theme/_tables.scss b/src/registrar/assets/src/sass/_theme/_tables.scss index d13cb8b0a..4b9ccbb8a 100644 --- a/src/registrar/assets/src/sass/_theme/_tables.scss +++ b/src/registrar/assets/src/sass/_theme/_tables.scss @@ -1,5 +1,4 @@ @use "uswds-core" as *; -@use "cisa_colors" as *; td, th { @@ -42,13 +41,8 @@ th { } } -// The member table has an extra "expand" row, which looks like a single row. -// But the DOM disagrees - so we basically need to hide the border on both rows. -#members__table-wrapper .dotgov-table tr:nth-last-child(2) td, -#members__table-wrapper .dotgov-table tr:nth-last-child(2) th { - border-bottom: none; -} - +// .dotgov-table allows us to customize .usa-table on the user-facing pages, +// while leaving the default styles for use on the admin pages .dotgov-table { width: 100%; @@ -96,35 +90,44 @@ th { } } - th[aria-sort], + // Sortable headers th[data-sortable][aria-sort=ascending], th[data-sortable][aria-sort=descending] { background-color: transparent; .usa-table__header__button { - background-color: rgba(214, 233, 242, 0.6); - background-color: $theme-color-accent-cool-lightest; - border-radius: 4px; - // position: relative; - // left: 4px; - // top: 16px; + background-color: color('accent-cool-lightest'); + border-radius: units(.5); color: color('primary-darker'); - &:hover { - background-color: rgba(214, 233, 242, 0.6); + background-color: color('accent-cool-lightest'); } } } - @include at-media(tablet-lg) { th[data-sortable] .usa-table__header__button, - th[data-sortable] .usa-table__header__button:not([aria-sort]), - th[data-sortable][aria-sort=ascending] .usa-table__header__button, - th[data-sortable][aria-sort=descending] .usa-table__header__button { + th[data-sortable] .usa-table__header__button:not([aria-sort]) { + // position next to the copy right: auto; - top: 12px; - transform: translateX(10px); + // slide left to mock a margin between the copy and the icon + transform: translateX(units(1)); + // fix vertical alignment + top: units(1.5); } } + + // Currently the 'flash' when sort is clicked, + // this will become persistent if the double-sort bug is fixed + td[data-sort-active], + th[data-sort-active] { + background-color: color('primary-lightest'); + } +} + +// The member table has an extra "expand" row, which looks like a single row. +// But the DOM disagrees - so we basically need to hide the border on both rows. +#members__table-wrapper .dotgov-table tr:nth-last-child(2) td, +#members__table-wrapper .dotgov-table tr:nth-last-child(2) th { + border-bottom: none; } .dotgov-table--cell-padding-2 { From 1ca3fba2f74f1065e40c7ad8145978595bdc9763 Mon Sep 17 00:00:00 2001 From: Rachid Mrad Date: Thu, 6 Feb 2025 20:04:29 -0500 Subject: [PATCH 3/6] cleanup --- src/registrar/assets/src/js/getgov/formset-forms.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/registrar/assets/src/js/getgov/formset-forms.js b/src/registrar/assets/src/js/getgov/formset-forms.js index faad54639..27b85212e 100644 --- a/src/registrar/assets/src/js/getgov/formset-forms.js +++ b/src/registrar/assets/src/js/getgov/formset-forms.js @@ -208,7 +208,6 @@ function hideDeletedForms() { * it everywhere. */ export function initFormsetsForms() { - console.log('init formsets'); let formIdentifier = "form" let repeatableForm = document.querySelectorAll(".repeatable-form"); let container = document.querySelector("#form-container"); From f28ec7cf74d132eab38f328a179f9858b7706091 Mon Sep 17 00:00:00 2001 From: Rachid Mrad Date: Thu, 6 Feb 2025 20:06:54 -0500 Subject: [PATCH 4/6] cleanup --- src/registrar/assets/src/sass/_theme/_tables.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/registrar/assets/src/sass/_theme/_tables.scss b/src/registrar/assets/src/sass/_theme/_tables.scss index 4b9ccbb8a..d67b08041 100644 --- a/src/registrar/assets/src/sass/_theme/_tables.scss +++ b/src/registrar/assets/src/sass/_theme/_tables.scss @@ -64,7 +64,6 @@ th { } thead th, - thead th[aria-sort], thead th[aria-sort] { color: color('primary-darker'); border-bottom: 2px solid color('base-light'); From 0890e0afd9482384a4f80b49c9b55b9d03d8e114 Mon Sep 17 00:00:00 2001 From: Rachid Mrad Date: Wed, 19 Feb 2025 12:11:51 -0500 Subject: [PATCH 5/6] Special alignment for the sort button on the checkbox column --- src/registrar/assets/src/sass/_theme/_tables.scss | 7 +++++-- .../templates/includes/member_domains_edit_table.html | 2 +- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/registrar/assets/src/sass/_theme/_tables.scss b/src/registrar/assets/src/sass/_theme/_tables.scss index d67b08041..c050f21f1 100644 --- a/src/registrar/assets/src/sass/_theme/_tables.scss +++ b/src/registrar/assets/src/sass/_theme/_tables.scss @@ -103,8 +103,8 @@ th { } } @include at-media(tablet-lg) { - th[data-sortable] .usa-table__header__button, - th[data-sortable] .usa-table__header__button:not([aria-sort]) { + th[data-sortable]:not(.left-align-sort-button) .usa-table__header__button, + th[data-sortable]:not(.left-align-sort-button) .usa-table__header__button:not([aria-sort]) { // position next to the copy right: auto; // slide left to mock a margin between the copy and the icon @@ -112,6 +112,9 @@ th { // fix vertical alignment top: units(1.5); } + th[data-sortable].left-align-sort-button .usa-table__header__button { + left: 0; + } } // Currently the 'flash' when sort is clicked, diff --git a/src/registrar/templates/includes/member_domains_edit_table.html b/src/registrar/templates/includes/member_domains_edit_table.html index fd63e5aa7..a67919413 100644 --- a/src/registrar/templates/includes/member_domains_edit_table.html +++ b/src/registrar/templates/includes/member_domains_edit_table.html @@ -45,7 +45,7 @@ member domains - Assigned domains + Assigned domains Domains From c501eac13392b7cb7b9a88742a8e227b5d53681a Mon Sep 17 00:00:00 2001 From: Rachid Mrad Date: Wed, 19 Feb 2025 12:13:39 -0500 Subject: [PATCH 6/6] simplify css selectors --- src/registrar/assets/src/sass/_theme/_tables.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/registrar/assets/src/sass/_theme/_tables.scss b/src/registrar/assets/src/sass/_theme/_tables.scss index c050f21f1..614d0348e 100644 --- a/src/registrar/assets/src/sass/_theme/_tables.scss +++ b/src/registrar/assets/src/sass/_theme/_tables.scss @@ -103,8 +103,7 @@ th { } } @include at-media(tablet-lg) { - th[data-sortable]:not(.left-align-sort-button) .usa-table__header__button, - th[data-sortable]:not(.left-align-sort-button) .usa-table__header__button:not([aria-sort]) { + th[data-sortable]:not(.left-align-sort-button) .usa-table__header__button { // position next to the copy right: auto; // slide left to mock a margin between the copy and the icon