New: Calendar option for full color events

(cherry picked from commit 0210b5c5c1b5c56dce6f4c9f3f56366adba950d3) Fixup Calendar for Full Color View, Final CSS fixups Update localization
2026-03-05 13:21:25 -05:00 · 2021-03-27 18:05:17 -07:00
parent a56d827744
commit da1bc0aa88
14 changed files with 128 additions and 14 deletions
--- a/frontend/src/Calendar/Events/CalendarEvent.css
+++ b/frontend/src/Calendar/Events/CalendarEvent.css
@@ -1,3 +1,5 @@
+$fullColorGradient: rgba(244, 245, 246, 0.2);
+
 .event {
  overflow-x: hidden;
  margin: 4px 2px;
@@ -55,6 +57,10 @@
 .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;
  }
@@ -62,28 +68,72 @@

 .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);
  }
+
+  &:global(.fullColor.colorImpaired) {
+    background: repeating-linear-gradient(45deg, $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) {
    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 {
+.unaired {
  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);
+  }
 }
--- a/frontend/src/Calendar/Events/CalendarEvent.js
+++ b/frontend/src/Calendar/Events/CalendarEvent.js
@@ -32,6 +32,7 @@ class CalendarEvent extends Component {
      queueItem,
      showMovieInformation,
      showCutoffUnmetIcon,
+      fullColorEvents,
      colorImpairedMode,
      date
    } = this.props;
@@ -62,7 +63,8 @@ class CalendarEvent extends Component {
            styles.event,
            styles.link,
            styles[statusStyle],
-            colorImpairedMode && 'colorImpaired'
+            colorImpairedMode && 'colorImpaired',
+            fullColorEvents && 'fullColor'
          )}
          // component="div"
          to={link}
@@ -97,7 +99,7 @@ class CalendarEvent extends Component {
                <Icon
                  className={styles.statusIcon}
                  name={icons.MOVIE_FILE}
-                  kind={kinds.WARNING}
+                  kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
                  title={translate('QualityCutoffHasNotBeenMet')}
                />
            }
@@ -142,11 +144,12 @@ CalendarEvent.propTypes = {
  digitalRelease: PropTypes.string,
  monitored: PropTypes.bool.isRequired,
  certification: PropTypes.string,
-  hasFile: PropTypes.bool.isRequired,
+  hasFile: PropTypes.bool,
  grabbed: PropTypes.bool,
  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
--- a/frontend/src/Calendar/Legend/Legend.js
+++ b/frontend/src/Calendar/Legend/Legend.js
@@ -9,6 +9,7 @@ import styles from './Legend.css';
 function Legend(props) {
  const {
    showCutoffUnmetIcon,
+    fullColorEvents,
    colorImpairedMode
  } = props;

@@ -19,7 +20,7 @@ function Legend(props) {
      <LegendIconItem
        name={translate('CutoffUnmet')}
        icon={icons.MOVIE_FILE}
-        kind={kinds.WARNING}
+        kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
        tooltip={translate('QualityOrLangCutoffHasNotBeenMet')}
      />
    );
@@ -31,12 +32,14 @@ function Legend(props) {
        <LegendItem
          style='ended'
          name={translate('DownloadedAndMonitored')}
+          fullColorEvents={fullColorEvents}
          colorImpairedMode={colorImpairedMode}
        />

        <LegendItem
          style='availNotMonitored'
          name={translate('DownloadedButNotMonitored')}
+          fullColorEvents={fullColorEvents}
          colorImpairedMode={colorImpairedMode}
        />
      </div>
@@ -45,12 +48,14 @@ function Legend(props) {
        <LegendItem
          style='missingMonitored'
          name={translate('MissingMonitoredAndConsideredAvailable')}
+          fullColorEvents={fullColorEvents}
          colorImpairedMode={colorImpairedMode}
        />

        <LegendItem
          style='missingUnmonitored'
          name={translate('MissingNotMonitored')}
+          fullColorEvents={fullColorEvents}
          colorImpairedMode={colorImpairedMode}
        />
      </div>
@@ -59,12 +64,14 @@ function Legend(props) {
        <LegendItem
          style='queue'
          name={translate('Queued')}
+          fullColorEvents={fullColorEvents}
          colorImpairedMode={colorImpairedMode}
        />

        <LegendItem
          style='continuing'
          name={translate('Unreleased')}
+          fullColorEvents={fullColorEvents}
          colorImpairedMode={colorImpairedMode}
        />
      </div>
@@ -79,7 +86,9 @@ function Legend(props) {
 }

 Legend.propTypes = {
+  view: PropTypes.string.isRequired,
  showCutoffUnmetIcon: PropTypes.bool.isRequired,
+  fullColorEvents: PropTypes.bool.isRequired,
  colorImpairedMode: PropTypes.bool.isRequired
 };

--- a/frontend/src/Calendar/Legend/LegendConnector.js
+++ b/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
      };
    }
--- a/frontend/src/Calendar/Legend/LegendIconItem.js
+++ b/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;
--- a/frontend/src/Calendar/Legend/LegendItem.css
+++ b/frontend/src/Calendar/Legend/LegendItem.css
@@ -1,3 +1,5 @@
+$fullColorGradient: rgba(244, 245, 246, 0.2);
+
 .legendItemContainer {
  margin-right: 5px;
  width: 220px;
@@ -63,10 +65,12 @@

 .missingMonitoredColorImpaired {
  background: repeating-linear-gradient(90deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px);
+  color: var(--white);
 }

 .missingUnmonitoredColorImpaired {
  background: repeating-linear-gradient(45deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px);
+  color: var(--white);
 }

 .legendItemText {
--- a/frontend/src/Calendar/Legend/LegendItem.js
+++ b/frontend/src/Calendar/Legend/LegendItem.js
@@ -7,6 +7,7 @@ function LegendItem(props) {
  const {
    name,
    style,
+    fullColorEvents,
    colorImpairedMode
  } = props;

@@ -16,7 +17,8 @@ function LegendItem(props) {
        className={classNames(
          styles.legendItem,
          styles[style],
-          colorImpairedMode && 'colorImpaired'
+          colorImpairedMode && 'colorImpaired',
+          fullColorEvents && 'fullColor'
        )}
      />
      <div className={classNames(styles.legendItemText, colorImpairedMode && styles[`${style}ColorImpaired`])}>
@@ -29,6 +31,7 @@ function LegendItem(props) {
 LegendItem.propTypes = {
  name: PropTypes.string.isRequired,
  style: PropTypes.string.isRequired,
+  fullColorEvents: PropTypes.bool.isRequired,
  colorImpairedMode: PropTypes.bool.isRequired
 };

--- a/frontend/src/Calendar/Options/CalendarOptionsModalContent.js
+++ b/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
--- a/frontend/src/Components/Icon.css
+++ b/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 {
--- a/frontend/src/Components/Icon.js
+++ b/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.string,
+  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
 };
--- a/frontend/src/Settings/MediaManagement/Naming/NamingModal.css
+++ b/frontend/src/Settings/MediaManagement/Naming/NamingModal.css
@@ -30,6 +30,6 @@
  code {
    padding: 0 1px;
    border: 1px solid var(--borderColor);
-    background-color: #f7f7f7;
+    background-color: var(--pageBackground);
  }
 }
--- a/frontend/src/Store/Actions/calendarActions.js
+++ b/frontend/src/Store/Actions/calendarActions.js
@@ -42,7 +42,8 @@ export const defaultState = {

  options: {
    showMovieInformation: true,
-    showCutoffUnmetIcon: false
+    showCutoffUnmetIcon: false,
+    fullColorEvents: false
  },

  selectedFilterKey: 'monitored',
--- a/frontend/src/Styles/Themes/light.js
+++ b/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
--- a/src/NzbDrone.Core/Localization/Core/en.json
+++ b/src/NzbDrone.Core/Localization/Core/en.json
@@ -358,6 +358,8 @@
  "ForMoreInformationOnTheIndividualIndexers": "For more information on the individual indexers, click on the info buttons.",
  "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",