New: Toggle Monitored from Artist Details Page

frontend/src/Artist/Details/ArtistDetails.css

@@ -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 {

frontend/src/Artist/Details/ArtistDetails.js

@@ -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
 };

frontend/src/Artist/Details/ArtistDetailsConnector.js

@@ -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