Add reset button to search filter

mozilla · Jul 6, 2021 · 1b70988 · 1b70988
1 parent be8276e
commit 1b70988
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 2 deletions.
diff --git a/privaterelay/templates/includes/dashboard-filter.html b/privaterelay/templates/includes/dashboard-filter.html
@@ -14,6 +14,9 @@
                 /
                 <span class="js-filter-case-total"></span>
             </div>
+            <button class="c-filter-reset js-filter-reset">
+                <img src="/static/images/x-close.svg" alt="">
+            </button>
         </form>
     </div>
     <div class="c-filter-date">

diff --git a/static/js/filter.js b/static/js/filter.js
@@ -10,11 +10,18 @@
     const filterLabelTotalCases = document.querySelector(".js-filter-case-total");
     const filterLabelVisibleCases = document.querySelector(".js-filter-case-visible");
 
+    const filterResetButton = document.querySelector(".js-filter-reset")
+
     const filterInput = document.querySelector(".js-filter-search-input");
 
 	function filterInputWatcher(e) {
 		const query = e.target.value.toLowerCase();
-
+
+        // if (query === "") {
+        //     resetFilter();
+        //     return;
+        // }
+
 		// Hide all cases
 		aliases.forEach(alias => {
             alias.style.display = "none";
@@ -70,8 +77,18 @@
         filterLabelTotalCases.textContent = aliases.length;
 
 		filterInput.addEventListener("input", filterInputWatcher, false);
+
+        filterResetButton.addEventListener("click", resetFilter, false);
 	}
 
+    function resetFilter() {
+        filterLabelVisibleCases.textContent = aliases.length;
+        filterLabelTotalCases.textContent = aliases.length;
+        aliases.forEach(alias => {
+            alias.style.display = "block";
+        });
+    }
+
     // TODO: Remove timeout and watch for event to detect if add-on is enabled (checking if labels exist)
     setTimeout(filterInit, 250);
 

diff --git a/static/scss/components/filter-bar.scss b/static/scss/components/filter-bar.scss
@@ -23,13 +23,16 @@
         &:focus + .c-filter-case-count {
             opacity: 0.5;
         }
+        &:focus + .c-filter-case-count + .c-filter-reset {
+            opacity: 1;
+        }
     }
 
     .c-filter-case-count {
         display: flex;
         opacity: 0;
         position: absolute;
-        right: 0.5rem;
+        right: 2.5rem;
         top: 0;
         align-items: center;
         height: 100%;
@@ -58,3 +61,25 @@
 .c-filter-date, .c-filter-cateogry {
     margin-left: $spacing-md;
 }
+
+.c-filter-reset {
+    background-color: $color-light-gray-40;
+    border-radius: 100%;
+    width: 1.5rem;
+    height: 1.5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    outline: 0;
+    appearance: none;
+    border: 0;
+    position: absolute;
+    right: 0.5rem;
+    top: 0.5rem;
+    opacity: 0;
+
+    img {
+        width: 1rem;
+        display: block;
+    }
+}