New: Alternate styling for progress bars when color impaired mode is enabled

frontend/.eslintrc

@@ -209,7 +209,6 @@
     "lines-around-comment": ["error", { "beforeBlockComment": true, "afterBlockComment": false }],
     "max-depth": ["error", {"maximum": 5}],
     "max-nested-callbacks": ["error", 4],
-    "max-params": ["error", 6],
     "max-statements": "off",
     "max-statements-per-line": ["error", { "max": 1 }],
     "new-cap": ["error", {"capIsNewExceptions": ["$.Deferred", "DragDropContext", "DragLayer", "DragSource", "DropTarget"]}],

frontend/.stylelintrc

@@ -24,7 +24,7 @@
         "ignoreAtRules": [
           "/^add\\-mixin$/",
           "/^define\\-mixin$/"
-        ]
+        ] 
       }
     ],
     "at-rule-no-vendor-prefix": true,

frontend/src/App/ColorImpairedContext.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+const ColorImpairedContext = React.createContext(false);
+export const ColorImpairedConsumer = ColorImpairedContext.Consumer;
+
+export default ColorImpairedContext;

frontend/src/Calendar/Legend/Legend.js

@@ -63,6 +63,21 @@ function Legend(props) {
         />
       </div>
 
+      <div>
+        <LegendItem
+          status="onAir"
+          name="On Air"
+          tooltip="Episode is currently airing"
+          colorImpairedMode={colorImpairedMode}
+        />
+
+        <LegendItem
+          status="missing"
+          tooltip="Episode has aired and is missing from disk"
+          colorImpairedMode={colorImpairedMode}
+        />
+      </div>
+
       <div>
         <LegendItem
           status="downloading"

frontend/src/Components/Page/Page.js

@@ -2,8 +2,9 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import locationShape from 'Helpers/Props/Shapes/locationShape';
 import SignalRConnector from 'Components/SignalRConnector';
-import AppUpdatedModalConnector from 'App/AppUpdatedModalConnector';
+import ColorImpairedContext from 'App/ColorImpairedContext';
 import ConnectionLostModalConnector from 'App/ConnectionLostModalConnector';
+import AppUpdatedModalConnector from 'App/AppUpdatedModalConnector';
 import PageHeader from './Header/PageHeader';
 import PageSidebar from './Sidebar/PageSidebar';
 import styles from './Page.css';
@@ -73,39 +74,42 @@ class Page extends Component {
       children,
       isSmallScreen,
       isSidebarVisible,
+      enableColorImpairedMode,
       onSidebarToggle,
       onSidebarVisibleChange
     } = this.props;
 
     return (
-      <div className={className}>
-        <SignalRConnector />
+      <ColorImpairedContext.Provider value={enableColorImpairedMode}>
+        <div className={className}>
+          <SignalRConnector />
 
-        <PageHeader
-          onSidebarToggle={onSidebarToggle}
-        />
-
-        <div className={styles.main}>
-          <PageSidebar
-            location={location}
-            isSmallScreen={isSmallScreen}
-            isSidebarVisible={isSidebarVisible}
-            onSidebarVisibleChange={onSidebarVisibleChange}
+          <PageHeader
+            onSidebarToggle={onSidebarToggle}
           />
 
-          {children}
+          <div className={styles.main}>
+            <PageSidebar
+              location={location}
+              isSmallScreen={isSmallScreen}
+              isSidebarVisible={isSidebarVisible}
+              onSidebarVisibleChange={onSidebarVisibleChange}
+            />
+
+            {children}
+          </div>
+
+          <AppUpdatedModalConnector
+            isOpen={this.state.isUpdatedModalOpen}
+            onModalClose={this.onUpdatedModalClose}
+          />
+
+          <ConnectionLostModalConnector
+            isOpen={this.state.isConnectionLostModalOpen}
+            onModalClose={this.onConnectionLostModalClose}
+          />
         </div>
-
-        <AppUpdatedModalConnector
-          isOpen={this.state.isUpdatedModalOpen}
-          onModalClose={this.onUpdatedModalClose}
-        />
-
-        <ConnectionLostModalConnector
-          isOpen={this.state.isConnectionLostModalOpen}
-          onModalClose={this.onConnectionLostModalClose}
-        />
-      </div>
+      </ColorImpairedContext.Provider>
     );
   }
 }
@@ -118,6 +122,7 @@ Page.propTypes = {
   isSidebarVisible: PropTypes.bool.isRequired,
   isUpdated: PropTypes.bool.isRequired,
   isDisconnected: PropTypes.bool.isRequired,
+  enableColorImpairedMode: PropTypes.bool.isRequired,
   onResize: PropTypes.func.isRequired,
   onSidebarToggle: PropTypes.func.isRequired,
   onSidebarVisibleChange: PropTypes.func.isRequired

frontend/src/Components/Page/PageConnector.js

@@ -32,25 +32,37 @@ function createMapStateToProps() {
     (state) => state.series,
     (state) => state.customFilters,
     (state) => state.tags,
-    (state) => state.settings,
+    (state) => state.settings.ui,
+    (state) => state.settings.qualityProfiles,
+    (state) => state.settings.languageProfiles,
     (state) => state.app,
     createDimensionsSelector(),
-    (series, customFilters, tags, settings, app, dimensions) => {
+    (
+      series,
+      customFilters,
+      tags,
+      uiSettings,
+      qualityProfiles,
+      languageProfiles,
+      app,
+      dimensions
+    ) => {
       const isPopulated = (
         series.isPopulated &&
         customFilters.isPopulated &&
         tags.isPopulated &&
-        settings.qualityProfiles.isPopulated &&
-        settings.ui.isPopulated
+        qualityProfiles.isPopulated &&
+        languageProfiles.isPopulated &&
+        uiSettings.isPopulated
       );
 
       const hasError = !!(
         series.error ||
         customFilters.error ||
         tags.error ||
-        settings.qualityProfiles.error ||
-        settings.languageProfiles.error ||
-        settings.ui.error
+        qualityProfiles.error ||
+        languageProfiles.error ||
+        uiSettings.error
       );
 
       return {
@@ -59,10 +71,12 @@ function createMapStateToProps() {
         seriesError: series.error,
         customFiltersError: tags.error,
         tagsError: tags.error,
-        qualityProfilesError: settings.qualityProfiles.error,
-        uiSettingsError: settings.ui.error,
+        qualityProfilesError: qualityProfiles.error,
+        languageProfilesError: languageProfiles.error,
+        uiSettingsError: uiSettings.error,
         isSmallScreen: dimensions.isSmallScreen,
         isSidebarVisible: app.isSidebarVisible,
+        enableColorImpairedMode: uiSettings.item.enableColorImpairedMode,
         version: app.version,
         isUpdated: app.isUpdated,
         isDisconnected: app.isDisconnected

frontend/src/Components/ProgressBar.css

@@ -43,10 +43,18 @@
 
 .primary {
   background-color: $primaryColor;
+
+  &:global(.colorImpaired) {
+    background: repeating-linear-gradient(90deg, $primaryColor, $primaryColor 10px, $colorImpairedAlternateGradient 10px, $colorImpairedAlternateGradient 20px);
+  }
 }
 
 .danger {
   background-color: $dangerColor;
+
+  &:global(.colorImpaired) {
+    background: repeating-linear-gradient(90deg, $dangerColor, $dangerColor 10px, $colorImpairedAlternateGradient 10px, $colorImpairedAlternateGradient 20px);
+  }
 }
 
 .success {
@@ -59,6 +67,10 @@
 
 .warning {
   background-color: $warningColor;
+
+  &:global(.colorImpaired) {
+    background: repeating-linear-gradient(90deg, $warningColor, $warningColor 10px, $colorImpairedAlternateGradient 10px, $colorImpairedAlternateGradient 20px);
+  }
 }
 
 .info {

frontend/src/Components/ProgressBar.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 import { kinds, sizes } from 'Helpers/Props';
+import { ColorImpairedConsumer } from 'App/ColorImpairedContext';
 import styles from './ProgressBar.css';
 
 function ProgressBar(props) {
@@ -23,55 +24,65 @@ function ProgressBar(props) {
   const actualWidth = width ? `${width}px` : '100%';
 
   return (
-    <div
-      className={classNames(
-        containerClassName,
-        styles[size]
-      )}
-      title={title}
-      style={{ width: actualWidth }}
-    >
-      {
-        showText && !!width &&
+    <ColorImpairedConsumer>
+      {(enableColorImpairedMode) => {
+        return (
           <div
-            className={styles.backTextContainer}
+            className={classNames(
+              containerClassName,
+              styles[size]
+            )}
+            title={title}
             style={{ width: actualWidth }}
           >
-            <div className={styles.backText}>
-              <div>
-                {progressText}
-              </div>
-            </div>
-          </div>
-      }
+            {
+              showText && width ?
+                <div
+                  className={styles.backTextContainer}
+                  style={{ width: actualWidth }}
+                >
+                  <div className={styles.backText}>
+                    <div>
+                      {progressText}
+                    </div>
+                  </div>
+                </div> :
+                null
+            }
 
-      <div
-        className={classNames(
-          className,
-          styles[kind]
-        )}
-        aria-valuenow={progress}
-        aria-valuemin="0"
-        aria-valuemax="100"
-        style={{ width: progressPercent }}
-      />
-      {
-        showText &&
-        <div
-          className={styles.frontTextContainer}
-          style={{ width: progressPercent }}
-        >
-          <div
-            className={styles.frontText}
-            style={{ width: actualWidth }}
-          >
-            <div>
-              {progressText}
-            </div>
+            <div
+              className={classNames(
+                className,
+                styles[kind],
+                enableColorImpairedMode && 'colorImpaired'
+              )}
+              aria-valuenow={progress}
+              aria-valuemin="0"
+              aria-valuemax="100"
+              style={{ width: progressPercent }}
+            />
+
+            {
+              showText ?
+                <div
+                  className={styles.frontTextContainer}
+                  style={{ width: progressPercent }}
+                >
+                  <div
+                    className={styles.frontText}
+                    style={{ width: actualWidth }}
+                  >
+                    <div>
+                      {progressText}
+                    </div>
+                  </div>
+                </div> :
+                null
+            }
           </div>
-        </div>
-      }
-    </div>
+        );
+      }}
+    </ColorImpairedConsumer>
   );
 }
 

frontend/src/Series/Index/SeriesIndexFooter.css

@@ -22,6 +22,10 @@
   composes: legendItemColor;
 
   background-color: $primaryColor;
+
+  &:global(.colorImpaired) {
+    background: repeating-linear-gradient(90deg, $primaryColor, $primaryColor 10px, $colorImpairedAlternateGradient 10px, $colorImpairedAlternateGradient 20px);
+  }
 }
 
 .ended {
@@ -34,12 +38,20 @@
   composes: legendItemColor;
 
   background-color: $dangerColor;
+
+  &:global(.colorImpaired) {
+    background: repeating-linear-gradient(90deg, $dangerColor, $dangerColor 10px, $colorImpairedAlternateGradient 10px, $colorImpairedAlternateGradient 20px);
+  }
 }
 
 .missingUnmonitored {
   composes: legendItemColor;
 
   background-color: $warningColor;
+
+  &:global(.colorImpaired) {
+    background: repeating-linear-gradient(90deg, $warningColor, $warningColor 10px, $colorImpairedAlternateGradient 10px, $colorImpairedAlternateGradient 20px);
+  }
 }
 
 .statistics {

frontend/src/Series/Index/SeriesIndexFooter.js

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import classNames from 'classnames';
 import formatBytes from 'Utilities/Number/formatBytes';
+import { ColorImpairedConsumer } from 'App/ColorImpairedContext';
 import DescriptionList from 'Components/DescriptionList/DescriptionList';
 import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
 import styles from './SeriesIndexFooter.css';
@@ -40,79 +42,105 @@ function SeriesIndexFooter({ series }) {
   });
 
   return (
-    <div className={styles.footer}>
-      <div>
-        <div className={styles.legendItem}>
-          <div className={styles.continuing} />
-          <div>Continuing (All episodes downloaded)</div>
-        </div>
+    <ColorImpairedConsumer>
+      {(enableColorImpairedMode) => {
+        return (
+          <div className={styles.footer}>
+            <div>
+              <div className={styles.legendItem}>
+                <div
+                  className={classNames(
+                    styles.continuing,
+                    enableColorImpairedMode && 'colorImpaired'
+                  )}
+                />
+                <div>Continuing (All episodes downloaded)</div>
+              </div>
 
-        <div className={styles.legendItem}>
-          <div className={styles.ended} />
-          <div>Ended (All episodes downloaded)</div>
-        </div>
+              <div className={styles.legendItem}>
+                <div
+                  className={classNames(
+                    styles.ended,
+                    enableColorImpairedMode && 'colorImpaired'
+                  )}
+                />
+                <div>Ended (All episodes downloaded)</div>
+              </div>
 
-        <div className={styles.legendItem}>
-          <div className={styles.missingMonitored} />
-          <div>Missing Episodes (Series monitored)</div>
-        </div>
+              <div className={styles.legendItem}>
+                <div
+                  className={classNames(
+                    styles.missingMonitored,
+                    enableColorImpairedMode && 'colorImpaired'
+                  )}
+                />
+                <div>Missing Episodes (Series monitored)</div>
+              </div>
 
-        <div className={styles.legendItem}>
-          <div className={styles.missingUnmonitored} />
-          <div>Missing Episodes (Series not monitored)</div>
-        </div>
-      </div>
+              <div className={styles.legendItem}>
+                <div
+                  className={classNames(
+                    styles.missingUnmonitored,
+                    enableColorImpairedMode && 'colorImpaired'
+                  )}
+                />
+                <div>Missing Episodes (Series not monitored)</div>
+              </div>
+            </div>
 
-      <div className={styles.statistics}>
-        <DescriptionList>
-          <DescriptionListItem
-            title="Series"
-            data={count}
-          />
+            <div className={styles.statistics}>
+              <DescriptionList>
+                <DescriptionListItem
+                  title="Series"
+                  data={count}
+                />
 
-          <DescriptionListItem
-            title="Ended"
-            data={ended}
-          />
+                <DescriptionListItem
+                  title="Ended"
+                  data={ended}
+                />
 
-          <DescriptionListItem
-            title="Continuing"
-            data={continuing}
-          />
-        </DescriptionList>
+                <DescriptionListItem
+                  title="Continuing"
+                  data={continuing}
+                />
+              </DescriptionList>
 
-        <DescriptionList>
-          <DescriptionListItem
-            title="Monitored"
-            data={monitored}
-          />
+              <DescriptionList>
+                <DescriptionListItem
+                  title="Monitored"
+                  data={monitored}
+                />
 
-          <DescriptionListItem
-            title="Unmonitored"
-            data={count - monitored}
-          />
-        </DescriptionList>
+                <DescriptionListItem
+                  title="Unmonitored"
+                  data={count - monitored}
+                />
+              </DescriptionList>
 
-        <DescriptionList>
-          <DescriptionListItem
-            title="Episodes"
-            data={episodes}
-          />
+              <DescriptionList>
+                <DescriptionListItem
+                  title="Episodes"
+                  data={episodes}
+                />
 
-          <DescriptionListItem
-            title="Files"
-            data={episodeFiles}
-          />
-        </DescriptionList>
+                <DescriptionListItem
+                  title="Files"
+                  data={episodeFiles}
+                />
+              </DescriptionList>
 
-        <DescriptionList>
-          <DescriptionListItem
-            title="Total File Size"
-            data={formatBytes(totalFileSize)}
-          />
-        </DescriptionList>
-      </div>
-    </div>
+              <DescriptionList>
+                <DescriptionListItem
+                  title="Total File Size"
+                  data={formatBytes(totalFileSize)}
+                />
+              </DescriptionList>
+            </div>
+          </div>
+        );
+      }}
+    </ColorImpairedConsumer>
   );
 }
 

frontend/src/Styles/Variables/colors.js

@@ -62,6 +62,7 @@ module.exports = {
   inputWarningBorderColor: '#ffa500',
   inputWarningBoxShadowColor: 'rgba(255, 165, 0, 0.6)',
   colorImpairedGradient: '#fcfcfc',
+  colorImpairedAlternateGradient: '#b0b0b0',
 
   //
   // Buttons