tedkulp/Sonarr
1
0
Fork 0
mirror of https://github.com/Sonarr/Sonarr.git synced 2026-04-25 22:46:31 -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/Series/Index/SeriesIndexFooter.css
+12
View File
@@ -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 {
frontend/src/Series/Index/SeriesIndexFooter.js
+90 -62
View File
@@ -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 (
<div className={styles.footer}>
<div>
<div className={styles.legendItem}>
<div className={styles.continuing} />
<div>Continuing (All episodes downloaded)</div>
</div>
<ColorImpairedConsumer>
{(enableColorImpairedMode) => {
return (
<div className={styles.footer}>
<div>
<div className={styles.legendItem}>
<div
className={classNames(
styles.continuing,
enableColorImpairedMode && 'colorImpaired'
)}
/>
<div>Continuing (All episodes downloaded)</div>
</div>
<div className={styles.legendItem}>
<div className={styles.ended} />
<div>Ended (All episodes downloaded)</div>
</div>
<div className={styles.legendItem}>
<div
className={classNames(
styles.ended,
enableColorImpairedMode && 'colorImpaired'
)}
/>
<div>Ended (All episodes downloaded)</div>
</div>
<div className={styles.legendItem}>
<div className={styles.missingMonitored} />
<div>Missing Episodes (Series monitored)</div>
</div>
<div className={styles.legendItem}>
<div
className={classNames(
styles.missingMonitored,
enableColorImpairedMode && 'colorImpaired'
)}
/>
<div>Missing Episodes (Series monitored)</div>
</div>
<div className={styles.legendItem}>
<div className={styles.missingUnmonitored} />
<div>Missing Episodes (Series not monitored)</div>
</div>
</div>
<div className={styles.legendItem}>
<div
className={classNames(
styles.missingUnmonitored,
enableColorImpairedMode && 'colorImpaired'
)}
/>
<div>Missing Episodes (Series not monitored)</div>
</div>
</div>
<div className={styles.statistics}>
<DescriptionList>
<DescriptionListItem
title="Series"
data={count}
/>
<div className={styles.statistics}>
<DescriptionList>
<DescriptionListItem
title="Series"
data={count}
/>
<DescriptionListItem
title="Ended"
data={ended}
/>
<DescriptionListItem
title="Ended"
data={ended}
/>
<DescriptionListItem
title="Continuing"
data={continuing}
/>
</DescriptionList>
<DescriptionListItem
title="Continuing"
data={continuing}
/>
</DescriptionList>
<DescriptionList>
<DescriptionListItem
title="Monitored"
data={monitored}
/>
<DescriptionList>
<DescriptionListItem
title="Monitored"
data={monitored}
/>
<DescriptionListItem
title="Unmonitored"
data={count - monitored}
/>
</DescriptionList>
<DescriptionListItem
title="Unmonitored"
data={count - monitored}
/>
</DescriptionList>
<DescriptionList>
<DescriptionListItem
title="Episodes"
data={episodes}
/>
<DescriptionList>
<DescriptionListItem
title="Episodes"
data={episodes}
/>
<DescriptionListItem
title="Files"
data={episodeFiles}
/>
</DescriptionList>
<DescriptionListItem
title="Files"
data={episodeFiles}
/>
</DescriptionList>
<DescriptionList>
<DescriptionListItem
title="Total File Size"
data={formatBytes(totalFileSize)}
/>
</DescriptionList>
</div>
</div>
<DescriptionList>
<DescriptionListItem
title="Total File Size"
data={formatBytes(totalFileSize)}
/>
</DescriptionList>
</div>
</div>
);
}}
</ColorImpairedConsumer>
);
}