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}
|
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…
Reference in New Issue
Block a user