Refactor icons on full color calendar events

(cherry picked from commit 9884f6f282560ff2a0ea193e9306c6284cf8672c) Closes #9646
Radarr · Jan 19, 2024 · bc9b2cd · bc9b2cd
1 parent d0e400c
commit bc9b2cd
Show file tree

Hide file tree

Showing 12 changed files with 39 additions and 30 deletions.
diff --git a/frontend/src/Calendar/Agenda/AgendaEvent.js b/frontend/src/Calendar/Agenda/AgendaEvent.js
@@ -147,7 +147,7 @@ class AgendaEvent extends Component {
                   className={styles.statusIcon}
                   name={icons.MOVIE_FILE}
                   kind={kinds.WARNING}
-                  title={translate('QualityCutoffHasNotBeenMet')}
+                  title={translate('QualityCutoffNotMet')}
                 />
             }
           </div>

diff --git a/frontend/src/Calendar/Events/CalendarEvent.css b/frontend/src/Calendar/Events/CalendarEvent.css
@@ -48,6 +48,10 @@ $fullColorGradient: rgba(244, 245, 246, 0.2);
 .statusContainer {
   display: flex;
   align-items: center;
+
+  &:global(.fullColor) {
+    filter: var(--calendarFullColorFilter)
+  }
 }
 
 .statusIcon {

diff --git a/frontend/src/Calendar/Events/CalendarEvent.js b/frontend/src/Calendar/Events/CalendarEvent.js
@@ -76,12 +76,18 @@ class CalendarEvent extends Component {
               {title}
             </div>
 
-            <div className={styles.statusContainer}>
+            <div
+              className={classNames(
+                styles.statusContainer,
+                fullColorEvents && 'fullColor'
+              )}
+            >
               {
                 queueItem ?
                   <span className={styles.statusIcon}>
                     <CalendarEventQueueDetails
                       {...queueItem}
+                      fullColorEvents={fullColorEvents}
                     />
                   </span> :
                   null
@@ -98,12 +104,14 @@ class CalendarEvent extends Component {
               }
 
               {
-                showCutoffUnmetIcon && !!movieFile && movieFile.qualityCutoffNotMet ?
+                showCutoffUnmetIcon &&
+                !!movieFile &&
+                movieFile.qualityCutoffNotMet ?
                   <Icon
                     className={styles.statusIcon}
                     name={icons.MOVIE_FILE}
                     kind={kinds.WARNING}
-                    title={translate('QualityCutoffHasNotBeenMet')}
+                    title={translate('QualityCutoffNotMet')}
                   /> :
                   null
               }

diff --git a/frontend/src/Calendar/Legend/Legend.js b/frontend/src/Calendar/Legend/Legend.js
@@ -20,10 +20,11 @@ function Legend(props) {
   if (showCutoffUnmetIcon) {
     iconsToShow.push(
       <LegendIconItem
-        name={translate('CutoffUnmet')}
+        name={translate('CutoffNotMet')}
         icon={icons.MOVIE_FILE}
-        kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
-        tooltip={translate('QualityOrLangCutoffHasNotBeenMet')}
+        kind={kinds.WARNING}
+        fullColorEvents={fullColorEvents}
+        tooltip={translate('QualityCutoffNotMet')}
       />
     );
   }

diff --git a/frontend/src/Calendar/Legend/LegendIconItem.css b/frontend/src/Calendar/Legend/LegendIconItem.css
@@ -4,4 +4,8 @@
 
 .icon {
   margin-right: 5px;
+
+  &:global(.fullColorEvents) {
+    filter: var(--calendarFullColorFilter)
+  }
 }
diff --git 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;
diff --git 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 {

diff --git 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,15 +59,13 @@ 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
 };
 
 Icon.defaultProps = {
   kind: kinds.DEFAULT,
   size: 14,
-  darken: false,
   isSpinning: false,
   fixedWidth: false
 };

diff --git a/frontend/src/Styles/Themes/dark.js b/frontend/src/Styles/Themes/dark.js
@@ -215,6 +215,8 @@ module.exports = {
   calendarTextDim: '#eee',
   calendarTextDimAlternate: '#fff',
 
+  calendarFullColorFilter: 'grayscale(90%) contrast(200%) saturate(50%)',
+
   //
   // Table
 

diff --git a/frontend/src/Styles/Themes/light.js b/frontend/src/Styles/Themes/light.js
@@ -216,6 +216,8 @@ module.exports = {
   calendarTextDim: '#666',
   calendarTextDimAlternate: '#242424',
 
+  calendarFullColorFilter: 'brightness(30%)',
+
   //
   // Table
 

diff --git 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;

diff --git a/src/NzbDrone.Core/Localization/Core/en.json b/src/NzbDrone.Core/Localization/Core/en.json
@@ -223,6 +223,7 @@
   "Cutoff": "Cutoff",
   "CutoffFormatScoreHelpText": "Once the quality cutoff is met or exceeded and this custom format score is reached {appName} will no longer grab or import upgrades for those movies",
   "CutoffHelpText": "Once this quality is reached {appName} will no longer download movies after the custom format cutoff score is met or exceeded",
+  "CutoffNotMet": "Cutoff Not Met",
   "CutoffUnmet": "Cut-off Unmet",
   "DBMigration": "DB Migration",
   "Database": "Database",
@@ -1061,10 +1062,9 @@
   "QualitiesHelpText": "Qualities higher in the list are more preferred even if not checked. Qualities within the same group are equal. Only checked qualities are wanted",
   "QualitiesLoadError": "Unable to load qualities",
   "Quality": "Quality",
-  "QualityCutoffHasNotBeenMet": "Quality cutoff has not been met",
+  "QualityCutoffNotMet": "Quality cutoff has not been met",
   "QualityDefinitions": "Quality Definitions",
   "QualityLimitsHelpText": "Limits are automatically adjusted for the movie runtime.",
-  "QualityOrLangCutoffHasNotBeenMet": "Quality or Language cutoff has not been met",
   "QualityProfile": "Quality Profile",
   "QualityProfileInUse": "Can't delete a quality profile that is attached to a movie, list, or collection",
   "QualityProfiles": "Quality Profiles",