From ef7a08879fddb1ef0a19b47f7f34e06ff0946165 Mon Sep 17 00:00:00 2001 From: Mark McDowall Date: Sat, 5 Jan 2019 15:20:23 -0800 Subject: [PATCH] New: Alternate styling for progress bars when color impaired mode is enabled --- frontend/.eslintrc | 1 - frontend/.stylelintrc | 2 +- frontend/src/App/ColorImpairedContext.js | 6 + frontend/src/Calendar/Legend/Legend.js | 15 ++ frontend/src/Components/Page/Page.js | 55 +++--- frontend/src/Components/Page/PageConnector.js | 32 +++- frontend/src/Components/ProgressBar.css | 12 ++ frontend/src/Components/ProgressBar.js | 99 +++++----- .../src/Series/Index/SeriesIndexFooter.css | 12 ++ .../src/Series/Index/SeriesIndexFooter.js | 174 ++++++++++-------- frontend/src/Styles/Variables/colors.js | 1 + 11 files changed, 256 insertions(+), 153 deletions(-) create mode 100644 frontend/src/App/ColorImpairedContext.js diff --git a/frontend/.eslintrc b/frontend/.eslintrc index 31b1173ec..85a301813 100644 --- 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"]}], diff --git a/frontend/.stylelintrc b/frontend/.stylelintrc index 5587e5d4d..5f197acca 100644 --- a/frontend/.stylelintrc +++ b/frontend/.stylelintrc @@ -24,7 +24,7 @@ "ignoreAtRules": [ "/^add\\-mixin$/", "/^define\\-mixin$/" - ] + ] } ], "at-rule-no-vendor-prefix": true, diff --git a/frontend/src/App/ColorImpairedContext.js b/frontend/src/App/ColorImpairedContext.js new file mode 100644 index 000000000..de98ac8fb --- /dev/null +++ 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; diff --git a/frontend/src/Calendar/Legend/Legend.js b/frontend/src/Calendar/Legend/Legend.js index 57d3bad2a..0b7e8a325 100644 --- a/frontend/src/Calendar/Legend/Legend.js +++ b/frontend/src/Calendar/Legend/Legend.js @@ -63,6 +63,21 @@ function Legend(props) { /> +
+ + + +
+
- - - - -
- +
+ + + - {children} -
+
+ - + {children} +
- -
+ + + +
+ ); } } @@ -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 diff --git a/frontend/src/Components/Page/PageConnector.js b/frontend/src/Components/Page/PageConnector.js index 5085d139b..54e42b667 100644 --- 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 diff --git a/frontend/src/Components/ProgressBar.css b/frontend/src/Components/ProgressBar.css index 2f0019043..e6bdaf190 100644 --- 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 { diff --git a/frontend/src/Components/ProgressBar.js b/frontend/src/Components/ProgressBar.js index 4f457d558..3c16792fa 100644 --- 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) { @@ -23,55 +24,65 @@ function ProgressBar(props) { const actualWidth = width ? `${width}px` : '100%'; return ( -
- { - showText && !!width && + + {(enableColorImpairedMode) => { + return (
-
-
- {progressText} -
-
-
- } + { + showText && width ? +
+
+
+ {progressText} +
+
+
: + null + } -
- { - showText && -
-
-
- {progressText} -
+
+ + { + showText ? +
+
+
+ {progressText} +
+
+
: + null + }
-
- } -
+ ); + }} + ); } diff --git a/frontend/src/Series/Index/SeriesIndexFooter.css b/frontend/src/Series/Index/SeriesIndexFooter.css index 3aa369576..390c265f4 100644 --- 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 { diff --git a/frontend/src/Series/Index/SeriesIndexFooter.js b/frontend/src/Series/Index/SeriesIndexFooter.js index 8afba25a7..92480c721 100644 --- 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'; @@ -40,79 +42,105 @@ function SeriesIndexFooter({ series }) { }); return ( -
-
-
-
-
Continuing (All episodes downloaded)
-
- -
-
-
Ended (All episodes downloaded)
-
- -
-
-
Missing Episodes (Series monitored)
-
- -
-
-
Missing Episodes (Series not monitored)
-
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
-
+ + {(enableColorImpairedMode) => { + return ( +
+
+
+
+
Continuing (All episodes downloaded)
+
+ +
+
+
Ended (All episodes downloaded)
+
+ +
+
+
Missing Episodes (Series monitored)
+
+ +
+
+
Missing Episodes (Series not monitored)
+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
+
+ ); + }} + ); } diff --git a/frontend/src/Styles/Variables/colors.js b/frontend/src/Styles/Variables/colors.js index 4ded49029..e3d02ffa0 100644 --- 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