tedkulp/Sonarr
1
0
Fork 0
mirror of https://github.com/Sonarr/Sonarr.git synced 2026-04-23 22:25:56 -04:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Mark McDowall
2019-01-05 15:20:23 -08:00
parent 647e444a07
commit ef7a08879f
11 changed files with 245 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/Components/ProgressBar.js
+55 -44
View File
@@ -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>
);
}