mirror of https://github.com/lidarr/Lidarr
New: Toggle Monitored from Artist Details Page
This commit is contained in:
parent
bc008ab1dc
commit
9b9ca54e65
|
@ -32,13 +32,6 @@
|
|||
color: $white;
|
||||
}
|
||||
|
||||
.logo {
|
||||
flex-shrink: 0;
|
||||
margin-right: 35px;
|
||||
width: 250px;
|
||||
height: 97px;
|
||||
}
|
||||
|
||||
.poster {
|
||||
flex-shrink: 0;
|
||||
margin-right: 35px;
|
||||
|
@ -68,19 +61,33 @@
|
|||
|
||||
.titleContainer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: 5px;
|
||||
font-weight: 300;
|
||||
font-size: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.toggleMonitoredContainer {
|
||||
align-self: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.monitorToggleButton {
|
||||
composes: toggleButton from 'Components/MonitorToggleButton.css';
|
||||
|
||||
width: 40px;
|
||||
|
||||
&:hover {
|
||||
color: $iconButtonHoverLightColor;
|
||||
}
|
||||
}
|
||||
|
||||
.alternateTitlesIconContainer {
|
||||
align-self: flex-end;
|
||||
margin-left: 20px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.artistNavigationButtons {
|
||||
|
@ -94,6 +101,10 @@
|
|||
width: 30px;
|
||||
color: #e1e2e3;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
color: $iconButtonHoverLightColor;
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
|
|
|
@ -12,6 +12,7 @@ import Icon from 'Components/Icon';
|
|||
import IconButton from 'Components/Link/IconButton';
|
||||
import Label from 'Components/Label';
|
||||
import Measure from 'Components/Measure';
|
||||
import MonitorToggleButton from 'Components/MonitorToggleButton';
|
||||
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
|
||||
import PageContent from 'Components/Page/PageContent';
|
||||
import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
|
||||
|
@ -173,6 +174,7 @@ class ArtistDetails extends Component {
|
|||
images,
|
||||
alternateTitles,
|
||||
tags,
|
||||
isSaving,
|
||||
isRefreshing,
|
||||
isSearching,
|
||||
isFetching,
|
||||
|
@ -182,6 +184,7 @@ class ArtistDetails extends Component {
|
|||
hasMonitoredAlbums,
|
||||
previousArtist,
|
||||
nextArtist,
|
||||
onMonitorTogglePress,
|
||||
onRefreshPress,
|
||||
onSearchPress
|
||||
} = this.props;
|
||||
|
@ -313,13 +316,25 @@ class ArtistDetails extends Component {
|
|||
/>
|
||||
|
||||
<div className={styles.info}>
|
||||
<div className={styles.titleContainer}>
|
||||
<div className={styles.title}>
|
||||
{artistName}
|
||||
<div className={styles.titleRow}>
|
||||
<div className={styles.titleContainer}>
|
||||
<div className={styles.toggleMonitoredContainer}>
|
||||
<MonitorToggleButton
|
||||
className={styles.monitorToggleButton}
|
||||
monitored={monitored}
|
||||
isSaving={isSaving}
|
||||
size={40}
|
||||
onPress={onMonitorTogglePress}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.title}>
|
||||
{artistName}
|
||||
</div>
|
||||
|
||||
{
|
||||
!!alternateTitles.length &&
|
||||
<span className={styles.alternateTitlesIconContainer}>
|
||||
<div className={styles.alternateTitlesIconContainer}>
|
||||
<Popover
|
||||
anchor={
|
||||
<Icon
|
||||
|
@ -331,7 +346,7 @@ class ArtistDetails extends Component {
|
|||
body={<ArtistAlternateTitles alternateTitles={alternateTitles} />}
|
||||
position={tooltipPositions.BOTTOM}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
|
@ -616,6 +631,7 @@ ArtistDetails.propTypes = {
|
|||
images: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
alternateTitles: PropTypes.arrayOf(PropTypes.string).isRequired,
|
||||
tags: PropTypes.arrayOf(PropTypes.number).isRequired,
|
||||
isSaving: PropTypes.bool.isRequired,
|
||||
isRefreshing: PropTypes.bool.isRequired,
|
||||
isSearching: PropTypes.bool.isRequired,
|
||||
isFetching: PropTypes.bool.isRequired,
|
||||
|
@ -625,6 +641,7 @@ ArtistDetails.propTypes = {
|
|||
hasMonitoredAlbums: PropTypes.bool.isRequired,
|
||||
previousArtist: PropTypes.object.isRequired,
|
||||
nextArtist: PropTypes.object.isRequired,
|
||||
onMonitorTogglePress: PropTypes.func.isRequired,
|
||||
onRefreshPress: PropTypes.func.isRequired,
|
||||
onSearchPress: PropTypes.func.isRequired
|
||||
};
|
||||
|
|
|
@ -10,6 +10,7 @@ import createAllArtistSelector from 'Store/Selectors/createAllArtistSelector';
|
|||
import createCommandsSelector from 'Store/Selectors/createCommandsSelector';
|
||||
import { fetchAlbums, clearAlbums } from 'Store/Actions/albumActions';
|
||||
import { fetchTrackFiles, clearTrackFiles } from 'Store/Actions/trackFileActions';
|
||||
import { toggleArtistMonitored } from 'Store/Actions/artistActions';
|
||||
import { fetchQueueDetails, clearQueueDetails } from 'Store/Actions/queueActions';
|
||||
import { executeCommand } from 'Store/Actions/commandActions';
|
||||
import * as commandNames from 'Commands/commandNames';
|
||||
|
@ -101,6 +102,7 @@ const mapDispatchToProps = {
|
|||
clearAlbums,
|
||||
fetchTrackFiles,
|
||||
clearTrackFiles,
|
||||
toggleArtistMonitored,
|
||||
fetchQueueDetails,
|
||||
clearQueueDetails,
|
||||
executeCommand
|
||||
|
@ -168,6 +170,13 @@ class ArtistDetailsConnector extends Component {
|
|||
//
|
||||
// Listeners
|
||||
|
||||
onMonitorTogglePress = (monitored) => {
|
||||
this.props.toggleArtistMonitored({
|
||||
artistId: this.props.id,
|
||||
monitored
|
||||
});
|
||||
}
|
||||
|
||||
onRefreshPress = () => {
|
||||
this.props.executeCommand({
|
||||
name: commandNames.REFRESH_ARTIST,
|
||||
|
@ -189,6 +198,7 @@ class ArtistDetailsConnector extends Component {
|
|||
return (
|
||||
<ArtistDetails
|
||||
{...this.props}
|
||||
onMonitorTogglePress={this.onMonitorTogglePress}
|
||||
onRefreshPress={this.onRefreshPress}
|
||||
onSearchPress={this.onSearchPress}
|
||||
/>
|
||||
|
@ -208,6 +218,7 @@ ArtistDetailsConnector.propTypes = {
|
|||
clearAlbums: PropTypes.func.isRequired,
|
||||
fetchTrackFiles: PropTypes.func.isRequired,
|
||||
clearTrackFiles: PropTypes.func.isRequired,
|
||||
toggleArtistMonitored: PropTypes.func.isRequired,
|
||||
fetchQueueDetails: PropTypes.func.isRequired,
|
||||
clearQueueDetails: PropTypes.func.isRequired,
|
||||
executeCommand: PropTypes.func.isRequired
|
||||
|
|
Loading…
Reference in New Issue