New: Add status color to index table for Downloaded + Monitored (#6411)

Fixed: Fix issue with calendar not showing Downloaded + Unmonitored (Yellow)
Fixed: Fix issue with colorblind mode not working anywhere except the Calendar
Refactor status color function so it is used everywhere instead of one for the calendar and one everywhere else
Refactor css style naming to be more consistent in the calendar with everything else

frontend/src/Calendar/Agenda/AgendaEvent.css

@@ -54,20 +54,24 @@
   composes: downloaded from '~Calendar/Events/CalendarEvent.css';
 }
 
-.downloading {
-  composes: downloading from '~Calendar/Events/CalendarEvent.css';
+.queue {
+  composes: queue from '~Calendar/Events/CalendarEvent.css';
 }
 
 .unmonitored {
   composes: unmonitored from '~Calendar/Events/CalendarEvent.css';
 }
 
-.missing {
-  composes: missing from '~Calendar/Events/CalendarEvent.css';
+.missingUnmonitored {
+  composes: missingUnmonitored from '~Calendar/Events/CalendarEvent.css';
 }
 
-.unreleased {
-  composes: unreleased from '~Calendar/Events/CalendarEvent.css';
+.missingMonitored {
+  composes: missingMonitored from '~Calendar/Events/CalendarEvent.css';
+}
+
+.continuing {
+  composes: continuing from '~Calendar/Events/CalendarEvent.css';
 }
 
 @media only screen and (max-width: $breakpointSmall) {

frontend/src/Calendar/Agenda/AgendaEvent.js

@@ -3,10 +3,10 @@ import moment from 'moment';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import CalendarEventQueueDetails from 'Calendar/Events/CalendarEventQueueDetails';
-import getStatusStyle from 'Calendar/getStatusStyle';
 import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
 import { icons, kinds } from 'Helpers/Props';
+import getStatusStyle from 'Utilities/Movie/getStatusStyle';
 import translate from 'Utilities/String/translate';
 import styles from './AgendaEvent.css';
 
@@ -82,7 +82,7 @@ class AgendaEvent extends Component {
     startTime = moment(startTime);
     const downloading = !!(queueItem || grabbed);
     const isMonitored = monitored;
-    const statusStyle = getStatusStyle(hasFile, downloading, isAvailable, isMonitored);
+    const statusStyle = getStatusStyle(null, isMonitored, hasFile, isAvailable, 'style', downloading);
     const joinedGenres = genres.slice(0, 2).join(', ');
     const link = `/movie/${titleSlug}`;
 

frontend/src/Calendar/Events/CalendarEvent.css

@@ -60,39 +60,30 @@
   }
 }
 
-.downloading {
+.queue {
   border-left-color: $purple !important;
 }
 
 .unmonitored {
   border-left-color: $gray !important;
+}
+
+.missingUnmonitored {
+  border-left-color: $warningColor !important;
 
   &:global(.colorImpaired) {
     background: repeating-linear-gradient(45deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
   }
 }
 
-.onAir {
-  border-left-color: $warningColor !important;
-
-  &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
-  }
-}
-
-.missing {
+.missingMonitored {
   border-left-color: $dangerColor !important;
 
   &:global(.colorImpaired) {
-    border-left-color: color($dangerColor saturation(+15%)) !important;
     background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
   }
 }
 
-.unreleased {
+.continuing {
   border-left-color: $primaryColor !important;
-
-  &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
-  }
 }

frontend/src/Calendar/Events/CalendarEvent.js

@@ -2,10 +2,10 @@ import classNames from 'classnames';
 import moment from 'moment';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import getStatusStyle from 'Calendar/getStatusStyle';
 import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
 import { icons, kinds } from 'Helpers/Props';
+import getStatusStyle from 'Utilities/Movie/getStatusStyle';
 import translate from 'Utilities/String/translate';
 import CalendarEventQueueDetails from './CalendarEventQueueDetails';
 import styles from './CalendarEvent.css';
@@ -38,7 +38,7 @@ class CalendarEvent extends Component {
 
     const isDownloading = !!(queueItem || grabbed);
     const isMonitored = monitored;
-    const statusStyle = getStatusStyle(hasFile, isDownloading, isAvailable, isMonitored);
+    const statusStyle = getStatusStyle(null, isMonitored, hasFile, isAvailable, 'style', isDownloading);
     const joinedGenres = genres.slice(0, 2).join(', ');
     const link = `/movie/${titleSlug}`;
     const eventType = [];

frontend/src/Calendar/getStatusStyle.js

@@ -1,23 +0,0 @@
-
-function getStatusStyle(hasFile, downloading, isAvailable, isMonitored) {
-
-  if (hasFile) {
-    return 'downloaded';
-  }
-
-  if (downloading) {
-    return 'downloading';
-  }
-
-  if (!isMonitored) {
-    return 'unmonitored';
-  }
-
-  if (isAvailable && !hasFile) {
-    return 'missing';
-  }
-
-  return 'unreleased';
-}
-
-export default getStatusStyle;

frontend/src/Components/ProgressBar.css

@@ -49,7 +49,7 @@
   background-color: $dangerColor;
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, color($dangerColor shade(5%)), color($dangerColor shade(5%)) 5px, color($dangerColor shade(15%)) 5px, color($dangerColor shade(15%)) 10px);
+    background: repeating-linear-gradient(90deg, $dangerColor, $dangerColor 5px, $dangerColor 5px, $dimColor 10px);
   }
 }
 
@@ -65,7 +65,7 @@
   background-color: $warningColor;
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, color($warningColor tint(15%)) 5px, color($warningColor tint(15%)) 10px);
+    background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, $warningColor 5px, $dimColor 10px);
   }
 }
 

frontend/src/Movie/Index/MovieIndexFooter.css

@@ -48,7 +48,7 @@
   background-color: $dangerColor;
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, color($dangerColor shade(5%)), color($dangerColor shade(5%)) 5px, color($dangerColor shade(15%)) 5px, color($dangerColor shade(15%)) 10px);
+    background: repeating-linear-gradient(90deg, $dangerColor, $dangerColor 5px, $dangerColor 5px, $dimColor 10px);
   }
 }
 
@@ -58,7 +58,7 @@
   background-color: $warningColor;
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, color($warningColor tint(15%)) 5px, color($warningColor tint(15%)) 10px);
+    background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, $warningColor 5px, $dimColor 10px);
   }
 }
 

frontend/src/Movie/Index/ProgressBar/MovieIndexProgressBar.js

@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import ProgressBar from 'Components/ProgressBar';
 import { sizes } from 'Helpers/Props';
-import getProgressBarKind from 'Utilities/Movie/getProgressBarKind';
 import getQueueStatusText from 'Utilities/Movie/getQueueStatusText';
+import getStatusStyle from 'Utilities/Movie/getStatusStyle';
 import translate from 'Utilities/String/translate';
 import styles from './MovieIndexProgressBar.css';
 
@@ -42,7 +42,7 @@ function MovieIndexProgressBar(props) {
       className={styles.progressBar}
       containerClassName={styles.progress}
       progress={progress}
-      kind={getProgressBarKind(status, monitored, hasFile, isAvailable, queueStatusText)}
+      kind={getStatusStyle(status, monitored, hasFile, isAvailable, 'kinds', queueStatusText)}
       size={detailedProgressBar ? sizes.MEDIUM : sizes.SMALL}
       showText={detailedProgressBar}
       width={posterWidth}

frontend/src/Movie/Index/Table/MovieIndexHeader.css

@@ -45,11 +45,16 @@
   flex: 0 0 100px;
 }
 
-.movieStatus,
+.movieStatus {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 110px;
+}
+
 .certification {
   composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
-  flex: 0 0 100px;
+  flex: 0 0 90px;
 }
 
 .year {

frontend/src/Movie/Index/Table/MovieIndexRow.css

@@ -52,11 +52,16 @@
   flex: 0 0 100px;
 }
 
-.movieStatus,
+.movieStatus {
+  composes: cell;
+
+  flex: 0 0 110px;
+}
+
 .certification {
   composes: cell;
 
-  flex: 0 0 100px;
+  flex: 0 0 90px;
 }
 
 .year {

frontend/src/Movie/MovieFileStatus.css

@@ -2,3 +2,45 @@
   display: flex;
   justify-content: center;
 }
+
+.missingUnmonitoredBackground {
+  &:global(.colorImpaired) {
+    background: repeating-linear-gradient(45deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
+  }
+}
+
+.missingMonitoredBackground {
+  &:global(.colorImpaired) {
+    background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
+  }
+}
+
+.queue {
+  padding-right: 2px;
+  border-left: 5px solid $queueColor;
+}
+
+.continuing {
+  padding-right: 2px;
+  border-left: 5px solid $primaryColor;
+}
+
+.availNotMonitored {
+  padding-right: 2px;
+  border-left: 5px solid $darkGray;
+}
+
+.ended {
+  padding-right: 2px;
+  border-left: 5px solid $successColor;
+}
+
+.missingMonitored {
+  padding-right: 2px;
+  border-left: 5px solid $dangerColor;
+}
+
+.missingUnmonitored {
+  padding-right: 2px;
+  border-left: 5px solid $warningColor;
+}

frontend/src/Movie/MovieFileStatus.js

@@ -1,8 +1,6 @@
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import Label from 'Components/Label';
-import { kinds } from 'Helpers/Props';
-import MovieQuality from 'Movie/MovieQuality';
 import getQueueStatusText from 'Utilities/Movie/getQueueStatusText';
 import translate from 'Utilities/String/translate';
 import styles from './MovieFileStatus.css';
@@ -13,7 +11,8 @@ function MovieFileStatus(props) {
     monitored,
     movieFile,
     queueStatus,
-    queueState
+    queueState,
+    colorImpairedMode
   } = props;
 
   const hasMovieFile = !!movieFile;
@@ -24,12 +23,8 @@ function MovieFileStatus(props) {
 
     return (
       <div className={styles.center}>
-        <Label
-          title={queueStatusText}
-          kind={kinds.QUEUE}
-        >
-          {queueStatusText}
-        </Label>
+        <span className={styles.queue} />
+        {queueStatusText}
       </div>
     );
   }
@@ -39,51 +34,44 @@ function MovieFileStatus(props) {
 
     return (
       <div className={styles.center}>
-        <MovieQuality
-          title={quality.quality.name}
-          size={movieFile.size}
-          quality={quality}
-          isMonitored={monitored}
-          isCutoffNotMet={movieFile.qualityCutoffNotMet}
-        />
+        <span className={styles.ended} />
+        {quality.quality.name}
       </div>
     );
   }
 
   if (!monitored) {
     return (
-      <div className={styles.center}>
-        <Label
-          title={translate('NotMonitored')}
-          kind={kinds.WARNING}
-        >
-          {translate('NotMonitored')}
-        </Label>
+      <div className={classNames(
+        styles.center,
+        styles.missingUnmonitoredBackground,
+        colorImpairedMode && 'colorImpaired'
+      )}
+      >
+        <span className={styles.missingUnmonitored} />
+        {translate('NotMonitored')}
       </div>
     );
   }
 
   if (hasReleased) {
     return (
-      <div className={styles.center}>
-        <Label
-          title={translate('MovieAvailableButMissing')}
-          kind={kinds.DANGER}
-        >
-          {translate('Missing')}
-        </Label>
+      <div className={classNames(
+        styles.center,
+        styles.missingMonitoredBackground,
+        colorImpairedMode && 'colorImpaired'
+      )}
+      >
+        <span className={styles.missingMonitored} />
+        {translate('Missing')}
       </div>
     );
   }
 
   return (
     <div className={styles.center}>
-      <Label
-        title={translate('NotAvailable')}
-        kind={kinds.INFO}
-      >
-        {translate('NotAvailable')}
-      </Label>
+      <span className={styles.continuing} />
+      {translate('NotAvailable')}
     </div>
   );
 }
@@ -93,7 +81,8 @@ MovieFileStatus.propTypes = {
   monitored: PropTypes.bool.isRequired,
   movieFile: PropTypes.object,
   queueStatus: PropTypes.string,
-  queueState: PropTypes.string
+  queueState: PropTypes.string,
+  colorImpairedMode: PropTypes.bool.isRequired
 };
 
 export default MovieFileStatus;

frontend/src/Movie/MovieFileStatusConnector.js

@@ -3,18 +3,21 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import createMovieSelector from 'Store/Selectors/createMovieSelector';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import MovieFileStatus from './MovieFileStatus';
 
 function createMapStateToProps() {
   return createSelector(
     createMovieSelector(),
-    (movie) => {
+    createUISettingsSelector(),
+    (movie, uiSettings) => {
       return {
         inCinemas: movie.inCinemas,
         isAvailable: movie.isAvailable,
         monitored: movie.monitored,
         grabbed: movie.grabbed,
-        movieFile: movie.movieFile
+        movieFile: movie.movieFile,
+        colorImpairedMode: uiSettings.enableColorImpairedMode
       };
     }
   );

frontend/src/Utilities/Movie/getProgressBarKind.js

@@ -1,27 +0,0 @@
-import { kinds } from 'Helpers/Props';
-
-function getProgressBarKind(status, monitored, hasFile, isAvailable, queue = false) {
-  if (queue) {
-    return kinds.QUEUE;
-  }
-
-  if (hasFile && monitored) {
-    return kinds.SUCCESS;
-  }
-
-  if (hasFile && !monitored) {
-    return kinds.DEFAULT;
-  }
-
-  if (isAvailable && monitored) {
-    return kinds.DANGER;
-  }
-
-  if (!monitored) {
-    return kinds.WARNING;
-  }
-
-  return kinds.PRIMARY;
-}
-
-export default getProgressBarKind;

frontend/src/Utilities/Movie/getStatusStyle.js

@@ -0,0 +1,27 @@
+import { kinds } from 'Helpers/Props';
+
+function getStatusStyle(status, monitored, hasFile, isAvailable, returnType, queue = false) {
+  if (queue) {
+    return returnType === 'kinds' ? kinds.SUCCESS : 'queue';
+  }
+
+  if (hasFile && monitored) {
+    return returnType === 'kinds' ? kinds.SUCCESS : 'downloaded';
+  }
+
+  if (hasFile && !monitored) {
+    return returnType === 'kinds' ? kinds.DEFAULT : 'unreleased';
+  }
+
+  if (isAvailable && monitored) {
+    return returnType === 'kinds' ? kinds.DANGER : 'missingMonitored';
+  }
+
+  if (!monitored) {
+    return returnType === 'kinds' ? kinds.WARNING : 'missingUnmonitored';
+  }
+
+  return returnType === 'kinds' ? kinds.PRIMARY : 'continuing';
+}
+
+export default getStatusStyle;