Mirrors/Radarr
1
0
Fork 0
mirror of https://github.com/Radarr/Radarr.git synced 2024-09-17 15:02:34 +02:00
Code Issues Releases Wiki Activity

Fix: Movie index legend not respecting color blind setting

Browse Source 
#4616
This commit is contained in:
Austin Best 2020-07-19 15:05:25 -04:00 committed by Qstick
parent 26409c9d36
commit c2317e3567
3 changed files with 28 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/Movie/Index/MovieIndexFooter.css
View File

@ -40,12 +40,20 @@
composes: legendItemColor; composes: legendItemColor;
background-color: $dangerColor; background-color: $dangerColor;
&:global(.colorImpaired) {
background: repeating-linear-gradient(90deg, color($dangerColor shade(5%)), color($dangerColor shade(5%)) 5px, color($dangerColor shade(15%)) 5px, color($dangerColor shade(15%)) 10px);
}
} }
.missingUnmonitored { .missingUnmonitored {
composes: legendItemColor; composes: legendItemColor;
background-color: $warningColor; background-color: $warningColor;
&:global(.colorImpaired) {
background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, color($warningColor tint(15%)) 5px, color($warningColor tint(15%)) 10px);
}
} }
.statistics { .statistics {

19
frontend/src/Movie/Index/MovieIndexFooter.js
View File

@ -4,12 +4,14 @@ import formatBytes from 'Utilities/Number/formatBytes';
import DescriptionList from 'Components/DescriptionList/DescriptionList'; import DescriptionList from 'Components/DescriptionList/DescriptionList';
import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem'; import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
import styles from './MovieIndexFooter.css'; import styles from './MovieIndexFooter.css';
import classNames from 'classnames';
class MovieIndexFooter extends PureComponent { class MovieIndexFooter extends PureComponent {
render() { render() {
const { const {
movies movies,
colorImpairedMode
} = this.props; } = this.props;
const count = movies.length; const count = movies.length;
@ -50,12 +52,20 @@ class MovieIndexFooter extends PureComponent {
</div> </div>
<div className={styles.legendItem}> <div className={styles.legendItem}>
<div className={styles.missingMonitored} /> <div className={classNames(
styles.missingMonitored,
colorImpairedMode && 'colorImpaired'
)}
/>
<div>Missing, Monitored and considered Available</div> <div>Missing, Monitored and considered Available</div>
</div> </div>
<div className={styles.legendItem}> <div className={styles.legendItem}>
<div className={styles.missingUnmonitored} /> <div className={classNames(
styles.missingUnmonitored,
colorImpairedMode && 'colorImpaired'
)}
/>
<div>Missing, not Monitored</div> <div>Missing, not Monitored</div>
</div> </div>
@ -103,7 +113,8 @@ class MovieIndexFooter extends PureComponent {
} }
MovieIndexFooter.propTypes = { MovieIndexFooter.propTypes = {
movies: PropTypes.arrayOf(PropTypes.object).isRequired movies: PropTypes.arrayOf(PropTypes.object).isRequired,
colorImpairedMode: PropTypes.bool.isRequired
}; };
export default MovieIndexFooter; export default MovieIndexFooter;

7
frontend/src/Movie/Index/MovieIndexFooterConnector.js
View File

@ -2,6 +2,7 @@ import { connect } from 'react-redux';
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
import createDeepEqualSelector from 'Store/Selectors/createDeepEqualSelector'; import createDeepEqualSelector from 'Store/Selectors/createDeepEqualSelector';
import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector'; import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
import MovieIndexFooter from './MovieIndexFooter'; import MovieIndexFooter from './MovieIndexFooter';
function createUnoptimizedSelector() { function createUnoptimizedSelector() {
@ -39,9 +40,11 @@ function createMoviesSelector() {
function createMapStateToProps() { function createMapStateToProps() {
return createSelector( return createSelector(
createMoviesSelector(), createMoviesSelector(),
(movies) => { createUISettingsSelector(),
(movies, uiSettings) => {
return { return {
movies movies,
colorImpairedMode: uiSettings.enableColorImpairedMode
}; };
} }
); );