New: Show filter indicator when filter is applied to a view

Closes #4863
This commit is contained in:
Mark McDowall 2022-01-23 14:28:06 -08:00
parent 1ee40215e7
commit 6debc77408
5 changed files with 61 additions and 0 deletions

View File

@ -57,6 +57,7 @@ class FilterMenu extends Component {
>
<ButtonComponent
iconName={icons.FILTER}
showIndicator={selectedFilterKey !== 'all'}
text="Filter"
isDisabled={isDisabled}
/>

View File

@ -6,6 +6,12 @@
}
}
.indicatorContainer {
position: absolute;
top: 10px;
right: 12px;
}
.label {
margin-left: 5px;
}

View File

@ -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 ?
<span
className={classNames(
styles.indicatorContainer,
'fa-layers fa-fw'
)}
>
<Icon
name={icons.CIRCLE}
size={9}
/>
</span> :
null
}
<div className={styles.label}>
{text}
</div>
@ -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;

View File

@ -7,6 +7,12 @@
text-align: center;
}
.indicatorContainer {
position: absolute;
top: 10px;
right: 12px;
}
.labelContainer {
composes: labelContainer from '~Components/Page/Toolbar/PageToolbarButton.css';
}

View File

@ -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 ?
<span
className={classNames(
styles.indicatorContainer,
'fa-layers fa-fw'
)}
>
<Icon
name={icons.CIRCLE}
size={9}
/>
</span> :
null
}
<div className={styles.labelContainer}>
<div className={styles.label}>
{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;