Fix: Movie index legend not respecting color blind setting

#4616
pull/4627/head
Austin Best 4 years ago committed by Qstick
parent 26409c9d36
commit c2317e3567

@ -40,12 +40,20 @@
composes: legendItemColor;
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 {
composes: legendItemColor;
background-color: $warningColor;
&:global(.colorImpaired) {
background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, color($warningColor tint(15%)) 5px, color($warningColor tint(15%)) 10px);
}
}
.statistics {

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

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

Loading…
Cancel
Save