New: Toggle Monitored from Artist Details Page

pull/635/head
Qstick 6 years ago
parent bc008ab1dc
commit 9b9ca54e65

@ -32,13 +32,6 @@
color: $white; color: $white;
} }
.logo {
flex-shrink: 0;
margin-right: 35px;
width: 250px;
height: 97px;
}
.poster { .poster {
flex-shrink: 0; flex-shrink: 0;
margin-right: 35px; margin-right: 35px;
@ -68,19 +61,33 @@
.titleContainer { .titleContainer {
display: flex; display: flex;
justify-content: space-between; margin-bottom: 5px;
} }
.title { .title {
margin-bottom: 5px;
font-weight: 300; font-weight: 300;
font-size: 50px; font-size: 50px;
line-height: 50px; line-height: 50px;
} }
.toggleMonitoredContainer {
align-self: center;
margin-right: 10px;
}
.monitorToggleButton {
composes: toggleButton from 'Components/MonitorToggleButton.css';
width: 40px;
&:hover {
color: $iconButtonHoverLightColor;
}
}
.alternateTitlesIconContainer { .alternateTitlesIconContainer {
align-self: flex-end;
margin-left: 20px; margin-left: 20px;
line-height: 50px;
} }
.artistNavigationButtons { .artistNavigationButtons {
@ -94,6 +101,10 @@
width: 30px; width: 30px;
color: #e1e2e3; color: #e1e2e3;
white-space: nowrap; white-space: nowrap;
&:hover {
color: $iconButtonHoverLightColor;
}
} }
.details { .details {

@ -12,6 +12,7 @@ import Icon from 'Components/Icon';
import IconButton from 'Components/Link/IconButton'; import IconButton from 'Components/Link/IconButton';
import Label from 'Components/Label'; import Label from 'Components/Label';
import Measure from 'Components/Measure'; import Measure from 'Components/Measure';
import MonitorToggleButton from 'Components/MonitorToggleButton';
import LoadingIndicator from 'Components/Loading/LoadingIndicator'; import LoadingIndicator from 'Components/Loading/LoadingIndicator';
import PageContent from 'Components/Page/PageContent'; import PageContent from 'Components/Page/PageContent';
import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector'; import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
@ -173,6 +174,7 @@ class ArtistDetails extends Component {
images, images,
alternateTitles, alternateTitles,
tags, tags,
isSaving,
isRefreshing, isRefreshing,
isSearching, isSearching,
isFetching, isFetching,
@ -182,6 +184,7 @@ class ArtistDetails extends Component {
hasMonitoredAlbums, hasMonitoredAlbums,
previousArtist, previousArtist,
nextArtist, nextArtist,
onMonitorTogglePress,
onRefreshPress, onRefreshPress,
onSearchPress onSearchPress
} = this.props; } = this.props;
@ -313,13 +316,25 @@ class ArtistDetails extends Component {
/> />
<div className={styles.info}> <div className={styles.info}>
<div className={styles.titleRow}>
<div className={styles.titleContainer}> <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}> <div className={styles.title}>
{artistName} {artistName}
</div>
{ {
!!alternateTitles.length && !!alternateTitles.length &&
<span className={styles.alternateTitlesIconContainer}> <div className={styles.alternateTitlesIconContainer}>
<Popover <Popover
anchor={ anchor={
<Icon <Icon
@ -331,7 +346,7 @@ class ArtistDetails extends Component {
body={<ArtistAlternateTitles alternateTitles={alternateTitles} />} body={<ArtistAlternateTitles alternateTitles={alternateTitles} />}
position={tooltipPositions.BOTTOM} position={tooltipPositions.BOTTOM}
/> />
</span> </div>
} }
</div> </div>
@ -616,6 +631,7 @@ ArtistDetails.propTypes = {
images: PropTypes.arrayOf(PropTypes.object).isRequired, images: PropTypes.arrayOf(PropTypes.object).isRequired,
alternateTitles: PropTypes.arrayOf(PropTypes.string).isRequired, alternateTitles: PropTypes.arrayOf(PropTypes.string).isRequired,
tags: PropTypes.arrayOf(PropTypes.number).isRequired, tags: PropTypes.arrayOf(PropTypes.number).isRequired,
isSaving: PropTypes.bool.isRequired,
isRefreshing: PropTypes.bool.isRequired, isRefreshing: PropTypes.bool.isRequired,
isSearching: PropTypes.bool.isRequired, isSearching: PropTypes.bool.isRequired,
isFetching: PropTypes.bool.isRequired, isFetching: PropTypes.bool.isRequired,
@ -625,6 +641,7 @@ ArtistDetails.propTypes = {
hasMonitoredAlbums: PropTypes.bool.isRequired, hasMonitoredAlbums: PropTypes.bool.isRequired,
previousArtist: PropTypes.object.isRequired, previousArtist: PropTypes.object.isRequired,
nextArtist: PropTypes.object.isRequired, nextArtist: PropTypes.object.isRequired,
onMonitorTogglePress: PropTypes.func.isRequired,
onRefreshPress: PropTypes.func.isRequired, onRefreshPress: PropTypes.func.isRequired,
onSearchPress: PropTypes.func.isRequired onSearchPress: PropTypes.func.isRequired
}; };

@ -10,6 +10,7 @@ import createAllArtistSelector from 'Store/Selectors/createAllArtistSelector';
import createCommandsSelector from 'Store/Selectors/createCommandsSelector'; import createCommandsSelector from 'Store/Selectors/createCommandsSelector';
import { fetchAlbums, clearAlbums } from 'Store/Actions/albumActions'; import { fetchAlbums, clearAlbums } from 'Store/Actions/albumActions';
import { fetchTrackFiles, clearTrackFiles } from 'Store/Actions/trackFileActions'; import { fetchTrackFiles, clearTrackFiles } from 'Store/Actions/trackFileActions';
import { toggleArtistMonitored } from 'Store/Actions/artistActions';
import { fetchQueueDetails, clearQueueDetails } from 'Store/Actions/queueActions'; import { fetchQueueDetails, clearQueueDetails } from 'Store/Actions/queueActions';
import { executeCommand } from 'Store/Actions/commandActions'; import { executeCommand } from 'Store/Actions/commandActions';
import * as commandNames from 'Commands/commandNames'; import * as commandNames from 'Commands/commandNames';
@ -101,6 +102,7 @@ const mapDispatchToProps = {
clearAlbums, clearAlbums,
fetchTrackFiles, fetchTrackFiles,
clearTrackFiles, clearTrackFiles,
toggleArtistMonitored,
fetchQueueDetails, fetchQueueDetails,
clearQueueDetails, clearQueueDetails,
executeCommand executeCommand
@ -168,6 +170,13 @@ class ArtistDetailsConnector extends Component {
// //
// Listeners // Listeners
onMonitorTogglePress = (monitored) => {
this.props.toggleArtistMonitored({
artistId: this.props.id,
monitored
});
}
onRefreshPress = () => { onRefreshPress = () => {
this.props.executeCommand({ this.props.executeCommand({
name: commandNames.REFRESH_ARTIST, name: commandNames.REFRESH_ARTIST,
@ -189,6 +198,7 @@ class ArtistDetailsConnector extends Component {
return ( return (
<ArtistDetails <ArtistDetails
{...this.props} {...this.props}
onMonitorTogglePress={this.onMonitorTogglePress}
onRefreshPress={this.onRefreshPress} onRefreshPress={this.onRefreshPress}
onSearchPress={this.onSearchPress} onSearchPress={this.onSearchPress}
/> />
@ -208,6 +218,7 @@ ArtistDetailsConnector.propTypes = {
clearAlbums: PropTypes.func.isRequired, clearAlbums: PropTypes.func.isRequired,
fetchTrackFiles: PropTypes.func.isRequired, fetchTrackFiles: PropTypes.func.isRequired,
clearTrackFiles: PropTypes.func.isRequired, clearTrackFiles: PropTypes.func.isRequired,
toggleArtistMonitored: PropTypes.func.isRequired,
fetchQueueDetails: PropTypes.func.isRequired, fetchQueueDetails: PropTypes.func.isRequired,
clearQueueDetails: PropTypes.func.isRequired, clearQueueDetails: PropTypes.func.isRequired,
executeCommand: PropTypes.func.isRequired executeCommand: PropTypes.func.isRequired

Loading…
Cancel
Save