mirror of
https://github.com/Radarr/Radarr.git
synced 2024-09-11 20:12:41 +02:00
New: Indicator when Filter is applied
This commit is contained in:
parent
6e601ede37
commit
1a3e0a3163
@ -59,6 +59,7 @@ class FilterMenu extends Component {
|
||||
iconName={icons.FILTER}
|
||||
text="Filter"
|
||||
isDisabled={isDisabled}
|
||||
indicator={selectedFilterKey !== 'all'}
|
||||
/>
|
||||
|
||||
<FilterMenuContent
|
||||
|
@ -6,6 +6,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
.indicatorBackground {
|
||||
color: $themeRed;
|
||||
}
|
||||
|
||||
.indicatorContainer {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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';
|
||||
}
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user