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

2024-12-12 11:15:43 +02:00 · 2019-01-05 15:20:23 -08:00 · 2019-01-05 15:20:23 -08:00 · ef7a08879f
commit ef7a08879f
parent 647e444a07
11 changed files with 245 additions and 142 deletions
--- a/frontend/.eslintrc
+++ b/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"]}],
--- a/frontend/src/App/ColorImpairedContext.js
+++ b/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;
--- a/frontend/src/Calendar/Legend/Legend.js
+++ b/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"
--- a/frontend/src/Components/Page/Page.js
+++ b/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,11 +74,13 @@ class Page extends Component {
      children,
      isSmallScreen,
      isSidebarVisible,
+      enableColorImpairedMode,
      onSidebarToggle,
      onSidebarVisibleChange
    } = this.props;

    return (
+      <ColorImpairedContext.Provider value={enableColorImpairedMode}>
        <div className={className}>
          <SignalRConnector />

@ -106,6 +109,7 @@ class Page extends Component {
            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
--- a/frontend/src/Components/Page/PageConnector.js
+++ b/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
--- a/frontend/src/Components/ProgressBar.css
+++ b/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 {
--- a/frontend/src/Components/ProgressBar.js
+++ b/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) {
@ -22,6 +23,9 @@ function ProgressBar(props) {
  const progressText = text || progressPercent;
  const actualWidth = width ? `${width}px` : '100%';

+  return (
+    <ColorImpairedConsumer>
+      {(enableColorImpairedMode) => {
        return (
          <div
            className={classNames(
@ -32,7 +36,7 @@ function ProgressBar(props) {
            style={{ width: actualWidth }}
          >
            {
-        showText && !!width &&
+              showText && width ?
                <div
                  className={styles.backTextContainer}
                  style={{ width: actualWidth }}
@ -42,21 +46,24 @@ function ProgressBar(props) {
                      {progressText}
                    </div>
                  </div>
-          </div>
+                </div> :
+                null
            }

            <div
              className={classNames(
                className,
-          styles[kind]
+                styles[kind],
+                enableColorImpairedMode && 'colorImpaired'
              )}
              aria-valuenow={progress}
              aria-valuemin="0"
              aria-valuemax="100"
              style={{ width: progressPercent }}
            />
+
            {
-        showText &&
+              showText ?
                <div
                  className={styles.frontTextContainer}
                  style={{ width: progressPercent }}
@ -69,10 +76,14 @@ function ProgressBar(props) {
                      {progressText}
                    </div>
                  </div>
-        </div>
+                </div> :
+                null
            }
          </div>
        );
+      }}
+    </ColorImpairedConsumer>
+  );
 }

 ProgressBar.propTypes = {
--- a/frontend/src/Series/Index/SeriesIndexFooter.css
+++ b/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 {
--- a/frontend/src/Series/Index/SeriesIndexFooter.js
+++ b/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';
@ -39,26 +41,49 @@ function SeriesIndexFooter({ series }) {
    totalFileSize += sizeOnDisk;
  });

+  return (
+    <ColorImpairedConsumer>
+      {(enableColorImpairedMode) => {
        return (
          <div className={styles.footer}>
            <div>
              <div className={styles.legendItem}>
-          <div className={styles.continuing} />
+                <div
+                  className={classNames(
+                    styles.continuing,
+                    enableColorImpairedMode && 'colorImpaired'
+                  )}
+                />
                <div>Continuing (All episodes downloaded)</div>
              </div>

              <div className={styles.legendItem}>
-          <div className={styles.ended} />
+                <div
+                  className={classNames(
+                    styles.ended,
+                    enableColorImpairedMode && 'colorImpaired'
+                  )}
+                />
                <div>Ended (All episodes downloaded)</div>
              </div>

              <div className={styles.legendItem}>
-          <div className={styles.missingMonitored} />
+                <div
+                  className={classNames(
+                    styles.missingMonitored,
+                    enableColorImpairedMode && 'colorImpaired'
+                  )}
+                />
                <div>Missing Episodes (Series monitored)</div>
              </div>

              <div className={styles.legendItem}>
-          <div className={styles.missingUnmonitored} />
+                <div
+                  className={classNames(
+                    styles.missingUnmonitored,
+                    enableColorImpairedMode && 'colorImpaired'
+                  )}
+                />
                <div>Missing Episodes (Series not monitored)</div>
              </div>
            </div>
@ -114,6 +139,9 @@ function SeriesIndexFooter({ series }) {
            </div>
          </div>
        );
+      }}
+    </ColorImpairedConsumer>
+  );
 }

 SeriesIndexFooter.propTypes = {
--- a/frontend/src/Styles/Variables/colors.js
+++ b/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