mirror of https://github.com/Sonarr/Sonarr
New: Show filter indicator when filter is applied to a view
Closes #4863
This commit is contained in:
parent
1ee40215e7
commit
6debc77408
|
@ -57,6 +57,7 @@ class FilterMenu extends Component {
|
||||||
>
|
>
|
||||||
<ButtonComponent
|
<ButtonComponent
|
||||||
iconName={icons.FILTER}
|
iconName={icons.FILTER}
|
||||||
|
showIndicator={selectedFilterKey !== 'all'}
|
||||||
text="Filter"
|
text="Filter"
|
||||||
isDisabled={isDisabled}
|
isDisabled={isDisabled}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -6,6 +6,12 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.indicatorContainer {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,12 +1,15 @@
|
||||||
|
import classNames from 'classnames';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Icon from 'Components/Icon';
|
import Icon from 'Components/Icon';
|
||||||
import MenuButton from 'Components/Menu/MenuButton';
|
import MenuButton from 'Components/Menu/MenuButton';
|
||||||
|
import { icons } from 'Helpers/Props';
|
||||||
import styles from './PageMenuButton.css';
|
import styles from './PageMenuButton.css';
|
||||||
|
|
||||||
function PageMenuButton(props) {
|
function PageMenuButton(props) {
|
||||||
const {
|
const {
|
||||||
iconName,
|
iconName,
|
||||||
|
showIndicator,
|
||||||
text,
|
text,
|
||||||
...otherProps
|
...otherProps
|
||||||
} = props;
|
} = props;
|
||||||
|
@ -21,6 +24,22 @@ function PageMenuButton(props) {
|
||||||
size={18}
|
size={18}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
{
|
||||||
|
showIndicator ?
|
||||||
|
<span
|
||||||
|
className={classNames(
|
||||||
|
styles.indicatorContainer,
|
||||||
|
'fa-layers fa-fw'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Icon
|
||||||
|
name={icons.CIRCLE}
|
||||||
|
size={9}
|
||||||
|
/>
|
||||||
|
</span> :
|
||||||
|
null
|
||||||
|
}
|
||||||
|
|
||||||
<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,
|
||||||
|
showIndicator: PropTypes.bool.isRequired,
|
||||||
text: PropTypes.string
|
text: PropTypes.string
|
||||||
};
|
};
|
||||||
|
|
||||||
|
PageMenuButton.defaultProps = {
|
||||||
|
showIndicator: false
|
||||||
|
};
|
||||||
|
|
||||||
export default PageMenuButton;
|
export default PageMenuButton;
|
||||||
|
|
|
@ -7,6 +7,12 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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,12 +1,15 @@
|
||||||
|
import classNames from 'classnames';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Icon from 'Components/Icon';
|
import Icon from 'Components/Icon';
|
||||||
import MenuButton from 'Components/Menu/MenuButton';
|
import MenuButton from 'Components/Menu/MenuButton';
|
||||||
|
import { icons } from 'Helpers/Props';
|
||||||
import styles from './ToolbarMenuButton.css';
|
import styles from './ToolbarMenuButton.css';
|
||||||
|
|
||||||
function ToolbarMenuButton(props) {
|
function ToolbarMenuButton(props) {
|
||||||
const {
|
const {
|
||||||
iconName,
|
iconName,
|
||||||
|
showIndicator,
|
||||||
text,
|
text,
|
||||||
...otherProps
|
...otherProps
|
||||||
} = props;
|
} = props;
|
||||||
|
@ -22,6 +25,22 @@ function ToolbarMenuButton(props) {
|
||||||
size={21}
|
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.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,
|
||||||
|
showIndicator: PropTypes.bool.isRequired,
|
||||||
text: PropTypes.string
|
text: PropTypes.string
|
||||||
};
|
};
|
||||||
|
|
||||||
|
ToolbarMenuButton.defaultProps = {
|
||||||
|
showIndicator: false
|
||||||
|
};
|
||||||
|
|
||||||
export default ToolbarMenuButton;
|
export default ToolbarMenuButton;
|
||||||
|
|
Loading…
Reference in New Issue