New: Toggle Monitored from Artist Details Page

pull/635/head
Qstick 6 years ago
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…
Cancel
Save