[#2888] Indicate active case-filters on mobile

maykinmedia · Jan 14, 2025 · 62afa06 · 62afa06
1 parent 65b1058
commit 62afa06
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 4 deletions.
diff --git a/src/open_inwoner/js/components/FilterBar/filterbar.js b/src/open_inwoner/js/components/FilterBar/filterbar.js
@@ -8,14 +8,14 @@ export class FilterBar {
     this.backdrop = document.getElementById('filterBarBackdrop')
     this.closeButton = node.querySelector('.show-controls')
 
-    // Check if elements are found
+    // Break if elements are found
     if (!this.filterPopup) {
-      console.error('Filter popup button not found!')
+      // console.error('Filter popup button not found!')
       return
     }
 
     if (!this.filterButton) {
-      console.error('Select button not found!')
+      // console.error('Select button not found!')
       return
     }
 

diff --git a/src/open_inwoner/js/components/FilterBar/multiselect_listbox_checkbox.js b/src/open_inwoner/js/components/FilterBar/multiselect_listbox_checkbox.js
@@ -46,6 +46,8 @@ function initFilterBar() {
       const selectButton = document.getElementById('selectButton')
       selectButton.innerHTML = '' // Clear the button content before appending new elements
 
+      const selectionFilterBar = document.getElementById('selectionFilterBar')
+
       let expandIcon = document.createElement('span')
       expandIcon.classList.add('material-icons')
       expandIcon.setAttribute('aria-hidden', 'true')
@@ -62,13 +64,15 @@ function initFilterBar() {
         selectButton.textContent = 'Status '
         selectButton.appendChild(expandIcon)
         selectButton.classList.remove('active')
+        selectionFilterBar.classList.remove('active')
       } else if (selectedFilters.length === 1) {
         const ellipsisSpan = document.createElement('span')
         ellipsisSpan.classList.add('ellipsis')
         ellipsisSpan.textContent = selectedFilters[0]
         selectButton.appendChild(ellipsisSpan)
         selectButton.appendChild(closeIcon)
         selectButton.classList.add('active')
+        selectionFilterBar.classList.add('active')
       } else {
         selectButton.textContent = 'Status '
         const activeFilterSpan = document.createElement('span')
@@ -77,6 +81,7 @@ function initFilterBar() {
         selectButton.appendChild(activeFilterSpan)
         selectButton.appendChild(closeIcon)
         selectButton.classList.add('active')
+        selectionFilterBar.classList.add('active')
       }
 
       const handleClose = function () {
@@ -127,6 +132,21 @@ function initFilterBar() {
           resetMultiSelectFilters.classList.add('hide') // Hide the button
         }
       }
+
+      // Add inactive/active state toggle for filters
+      const filterLabels = document.querySelectorAll(
+        '.filter-bar .checkbox__label'
+      )
+      filterLabels.forEach((label) => {
+        const checkbox = label.previousElementSibling
+        if (checkbox.checked) {
+          label.classList.add('active-filter')
+          label.classList.remove('inactive-filter')
+        } else {
+          label.classList.add('inactive-filter')
+          label.classList.remove('active-filter')
+        }
+      })
     }
 
     const initSelectBehavior = function () {

diff --git a/src/open_inwoner/scss/components/FilterBar/FilterBar.scss b/src/open_inwoner/scss/components/FilterBar/FilterBar.scss
@@ -56,6 +56,7 @@
 
   &__mobile-button {
     .button.show-modal {
+      padding-right: var(--spacing-small);
       margin-top: 0;
 
       & [class*='icons'] {
@@ -72,6 +73,36 @@
     }
   }
 
+  &__mobile-selection {
+    display: flex;
+    align-items: center;
+    justify-content: left;
+    gap: 0;
+    color: var(--color-gray-dark);
+    & > [class*='icons'] {
+      display: none;
+    }
+    .button {
+      color: var(--color-gray-dark);
+      [class*='icons'] {
+        color: var(--color-gray-dark);
+      }
+    }
+
+    &.active {
+      color: var(--color-primary);
+      & > [class*='icons'] {
+        display: inline;
+      }
+      .button {
+        color: var(--color-primary);
+        [class*='icons'] {
+          color: var(--color-primary);
+        }
+      }
+    }
+  }
+
   &__label {
     display: none;
     padding-top: calc(var(--font-size-body) / 2);
@@ -165,5 +196,13 @@
       position: static;
       z-index: initial;
     }
+
+    .filter-bar__mobile-selection {
+      &.active {
+        & > [class*='icons'] {
+          display: none;
+        }
+      }
+    }
   }
 }
diff --git a/src/open_inwoner/templates/pages/cases/list_inner.html b/src/open_inwoner/templates/pages/cases/list_inner.html
@@ -16,7 +16,11 @@ <h1 class="utrecht-heading-1" id="cases">{{ page_title }} ({{ paginator.count }}
         </div>
         <div class="filter-bar__mobile-button">
             <p class="utrecht-paragraph filter-bar__heading">Filters</p>
-            {% button icon="filter_alt" text=_("Filters") icon_outlined=True transparent=True extra_classes="show-modal" %}
+            <div class="filter-bar__mobile-selection" id="selectionFilterBar">
+                {% button icon="filter_alt" text=_("Filters") icon_outlined=True transparent=True extra_classes="show-modal" %}
+                {% icon icon="check" icon_position="after" extra_classes="icon--active-filters" outlined=True %}
+                <span class="sr-only sr-only--filters-active">Gekozen filters</span>
+            </div>
             <p class="utrecht-paragraph filter-bar__status-text">Status</p>
         </div>
         <form class="form filter-bar__form" method="GET" id="filter-form" novalidate>