create: activeFilterIndicator

Author: NarrowsProjects

lib/public/app.css

@@ -718,6 +718,33 @@ label {
     opacity: 0.5;
 }
 
+.active-filters-indicator {
+    border-radius: .25rem;
+    padding: var(--space-xs) var(--space-s) var(--space-xs) var(--space-s);
+    margin: 0 0 0 var(--space-s);
+}
+
+.inactive {
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+.pulse-green {
+  animation: pulseGreen 2s infinite;
+}
+
+@keyframes pulseGreen {
+  0% {
+    box-shadow: 0 0 0px rgba(102, 255, 7, 0.6);
+  }
+  50% {
+    box-shadow: 0 0 10px rgba(102, 255, 7, 0.9);
+  }
+  100% {
+    box-shadow: 0 0 0px rgba(102, 255, 7, 0.6);
+  }
+}
+
 /**
  * Breakpoints :
  * small :           x <  600 (default styles)

lib/public/components/Filters/common/filtersPanelPopover.js

@@ -168,6 +168,21 @@ const pasteButtonOption = (model) => {
     }, 'Paste filters');
 };
 
+/**
+ * A indicates if any filters are currently active on the page
+ *
+ * @param {boolean} activeFilters if true, component will turn green and glow
+ * @returns {Component} the active filters indicator
+ */
+const activeFilterIndicator = (activeFilters) => {
+    const innerText = `Filters ${activeFilters ? 'Active' : 'Inactive'}`;
+
+    let element = '.active-filters-indicator.b1';
+    element += activeFilters ? '.pulse-green.b-success.success' : '.inactive';
+
+    return h(element, innerText);
+};
+
 /**
  * Return component composed of the filter popover button and a dropdown trigger
  *
@@ -195,6 +210,7 @@ export const filtersPanelPopover = (filteringModel, filtersConfiguration, config
                     ],
                 ),
             ),
+            activeFilterIndicator(hasActiveFilters),
         ],
     );
 };