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;