Archive-Team
/
sonarr-repo-only
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/.eslintrc
View File

@ -209,7 +209,6 @@
"lines-around-comment": ["error", { "beforeBlockComment": true, "afterBlockComment": false }], "lines-around-comment": ["error", { "beforeBlockComment": true, "afterBlockComment": false }],
"max-depth": ["error", {"maximum": 5}], "max-depth": ["error", {"maximum": 5}],
"max-nested-callbacks": ["error", 4], "max-nested-callbacks": ["error", 4],
"max-params": ["error", 6],
"max-statements": "off", "max-statements": "off",
"max-statements-per-line": ["error", { "max": 1 }], "max-statements-per-line": ["error", { "max": 1 }],
"new-cap": ["error", {"capIsNewExceptions": ["$.Deferred", "DragDropContext", "DragLayer", "DragSource", "DropTarget"]}], "new-cap": ["error", {"capIsNewExceptions": ["$.Deferred", "DragDropContext", "DragLayer", "DragSource", "DropTarget"]}],

6
frontend/src/App/ColorImpairedContext.js Normal file
View File

@ -0,0 +1,6 @@
import React from 'react';
const ColorImpairedContext = React.createContext(false);
export const ColorImpairedConsumer = ColorImpairedContext.Consumer;
export default ColorImpairedContext;

15
frontend/src/Calendar/Legend/Legend.js
View File

@ -63,6 +63,21 @@ function Legend(props) {
/> />
</div> </div>
<div>
<LegendItem
status="onAir"
name="On Air"
tooltip="Episode is currently airing"
colorImpairedMode={colorImpairedMode}
/>
<LegendItem
status="missing"
tooltip="Episode has aired and is missing from disk"
colorImpairedMode={colorImpairedMode}
/>
</div>
<div> <div>
<LegendItem <LegendItem
status="downloading" status="downloading"

55
frontend/src/Components/Page/Page.js
View File

@ -2,8 +2,9 @@ import PropTypes from 'prop-types';
import React, { Component } from 'react'; import React, { Component } from 'react';
import locationShape from 'Helpers/Props/Shapes/locationShape'; import locationShape from 'Helpers/Props/Shapes/locationShape';
import SignalRConnector from 'Components/SignalRConnector'; import SignalRConnector from 'Components/SignalRConnector';
import AppUpdatedModalConnector from 'App/AppUpdatedModalConnector'; import ColorImpairedContext from 'App/ColorImpairedContext';
import ConnectionLostModalConnector from 'App/ConnectionLostModalConnector'; import ConnectionLostModalConnector from 'App/ConnectionLostModalConnector';
import AppUpdatedModalConnector from 'App/AppUpdatedModalConnector';
import PageHeader from './Header/PageHeader'; import PageHeader from './Header/PageHeader';
import PageSidebar from './Sidebar/PageSidebar'; import PageSidebar from './Sidebar/PageSidebar';
import styles from './Page.css'; import styles from './Page.css';
@ -73,39 +74,42 @@ class Page extends Component {
children, children,
isSmallScreen, isSmallScreen,
isSidebarVisible, isSidebarVisible,
enableColorImpairedMode,
onSidebarToggle, onSidebarToggle,
onSidebarVisibleChange onSidebarVisibleChange
} = this.props; } = this.props;
return ( return (
<div className={className}> <ColorImpairedContext.Provider value={enableColorImpairedMode}>
<SignalRConnector /> <div className={className}>
<SignalRConnector />
<PageHeader <PageHeader
onSidebarToggle={onSidebarToggle} onSidebarToggle={onSidebarToggle}
/>
<div className={styles.main}>
<PageSidebar
location={location}
isSmallScreen={isSmallScreen}
isSidebarVisible={isSidebarVisible}
onSidebarVisibleChange={onSidebarVisibleChange}
/> />
{children} <div className={styles.main}>
<PageSidebar
location={location}
isSmallScreen={isSmallScreen}
isSidebarVisible={isSidebarVisible}
onSidebarVisibleChange={onSidebarVisibleChange}
/>
{children}
</div>
<AppUpdatedModalConnector
isOpen={this.state.isUpdatedModalOpen}
onModalClose={this.onUpdatedModalClose}
/>
<ConnectionLostModalConnector
isOpen={this.state.isConnectionLostModalOpen}
onModalClose={this.onConnectionLostModalClose}
/>
</div> </div>
</ColorImpairedContext.Provider>
<AppUpdatedModalConnector
isOpen={this.state.isUpdatedModalOpen}
onModalClose={this.onUpdatedModalClose}
/>
<ConnectionLostModalConnector
isOpen={this.state.isConnectionLostModalOpen}
onModalClose={this.onConnectionLostModalClose}
/>
</div>
); );
} }
} }
@ -118,6 +122,7 @@ Page.propTypes = {
isSidebarVisible: PropTypes.bool.isRequired, isSidebarVisible: PropTypes.bool.isRequired,
isUpdated: PropTypes.bool.isRequired, isUpdated: PropTypes.bool.isRequired,
isDisconnected: PropTypes.bool.isRequired, isDisconnected: PropTypes.bool.isRequired,
enableColorImpairedMode: PropTypes.bool.isRequired,
onResize: PropTypes.func.isRequired, onResize: PropTypes.func.isRequired,
onSidebarToggle: PropTypes.func.isRequired, onSidebarToggle: PropTypes.func.isRequired,
onSidebarVisibleChange: PropTypes.func.isRequired onSidebarVisibleChange: PropTypes.func.isRequired

32
frontend/src/Components/Page/PageConnector.js
View File

@ -32,25 +32,37 @@ function createMapStateToProps() {
(state) => state.series, (state) => state.series,
(state) => state.customFilters, (state) => state.customFilters,
(state) => state.tags, (state) => state.tags,
(state) => state.settings, (state) => state.settings.ui,
(state) => state.settings.qualityProfiles,
(state) => state.settings.languageProfiles,
(state) => state.app, (state) => state.app,
createDimensionsSelector(), createDimensionsSelector(),
(series, customFilters, tags, settings, app, dimensions) => { (
series,
customFilters,
tags,
uiSettings,
qualityProfiles,
languageProfiles,
app,
dimensions
) => {
const isPopulated = ( const isPopulated = (
series.isPopulated && series.isPopulated &&
customFilters.isPopulated && customFilters.isPopulated &&
tags.isPopulated && tags.isPopulated &&
settings.qualityProfiles.isPopulated && qualityProfiles.isPopulated &&
settings.ui.isPopulated languageProfiles.isPopulated &&
uiSettings.isPopulated
); );
const hasError = !!( const hasError = !!(
series.error || series.error ||
customFilters.error || customFilters.error ||
tags.error || tags.error ||
settings.qualityProfiles.error || qualityProfiles.error ||
settings.languageProfiles.error || languageProfiles.error ||
settings.ui.error uiSettings.error
); );
return { return {
@ -59,10 +71,12 @@ function createMapStateToProps() {
seriesError: series.error, seriesError: series.error,
customFiltersError: tags.error, customFiltersError: tags.error,
tagsError: tags.error, tagsError: tags.error,
qualityProfilesError: settings.qualityProfiles.error, qualityProfilesError: qualityProfiles.error,
uiSettingsError: settings.ui.error, languageProfilesError: languageProfiles.error,
uiSettingsError: uiSettings.error,
isSmallScreen: dimensions.isSmallScreen, isSmallScreen: dimensions.isSmallScreen,
isSidebarVisible: app.isSidebarVisible, isSidebarVisible: app.isSidebarVisible,
enableColorImpairedMode: uiSettings.item.enableColorImpairedMode,
version: app.version, version: app.version,
isUpdated: app.isUpdated, isUpdated: app.isUpdated,
isDisconnected: app.isDisconnected isDisconnected: app.isDisconnected

12
frontend/src/Components/ProgressBar.css
View File

@ -43,10 +43,18 @@
.primary { .primary {
background-color: $primaryColor; background-color: $primaryColor;
&:global(.colorImpaired) {
background: repeating-linear-gradient(90deg, $primaryColor, $primaryColor 10px, $colorImpairedAlternateGradient 10px, $colorImpairedAlternateGradient 20px);
}
} }
.danger { .danger {
background-color: $dangerColor; background-color: $dangerColor;
&:global(.colorImpaired) {
background: repeating-linear-gradient(90deg, $dangerColor, $dangerColor 10px, $colorImpairedAlternateGradient 10px, $colorImpairedAlternateGradient 20px);
}
} }
.success { .success {
@ -59,6 +67,10 @@
.warning { .warning {
background-color: $warningColor; background-color: $warningColor;
&:global(.colorImpaired) {
background: repeating-linear-gradient(90deg, $warningColor, $warningColor 10px, $colorImpairedAlternateGradient 10px, $colorImpairedAlternateGradient 20px);
}
} }
.info { .info {

99
frontend/src/Components/ProgressBar.js
View File

@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { kinds, sizes } from 'Helpers/Props'; import { kinds, sizes } from 'Helpers/Props';
import { ColorImpairedConsumer } from 'App/ColorImpairedContext';
import styles from './ProgressBar.css'; import styles from './ProgressBar.css';
function ProgressBar(props) { function ProgressBar(props) {
@ -23,55 +24,65 @@ function ProgressBar(props) {
const actualWidth = width ? `${width}px` : '100%'; const actualWidth = width ? `${width}px` : '100%';
return ( return (
<div <ColorImpairedConsumer>
className={classNames( {(enableColorImpairedMode) => {
containerClassName, return (
styles[size]
)}
title={title}
style={{ width: actualWidth }}
>
{
showText && !!width &&
<div <div
className={styles.backTextContainer} className={classNames(
containerClassName,
styles[size]
)}
title={title}
style={{ width: actualWidth }} style={{ width: actualWidth }}
> >
<div className={styles.backText}> {
<div> showText && width ?
{progressText} <div
</div> className={styles.backTextContainer}
</div> style={{ width: actualWidth }}
</div> >
} <div className={styles.backText}>
<div>
{progressText}
</div>
</div>
</div> :
null
}
<div <div
className={classNames( className={classNames(
className, className,
styles[kind] styles[kind],
)} enableColorImpairedMode && 'colorImpaired'
aria-valuenow={progress} )}
aria-valuemin="0" aria-valuenow={progress}
aria-valuemax="100" aria-valuemin="0"
style={{ width: progressPercent }} aria-valuemax="100"
/> style={{ width: progressPercent }}
{ />
showText &&
<div {
className={styles.frontTextContainer} showText ?
style={{ width: progressPercent }} <div
> className={styles.frontTextContainer}
<div style={{ width: progressPercent }}
className={styles.frontText} >
style={{ width: actualWidth }} <div
> className={styles.frontText}
<div> style={{ width: actualWidth }}
{progressText} >
</div> <div>
{progressText}
</div>
</div>
</div> :
null
}
</div> </div>
</div> );
} }}
</div> </ColorImpairedConsumer>
); );
} }

12
frontend/src/Series/Index/SeriesIndexFooter.css
View File

@ -22,6 +22,10 @@
composes: legendItemColor; composes: legendItemColor;
background-color: $primaryColor; background-color: $primaryColor;
&:global(.colorImpaired) {
background: repeating-linear-gradient(90deg, $primaryColor, $primaryColor 10px, $colorImpairedAlternateGradient 10px, $colorImpairedAlternateGradient 20px);
}
} }
.ended { .ended {
@ -34,12 +38,20 @@
composes: legendItemColor; composes: legendItemColor;
background-color: $dangerColor; background-color: $dangerColor;
&:global(.colorImpaired) {
background: repeating-linear-gradient(90deg, $dangerColor, $dangerColor 10px, $colorImpairedAlternateGradient 10px, $colorImpairedAlternateGradient 20px);
}
} }
.missingUnmonitored { .missingUnmonitored {
composes: legendItemColor; composes: legendItemColor;
background-color: $warningColor; background-color: $warningColor;
&:global(.colorImpaired) {
background: repeating-linear-gradient(90deg, $warningColor, $warningColor 10px, $colorImpairedAlternateGradient 10px, $colorImpairedAlternateGradient 20px);
}
} }
.statistics { .statistics {

152
frontend/src/Series/Index/SeriesIndexFooter.js
View File

@ -1,6 +1,8 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import classNames from 'classnames';
import formatBytes from 'Utilities/Number/formatBytes'; import formatBytes from 'Utilities/Number/formatBytes';
import { ColorImpairedConsumer } from 'App/ColorImpairedContext';
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 './SeriesIndexFooter.css'; import styles from './SeriesIndexFooter.css';
@ -40,79 +42,105 @@ function SeriesIndexFooter({ series }) {
}); });
return ( return (
<div className={styles.footer}> <ColorImpairedConsumer>
<div> {(enableColorImpairedMode) => {
<div className={styles.legendItem}> return (
<div className={styles.continuing} /> <div className={styles.footer}>
<div>Continuing (All episodes downloaded)</div> <div>
</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.legendItem}>
<div className={styles.ended} /> <div
<div>Ended (All episodes downloaded)</div> className={classNames(
</div> styles.ended,
enableColorImpairedMode && 'colorImpaired'
)}
/>
<div>Ended (All episodes downloaded)</div>
</div>
<div className={styles.legendItem}> <div className={styles.legendItem}>
<div className={styles.missingMonitored} /> <div
<div>Missing Episodes (Series monitored)</div> className={classNames(
</div> styles.missingMonitored,
enableColorImpairedMode && 'colorImpaired'
)}
/>
<div>Missing Episodes (Series monitored)</div>
</div>
<div className={styles.legendItem}> <div className={styles.legendItem}>
<div className={styles.missingUnmonitored} /> <div
<div>Missing Episodes (Series not monitored)</div> className={classNames(
</div> styles.missingUnmonitored,
</div> enableColorImpairedMode && 'colorImpaired'
)}
/>
<div>Missing Episodes (Series not monitored)</div>
</div>
</div>
<div className={styles.statistics}> <div className={styles.statistics}>
<DescriptionList> <DescriptionList>
<DescriptionListItem <DescriptionListItem
title="Series" title="Series"
data={count} data={count}
/> />
<DescriptionListItem <DescriptionListItem
title="Ended" title="Ended"
data={ended} data={ended}
/> />
<DescriptionListItem <DescriptionListItem
title="Continuing" title="Continuing"
data={continuing} data={continuing}
/> />
</DescriptionList> </DescriptionList>
<DescriptionList> <DescriptionList>
<DescriptionListItem <DescriptionListItem
title="Monitored" title="Monitored"
data={monitored} data={monitored}
/> />
<DescriptionListItem <DescriptionListItem
title="Unmonitored" title="Unmonitored"
data={count - monitored} data={count - monitored}
/> />
</DescriptionList> </DescriptionList>
<DescriptionList> <DescriptionList>
<DescriptionListItem <DescriptionListItem
title="Episodes" title="Episodes"
data={episodes} data={episodes}
/> />
<DescriptionListItem <DescriptionListItem
title="Files" title="Files"
data={episodeFiles} data={episodeFiles}
/> />
</DescriptionList> </DescriptionList>
<DescriptionList> <DescriptionList>
<DescriptionListItem <DescriptionListItem
title="Total File Size" title="Total File Size"
data={formatBytes(totalFileSize)} data={formatBytes(totalFileSize)}
/> />
</DescriptionList> </DescriptionList>
</div> </div>
</div> </div>
);
}}
</ColorImpairedConsumer>
); );
} }

1
frontend/src/Styles/Variables/colors.js
View File

@ -62,6 +62,7 @@ module.exports = {
inputWarningBorderColor: '#ffa500', inputWarningBorderColor: '#ffa500',
inputWarningBoxShadowColor: 'rgba(255, 165, 0, 0.6)', inputWarningBoxShadowColor: 'rgba(255, 165, 0, 0.6)',
colorImpairedGradient: '#fcfcfc', colorImpairedGradient: '#fcfcfc',
colorImpairedAlternateGradient: '#b0b0b0',
// //
// Buttons // Buttons