From 589eaec237b536a168b245df1589ce4dc673c025 Mon Sep 17 00:00:00 2001 From: Arlen Johnson Date: Thu, 6 Feb 2025 17:05:08 -0500 Subject: [PATCH] Improve style and handling of Petition Step accordions (CFM-422) --- app/resources/locales/en_US/information.po | 6 ++ app/resources/locales/en_US/operation.po | 3 + app/templates/Petitions/fields.inc | 60 +++++++++++++------- app/templates/element/javascript.php | 17 ++++++ app/webroot/css/co-base.css | 65 +++++++++++++++------- app/webroot/js/comanage/comanage.js | 27 --------- 6 files changed, 111 insertions(+), 67 deletions(-) diff --git a/app/resources/locales/en_US/information.po b/app/resources/locales/en_US/information.po index 10f681d6..c1587c10 100644 --- a/app/resources/locales/en_US/information.po +++ b/app/resources/locales/en_US/information.po @@ -123,6 +123,12 @@ msgstr "Petition Information" msgid "Petitions.pending" msgstr "This Petition has now been assigned to someone else. There is no further action for you at this time." +msgid "petition.step.toggle.details" +msgstr "toggle petition step details" + +msgid "petition.step.toggle.details.all" +msgstr "toggle all petition step details" + msgid "plugin.active" msgstr "Active" diff --git a/app/resources/locales/en_US/operation.po b/app/resources/locales/en_US/operation.po index 17babc82..28923127 100644 --- a/app/resources/locales/en_US/operation.po +++ b/app/resources/locales/en_US/operation.po @@ -285,6 +285,9 @@ msgstr "Start" msgid "Cos.switch" msgstr "Switch To This CO" +msgid "toggle.all" +msgstr "Toggle All" + msgid "unfreeze" msgstr "Unfreeze" diff --git a/app/templates/Petitions/fields.inc b/app/templates/Petitions/fields.inc index 5b488673..774b6f0a 100644 --- a/app/templates/Petitions/fields.inc +++ b/app/templates/Petitions/fields.inc @@ -223,46 +223,66 @@ if (!empty($vv_obj?->petitioner_person?->id)) { -
  • +

  • +
    + enrollment_flow->enrollment_flow_steps as $step) { + $stepIds .= 'collapse-box-' . $step->id . ' '; + } + ?> + +
    • enrollment_flow->enrollment_flow_steps as $step): ?> petition_step_results, "{n}[enrollment_flow_step_id=$step->id]"); ?>
  • -
    -
    +
    +
    description ?>
    - comment : '' ?> -
    -
    • -
  • -

    plugin ?>

    - plugin); - $elementName = lcfirst($pluginClass) . 'Step'; +
    +

    plugin ?>

    + plugin); + $elementName = lcfirst($pluginClass) . 'Step'; - print $this->element("$pluginName.petition/$elementName", ['vv_step' => $step]); - ?> + print $this->element("$pluginName.petition/$elementName", ['vv_step' => $step]); + ?> +
    • diff --git a/app/templates/element/javascript.php b/app/templates/element/javascript.php index 0e89b15d..5a7d9eca 100644 --- a/app/templates/element/javascript.php +++ b/app/templates/element/javascript.php @@ -217,6 +217,23 @@ } }); + // PETITION STEP / GENERAL FIELD TOGGLE + // We allow Bootstrap to manage the accordion behavior, but we must set the state of our arrows. + $('.field-with-toggle').click(function() { + let toggleButton = $(this).find('button.cm-toggle').first(); + if($(toggleButton).attr('aria-expanded') == 'false') { + $(toggleButton).find('em').text("arrow_drop_down"); + } else { + $(toggleButton).find('em').text("arrow_drop_up"); + } + }); + + // Toggle All button for Enrollment Flow Steps + // We click all the fields that have an associated accordion just to set the arrow state. + $('button.enrollment-steps-toggle-all-button').click(function() { + $('#view_Petitions').find('.field-with-toggle').trigger('click'); + }); + // Make all submit buttons pretty (Bootstrap) $("input:submit").addClass("spin submit-button btn btn-primary"); diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css index 799fa3b0..649c47d3 100644 --- a/app/webroot/css/co-base.css +++ b/app/webroot/css/co-base.css @@ -1001,21 +1001,6 @@ ul.form-list li.alert-banner .co-alert { white-space: nowrap; margin-right: 0.5em; } -/* PETITION PREVIEW */ -a.cm-toggle { - float: right; - border: none; - background-color: transparent; -} -a.cm-toggle .material-symbols, -a.cm-toggle .material-symbols-outlined{ - color: var(--cmg-color-headings); -} -a.cm-toggle .material-symbols, -a.cm-toggle .material-symbols-outlined { - font-size: 34px; - line-height: 17px; -} /* PLATFORM NOTICE (for COmanage CO) */ #platform-notice { padding: 0.5em; @@ -1464,18 +1449,31 @@ ul.form-list li { list-style: none; } ul.fields li.form-list-header { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; overflow-x: unset; margin-top: 2rem; -} -ul.fields li.form-list-header h2 { color: var(--cmg-color-txt-inverse); background-color: var(--cmg-color-btn-bg-001); - font-size: 1.4em; padding: 1rem; } +ul.fields li.form-list-header h2 { + font-size: 1.4em; + padding: 0; + color: var(--cmg-color-txt-inverse); +} +ul.fields li.form-list-header .btn { + color: var(--cmg-color-txt-inverse); + padding: 0; +} ul.form-list li:focus-within { background-color: var(--cmg-color-bg-001); } +ul.form-list li.form-list-header:focus-within { + background-color: var(--cmg-color-btn-bg-001); +} ul.form-list li.fields-submit:focus-within { background-color: var(--cmg-color-body-bg); } @@ -1490,6 +1488,9 @@ ul.form-list li .field:hover, ul.form-list li fieldset:hover { background-color: var(--cmg-color-bg-001); } +ul.form-list li .field.field-with-toggle:hover { + background-color: unset; +} ul.form-list li.fields-submit { background-color: unset; border: none; @@ -1503,6 +1504,24 @@ ul.form-list .field-name { ul.form-list .field-info { position: relative; } +ul.form-list .field-with-toggle { + cursor: pointer; +} +ul.form-list .field-with-toggle .field-info { + display: flex; + justify-content: space-between; + align-items: center; +} +ul.form-list button.cm-toggle { + border: none; + background-color: transparent; +} +#content ul.form-list button.cm-toggle .material-symbols, +#content ul.form-list button.cm-toggle .material-symbols-outlined { + color: var(--cmg-color-headings); + font-size: 34px; + line-height: 17px; +} ul.form-list .field-desc { font-size: 0.9em; font-style: italic; @@ -2083,17 +2102,23 @@ ul.form-list li.petition-status-title { margin-bottom: -1rem; border: none; } -ul.form-list li.petition-status-title h2 { +ul.form-list li.petition-status-title { /* default colors for most status titles */ background-color: var(--cmg-color-highlight-009); color: var(--cmg-color-highlight-010); border: 1px solid var(--cmg-color-highlight-011); } -ul.form-list li.petition-status-title-finalized h2 { +ul.form-list li.petition-status-title h2 { + color: var(--cmg-color-highlight-010); +} +ul.form-list li.petition-status-title-finalized { background-color: var(--cmg-color-highlight-006); color: var(--cmg-color-highlight-007); border: 1px solid var(--cmg-color-highlight-008); } +ul.form-list li.petition-status-title-finalized h2 { + color: var(--cmg-color-highlight-007); +} ul.form-list li.petition-enrollee-items, ul.form-list li.petition-enrollee-items .field:hover { background-color: var(--cmg-color-highlight-004); diff --git a/app/webroot/js/comanage/comanage.js b/app/webroot/js/comanage/comanage.js index a6e331d2..c2c87cf4 100644 --- a/app/webroot/js/comanage/comanage.js +++ b/app/webroot/js/comanage/comanage.js @@ -424,30 +424,3 @@ function setApplicationState(value, elem, reload= false) { } }); } - -function stepCollapseToggle(event, item) { - /** - * Toggles the expanded or collapsed state of the step element. - * - * This function prevents the default action and stops the propagation of the event, - * then toggles the "collapsed" class for the given element. It also updates - * the `aria-expanded` attribute and changes the icon displayed within the element. - * - * - If the element is collapsed, it sets `aria-expanded` to "false" and updates - * the icon to "arrow_drop_down." - * - If the element is expanded, it sets `aria-expanded` to "true" and updates - * the icon to "arrow_drop_up." - * - * @param {Event} event - The event triggered, usually by a click action. - * @param {HTMLElement} item - The DOM element being toggled that represents the step. - */ - event.preventDefault(); - event.stopPropagation(); - if ($(item).hasClass("collapsed")) { - $(item).attr("aria-expanded","false") - $(item).find('em').text("arrow_drop_down"); - } else { - $(item).attr("aria-expanded","true") - $(item).find('em').text("arrow_drop_up"); - } -} \ No newline at end of file