Fixed: Icons on full color calendar events

Closes #6331
2024-01-18 21:43:51 -08:00 · 2024-01-18 21:43:51 -08:00 · 9884f6f282
parent e792db4d33
commit 9884f6f282
14 changed files with 118 additions and 74 deletions
--- a/frontend/src/Calendar/Events/CalendarEvent.css
+++ b/frontend/src/Calendar/Events/CalendarEvent.css
@ -52,6 +52,10 @@ $fullColorGradient: rgba(244, 245, 246, 0.2);
 .statusContainer {
  display: flex;
  align-items: center;
+
+  &:global(.fullColor) {
+    filter: var(--calendarFullColorFilter)
+  }
 }

 .statusIcon {
--- a/frontend/src/Calendar/Events/CalendarEvent.js
+++ b/frontend/src/Calendar/Events/CalendarEvent.js
@ -102,7 +102,12 @@ class CalendarEvent extends Component {
              {series.title}
            </div>

-            <div className={styles.statusContainer}>
+            <div
+              className={classNames(
+                styles.statusContainer,
+                fullColorEvents && 'fullColor'
+              )}
+            >
              {
                missingAbsoluteNumber ?
                  <Icon
@ -128,6 +133,7 @@ class CalendarEvent extends Component {
                  <span className={styles.statusIcon}>
                    <CalendarEventQueueDetails
                      {...queueItem}
+                      fullColorEvents={fullColorEvents}
                    />
                  </span> :
                  null
@ -150,7 +156,7 @@ class CalendarEvent extends Component {
                  <Icon
                    className={styles.statusIcon}
                    name={icons.EPISODE_FILE}
-                    kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
+                    kind={kinds.WARNING}
                    title={translate('QualityCutoffNotMet')}
                  /> :
                  null
@ -160,9 +166,8 @@ class CalendarEvent extends Component {
                episodeNumber === 1 && seasonNumber > 0 ?
                  <Icon
                    className={styles.statusIcon}
-                    name={icons.INFO}
+                    name={icons.PREMIERE}
                    kind={kinds.INFO}
-                    darken={fullColorEvents}
                    title={seasonNumber === 1 ? translate('SeriesPremiere') : translate('SeasonPremiere')}
                  /> :
                  null
@ -173,8 +178,8 @@ class CalendarEvent extends Component {
                finaleType ?
                  <Icon
                    className={styles.statusIcon}
-                    name={icons.INFO}
-                    kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
+                    name={finaleType === 'series' ? icons.FINALE_SERIES : icons.FINALE_SEASON}
+                    kind={finaleType === 'series' ? kinds.DANGER : kinds.WARNING}
                    title={getFinaleTypeName(finaleType)}
                  /> :
                  null
@ -187,7 +192,6 @@ class CalendarEvent extends Component {
                    className={styles.statusIcon}
                    name={icons.INFO}
                    kind={kinds.PINK}
-                    darken={fullColorEvents}
                    title={translate('Special')}
                  /> :
                  null
--- a/frontend/src/Calendar/Events/CalendarEventGroup.css
+++ b/frontend/src/Calendar/Events/CalendarEventGroup.css
@ -50,6 +50,15 @@
  margin-bottom: 5px;
 }

+.statusContainer {
+  display: flex;
+  align-items: center;
+
+   &:global(.fullColor) {
+    filter: var(--calendarFullColorFilter)
+  }
+}
+
 .statusIcon {
  margin-left: 3px;
 }
--- a/frontend/src/Calendar/Events/CalendarEventGroup.css.d.ts
+++ b/frontend/src/Calendar/Events/CalendarEventGroup.css.d.ts
@ -16,6 +16,7 @@ interface CssExports {
  'onAir': string;
  'premiere': string;
  'seriesTitle': string;
+  'statusContainer': string;
  'statusIcon': string;
  'unaired': string;
  'unmonitored': string;
--- a/frontend/src/Calendar/Events/CalendarEventGroup.js
+++ b/frontend/src/Calendar/Events/CalendarEventGroup.js
@ -145,45 +145,51 @@ class CalendarEventGroup extends Component {
            {series.title}
          </div>

-          {
-            isMissingAbsoluteNumber &&
-              <Icon
-                containerClassName={styles.statusIcon}
-                name={icons.WARNING}
-                title={translate('EpisodeMissingAbsoluteNumber')}
-              />
-          }
+          <div
+            className={classNames(
+              styles.statusContainer,
+              fullColorEvents && 'fullColor'
+            )}
+          >
+            {
+              isMissingAbsoluteNumber &&
+                <Icon
+                  containerClassName={styles.statusIcon}
+                  name={icons.WARNING}
+                  title={translate('EpisodeMissingAbsoluteNumber')}
+                />
+            }

-          {
-            anyDownloading &&
-              <Icon
-                containerClassName={styles.statusIcon}
-                name={icons.DOWNLOADING}
-                title={translate('AnEpisodeIsDownloading')}
-              />
-          }
+            {
+              anyDownloading &&
+                <Icon
+                  containerClassName={styles.statusIcon}
+                  name={icons.DOWNLOADING}
+                  title={translate('AnEpisodeIsDownloading')}
+                />
+            }

-          {
-            firstEpisode.episodeNumber === 1 && seasonNumber > 0 &&
-              <Icon
-                containerClassName={styles.statusIcon}
-                name={icons.INFO}
-                kind={kinds.INFO}
-                darken={fullColorEvents}
-                title={seasonNumber === 1 ? translate('SeriesPremiere') : translate('SeasonPremiere')}
-              />
-          }
+            {
+              firstEpisode.episodeNumber === 1 && seasonNumber > 0 &&
+                <Icon
+                  containerClassName={styles.statusIcon}
+                  name={icons.PREMIERE}
+                  kind={kinds.INFO}
+                  title={seasonNumber === 1 ? translate('SeriesPremiere') : translate('SeasonPremiere')}
+                />
+            }

-          {
-            showFinaleIcon &&
-            lastEpisode.finaleType ?
-              <Icon
-                containerClassName={styles.statusIcon}
-                name={icons.INFO}
-                kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
-                title={getFinaleTypeName(lastEpisode.finaleType)}
-              /> : null
-          }
+            {
+              showFinaleIcon &&
+              lastEpisode.finaleType ?
+                <Icon
+                  containerClassName={styles.statusIcon}
+                  name={lastEpisode.finaleType === 'series' ? icons.FINALE_SERIES : icons.FINALE_SEASON}
+                  kind={lastEpisode.finaleType === 'series' ? kinds.DANGER : kinds.WARNING}
+                  title={getFinaleTypeName(lastEpisode.finaleType)}
+                /> : null
+            }
+          </div>
        </div>

        <div className={styles.airingInfo}>
--- a/frontend/src/Calendar/Legend/Legend.js
+++ b/frontend/src/Calendar/Legend/Legend.js
@ -22,9 +22,20 @@ function Legend(props) {
  if (showFinaleIcon) {
    iconsToShow.push(
      <LegendIconItem
-        name="Finale"
-        icon={icons.INFO}
-        kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
+        name={translate('SeasonFinale')}
+        icon={icons.FINALE_SEASON}
+        kind={kinds.WARNING}
+        fullColorEvents={fullColorEvents}
+        tooltip={translate('CalendarLegendSeriesFinaleTooltip')}
+      />
+    );
+
+    iconsToShow.push(
+      <LegendIconItem
+        name={translate('SeriesFinale')}
+        icon={icons.FINALE_SERIES}
+        kind={kinds.DANGER}
+        fullColorEvents={fullColorEvents}
        tooltip={translate('CalendarLegendSeriesFinaleTooltip')}
      />
    );
@ -33,10 +44,10 @@ function Legend(props) {
  if (showSpecialIcon) {
    iconsToShow.push(
      <LegendIconItem
-        name="Special"
+        name={translate('Special')}
        icon={icons.INFO}
        kind={kinds.PINK}
-        darken={fullColorEvents}
+        fullColorEvents={fullColorEvents}
        tooltip={translate('SpecialEpisode')}
      />
    );
@ -45,9 +56,10 @@ function Legend(props) {
  if (showCutoffUnmetIcon) {
    iconsToShow.push(
      <LegendIconItem
-        name="Cutoff Not Met"
+        name={translate('Cutoff Not Met')}
        icon={icons.EPISODE_FILE}
-        kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
+        kind={kinds.WARNING}
+        fullColorEvents={fullColorEvents}
        tooltip={translate('QualityCutoffNotMet')}
      />
    );
@ -112,10 +124,10 @@ function Legend(props) {

      <div>
        <LegendIconItem
-          name="Premiere"
-          icon={icons.INFO}
+          name={translate('Premiere')}
+          icon={icons.PREMIERE}
          kind={kinds.INFO}
-          darken={true}
+          fullColorEvents={fullColorEvents}
          tooltip={translate('CalendarLegendSeriesPremiereTooltip')}
        />

@ -129,6 +141,12 @@ function Legend(props) {
            {iconsToShow[2]}
          </div>
      }
+      {
+        iconsToShow.length > 3 &&
+          <div>
+            {iconsToShow[3]}
+          </div>
+      }
    </div>
  );
 }
--- a/frontend/src/Calendar/Legend/LegendIconItem.css
+++ b/frontend/src/Calendar/Legend/LegendIconItem.css
@ -7,4 +7,8 @@

 .icon {
  margin-right: 5px;
+
+  &:global(.fullColorEvents) {
+    filter: var(--calendarFullColorFilter)
+  }
 }
--- a/frontend/src/Calendar/Legend/LegendIconItem.js
+++ b/frontend/src/Calendar/Legend/LegendIconItem.js
@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import Icon from 'Components/Icon';
@ -6,9 +7,9 @@ import styles from './LegendIconItem.css';
 function LegendIconItem(props) {
  const {
    name,
+    fullColorEvents,
    icon,
    kind,
-    darken,
    tooltip
  } = props;

@ -18,9 +19,11 @@ function LegendIconItem(props) {
      title={tooltip}
    >
      <Icon
-        className={styles.icon}
+        className={classNames(
+          styles.icon,
+          fullColorEvents && 'fullColorEvents'
+        )}
        name={icon}
-        darken={darken}
        kind={kind}
      />

@ -31,14 +34,10 @@ function LegendIconItem(props) {

 LegendIconItem.propTypes = {
  name: PropTypes.string.isRequired,
+  fullColorEvents: PropTypes.bool.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/Components/Icon.css
+++ b/frontend/src/Components/Icon.css
@ -12,18 +12,10 @@

 .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,7 +18,6 @@ class Icon extends PureComponent {
      kind,
      size,
      title,
-      darken,
      isSpinning,
      ...otherProps
    } = this.props;
@ -27,8 +26,7 @@ class Icon extends PureComponent {
      <FontAwesomeIcon
        className={classNames(
          className,
-          styles[kind],
-          darken && 'darken'
+          styles[kind]
        )}
        icon={name}
        spin={isSpinning}
@ -61,7 +59,6 @@ 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
 };
@ -69,7 +66,6 @@ Icon.propTypes = {
 Icon.defaultProps = {
  kind: kinds.DEFAULT,
  size: 14,
-  darken: false,
  isSpinning: false,
  fixedWidth: false
 };
--- a/frontend/src/Helpers/Props/icons.js
+++ b/frontend/src/Helpers/Props/icons.js
@ -41,6 +41,9 @@ import {
  faChevronCircleUp as fasChevronCircleUp,
  faCircle as fasCircle,
  faCircleDown as fasCircleDown,
+  faCirclePause as fasCirclePause,
+  faCirclePlay as fasCirclePlay,
+  faCircleStop as fasCircleStop,
  faCloud as fasCloud,
  faCloudDownloadAlt as fasCloudDownloadAlt,
  faCog as fasCog,
@ -149,6 +152,8 @@ export const FATAL = fasTimesCircle;
 export const FILE = farFile;
 export const FILE_MISSING = fasFileCircleQuestion;
 export const FILTER = fasFilter;
+export const FINALE_SEASON = fasCirclePause;
+export const FINALE_SERIES = fasCircleStop;
 export const FOOTNOTE = fasAsterisk;
 export const FOLDER = farFolder;
 export const FOLDER_OPEN = fasFolderOpen;
@ -180,6 +185,7 @@ export const PARENT = fasLevelUpAlt;
 export const PARSE = fasCalculator;
 export const PAUSED = fasPause;
 export const PENDING = farClock;
+export const PREMIERE = fasCirclePlay;
 export const PROFILE = fasUser;
 export const POSTER = fasTh;
 export const QUEUED = fasCloud;
--- a/frontend/src/Styles/Themes/dark.js
+++ b/frontend/src/Styles/Themes/dark.js
@ -213,6 +213,8 @@ module.exports = {
  calendarTextDim: '#eee',
  calendarTextDimAlternate: '#fff',

+  calendarFullColorFilter: 'grayscale(90%) contrast(200%) saturate(50%)',
+
  //
  // Table

--- a/frontend/src/Styles/Themes/light.js
+++ b/frontend/src/Styles/Themes/light.js
@ -215,6 +215,8 @@ module.exports = {
  calendarTextDim: '#666',
  calendarTextDimAlternate: '#242424',

+  calendarFullColorFilter: 'brightness(30%)',
+
  //
  // Table

--- a/frontend/src/typings/UiSettings.ts
+++ b/frontend/src/typings/UiSettings.ts
@ -1,4 +1,5 @@
 export interface UiSettings {
+  theme: string;
  showRelativeDates: boolean;
  shortDateFormat: string;
  longDateFormat: string;