#864 Sticky filters

src/assets/css/inputs.css

@@ -237,6 +237,17 @@ button, .btn {
     padding-left: 1rem;
 }
 
+.btn-meta-disabled,
+.btn-meta-disabled:hover,
+.btn-meta-disabled:focus,
+.btn-meta-disabled:active {
+    background-color: $brand-dark-color;
+    color: $brand-font-color;
+    outline: none;
+    box-shadow:none;
+    border:0;
+}
+
 
 /*
 *  CUSTOM CHECKBOX

src/components/filters/Filters.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import FiltersFrequent from './FiltersFrequent';
 import FiltersNotFrequent from './FiltersNotFrequent';
+import FiltersStatic from './FiltersStatic';
 
 class Filters extends Component {
     constructor(props) {
@@ -89,7 +90,9 @@ class Filters extends Component {
     sortFilters = (data) => {
         return {
             frequentFilters: data.filter(filter => filter.frequent),
-            notFrequentFilters: data.filter(filter => !filter.frequent)
+            notFrequentFilters: data.filter(filter =>
+                !filter.frequent && !filter.static),
+            staticFilters: data.filter(filter => filter.static)
         }
     }
 
@@ -116,7 +119,7 @@ class Filters extends Component {
     render() {
         const {filterData, windowType, viewId} = this.props;
         const {
-            frequentFilters, notFrequentFilters
+            frequentFilters, notFrequentFilters, staticFilters
         } = this.sortFilters(filterData);
         const {notValidFields, widgetShown, filter} = this.state;
         return (
@@ -151,6 +154,12 @@ class Filters extends Component {
                             dropdownToggled={this.dropdownToggled}
                         />
                     }
+                    {!!staticFilters.length &&
+                        <FiltersStatic
+                            data={staticFilters}
+                            clearFilters={this.clearFilters}
+                        />
+                    }
                 </div>
             </div>
         )

src/components/filters/FiltersStatic.js

@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+
+class FiltersStatic extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        const {data, clearFilters} = this.props;
+        return (
+            <div className="filter-wrapper">
+                {data.map((item, index) => {
+                    return (
+                        <div className="filter-wrapper" key={index}>
+                            <button
+                                className={
+                                    'btn btn-meta-disabled ' +
+                                    'btn-distance btn-sm'
+                                }
+                                onClick={clearFilters}
+                            >
+                                <i
+                                    className="meta-icon-trash"
+                                />
+                                {item.caption}
+                            </button>
+                        </div>);
+                    })
+                }
+            </div>
+        );
+    }
+}
+
+export default FiltersStatic;