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'} /> + { + indicator && + + + + } +
{text}
@@ -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 && + + + + } +
{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;