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
|
||||
iconName={icons.FILTER}
|
||||
showIndicator={selectedFilterKey !== 'all'}
|
||||
text="Filter"
|
||||
isDisabled={isDisabled}
|
||||
indicator={selectedFilterKey !== 'all'}
|
||||
/>
|
||||
|
||||
<FilterMenuContent
|
||||
|
|
|
@ -1,11 +1,19 @@
|
|||
.menuButton {
|
||||
composes: menuButton from '~./MenuButton.css';
|
||||
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.indicatorContainer {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
|
|
@ -1,13 +1,15 @@
|
|||
import classNames from 'classnames';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import Icon from 'Components/Icon';
|
||||
import MenuButton from 'Components/Menu/MenuButton';
|
||||
import { icons } from 'Helpers/Props';
|
||||
import styles from './PageMenuButton.css';
|
||||
|
||||
function PageMenuButton(props) {
|
||||
const {
|
||||
iconName,
|
||||
indicator,
|
||||
showIndicator,
|
||||
text,
|
||||
...otherProps
|
||||
} = props;
|
||||
|
@ -22,6 +24,22 @@ function PageMenuButton(props) {
|
|||
size={18}
|
||||
/>
|
||||
|
||||
{
|
||||
showIndicator ?
|
||||
<span
|
||||
className={classNames(
|
||||
styles.indicatorContainer,
|
||||
'fa-layers fa-fw'
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
name={icons.CIRCLE}
|
||||
size={9}
|
||||
/>
|
||||
</span> :
|
||||
null
|
||||
}
|
||||
|
||||
<div className={styles.label}>
|
||||
{text}
|
||||
</div>
|
||||
|
@ -31,12 +49,12 @@ function PageMenuButton(props) {
|
|||
|
||||
PageMenuButton.propTypes = {
|
||||
iconName: PropTypes.object.isRequired,
|
||||
text: PropTypes.string,
|
||||
indicator: PropTypes.bool.isRequired
|
||||
showIndicator: PropTypes.bool.isRequired,
|
||||
text: PropTypes.string
|
||||
};
|
||||
|
||||
PageMenuButton.defaultProps = {
|
||||
indicator: false
|
||||
showIndicator: false
|
||||
};
|
||||
|
||||
export default PageMenuButton;
|
||||
|
|
|
@ -9,7 +9,7 @@ import styles from './ToolbarMenuButton.css';
|
|||
function ToolbarMenuButton(props) {
|
||||
const {
|
||||
iconName,
|
||||
indicator,
|
||||
showIndicator,
|
||||
text,
|
||||
...otherProps
|
||||
} = props;
|
||||
|
@ -26,7 +26,7 @@ function ToolbarMenuButton(props) {
|
|||
/>
|
||||
|
||||
{
|
||||
indicator &&
|
||||
showIndicator ?
|
||||
<span
|
||||
className={classNames(
|
||||
styles.indicatorContainer,
|
||||
|
@ -37,7 +37,8 @@ function ToolbarMenuButton(props) {
|
|||
name={icons.CIRCLE}
|
||||
size={9}
|
||||
/>
|
||||
</span>
|
||||
</span> :
|
||||
null
|
||||
}
|
||||
|
||||
<div className={styles.labelContainer}>
|
||||
|
@ -52,12 +53,12 @@ function ToolbarMenuButton(props) {
|
|||
|
||||
ToolbarMenuButton.propTypes = {
|
||||
iconName: PropTypes.object.isRequired,
|
||||
text: PropTypes.string,
|
||||
indicator: PropTypes.bool.isRequired
|
||||
showIndicator: PropTypes.bool.isRequired,
|
||||
text: PropTypes.string
|
||||
};
|
||||
|
||||
ToolbarMenuButton.defaultProps = {
|
||||
indicator: false
|
||||
showIndicator: false
|
||||
};
|
||||
|
||||
export default ToolbarMenuButton;
|
||||
|
|
Loading…
Reference in New Issue