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 74788d38a..d7881cb93 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 e6cc532bf..d85fc839c 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 1e962f17c..0ce400bed 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 1c8a20ea1..254566041 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 043fba273..000000000 --- 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 f95514478..a7ad6aaaf 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 312013972..cae01367f 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 3d7aad8ec..314fb618b 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 5ed460254..54265a51b 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 930984543..b1bcc46a8 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 3833887df..817ee06d5 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 7c6be4825..946744952 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 f015f59ec..215227e5e 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 7be7afd9d..000000000 --- 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 000000000..af00bf79a --- /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;