From 89779ccfe80fc6bd7412bc3f9716d7e8ca6a12b8 Mon Sep 17 00:00:00 2001 From: Michael Dickson Date: Tue, 3 Dec 2024 11:48:46 -0500 Subject: [PATCH 1/4] expand/collapse btns, css, js --- .../gmo-program-details.css | 7 +++++ .../gmo-program-details.js | 30 +++++++++++++++++++ icons/AddCircle_18_N.svg | 11 +++++++ icons/RemoveCircle_18_N.svg | 11 +++++++ 4 files changed, 59 insertions(+) create mode 100644 icons/AddCircle_18_N.svg create mode 100644 icons/RemoveCircle_18_N.svg diff --git a/blocks/gmo-program-details/gmo-program-details.css b/blocks/gmo-program-details/gmo-program-details.css index a10283e..9e6737d 100644 --- a/blocks/gmo-program-details/gmo-program-details.css +++ b/blocks/gmo-program-details/gmo-program-details.css @@ -897,6 +897,9 @@ body { position: sticky; position: -webkit-sticky; top: 0; + & > .showhide-deliverables { + margin-left: 10px; + } } } @@ -1053,6 +1056,10 @@ body { width: 200px; } +.header.column1 { + margin-left: 16px; +} + .column3 { width: 140px; } diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index f48615c..b3de788 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -140,6 +140,7 @@ export default async function decorate(block) { // deliverables tab + // todo: expand/collapse into +/- const deliverablesTab = div( { id: 'tab2', class: 'deliverables tab inactive'}, div( @@ -158,6 +159,8 @@ export default async function decorate(block) { { class: 'table-wrapper'}, div( { class: 'table-header' }, + img({ class: 'expand-deliverables showhide-deliverables', src: "/icons/AddCircle_18_N.svg" }), + img({ class: 'collapse-deliverables showhide-deliverables inactive', src: "/icons/RemoveCircle_18_N.svg" }), div({ class: 'header table-column column1' }, 'Deliverable Task Name'), div({ class: 'header table-column column2' }, 'Deliverable Type'), div({ class: 'header table-column column3' }, 'Platforms'), @@ -473,6 +476,18 @@ async function addProgramStats(block) { switchTab(event.target); }); + // enable expand/collapse all deliverables + block.querySelectorAll('.expand-deliverables, .collapse-deliverables').forEach((button) => { + button.addEventListener('click', (event) => { + const clickedBtn = event.currentTarget; + document.querySelector('.showhide-deliverables.inactive').classList.toggle('inactive'); + clickedBtn.classList.toggle('inactive'); + + const expand = clickedBtn.classList.contains('expand-deliverables'); + document.querySelectorAll('.row.collapsible').forEach((group) => toggleGroup(group, expand)); + }); + }) + // decorate any new icons decorateIcons(block); @@ -480,6 +495,21 @@ async function addProgramStats(block) { hideLoadingOverlay(bodyWrapper); } +function toggleGroup(group, expand) { + if (expand) { + group.querySelector('.icon-next').classList.add('inactive'); + group.querySelector('.icon-collapse').classList.remove('inactive'); + } else { + group.querySelector('.icon-next').classList.remove('inactive'); + group.querySelector('.icon-collapse').classList.add('inactive'); + } + Array.from(group.children).forEach((child) => { + if (child.classList.contains('row')) { + child.classList.toggle('inactive', !expand); + } + }); +}; + function enableBackBtn(block, blockConfig) { block.querySelector('.back-button').addEventListener('click', () => { const host = location.origin + getBaseConfigPath(); diff --git a/icons/AddCircle_18_N.svg b/icons/AddCircle_18_N.svg new file mode 100644 index 0000000..c292803 --- /dev/null +++ b/icons/AddCircle_18_N.svg @@ -0,0 +1,11 @@ + + + + + S AddCircle 18 N + + \ No newline at end of file diff --git a/icons/RemoveCircle_18_N.svg b/icons/RemoveCircle_18_N.svg new file mode 100644 index 0000000..75f7810 --- /dev/null +++ b/icons/RemoveCircle_18_N.svg @@ -0,0 +1,11 @@ + + + + + S RemoveCircle 18 N + + \ No newline at end of file From ec890a453d4d873579748619f043c66e8bad60c1 Mon Sep 17 00:00:00 2001 From: Michael Dickson Date: Tue, 3 Dec 2024 12:18:10 -0500 Subject: [PATCH 2/4] forcing update of shared-program.js --- scripts/shared-program.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/shared-program.js b/scripts/shared-program.js index 7c0d2df..bf13f61 100644 --- a/scripts/shared-program.js +++ b/scripts/shared-program.js @@ -157,4 +157,4 @@ export function domEl(tag, ...items) { export function div(...items) { return domEl('div', ...items); } export function span(...items) { return domEl('span', ...items); } export function img(...items) { return domEl('img', ...items); } -export function a(...items) { return domEl('a', ...items); } \ No newline at end of file +export function a(...items) { return domEl('a', ...items); } From d65160afd5b0f6d6e7a71c3c61117b76ec154ac1 Mon Sep 17 00:00:00 2001 From: Michael Dickson Date: Tue, 3 Dec 2024 12:26:59 -0500 Subject: [PATCH 3/4] remove comment --- blocks/gmo-program-details/gmo-program-details.js | 1 - 1 file changed, 1 deletion(-) diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index b3de788..4dc57b7 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -140,7 +140,6 @@ export default async function decorate(block) { // deliverables tab - // todo: expand/collapse into +/- const deliverablesTab = div( { id: 'tab2', class: 'deliverables tab inactive'}, div( From ee3f6814e80173e07a2f402e2f19bdd1e77c8743 Mon Sep 17 00:00:00 2001 From: Michael Dickson Date: Tue, 3 Dec 2024 13:22:29 -0500 Subject: [PATCH 4/4] add tooltip to expand/collapse button --- blocks/gmo-program-details/gmo-program-details.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 4dc57b7..414c972 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -140,6 +140,7 @@ export default async function decorate(block) { // deliverables tab + const expandCollapseTooltip = 'Expand/Collapse All Deliverable Tasks'; const deliverablesTab = div( { id: 'tab2', class: 'deliverables tab inactive'}, div( @@ -158,8 +159,8 @@ export default async function decorate(block) { { class: 'table-wrapper'}, div( { class: 'table-header' }, - img({ class: 'expand-deliverables showhide-deliverables', src: "/icons/AddCircle_18_N.svg" }), - img({ class: 'collapse-deliverables showhide-deliverables inactive', src: "/icons/RemoveCircle_18_N.svg" }), + img({ class: 'expand-deliverables showhide-deliverables', src: "/icons/AddCircle_18_N.svg", title: expandCollapseTooltip }), + img({ class: 'collapse-deliverables showhide-deliverables inactive', src: "/icons/RemoveCircle_18_N.svg", title: expandCollapseTooltip }), div({ class: 'header table-column column1' }, 'Deliverable Task Name'), div({ class: 'header table-column column2' }, 'Deliverable Type'), div({ class: 'header table-column column3' }, 'Platforms'),