Skip to content
Jump to bottom

Improve style and handling of Petition Step accordions (CFM-422) #283

Merged
merged 1 commit into from Feb 9, 2025
Merged

Improve style and handling of Petition Step accordions (CFM-422) #283

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 6 additions & 0 deletions app/resources/locales/en_US/information.po
View file
Open in desktop
Expand Up @@ -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"

Expand Down
3 changes: 3 additions & 0 deletions app/resources/locales/en_US/operation.po
View file
Open in desktop
Expand Up @@ -285,6 +285,9 @@ msgstr "Start"
msgid "Cos.switch"
msgstr "Switch To This CO"

msgid "toggle.all"
msgstr "Toggle All"

msgid "unfreeze"
msgstr "Unfreeze"

Expand Down
60 changes: 40 additions & 20 deletions app/templates/Petitions/fields.inc
View file
Open in desktop
Expand Up @@ -223,46 +223,66 @@ if (!empty($vv_obj?->petitioner_person?->id)) {
</div>
</li>

<li class="form-list-header">
<li class="form-list-header" id="enrollment-steps-header">
<h2>
<?= __d('information', 'enrollment.steps') ?>
</h2>
<div class="enrollment-steps-toggle-all">
<?php
$stepIds = '';
foreach($vv_obj->enrollment_flow->enrollment_flow_steps as $step) {
$stepIds .= 'collapse-box-' . $step->id . ' ';
}
?>
<button class="btn btn-sm enrollment-steps-toggle-all-button"
type="button"
data-bs-toggle="collapse"
aria-expanded="false"
aria-label="<?= __d('information','petition.step.toggle.details.all') ?>"
aria-controls="<?= $stepIds ?>"
data-bs-target=".petition-attrs.collapse">
<em class="material-symbols-outlined petition-step-collapse-icon" aria-hidden="true">
expand_all
</em>
<span class="button-text"><?= __d('operation','toggle.all') ?></span>
</button>
</div>
</li>


<?php foreach($vv_obj->enrollment_flow->enrollment_flow_steps as $step): ?>
<?php $result = Hash::extract($vv_obj->petition_step_results, "{n}[enrollment_flow_step_id=$step->id]"); ?>
<li>
<div class="field">
<div class="field-name ">
<div class="field field-with-toggle" data-bs-toggle="collapse" data-bs-target="#collapse-box-<?= $step->id ?>">
<div class="field-name">
<div class="field-title">
<?= $step->description ?>
</div>
</div>
<div class="field-info">
<?= !empty($result) ? $result[0]->comment : '' ?>
<a class="cm-toggle nospin petition-step-collapse-link"
data-bs-toggle="collapse"
href="#collapse-box-<?= $step->id ?>"
onclick="stepCollapseToggle(event, this)"
role="button"
aria-expanded="false"
aria-controls="collapse-box-<?= $step->id ?>">
<div class="petition-step-info"><?= !empty($result) ? $result[0]->comment : '' ?></div>
<button class="cm-toggle nospin petition-step-toggle collapsed"
type="button"
data-bs-toggle="collapse"
aria-label="<?= __d('information','petition.step.toggle.details') ?>"
aria-expanded="false"
aria-controls="collapse-box-<?= $step->id ?>"
data-bs-target="#collapse-box-<?= $step->id ?>">
<em class="material-symbols-outlined petition-step-collapse-icon" aria-hidden="true">
arrow_drop_down
</em>
</a>
</button>
</div>
</div>
</li>
<li id="collapse-box-<?= $step->id ?>" class="petition-attrs collapse">
<h3><?= $step->plugin ?></h3>
<?php
[$pluginName, $pluginClass] = explode('.', $step->plugin);
$elementName = lcfirst($pluginClass) . 'Step';
<div id="collapse-box-<?= $step->id ?>" class="petition-attrs collapse">
<h3><?= $step->plugin ?></h3>
<?php
[$pluginName, $pluginClass] = explode('.', $step->plugin);
$elementName = lcfirst($pluginClass) . 'Step';

print $this->element("$pluginName.petition/$elementName", ['vv_step' => $step]);
?>
print $this->element("$pluginName.petition/$elementName", ['vv_step' => $step]);
?>
</div>
</li>
<?php endforeach; ?>

Expand Down
17 changes: 17 additions & 0 deletions app/templates/element/javascript.php
View file
Open in desktop
Expand Up @@ -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");

Expand Down
65 changes: 45 additions & 20 deletions app/webroot/css/co-base.css
View file
Open in desktop
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
}
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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);
Expand Down
27 changes: 0 additions & 27 deletions app/webroot/js/comanage/comanage.js
View file
Open in desktop
Expand Up @@ -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");
}
}