New: Indicator when Filter is applied

pull/3823/head
Qstick 5 years ago
parent 6e601ede37
commit 1a3e0a3163

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

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

@ -1,5 +1,7 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import classNames from 'classnames';
import { icons } from 'Helpers/Props';
import Icon from 'Components/Icon'; import Icon from 'Components/Icon';
import MenuButton from 'Components/Menu/MenuButton'; import MenuButton from 'Components/Menu/MenuButton';
import styles from './PageMenuButton.css'; import styles from './PageMenuButton.css';
@ -8,6 +10,7 @@ function PageMenuButton(props) {
const { const {
iconName, iconName,
text, text,
indicator,
...otherProps ...otherProps
} = props; } = props;
@ -21,6 +24,22 @@ function PageMenuButton(props) {
size={18} 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}> <div className={styles.label}>
{text} {text}
</div> </div>
@ -30,7 +49,12 @@ function PageMenuButton(props) {
PageMenuButton.propTypes = { PageMenuButton.propTypes = {
iconName: PropTypes.object.isRequired, iconName: PropTypes.object.isRequired,
text: PropTypes.string text: PropTypes.string,
indicator: PropTypes.bool.isRequired
};
PageMenuButton.defaultProps = {
indicator: false
}; };
export default PageMenuButton; export default PageMenuButton;

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

@ -1,5 +1,7 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import classNames from 'classnames';
import { icons } from 'Helpers/Props';
import Icon from 'Components/Icon'; import Icon from 'Components/Icon';
import MenuButton from 'Components/Menu/MenuButton'; import MenuButton from 'Components/Menu/MenuButton';
import styles from './ToolbarMenuButton.css'; import styles from './ToolbarMenuButton.css';
@ -7,6 +9,7 @@ import styles from './ToolbarMenuButton.css';
function ToolbarMenuButton(props) { function ToolbarMenuButton(props) {
const { const {
iconName, iconName,
indicator,
text, text,
...otherProps ...otherProps
} = props; } = props;
@ -22,6 +25,22 @@ function ToolbarMenuButton(props) {
size={21} 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.labelContainer}>
<div className={styles.label}> <div className={styles.label}>
{text} {text}
@ -34,7 +53,12 @@ function ToolbarMenuButton(props) {
ToolbarMenuButton.propTypes = { ToolbarMenuButton.propTypes = {
iconName: PropTypes.object.isRequired, iconName: PropTypes.object.isRequired,
text: PropTypes.string text: PropTypes.string,
indicator: PropTypes.bool.isRequired
};
ToolbarMenuButton.defaultProps = {
indicator: false
}; };
export default ToolbarMenuButton; export default ToolbarMenuButton;

Loading…
Cancel
Save