New: Calendar option for full color events

(cherry picked from commit 0210b5c5c1b5c56dce6f4c9f3f56366adba950d3)

frontend/src/Calendar/Events/CalendarEvent.css

@@ -1,3 +1,5 @@
+$fullColorGradient: rgba(244, 245, 246, 0.2);
+
 .event {
   overflow-x: hidden;
   margin: 4px 2px;
@@ -44,6 +46,11 @@
   font-size: $defaultFontSize;
 }
 
+.statusContainer {
+  display: flex;
+  align-items: center;
+}
+
 .statusIcon {
   margin-left: 3px;
 }
@@ -55,35 +62,84 @@
 .downloaded {
   border-left-color: var(--successColor) !important;
 
+  &:global(.fullColor) {
+    background-color: rgba(39, 194, 76, 0.4) !important;
+  }
+
   &:global(.colorImpaired) {
-    border-left-color: color(var(--successColor), saturation(+15%)) !important;
+    border-left-color: color(#27c24c saturation(+15%)) !important;
   }
 }
 
 .queue {
   border-left-color: var(--purple) !important;
+
+  &:global(.fullColor) {
+    background-color: rgba(122, 67, 182, 0.4) !important;
+  }
 }
 
 .unmonitored {
   border-left-color: var(--gray) !important;
+
+  &:global(.fullColor) {
+    background-color: rgba(173, 173, 173, 0.5) !important;
+  }
+
+  &:global(.colorImpaired) {
+    background: repeating-linear-gradient(45deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px);
+  }
+
+  &:global(.fullColor.colorImpaired) {
+    background: repeating-linear-gradient(45deg, $fullColorGradient, $fullColorGradient 5px, transparent 5px, transparent 10px);
+  }
 }
 
 .missingUnmonitored {
   border-left-color: var(--warningColor) !important;
 
+  &:global(.fullColor) {
+    background-color: rgba(255, 165, 0, 0.6) !important;
+  }
+
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(45deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px);
+    background: repeating-linear-gradient(90deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px);
+  }
+
+  &:global(.fullColor.colorImpaired) {
+    background: repeating-linear-gradient(90deg, $fullColorGradient, $fullColorGradient 5px, transparent 5px, transparent 10px);
   }
 }
 
 .missingMonitored {
   border-left-color: var(--dangerColor) !important;
 
+  &:global(.fullColor) {
+    background-color: rgba(240, 80, 80, 0.6) !important;
+  }
+
   &:global(.colorImpaired) {
+    border-left-color: color(#f05050 saturation(+15%)) !important;
     background: repeating-linear-gradient(90deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px);
   }
+
+  &:global(.fullColor.colorImpaired) {
+    background: repeating-linear-gradient(90deg, $fullColorGradient, $fullColorGradient 5px, transparent 5px, transparent 10px);
+  }
 }
 
 .continuing {
   border-left-color: var(--primaryColor) !important;
+
+  &:global(.fullColor) {
+    background-color: rgba(93, 156, 236, 0.4) !important;
+  }
+
+  &:global(.colorImpaired) {
+    background: repeating-linear-gradient(90deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px);
+  }
+
+  &:global(.fullColor.colorImpaired) {
+    background: repeating-linear-gradient(90deg, $fullColorGradient, $fullColorGradient 5px, transparent 5px, transparent 10px);
+  }
 }

frontend/src/Calendar/Events/CalendarEvent.css.d.ts

@@ -12,6 +12,7 @@ interface CssExports {
   'movieInfo': string;
   'movieTitle': string;
   'queue': string;
+  'statusContainer': string;
   'statusIcon': string;
   'unmonitored': string;
 }

frontend/src/Calendar/Events/CalendarEvent.js

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import moment from 'moment';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
 import { icons, kinds } from 'Helpers/Props';
@@ -32,6 +32,7 @@ class CalendarEvent extends Component {
       queueItem,
       showMovieInformation,
       showCutoffUnmetIcon,
+      fullColorEvents,
       colorImpairedMode,
       date
     } = this.props;
@@ -56,13 +57,14 @@ class CalendarEvent extends Component {
     }
 
     return (
-      <div>
+      <Fragment>
         <Link
           className={classNames(
             styles.event,
             styles.link,
             styles[statusStyle],
-            colorImpairedMode && 'colorImpaired'
+            colorImpairedMode && 'colorImpaired',
+            fullColorEvents && 'fullColor'
           )}
           // component="div"
           to={link}
@@ -72,48 +74,52 @@ class CalendarEvent extends Component {
               {title}
             </div>
 
-            {
-              !!queueItem &&
-                <span className={styles.statusIcon}>
-                  <CalendarEventQueueDetails
-                    {...queueItem}
-                  />
-                </span>
-            }
-
-            {
-              !queueItem && grabbed &&
-                <Icon
-                  className={styles.statusIcon}
-                  name={icons.DOWNLOADING}
-                  title={translate('MovieIsDownloading')}
-                />
-            }
-
-            {
-              showCutoffUnmetIcon &&
-              !!movieFile &&
-              movieFile.qualityCutoffNotMet &&
-                <Icon
-                  className={styles.statusIcon}
-                  name={icons.MOVIE_FILE}
-                  kind={kinds.WARNING}
-                  title={translate('QualityCutoffHasNotBeenMet')}
-                />
-            }
+            <div className={styles.statusContainer}>
+              {
+                queueItem ?
+                  <span className={styles.statusIcon}>
+                    <CalendarEventQueueDetails
+                      {...queueItem}
+                    />
+                  </span> :
+                  null
+              }
+
+              {
+                !queueItem && grabbed ?
+                  <Icon
+                    className={styles.statusIcon}
+                    name={icons.DOWNLOADING}
+                    title={translate('MovieIsDownloading')}
+                  /> :
+                  null
+              }
+
+              {
+                showCutoffUnmetIcon && !!movieFile && movieFile.qualityCutoffNotMet ?
+                  <Icon
+                    className={styles.statusIcon}
+                    name={icons.MOVIE_FILE}
+                    kind={kinds.WARNING}
+                    title={translate('QualityCutoffHasNotBeenMet')}
+                  /> :
+                  null
+              }
+            </div>
           </div>
 
           {
-            showMovieInformation &&
+            showMovieInformation ?
               <div className={styles.movieInfo}>
                 <div className={styles.genres}>
                   {joinedGenres}
                 </div>
-              </div>
+              </div> :
+              null
           }
 
           {
-            showMovieInformation &&
+            showMovieInformation ?
               <div className={styles.movieInfo}>
                 <div className={styles.genres}>
                   {eventType.join(', ')}
@@ -121,11 +127,11 @@ class CalendarEvent extends Component {
                 <div>
                   {certification}
                 </div>
-              </div>
+              </div> :
+              null
           }
         </Link>
-
-      </div>
+      </Fragment>
     );
   }
 }
@@ -147,6 +153,7 @@ CalendarEvent.propTypes = {
   queueItem: PropTypes.object,
   showMovieInformation: PropTypes.bool.isRequired,
   showCutoffUnmetIcon: PropTypes.bool.isRequired,
+  fullColorEvents: PropTypes.bool.isRequired,
   timeFormat: PropTypes.string.isRequired,
   colorImpairedMode: PropTypes.bool.isRequired,
   date: PropTypes.string.isRequired

frontend/src/Calendar/Legend/Legend.js

@@ -8,18 +8,21 @@ import styles from './Legend.css';
 
 function Legend(props) {
   const {
+    view,
     showCutoffUnmetIcon,
+    fullColorEvents,
     colorImpairedMode
   } = props;
 
   const iconsToShow = [];
+  const isAgendaView = view === 'agenda';
 
   if (showCutoffUnmetIcon) {
     iconsToShow.push(
       <LegendIconItem
         name={translate('CutoffUnmet')}
         icon={icons.MOVIE_FILE}
-        kind={kinds.WARNING}
+        kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
         tooltip={translate('QualityOrLangCutoffHasNotBeenMet')}
       />
     );
@@ -29,45 +32,58 @@ function Legend(props) {
     <div className={styles.legend}>
       <div>
         <LegendItem
-          style='ended'
+          status="downloaded"
           name={translate('DownloadedAndMonitored')}
+          isAgendaView={isAgendaView}
+          fullColorEvents={fullColorEvents}
           colorImpairedMode={colorImpairedMode}
         />
 
         <LegendItem
-          style='availNotMonitored'
+          status="unmonitored"
           name={translate('DownloadedButNotMonitored')}
+          isAgendaView={isAgendaView}
+          fullColorEvents={fullColorEvents}
           colorImpairedMode={colorImpairedMode}
         />
       </div>
 
       <div>
         <LegendItem
-          style='missingMonitored'
+          status="missingMonitored"
           name={translate('MissingMonitoredAndConsideredAvailable')}
+          isAgendaView={isAgendaView}
+          fullColorEvents={fullColorEvents}
           colorImpairedMode={colorImpairedMode}
         />
 
         <LegendItem
-          style='missingUnmonitored'
+          status="missingUnmonitored"
           name={translate('MissingNotMonitored')}
+          isAgendaView={isAgendaView}
+          fullColorEvents={fullColorEvents}
           colorImpairedMode={colorImpairedMode}
         />
       </div>
 
       <div>
         <LegendItem
-          style='queue'
+          status="queue"
           name={translate('Queued')}
+          isAgendaView={isAgendaView}
+          fullColorEvents={fullColorEvents}
           colorImpairedMode={colorImpairedMode}
         />
 
         <LegendItem
-          style='continuing'
+          status="continuing"
           name={translate('Unreleased')}
+          isAgendaView={isAgendaView}
+          fullColorEvents={fullColorEvents}
           colorImpairedMode={colorImpairedMode}
         />
       </div>
+
       {
         iconsToShow.length > 0 &&
           <div>
@@ -79,7 +95,9 @@ function Legend(props) {
 }
 
 Legend.propTypes = {
+  view: PropTypes.string.isRequired,
   showCutoffUnmetIcon: PropTypes.bool.isRequired,
+  fullColorEvents: PropTypes.bool.isRequired,
   colorImpairedMode: PropTypes.bool.isRequired
 };
 

frontend/src/Calendar/Legend/LegendConnector.js

@@ -6,10 +6,12 @@ import Legend from './Legend';
 function createMapStateToProps() {
   return createSelector(
     (state) => state.calendar.options,
+    (state) => state.calendar.view,
     createUISettingsSelector(),
-    (calendarOptions, uiSettings) => {
+    (calendarOptions, view, uiSettings) => {
       return {
         ...calendarOptions,
+        view,
         colorImpairedMode: uiSettings.enableColorImpairedMode
       };
     }

frontend/src/Calendar/Legend/LegendIconItem.js

@@ -8,6 +8,7 @@ function LegendIconItem(props) {
     name,
     icon,
     kind,
+    darken,
     tooltip
   } = props;
 
@@ -19,6 +20,7 @@ function LegendIconItem(props) {
       <Icon
         className={styles.icon}
         name={icon}
+        darken={darken}
         kind={kind}
       />
 
@@ -31,7 +33,12 @@ LegendIconItem.propTypes = {
   name: PropTypes.string.isRequired,
   icon: PropTypes.object.isRequired,
   kind: PropTypes.string.isRequired,
+  darken: PropTypes.bool.isRequired,
   tooltip: PropTypes.string.isRequired
 };
 
+LegendIconItem.defaultProps = {
+  darken: false
+};
+
 export default LegendIconItem;

frontend/src/Calendar/Legend/LegendItem.css

@@ -1,74 +1,37 @@
-.legendItemContainer {
-  margin-right: 5px;
+.legendItem {
+  margin: 3px 0;
+  margin-right: 6px;
+  padding-left: 5px;
   width: 220px;
+  border-left-width: 4px;
+  border-left-style: solid;
+  cursor: default;
 }
 
-.legendItem {
-  display: inline-flex;
-  margin-top: -1px;
-  vertical-align: middle;
-  line-height: 16px;
-}
+/*
+ * Status
+ */
 
-.legendItemColor {
-  margin-right: 8px;
-  width: 30px;
-  height: 16px;
-  border-radius: 4px;
+.downloaded {
+  composes: downloaded from '~Calendar/Events/CalendarEvent.css';
 }
 
 .queue {
-  composes: legendItemColor;
-
-  background-color: var(--queueColor);
-}
-
-.continuing {
-  composes: legendItemColor;
-
-  background-color: var(--primaryColor);
-}
-
-.availNotMonitored {
-  composes: legendItemColor;
-
-  background-color: var(--darkGray);
+  composes: queue from '~Calendar/Events/CalendarEvent.css';
 }
 
-.ended {
-  composes: legendItemColor;
-
-  background-color: var(--successColor);
-}
-
-.missingMonitored {
-  composes: legendItemColor;
-
-  background-color: var(--dangerColor);
-
-  &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, color(var(--dangerColor) shade(5%)), color(var(--dangerColor) shade(5%)) 5px, color(var(--dangerColor) shade(15%)) 5px, color(var(--dangerColor) shade(15%)) 10px);
-  }
+.unmonitored {
+  composes: unmonitored from '~Calendar/Events/CalendarEvent.css';
 }
 
 .missingUnmonitored {
-  composes: legendItemColor;
-
-  background-color: var(--warningColor);
-
-  &:global(.colorImpaired) {
-    background: repeating-linear-gradient(45deg, var(--warningColor), var(--warningColor) 5px, color(var(--warningColor) tint(15%)) 5px, color(var(--warningColor) tint(15%)) 10px);
-  }
-}
-
-.missingMonitoredColorImpaired {
-  background: repeating-linear-gradient(90deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px);
+  composes: missingUnmonitored from '~Calendar/Events/CalendarEvent.css';
 }
 
-.missingUnmonitoredColorImpaired {
-  background: repeating-linear-gradient(45deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px);
+.missingMonitored {
+  composes: missingMonitored from '~Calendar/Events/CalendarEvent.css';
 }
 
-.legendItemText {
-  display: inline-block;
+.continuing {
+  composes: continuing from '~Calendar/Events/CalendarEvent.css';
 }

frontend/src/Calendar/Legend/LegendItem.css.d.ts

@@ -1,18 +1,13 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
-  'availNotMonitored': string;
   'continuing': string;
-  'ended': string;
+  'downloaded': string;
   'legendItem': string;
-  'legendItemColor': string;
-  'legendItemContainer': string;
-  'legendItemText': string;
   'missingMonitored': string;
-  'missingMonitoredColorImpaired': string;
   'missingUnmonitored': string;
-  'missingUnmonitoredColorImpaired': string;
   'queue': string;
+  'unmonitored': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

frontend/src/Calendar/Legend/LegendItem.js

@@ -6,29 +6,31 @@ import styles from './LegendItem.css';
 function LegendItem(props) {
   const {
     name,
-    style,
+    status,
+    isAgendaView,
+    fullColorEvents,
     colorImpairedMode
   } = props;
 
   return (
-    <div className={styles.legendItemContainer}>
-      <div
-        className={classNames(
-          styles.legendItem,
-          styles[style],
-          colorImpairedMode && 'colorImpaired'
-        )}
-      />
-      <div className={classNames(styles.legendItemText, colorImpairedMode && styles[`${style}ColorImpaired`])}>
-        {name}
-      </div>
+    <div
+      className={classNames(
+        styles.legendItem,
+        styles[status],
+        colorImpairedMode && 'colorImpaired',
+        fullColorEvents && !isAgendaView && 'fullColor'
+      )}
+    >
+      {name}
     </div>
   );
 }
 
 LegendItem.propTypes = {
   name: PropTypes.string.isRequired,
-  style: PropTypes.string.isRequired,
+  status: PropTypes.string.isRequired,
+  isAgendaView: PropTypes.bool.isRequired,
+  fullColorEvents: PropTypes.bool.isRequired,
   colorImpairedMode: PropTypes.bool.isRequired
 };
 

frontend/src/Calendar/Options/CalendarOptionsModalContent.js

@@ -26,14 +26,16 @@ class CalendarOptionsModalContent extends Component {
       firstDayOfWeek,
       calendarWeekColumnHeader,
       timeFormat,
-      enableColorImpairedMode
+      enableColorImpairedMode,
+      fullColorEvents
     } = props;
 
     this.state = {
       firstDayOfWeek,
       calendarWeekColumnHeader,
       timeFormat,
-      enableColorImpairedMode
+      enableColorImpairedMode,
+      fullColorEvents
     };
   }
 
@@ -94,6 +96,7 @@ class CalendarOptionsModalContent extends Component {
     const {
       showMovieInformation,
       showCutoffUnmetIcon,
+      fullColorEvents,
       onModalClose
     } = this.props;
 
@@ -136,6 +139,18 @@ class CalendarOptionsModalContent extends Component {
                   onChange={this.onOptionInputChange}
                 />
               </FormGroup>
+
+              <FormGroup>
+                <FormLabel>{translate('FullColorEvents')}</FormLabel>
+
+                <FormInputGroup
+                  type={inputTypes.CHECK}
+                  name="fullColorEvents"
+                  value={fullColorEvents}
+                  helpText={translate('FullColorEventsHelpText')}
+                  onChange={this.onOptionInputChange}
+                />
+              </FormGroup>
             </Form>
           </FieldSet>
 
@@ -176,7 +191,9 @@ class CalendarOptionsModalContent extends Component {
                   value={timeFormat}
                   onChange={this.onGlobalInputChange}
                 />
-              </FormGroup><FormGroup>
+              </FormGroup>
+
+              <FormGroup>
                 <FormLabel>{translate('EnableColorImpairedMode')}</FormLabel>
 
                 <FormInputGroup
@@ -187,7 +204,6 @@ class CalendarOptionsModalContent extends Component {
                   onChange={this.onGlobalInputChange}
                 />
               </FormGroup>
-
             </Form>
           </FieldSet>
         </ModalBody>
@@ -209,6 +225,7 @@ CalendarOptionsModalContent.propTypes = {
   calendarWeekColumnHeader: PropTypes.string.isRequired,
   timeFormat: PropTypes.string.isRequired,
   enableColorImpairedMode: PropTypes.bool.isRequired,
+  fullColorEvents: PropTypes.bool.isRequired,
   dispatchSetCalendarOption: PropTypes.func.isRequired,
   dispatchSaveUISettings: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired

frontend/src/Components/Icon.css

@@ -12,10 +12,18 @@
 
 .info {
   color: var(--infoColor);
+
+  &:global(.darken) {
+    color: color(var(--infoColor) shade(30%));
+  }
 }
 
 .pink {
   color: var(--pink);
+
+  &:global(.darken) {
+    color: color(var(--pink) shade(30%));
+  }
 }
 
 .success {

frontend/src/Components/Icon.js

@@ -18,6 +18,7 @@ class Icon extends PureComponent {
       kind,
       size,
       title,
+      darken,
       isSpinning,
       ...otherProps
     } = this.props;
@@ -26,7 +27,8 @@ class Icon extends PureComponent {
       <FontAwesomeIcon
         className={classNames(
           className,
-          styles[kind]
+          styles[kind],
+          darken && 'darken'
         )}
         icon={name}
         spin={isSpinning}
@@ -59,6 +61,7 @@ Icon.propTypes = {
   kind: PropTypes.string.isRequired,
   size: PropTypes.number.isRequired,
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  darken: PropTypes.bool.isRequired,
   isSpinning: PropTypes.bool.isRequired,
   fixedWidth: PropTypes.bool.isRequired
 };
@@ -66,6 +69,7 @@ Icon.propTypes = {
 Icon.defaultProps = {
   kind: kinds.DEFAULT,
   size: 14,
+  darken: false,
   isSpinning: false,
   fixedWidth: false
 };

frontend/src/Store/Actions/calendarActions.js

@@ -43,7 +43,8 @@ export const defaultState = {
 
   options: {
     showMovieInformation: true,
-    showCutoffUnmetIcon: false
+    showCutoffUnmetIcon: false,
+    fullColorEvents: false
   },
 
   selectedFilterKey: 'monitored',

frontend/src/Styles/Themes/dark.js

@@ -86,6 +86,10 @@ module.exports = {
   inputWarningBoxShadowColor: 'rgba(255, 165, 0, 0.6)',
   colorImpairedGradient: '#707070',
   colorImpairedGradientDark: '#424242',
+  colorImpairedDangerGradient: '#d84848',
+  colorImpairedWarningGradient: '#e59400',
+  colorImpairedPrimaryGradient: '#538cd4',
+  colorImpairedGrayGradient: '#9b9b9b',
 
   //
   // Buttons

frontend/src/Styles/Themes/light.js

@@ -87,6 +87,10 @@ module.exports = {
   inputWarningBoxShadowColor: 'rgba(255, 165, 0, 0.6)',
   colorImpairedGradient: '#ffffff',
   colorImpairedGradientDark: '#f4f5f6',
+  colorImpairedDangerGradient: '#d84848',
+  colorImpairedWarningGradient: '#e59400',
+  colorImpairedPrimaryGradient: '#538cd4',
+  colorImpairedGrayGradient: '#9b9b9b',
 
   //
   // Buttons
@@ -210,7 +214,7 @@ module.exports = {
   calendarBackgroundColor: '#e4eaec',
   calendarBorderColor: '#cecece',
   calendarTextDim: '#666',
-  calendarTextDimAlternate: '#000',
+  calendarTextDimAlternate: '#242424',
 
   //
   // Table

src/NzbDrone.Core/Localization/Core/en.json

@@ -422,6 +422,8 @@
   "Formats": "Formats",
   "FreeSpace": "Free Space",
   "From": "from",
+  "FullColorEvents": "Full Color Events",
+  "FullColorEventsHelpText": "Altered style to color the entire event with the status color, instead of just the left edge. Does not apply to Agenda",
   "General": "General",
   "GeneralSettings": "General Settings",
   "GeneralSettingsSummary": "Port, SSL, username/password, proxy, analytics and updates",