diff --git a/frontend/src/Components/Menu/FilterMenu.js b/frontend/src/Components/Menu/FilterMenu.js index d989605e5..408069fca 100644 --- a/frontend/src/Components/Menu/FilterMenu.js +++ b/frontend/src/Components/Menu/FilterMenu.js @@ -57,6 +57,7 @@ class FilterMenu extends Component { > diff --git a/frontend/src/Components/Menu/PageMenuButton.css b/frontend/src/Components/Menu/PageMenuButton.css index d979a1708..f207d5232 100644 --- a/frontend/src/Components/Menu/PageMenuButton.css +++ b/frontend/src/Components/Menu/PageMenuButton.css @@ -6,6 +6,12 @@ } } +.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..8c7a86740 100644 --- a/frontend/src/Components/Menu/PageMenuButton.js +++ b/frontend/src/Components/Menu/PageMenuButton.js @@ -1,12 +1,15 @@ +import classNames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; import Icon from 'Components/Icon'; import MenuButton from 'Components/Menu/MenuButton'; +import { icons } from 'Helpers/Props'; import styles from './PageMenuButton.css'; function PageMenuButton(props) { const { iconName, + showIndicator, text, ...otherProps } = props; @@ -21,6 +24,22 @@ function PageMenuButton(props) { size={18} /> + { + showIndicator ? + + + : + null + } +
{text}
@@ -30,7 +49,12 @@ function PageMenuButton(props) { PageMenuButton.propTypes = { iconName: PropTypes.object.isRequired, + showIndicator: PropTypes.bool.isRequired, text: PropTypes.string }; +PageMenuButton.defaultProps = { + showIndicator: false +}; + export default PageMenuButton; diff --git a/frontend/src/Components/Menu/ToolbarMenuButton.css b/frontend/src/Components/Menu/ToolbarMenuButton.css index 71e966c71..64abcfacc 100644 --- a/frontend/src/Components/Menu/ToolbarMenuButton.css +++ b/frontend/src/Components/Menu/ToolbarMenuButton.css @@ -7,6 +7,12 @@ text-align: center; } +.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..ba575753a 100644 --- a/frontend/src/Components/Menu/ToolbarMenuButton.js +++ b/frontend/src/Components/Menu/ToolbarMenuButton.js @@ -1,12 +1,15 @@ +import classNames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; import Icon from 'Components/Icon'; import MenuButton from 'Components/Menu/MenuButton'; +import { icons } from 'Helpers/Props'; import styles from './ToolbarMenuButton.css'; function ToolbarMenuButton(props) { const { iconName, + showIndicator, text, ...otherProps } = props; @@ -22,6 +25,22 @@ function ToolbarMenuButton(props) { size={21} /> + { + showIndicator ? + + + : + null + } +
{text} @@ -34,7 +53,12 @@ function ToolbarMenuButton(props) { ToolbarMenuButton.propTypes = { iconName: PropTypes.object.isRequired, + showIndicator: PropTypes.bool.isRequired, text: PropTypes.string }; +ToolbarMenuButton.defaultProps = { + showIndicator: false +}; + export default ToolbarMenuButton;