Add clear filter button

Podcastindex-org · Dec 22, 2024 · e41a23b · e41a23b
1 parent 1019fe7
commit e41a23b
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 6 deletions.
diff --git a/webroot/html/home.html b/webroot/html/home.html
@@ -63,14 +63,15 @@ <h5 class="titleHeader">
     </div>
     <div class="messaging">
         <div class="inbox_msg">
-            <div id="inbox-filters" style="display: flex; justify-content: space-between" class="d-none">
+            <div id="inbox-filters" style="display: flex; align-items: center;" class="d-none">
                 <div id="filter-podcasts" class="dropdown">
-                    <button class="btn btn-sm btn-outline-dark text-light dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false" style="border: .2rem transparent;">
+                    <button class="btn btn-outline-dark text-light dropdown-toggle py-1" type="button" data-toggle="dropdown" aria-expanded="false" style="border: .2rem transparent;">
                         Filter by podcast
                     </button>
                     <div class="dropdown-menu" style="font-size: .875rem;">
                     </div>
                 </div>
+                <a href="#" class="clear-filters d-none">❌</a>
             </div>
             <div class="mesgs">
                 <div class="msg_history"></div>

diff --git a/webroot/html/sent.html b/webroot/html/sent.html
@@ -63,14 +63,15 @@ <h5 class="titleHeader">
     </div>
     <div class="messaging">
         <div class="inbox_msg">
-            <div id="inbox-filters" style="display: flex; justify-content: space-between" class="d-none">
+            <div id="inbox-filters" style="display: flex; align-items: center;" class="d-none">
                 <div id="filter-podcasts" class="dropdown">
-                    <button class="btn btn-sm btn-outline-dark text-light dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false" style="border: .2rem transparent;">
+                    <button class="btn btn-outline-dark text-light dropdown-toggle py-1" type="button" data-toggle="dropdown" aria-expanded="false" style="border: .2rem transparent;">
                         Filter by podcast
                     </button>
                     <div class="dropdown-menu" style="font-size: .875rem;">
                     </div>
                 </div>
+                <a href="#" class="clear-filters d-none">❌</a>
             </div>
             <div class="mesgs">
                 <div class="msg_history"></div>

diff --git a/webroot/html/streams.html b/webroot/html/streams.html
@@ -63,14 +63,15 @@ <h5 class="titleHeader">
     </div>
     <div class="messaging">
         <div class="inbox_msg">
-            <div id="inbox-filters" style="display: flex; justify-content: space-between" class="d-none">
+            <div id="inbox-filters" style="display: flex; align-items: center;" class="d-none">
                 <div id="filter-podcasts" class="dropdown">
-                    <button class="btn btn-sm btn-outline-dark text-light dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false" style="border: .2rem transparent;">
+                    <button class="btn btn-outline-dark text-light dropdown-toggle py-1" type="button" data-toggle="dropdown" aria-expanded="false" style="border: .2rem transparent;">
                         Filter by podcast
                     </button>
                     <div class="dropdown-menu" style="font-size: .875rem;">
                     </div>
                 </div>
+                <a href="#" class="clear-filters d-none">❌</a>
             </div>
             <div class="mesgs">
                 <div class="msg_history"></div>

diff --git a/webroot/script/helipad.js b/webroot/script/helipad.js
@@ -949,6 +949,7 @@ $(document).ready(function () {
             $('#filter-podcasts button').text(`Filtering by `).append($('<b>').text(filters.podcast));
             $('#inbox-filters').removeClass('d-none')
             $('.filter a').addClass('text-danger')
+            $('.clear-filters').removeClass('d-none')
         }
 
         $('.filter a').click((ev) => {
@@ -984,12 +985,29 @@ $(document).ready(function () {
                     $('.filter a').removeClass('text-danger')
                 }
 
+                $('.clear-filters').toggleClass('d-none', filters.podcast === null);
+
                 inbox.empty();
                 $dropdown.empty();
                 getBoosts(currentInvoiceIndex, 100, true, true, false);
                 sessionStorage.setItem(config.filterName, JSON.stringify(filters));
             });
         });
+
+        $('.clear-filters').on('click', async (ev) => {
+            filters.podcast = null;
+
+            $('.filter a').removeClass('text-danger')
+            $('#filter-podcasts button').text(`Filter by podcast`);
+            $('.clear-filters').addClass('d-none');
+            $('#inbox-filters').toggleClass('d-none');
+
+            inbox.empty();
+            $('#filter-podcasts .dropdown-menu').empty();
+
+            getBoosts(currentInvoiceIndex, 100, true, true, false);
+            sessionStorage.setItem(config.filterName, JSON.stringify(filters));
+        });
     }
 
     //Build the UI with the page loads

diff --git a/webroot/style/default.css b/webroot/style/default.css
@@ -401,6 +401,10 @@ ul.navButtons li a[aria-selected="true"] {
     display: none;
 }
 
+a.clear-filters:hover {
+    opacity: 0.7;
+}
+
 .spinner {
     width: 1em;
     height: 1em;