mirror of https://github.com/lidarr/Lidarr
Fixed: Filter indicator in interactive search
Closes #2679 Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>
This commit is contained in:
parent
5ac1dace7f
commit
7b566caa7e
|
@ -57,9 +57,9 @@ class FilterMenu extends Component {
|
||||||
>
|
>
|
||||||
<ButtonComponent
|
<ButtonComponent
|
||||||
iconName={icons.FILTER}
|
iconName={icons.FILTER}
|
||||||
|
showIndicator={selectedFilterKey !== 'all'}
|
||||||
text="Filter"
|
text="Filter"
|
||||||
isDisabled={isDisabled}
|
isDisabled={isDisabled}
|
||||||
indicator={selectedFilterKey !== 'all'}
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<FilterMenuContent
|
<FilterMenuContent
|
||||||
|
|
|
@ -1,11 +1,19 @@
|
||||||
.menuButton {
|
.menuButton {
|
||||||
composes: menuButton from '~./MenuButton.css';
|
composes: menuButton from '~./MenuButton.css';
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #666;
|
color: #666;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.indicatorContainer {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,13 +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,
|
||||||
indicator,
|
showIndicator,
|
||||||
text,
|
text,
|
||||||
...otherProps
|
...otherProps
|
||||||
} = props;
|
} = props;
|
||||||
|
@ -22,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>
|
||||||
|
@ -31,12 +49,12 @@ function PageMenuButton(props) {
|
||||||
|
|
||||||
PageMenuButton.propTypes = {
|
PageMenuButton.propTypes = {
|
||||||
iconName: PropTypes.object.isRequired,
|
iconName: PropTypes.object.isRequired,
|
||||||
text: PropTypes.string,
|
showIndicator: PropTypes.bool.isRequired,
|
||||||
indicator: PropTypes.bool.isRequired
|
text: PropTypes.string
|
||||||
};
|
};
|
||||||
|
|
||||||
PageMenuButton.defaultProps = {
|
PageMenuButton.defaultProps = {
|
||||||
indicator: false
|
showIndicator: false
|
||||||
};
|
};
|
||||||
|
|
||||||
export default PageMenuButton;
|
export default PageMenuButton;
|
||||||
|
|
|
@ -9,7 +9,7 @@ import styles from './ToolbarMenuButton.css';
|
||||||
function ToolbarMenuButton(props) {
|
function ToolbarMenuButton(props) {
|
||||||
const {
|
const {
|
||||||
iconName,
|
iconName,
|
||||||
indicator,
|
showIndicator,
|
||||||
text,
|
text,
|
||||||
...otherProps
|
...otherProps
|
||||||
} = props;
|
} = props;
|
||||||
|
@ -26,7 +26,7 @@ function ToolbarMenuButton(props) {
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{
|
{
|
||||||
indicator &&
|
showIndicator ?
|
||||||
<span
|
<span
|
||||||
className={classNames(
|
className={classNames(
|
||||||
styles.indicatorContainer,
|
styles.indicatorContainer,
|
||||||
|
@ -37,7 +37,8 @@ function ToolbarMenuButton(props) {
|
||||||
name={icons.CIRCLE}
|
name={icons.CIRCLE}
|
||||||
size={9}
|
size={9}
|
||||||
/>
|
/>
|
||||||
</span>
|
</span> :
|
||||||
|
null
|
||||||
}
|
}
|
||||||
|
|
||||||
<div className={styles.labelContainer}>
|
<div className={styles.labelContainer}>
|
||||||
|
@ -52,12 +53,12 @@ function ToolbarMenuButton(props) {
|
||||||
|
|
||||||
ToolbarMenuButton.propTypes = {
|
ToolbarMenuButton.propTypes = {
|
||||||
iconName: PropTypes.object.isRequired,
|
iconName: PropTypes.object.isRequired,
|
||||||
text: PropTypes.string,
|
showIndicator: PropTypes.bool.isRequired,
|
||||||
indicator: PropTypes.bool.isRequired
|
text: PropTypes.string
|
||||||
};
|
};
|
||||||
|
|
||||||
ToolbarMenuButton.defaultProps = {
|
ToolbarMenuButton.defaultProps = {
|
||||||
indicator: false
|
showIndicator: false
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ToolbarMenuButton;
|
export default ToolbarMenuButton;
|
||||||
|
|
Loading…
Reference in New Issue