From 750b0331ab7b61deb1dac70cdc1ca5b986a1d12d Mon Sep 17 00:00:00 2001 From: nitsua Date: Fri, 29 Oct 2021 07:59:23 -0400 Subject: [PATCH] New: Add status color to index table for Downloaded + Monitored (#6411) Fixed: Fix issue with calendar not showing Downloaded + Unmonitored (Yellow) Fixed: Fix issue with colorblind mode not working anywhere except the Calendar Refactor status color function so it is used everywhere instead of one for the calendar and one everywhere else Refactor css style naming to be more consistent in the calendar with everything else --- frontend/src/Calendar/Agenda/AgendaEvent.css | 16 +++-- frontend/src/Calendar/Agenda/AgendaEvent.js | 4 +- .../src/Calendar/Events/CalendarEvent.css | 23 ++----- frontend/src/Calendar/Events/CalendarEvent.js | 4 +- frontend/src/Calendar/getStatusStyle.js | 23 ------- frontend/src/Components/ProgressBar.css | 4 +- frontend/src/Movie/Index/MovieIndexFooter.css | 4 +- .../ProgressBar/MovieIndexProgressBar.js | 4 +- .../Movie/Index/Table/MovieIndexHeader.css | 9 ++- .../src/Movie/Index/Table/MovieIndexRow.css | 9 ++- frontend/src/Movie/MovieFileStatus.css | 42 ++++++++++++ frontend/src/Movie/MovieFileStatus.js | 65 ++++++++----------- .../src/Movie/MovieFileStatusConnector.js | 7 +- .../src/Utilities/Movie/getProgressBarKind.js | 27 -------- .../src/Utilities/Movie/getStatusStyle.js | 27 ++++++++ 15 files changed, 142 insertions(+), 126 deletions(-) delete mode 100644 frontend/src/Calendar/getStatusStyle.js delete mode 100644 frontend/src/Utilities/Movie/getProgressBarKind.js create mode 100644 frontend/src/Utilities/Movie/getStatusStyle.js diff --git a/frontend/src/Calendar/Agenda/AgendaEvent.css b/frontend/src/Calendar/Agenda/AgendaEvent.css index 74788d38a6..d7881cb935 100644 --- a/frontend/src/Calendar/Agenda/AgendaEvent.css +++ b/frontend/src/Calendar/Agenda/AgendaEvent.css @@ -54,20 +54,24 @@ composes: downloaded from '~Calendar/Events/CalendarEvent.css'; } -.downloading { - composes: downloading from '~Calendar/Events/CalendarEvent.css'; +.queue { + composes: queue from '~Calendar/Events/CalendarEvent.css'; } .unmonitored { composes: unmonitored from '~Calendar/Events/CalendarEvent.css'; } -.missing { - composes: missing from '~Calendar/Events/CalendarEvent.css'; +.missingUnmonitored { + composes: missingUnmonitored from '~Calendar/Events/CalendarEvent.css'; } -.unreleased { - composes: unreleased from '~Calendar/Events/CalendarEvent.css'; +.missingMonitored { + composes: missingMonitored from '~Calendar/Events/CalendarEvent.css'; +} + +.continuing { + composes: continuing from '~Calendar/Events/CalendarEvent.css'; } @media only screen and (max-width: $breakpointSmall) { diff --git a/frontend/src/Calendar/Agenda/AgendaEvent.js b/frontend/src/Calendar/Agenda/AgendaEvent.js index e6cc532bf1..d85fc839c0 100644 --- a/frontend/src/Calendar/Agenda/AgendaEvent.js +++ b/frontend/src/Calendar/Agenda/AgendaEvent.js @@ -3,10 +3,10 @@ import moment from 'moment'; import PropTypes from 'prop-types'; import React, { Component } from 'react'; import CalendarEventQueueDetails from 'Calendar/Events/CalendarEventQueueDetails'; -import getStatusStyle from 'Calendar/getStatusStyle'; import Icon from 'Components/Icon'; import Link from 'Components/Link/Link'; import { icons, kinds } from 'Helpers/Props'; +import getStatusStyle from 'Utilities/Movie/getStatusStyle'; import translate from 'Utilities/String/translate'; import styles from './AgendaEvent.css'; @@ -82,7 +82,7 @@ class AgendaEvent extends Component { startTime = moment(startTime); const downloading = !!(queueItem || grabbed); const isMonitored = monitored; - const statusStyle = getStatusStyle(hasFile, downloading, isAvailable, isMonitored); + const statusStyle = getStatusStyle(null, isMonitored, hasFile, isAvailable, 'style', downloading); const joinedGenres = genres.slice(0, 2).join(', '); const link = `/movie/${titleSlug}`; diff --git a/frontend/src/Calendar/Events/CalendarEvent.css b/frontend/src/Calendar/Events/CalendarEvent.css index 1e962f17cf..0ce400bed0 100644 --- a/frontend/src/Calendar/Events/CalendarEvent.css +++ b/frontend/src/Calendar/Events/CalendarEvent.css @@ -60,39 +60,30 @@ } } -.downloading { +.queue { border-left-color: $purple !important; } .unmonitored { border-left-color: $gray !important; +} + +.missingUnmonitored { + border-left-color: $warningColor !important; &:global(.colorImpaired) { background: repeating-linear-gradient(45deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px); } } -.onAir { - border-left-color: $warningColor !important; - - &:global(.colorImpaired) { - background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px); - } -} - -.missing { +.missingMonitored { border-left-color: $dangerColor !important; &:global(.colorImpaired) { - border-left-color: color($dangerColor saturation(+15%)) !important; background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px); } } -.unreleased { +.continuing { border-left-color: $primaryColor !important; - - &:global(.colorImpaired) { - background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px); - } } diff --git a/frontend/src/Calendar/Events/CalendarEvent.js b/frontend/src/Calendar/Events/CalendarEvent.js index 1c8a20ea16..254566041e 100644 --- a/frontend/src/Calendar/Events/CalendarEvent.js +++ b/frontend/src/Calendar/Events/CalendarEvent.js @@ -2,10 +2,10 @@ import classNames from 'classnames'; import moment from 'moment'; import PropTypes from 'prop-types'; import React, { Component } from 'react'; -import getStatusStyle from 'Calendar/getStatusStyle'; import Icon from 'Components/Icon'; import Link from 'Components/Link/Link'; import { icons, kinds } from 'Helpers/Props'; +import getStatusStyle from 'Utilities/Movie/getStatusStyle'; import translate from 'Utilities/String/translate'; import CalendarEventQueueDetails from './CalendarEventQueueDetails'; import styles from './CalendarEvent.css'; @@ -38,7 +38,7 @@ class CalendarEvent extends Component { const isDownloading = !!(queueItem || grabbed); const isMonitored = monitored; - const statusStyle = getStatusStyle(hasFile, isDownloading, isAvailable, isMonitored); + const statusStyle = getStatusStyle(null, isMonitored, hasFile, isAvailable, 'style', isDownloading); const joinedGenres = genres.slice(0, 2).join(', '); const link = `/movie/${titleSlug}`; const eventType = []; diff --git a/frontend/src/Calendar/getStatusStyle.js b/frontend/src/Calendar/getStatusStyle.js deleted file mode 100644 index 043fba2731..0000000000 --- a/frontend/src/Calendar/getStatusStyle.js +++ /dev/null @@ -1,23 +0,0 @@ - -function getStatusStyle(hasFile, downloading, isAvailable, isMonitored) { - - if (hasFile) { - return 'downloaded'; - } - - if (downloading) { - return 'downloading'; - } - - if (!isMonitored) { - return 'unmonitored'; - } - - if (isAvailable && !hasFile) { - return 'missing'; - } - - return 'unreleased'; -} - -export default getStatusStyle; diff --git a/frontend/src/Components/ProgressBar.css b/frontend/src/Components/ProgressBar.css index f95514478e..a7ad6aaafa 100644 --- a/frontend/src/Components/ProgressBar.css +++ b/frontend/src/Components/ProgressBar.css @@ -49,7 +49,7 @@ 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); + background: repeating-linear-gradient(90deg, $dangerColor, $dangerColor 5px, $dangerColor 5px, $dimColor 10px); } } @@ -65,7 +65,7 @@ background-color: $warningColor; &:global(.colorImpaired) { - background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, color($warningColor tint(15%)) 5px, color($warningColor tint(15%)) 10px); + background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, $warningColor 5px, $dimColor 10px); } } diff --git a/frontend/src/Movie/Index/MovieIndexFooter.css b/frontend/src/Movie/Index/MovieIndexFooter.css index 3120139726..cae01367f7 100644 --- a/frontend/src/Movie/Index/MovieIndexFooter.css +++ b/frontend/src/Movie/Index/MovieIndexFooter.css @@ -48,7 +48,7 @@ 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); + background: repeating-linear-gradient(90deg, $dangerColor, $dangerColor 5px, $dangerColor 5px, $dimColor 10px); } } @@ -58,7 +58,7 @@ background-color: $warningColor; &:global(.colorImpaired) { - background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, color($warningColor tint(15%)) 5px, color($warningColor tint(15%)) 10px); + background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, $warningColor 5px, $dimColor 10px); } } diff --git a/frontend/src/Movie/Index/ProgressBar/MovieIndexProgressBar.js b/frontend/src/Movie/Index/ProgressBar/MovieIndexProgressBar.js index 3d7aad8ec4..314fb618b2 100644 --- a/frontend/src/Movie/Index/ProgressBar/MovieIndexProgressBar.js +++ b/frontend/src/Movie/Index/ProgressBar/MovieIndexProgressBar.js @@ -2,8 +2,8 @@ import PropTypes from 'prop-types'; import React from 'react'; import ProgressBar from 'Components/ProgressBar'; import { sizes } from 'Helpers/Props'; -import getProgressBarKind from 'Utilities/Movie/getProgressBarKind'; import getQueueStatusText from 'Utilities/Movie/getQueueStatusText'; +import getStatusStyle from 'Utilities/Movie/getStatusStyle'; import translate from 'Utilities/String/translate'; import styles from './MovieIndexProgressBar.css'; @@ -42,7 +42,7 @@ function MovieIndexProgressBar(props) { className={styles.progressBar} containerClassName={styles.progress} progress={progress} - kind={getProgressBarKind(status, monitored, hasFile, isAvailable, queueStatusText)} + kind={getStatusStyle(status, monitored, hasFile, isAvailable, 'kinds', queueStatusText)} size={detailedProgressBar ? sizes.MEDIUM : sizes.SMALL} showText={detailedProgressBar} width={posterWidth} diff --git a/frontend/src/Movie/Index/Table/MovieIndexHeader.css b/frontend/src/Movie/Index/Table/MovieIndexHeader.css index 5ed460254f..54265a51b1 100644 --- a/frontend/src/Movie/Index/Table/MovieIndexHeader.css +++ b/frontend/src/Movie/Index/Table/MovieIndexHeader.css @@ -45,11 +45,16 @@ flex: 0 0 100px; } -.movieStatus, +.movieStatus { + composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css'; + + flex: 0 0 110px; +} + .certification { composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css'; - flex: 0 0 100px; + flex: 0 0 90px; } .year { diff --git a/frontend/src/Movie/Index/Table/MovieIndexRow.css b/frontend/src/Movie/Index/Table/MovieIndexRow.css index 9309845439..b1bcc46a83 100644 --- a/frontend/src/Movie/Index/Table/MovieIndexRow.css +++ b/frontend/src/Movie/Index/Table/MovieIndexRow.css @@ -52,11 +52,16 @@ flex: 0 0 100px; } -.movieStatus, +.movieStatus { + composes: cell; + + flex: 0 0 110px; +} + .certification { composes: cell; - flex: 0 0 100px; + flex: 0 0 90px; } .year { diff --git a/frontend/src/Movie/MovieFileStatus.css b/frontend/src/Movie/MovieFileStatus.css index 3833887df1..817ee06d58 100644 --- a/frontend/src/Movie/MovieFileStatus.css +++ b/frontend/src/Movie/MovieFileStatus.css @@ -2,3 +2,45 @@ display: flex; justify-content: center; } + +.missingUnmonitoredBackground { + &:global(.colorImpaired) { + background: repeating-linear-gradient(45deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px); + } +} + +.missingMonitoredBackground { + &:global(.colorImpaired) { + background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px); + } +} + +.queue { + padding-right: 2px; + border-left: 5px solid $queueColor; +} + +.continuing { + padding-right: 2px; + border-left: 5px solid $primaryColor; +} + +.availNotMonitored { + padding-right: 2px; + border-left: 5px solid $darkGray; +} + +.ended { + padding-right: 2px; + border-left: 5px solid $successColor; +} + +.missingMonitored { + padding-right: 2px; + border-left: 5px solid $dangerColor; +} + +.missingUnmonitored { + padding-right: 2px; + border-left: 5px solid $warningColor; +} diff --git a/frontend/src/Movie/MovieFileStatus.js b/frontend/src/Movie/MovieFileStatus.js index 7c6be48255..9467449528 100644 --- a/frontend/src/Movie/MovieFileStatus.js +++ b/frontend/src/Movie/MovieFileStatus.js @@ -1,8 +1,6 @@ +import classNames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; -import Label from 'Components/Label'; -import { kinds } from 'Helpers/Props'; -import MovieQuality from 'Movie/MovieQuality'; import getQueueStatusText from 'Utilities/Movie/getQueueStatusText'; import translate from 'Utilities/String/translate'; import styles from './MovieFileStatus.css'; @@ -13,7 +11,8 @@ function MovieFileStatus(props) { monitored, movieFile, queueStatus, - queueState + queueState, + colorImpairedMode } = props; const hasMovieFile = !!movieFile; @@ -24,12 +23,8 @@ function MovieFileStatus(props) { return (
- + + {queueStatusText}
); } @@ -39,51 +34,44 @@ function MovieFileStatus(props) { return (
- + + {quality.quality.name}
); } if (!monitored) { return ( -
- +
+ + {translate('NotMonitored')}
); } if (hasReleased) { return ( -
- +
+ + {translate('Missing')}
); } return (
- + + {translate('NotAvailable')}
); } @@ -93,7 +81,8 @@ MovieFileStatus.propTypes = { monitored: PropTypes.bool.isRequired, movieFile: PropTypes.object, queueStatus: PropTypes.string, - queueState: PropTypes.string + queueState: PropTypes.string, + colorImpairedMode: PropTypes.bool.isRequired }; export default MovieFileStatus; diff --git a/frontend/src/Movie/MovieFileStatusConnector.js b/frontend/src/Movie/MovieFileStatusConnector.js index f015f59ec5..215227e5ed 100644 --- a/frontend/src/Movie/MovieFileStatusConnector.js +++ b/frontend/src/Movie/MovieFileStatusConnector.js @@ -3,18 +3,21 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; import { createSelector } from 'reselect'; import createMovieSelector from 'Store/Selectors/createMovieSelector'; +import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector'; import MovieFileStatus from './MovieFileStatus'; function createMapStateToProps() { return createSelector( createMovieSelector(), - (movie) => { + createUISettingsSelector(), + (movie, uiSettings) => { return { inCinemas: movie.inCinemas, isAvailable: movie.isAvailable, monitored: movie.monitored, grabbed: movie.grabbed, - movieFile: movie.movieFile + movieFile: movie.movieFile, + colorImpairedMode: uiSettings.enableColorImpairedMode }; } ); diff --git a/frontend/src/Utilities/Movie/getProgressBarKind.js b/frontend/src/Utilities/Movie/getProgressBarKind.js deleted file mode 100644 index 7be7afd9dc..0000000000 --- a/frontend/src/Utilities/Movie/getProgressBarKind.js +++ /dev/null @@ -1,27 +0,0 @@ -import { kinds } from 'Helpers/Props'; - -function getProgressBarKind(status, monitored, hasFile, isAvailable, queue = false) { - if (queue) { - return kinds.QUEUE; - } - - if (hasFile && monitored) { - return kinds.SUCCESS; - } - - if (hasFile && !monitored) { - return kinds.DEFAULT; - } - - if (isAvailable && monitored) { - return kinds.DANGER; - } - - if (!monitored) { - return kinds.WARNING; - } - - return kinds.PRIMARY; -} - -export default getProgressBarKind; diff --git a/frontend/src/Utilities/Movie/getStatusStyle.js b/frontend/src/Utilities/Movie/getStatusStyle.js new file mode 100644 index 0000000000..af00bf79ac --- /dev/null +++ b/frontend/src/Utilities/Movie/getStatusStyle.js @@ -0,0 +1,27 @@ +import { kinds } from 'Helpers/Props'; + +function getStatusStyle(status, monitored, hasFile, isAvailable, returnType, queue = false) { + if (queue) { + return returnType === 'kinds' ? kinds.SUCCESS : 'queue'; + } + + if (hasFile && monitored) { + return returnType === 'kinds' ? kinds.SUCCESS : 'downloaded'; + } + + if (hasFile && !monitored) { + return returnType === 'kinds' ? kinds.DEFAULT : 'unreleased'; + } + + if (isAvailable && monitored) { + return returnType === 'kinds' ? kinds.DANGER : 'missingMonitored'; + } + + if (!monitored) { + return returnType === 'kinds' ? kinds.WARNING : 'missingUnmonitored'; + } + + return returnType === 'kinds' ? kinds.PRIMARY : 'continuing'; +} + +export default getStatusStyle;