From 1a3e0a3163978ca4a62a2037ce46f3bcd7ae4140 Mon Sep 17 00:00:00 2001
From: Qstick <qstick@gmail.com>
Date: Wed, 9 Oct 2019 22:48:43 -0400
Subject: [PATCH] New: Indicator when Filter is applied

---
 frontend/src/Components/Menu/FilterMenu.js    |  1 +
 .../src/Components/Menu/PageMenuButton.css    | 10 +++++++
 .../src/Components/Menu/PageMenuButton.js     | 26 ++++++++++++++++++-
 .../src/Components/Menu/ToolbarMenuButton.css | 10 +++++++
 .../src/Components/Menu/ToolbarMenuButton.js  | 26 ++++++++++++++++++-
 5 files changed, 71 insertions(+), 2 deletions(-)

diff --git a/frontend/src/Components/Menu/FilterMenu.js b/frontend/src/Components/Menu/FilterMenu.js
index d989605e5..d71375a16 100644
--- a/frontend/src/Components/Menu/FilterMenu.js
+++ b/frontend/src/Components/Menu/FilterMenu.js
@@ -59,6 +59,7 @@ class FilterMenu extends Component {
             iconName={icons.FILTER}
             text="Filter"
             isDisabled={isDisabled}
+            indicator={selectedFilterKey !== 'all'}
           />
 
           <FilterMenuContent
diff --git a/frontend/src/Components/Menu/PageMenuButton.css b/frontend/src/Components/Menu/PageMenuButton.css
index d979a1708..778070e99 100644
--- a/frontend/src/Components/Menu/PageMenuButton.css
+++ b/frontend/src/Components/Menu/PageMenuButton.css
@@ -6,6 +6,16 @@
   }
 }
 
+.indicatorBackground {
+  color: $themeRed;
+}
+
+.indicatorContainer {
+  position: absolute;
+  top: 10px;
+  right: 12px;
+}
+
 .label {
   margin-left: 5px;
 }
diff --git a/frontend/src/Components/Menu/PageMenuButton.js b/frontend/src/Components/Menu/PageMenuButton.js
index abbfc98f8..a0aaf42ba 100644
--- a/frontend/src/Components/Menu/PageMenuButton.js
+++ b/frontend/src/Components/Menu/PageMenuButton.js
@@ -1,5 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import classNames from 'classnames';
+import { icons } from 'Helpers/Props';
 import Icon from 'Components/Icon';
 import MenuButton from 'Components/Menu/MenuButton';
 import styles from './PageMenuButton.css';
@@ -8,6 +10,7 @@ function PageMenuButton(props) {
   const {
     iconName,
     text,
+    indicator,
     ...otherProps
   } = props;
 
@@ -21,6 +24,22 @@ function PageMenuButton(props) {
         size={18}
       />
 
+      {
+        indicator &&
+          <span
+            className={classNames(
+              styles.indicatorContainer,
+              'fa-layers fa-fw'
+            )}
+          >
+            <Icon
+              className={styles.indicatorBackground}
+              name={icons.CIRCLE}
+              size={10}
+            />
+          </span>
+      }
+
       <div className={styles.label}>
         {text}
       </div>
@@ -30,7 +49,12 @@ function PageMenuButton(props) {
 
 PageMenuButton.propTypes = {
   iconName: PropTypes.object.isRequired,
-  text: PropTypes.string
+  text: PropTypes.string,
+  indicator: PropTypes.bool.isRequired
+};
+
+PageMenuButton.defaultProps = {
+  indicator: false
 };
 
 export default PageMenuButton;
diff --git a/frontend/src/Components/Menu/ToolbarMenuButton.css b/frontend/src/Components/Menu/ToolbarMenuButton.css
index 71e966c71..fc4688854 100644
--- a/frontend/src/Components/Menu/ToolbarMenuButton.css
+++ b/frontend/src/Components/Menu/ToolbarMenuButton.css
@@ -7,6 +7,16 @@
   text-align: center;
 }
 
+.indicatorBackground {
+  color: $themeRed;
+}
+
+.indicatorContainer {
+  position: absolute;
+  top: 10px;
+  right: 12px;
+}
+
 .labelContainer {
   composes: labelContainer from '~Components/Page/Toolbar/PageToolbarButton.css';
 }
diff --git a/frontend/src/Components/Menu/ToolbarMenuButton.js b/frontend/src/Components/Menu/ToolbarMenuButton.js
index fe06793f6..01d15082d 100644
--- a/frontend/src/Components/Menu/ToolbarMenuButton.js
+++ b/frontend/src/Components/Menu/ToolbarMenuButton.js
@@ -1,5 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import classNames from 'classnames';
+import { icons } from 'Helpers/Props';
 import Icon from 'Components/Icon';
 import MenuButton from 'Components/Menu/MenuButton';
 import styles from './ToolbarMenuButton.css';
@@ -7,6 +9,7 @@ import styles from './ToolbarMenuButton.css';
 function ToolbarMenuButton(props) {
   const {
     iconName,
+    indicator,
     text,
     ...otherProps
   } = props;
@@ -22,6 +25,22 @@ function ToolbarMenuButton(props) {
           size={21}
         />
 
+        {
+          indicator &&
+            <span
+              className={classNames(
+                styles.indicatorContainer,
+                'fa-layers fa-fw'
+              )}
+            >
+              <Icon
+                className={styles.indicatorBackground}
+                name={icons.CIRCLE}
+                size={10}
+              />
+            </span>
+        }
+
         <div className={styles.labelContainer}>
           <div className={styles.label}>
             {text}
@@ -34,7 +53,12 @@ function ToolbarMenuButton(props) {
 
 ToolbarMenuButton.propTypes = {
   iconName: PropTypes.object.isRequired,
-  text: PropTypes.string
+  text: PropTypes.string,
+  indicator: PropTypes.bool.isRequired
+};
+
+ToolbarMenuButton.defaultProps = {
+  indicator: false
 };
 
 export default ToolbarMenuButton;