diff --git a/frontend/src/Calendar/Events/CalendarEvent.css b/frontend/src/Calendar/Events/CalendarEvent.css index 80903d404..71f834605 100644 --- a/frontend/src/Calendar/Events/CalendarEvent.css +++ b/frontend/src/Calendar/Events/CalendarEvent.css @@ -1,3 +1,5 @@ +$fullColorGradient: rgba(244, 245, 246, 0.2); + .event { overflow-x: hidden; margin: 4px 2px; @@ -44,6 +46,11 @@ font-size: $defaultFontSize; } +.statusContainer { + display: flex; + align-items: center; +} + .statusIcon { margin-left: 3px; } @@ -55,35 +62,84 @@ .downloaded { border-left-color: var(--successColor) !important; + &:global(.fullColor) { + background-color: rgba(39, 194, 76, 0.4) !important; + } + &:global(.colorImpaired) { - border-left-color: color(var(--successColor), saturation(+15%)) !important; + border-left-color: color(#27c24c saturation(+15%)) !important; } } .queue { border-left-color: var(--purple) !important; + + &:global(.fullColor) { + background-color: rgba(122, 67, 182, 0.4) !important; + } } .unmonitored { border-left-color: var(--gray) !important; + + &:global(.fullColor) { + background-color: rgba(173, 173, 173, 0.5) !important; + } + + &:global(.colorImpaired) { + background: repeating-linear-gradient(45deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px); + } + + &:global(.fullColor.colorImpaired) { + background: repeating-linear-gradient(45deg, $fullColorGradient, $fullColorGradient 5px, transparent 5px, transparent 10px); + } } .missingUnmonitored { border-left-color: var(--warningColor) !important; + &:global(.fullColor) { + background-color: rgba(255, 165, 0, 0.6) !important; + } + &:global(.colorImpaired) { - background: repeating-linear-gradient(45deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px); + background: repeating-linear-gradient(90deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px); + } + + &:global(.fullColor.colorImpaired) { + background: repeating-linear-gradient(90deg, $fullColorGradient, $fullColorGradient 5px, transparent 5px, transparent 10px); } } .missingMonitored { border-left-color: var(--dangerColor) !important; + &:global(.fullColor) { + background-color: rgba(240, 80, 80, 0.6) !important; + } + &:global(.colorImpaired) { + border-left-color: color(#f05050 saturation(+15%)) !important; background: repeating-linear-gradient(90deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px); } + + &:global(.fullColor.colorImpaired) { + background: repeating-linear-gradient(90deg, $fullColorGradient, $fullColorGradient 5px, transparent 5px, transparent 10px); + } } .continuing { border-left-color: var(--primaryColor) !important; + + &:global(.fullColor) { + background-color: rgba(93, 156, 236, 0.4) !important; + } + + &:global(.colorImpaired) { + background: repeating-linear-gradient(90deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px); + } + + &:global(.fullColor.colorImpaired) { + background: repeating-linear-gradient(90deg, $fullColorGradient, $fullColorGradient 5px, transparent 5px, transparent 10px); + } } diff --git a/frontend/src/Calendar/Events/CalendarEvent.css.d.ts b/frontend/src/Calendar/Events/CalendarEvent.css.d.ts index 595199ef9..73a345f30 100644 --- a/frontend/src/Calendar/Events/CalendarEvent.css.d.ts +++ b/frontend/src/Calendar/Events/CalendarEvent.css.d.ts @@ -12,6 +12,7 @@ interface CssExports { 'movieInfo': string; 'movieTitle': string; 'queue': string; + 'statusContainer': string; 'statusIcon': string; 'unmonitored': string; } diff --git a/frontend/src/Calendar/Events/CalendarEvent.js b/frontend/src/Calendar/Events/CalendarEvent.js index 9e6d60ab0..f8be8ccae 100644 --- a/frontend/src/Calendar/Events/CalendarEvent.js +++ b/frontend/src/Calendar/Events/CalendarEvent.js @@ -1,7 +1,7 @@ import classNames from 'classnames'; import moment from 'moment'; import PropTypes from 'prop-types'; -import React, { Component } from 'react'; +import React, { Component, Fragment } from 'react'; import Icon from 'Components/Icon'; import Link from 'Components/Link/Link'; import { icons, kinds } from 'Helpers/Props'; @@ -32,6 +32,7 @@ class CalendarEvent extends Component { queueItem, showMovieInformation, showCutoffUnmetIcon, + fullColorEvents, colorImpairedMode, date } = this.props; @@ -56,13 +57,14 @@ class CalendarEvent extends Component { } return ( -
+ - { - !!queueItem && - - - - } - - { - !queueItem && grabbed && - - } - - { - showCutoffUnmetIcon && - !!movieFile && - movieFile.qualityCutoffNotMet && - - } +
+ { + queueItem ? + + + : + null + } + + { + !queueItem && grabbed ? + : + null + } + + { + showCutoffUnmetIcon && !!movieFile && movieFile.qualityCutoffNotMet ? + : + null + } +
{ - showMovieInformation && + showMovieInformation ?
{joinedGenres}
-
+ : + null } { - showMovieInformation && + showMovieInformation ?
{eventType.join(', ')} @@ -121,11 +127,11 @@ class CalendarEvent extends Component {
{certification}
-
+
: + null } - - + ); } } @@ -147,6 +153,7 @@ CalendarEvent.propTypes = { queueItem: PropTypes.object, showMovieInformation: PropTypes.bool.isRequired, showCutoffUnmetIcon: PropTypes.bool.isRequired, + fullColorEvents: PropTypes.bool.isRequired, timeFormat: PropTypes.string.isRequired, colorImpairedMode: PropTypes.bool.isRequired, date: PropTypes.string.isRequired diff --git a/frontend/src/Calendar/Legend/Legend.js b/frontend/src/Calendar/Legend/Legend.js index 143363dc5..f9759b7aa 100644 --- a/frontend/src/Calendar/Legend/Legend.js +++ b/frontend/src/Calendar/Legend/Legend.js @@ -8,18 +8,21 @@ import styles from './Legend.css'; function Legend(props) { const { + view, showCutoffUnmetIcon, + fullColorEvents, colorImpairedMode } = props; const iconsToShow = []; + const isAgendaView = view === 'agenda'; if (showCutoffUnmetIcon) { iconsToShow.push( ); @@ -29,45 +32,58 @@ function Legend(props) {
+ { iconsToShow.length > 0 &&
@@ -79,7 +95,9 @@ function Legend(props) { } Legend.propTypes = { + view: PropTypes.string.isRequired, showCutoffUnmetIcon: PropTypes.bool.isRequired, + fullColorEvents: PropTypes.bool.isRequired, colorImpairedMode: PropTypes.bool.isRequired }; diff --git a/frontend/src/Calendar/Legend/LegendConnector.js b/frontend/src/Calendar/Legend/LegendConnector.js index 30bbc4adb..889b7a002 100644 --- a/frontend/src/Calendar/Legend/LegendConnector.js +++ b/frontend/src/Calendar/Legend/LegendConnector.js @@ -6,10 +6,12 @@ import Legend from './Legend'; function createMapStateToProps() { return createSelector( (state) => state.calendar.options, + (state) => state.calendar.view, createUISettingsSelector(), - (calendarOptions, uiSettings) => { + (calendarOptions, view, uiSettings) => { return { ...calendarOptions, + view, colorImpairedMode: uiSettings.enableColorImpairedMode }; } diff --git a/frontend/src/Calendar/Legend/LegendIconItem.js b/frontend/src/Calendar/Legend/LegendIconItem.js index 13e106784..5ce5f725b 100644 --- a/frontend/src/Calendar/Legend/LegendIconItem.js +++ b/frontend/src/Calendar/Legend/LegendIconItem.js @@ -8,6 +8,7 @@ function LegendIconItem(props) { name, icon, kind, + darken, tooltip } = props; @@ -19,6 +20,7 @@ function LegendIconItem(props) { @@ -31,7 +33,12 @@ LegendIconItem.propTypes = { name: PropTypes.string.isRequired, icon: PropTypes.object.isRequired, kind: PropTypes.string.isRequired, + darken: PropTypes.bool.isRequired, tooltip: PropTypes.string.isRequired }; +LegendIconItem.defaultProps = { + darken: false +}; + export default LegendIconItem; diff --git a/frontend/src/Calendar/Legend/LegendItem.css b/frontend/src/Calendar/Legend/LegendItem.css index 8112ad4ea..8b71b07b0 100644 --- a/frontend/src/Calendar/Legend/LegendItem.css +++ b/frontend/src/Calendar/Legend/LegendItem.css @@ -1,74 +1,37 @@ -.legendItemContainer { - margin-right: 5px; +.legendItem { + margin: 3px 0; + margin-right: 6px; + padding-left: 5px; width: 220px; + border-left-width: 4px; + border-left-style: solid; + cursor: default; } -.legendItem { - display: inline-flex; - margin-top: -1px; - vertical-align: middle; - line-height: 16px; -} +/* + * Status + */ -.legendItemColor { - margin-right: 8px; - width: 30px; - height: 16px; - border-radius: 4px; +.downloaded { + composes: downloaded from '~Calendar/Events/CalendarEvent.css'; } .queue { - composes: legendItemColor; - - background-color: var(--queueColor); -} - -.continuing { - composes: legendItemColor; - - background-color: var(--primaryColor); -} - -.availNotMonitored { - composes: legendItemColor; - - background-color: var(--darkGray); + composes: queue from '~Calendar/Events/CalendarEvent.css'; } -.ended { - composes: legendItemColor; - - background-color: var(--successColor); -} - -.missingMonitored { - composes: legendItemColor; - - background-color: var(--dangerColor); - - &:global(.colorImpaired) { - background: repeating-linear-gradient(90deg, color(var(--dangerColor) shade(5%)), color(var(--dangerColor) shade(5%)) 5px, color(var(--dangerColor) shade(15%)) 5px, color(var(--dangerColor) shade(15%)) 10px); - } +.unmonitored { + composes: unmonitored from '~Calendar/Events/CalendarEvent.css'; } .missingUnmonitored { - composes: legendItemColor; - - background-color: var(--warningColor); - - &:global(.colorImpaired) { - background: repeating-linear-gradient(45deg, var(--warningColor), var(--warningColor) 5px, color(var(--warningColor) tint(15%)) 5px, color(var(--warningColor) tint(15%)) 10px); - } -} - -.missingMonitoredColorImpaired { - background: repeating-linear-gradient(90deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px); + composes: missingUnmonitored from '~Calendar/Events/CalendarEvent.css'; } -.missingUnmonitoredColorImpaired { - background: repeating-linear-gradient(45deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px); +.missingMonitored { + composes: missingMonitored from '~Calendar/Events/CalendarEvent.css'; } -.legendItemText { - display: inline-block; +.continuing { + composes: continuing from '~Calendar/Events/CalendarEvent.css'; } diff --git a/frontend/src/Calendar/Legend/LegendItem.css.d.ts b/frontend/src/Calendar/Legend/LegendItem.css.d.ts index f41ac3c67..82c9a34a8 100644 --- a/frontend/src/Calendar/Legend/LegendItem.css.d.ts +++ b/frontend/src/Calendar/Legend/LegendItem.css.d.ts @@ -1,18 +1,13 @@ // This file is automatically generated. // Please do not change this file! interface CssExports { - 'availNotMonitored': string; 'continuing': string; - 'ended': string; + 'downloaded': string; 'legendItem': string; - 'legendItemColor': string; - 'legendItemContainer': string; - 'legendItemText': string; 'missingMonitored': string; - 'missingMonitoredColorImpaired': string; 'missingUnmonitored': string; - 'missingUnmonitoredColorImpaired': string; 'queue': string; + 'unmonitored': string; } export const cssExports: CssExports; export default cssExports; diff --git a/frontend/src/Calendar/Legend/LegendItem.js b/frontend/src/Calendar/Legend/LegendItem.js index 264704ace..840a3674c 100644 --- a/frontend/src/Calendar/Legend/LegendItem.js +++ b/frontend/src/Calendar/Legend/LegendItem.js @@ -6,29 +6,31 @@ import styles from './LegendItem.css'; function LegendItem(props) { const { name, - style, + status, + isAgendaView, + fullColorEvents, colorImpairedMode } = props; return ( -
-
-
- {name} -
+
+ {name}
); } LegendItem.propTypes = { name: PropTypes.string.isRequired, - style: PropTypes.string.isRequired, + status: PropTypes.string.isRequired, + isAgendaView: PropTypes.bool.isRequired, + fullColorEvents: PropTypes.bool.isRequired, colorImpairedMode: PropTypes.bool.isRequired }; diff --git a/frontend/src/Calendar/Options/CalendarOptionsModalContent.js b/frontend/src/Calendar/Options/CalendarOptionsModalContent.js index 5baaaac0c..e921af54f 100644 --- a/frontend/src/Calendar/Options/CalendarOptionsModalContent.js +++ b/frontend/src/Calendar/Options/CalendarOptionsModalContent.js @@ -26,14 +26,16 @@ class CalendarOptionsModalContent extends Component { firstDayOfWeek, calendarWeekColumnHeader, timeFormat, - enableColorImpairedMode + enableColorImpairedMode, + fullColorEvents } = props; this.state = { firstDayOfWeek, calendarWeekColumnHeader, timeFormat, - enableColorImpairedMode + enableColorImpairedMode, + fullColorEvents }; } @@ -94,6 +96,7 @@ class CalendarOptionsModalContent extends Component { const { showMovieInformation, showCutoffUnmetIcon, + fullColorEvents, onModalClose } = this.props; @@ -136,6 +139,18 @@ class CalendarOptionsModalContent extends Component { onChange={this.onOptionInputChange} /> + + + {translate('FullColorEvents')} + + + @@ -176,7 +191,9 @@ class CalendarOptionsModalContent extends Component { value={timeFormat} onChange={this.onGlobalInputChange} /> - + + + {translate('EnableColorImpairedMode')} - @@ -209,6 +225,7 @@ CalendarOptionsModalContent.propTypes = { calendarWeekColumnHeader: PropTypes.string.isRequired, timeFormat: PropTypes.string.isRequired, enableColorImpairedMode: PropTypes.bool.isRequired, + fullColorEvents: PropTypes.bool.isRequired, dispatchSetCalendarOption: PropTypes.func.isRequired, dispatchSaveUISettings: PropTypes.func.isRequired, onModalClose: PropTypes.func.isRequired diff --git a/frontend/src/Components/Icon.css b/frontend/src/Components/Icon.css index 51c09226b..69ffc40f5 100644 --- a/frontend/src/Components/Icon.css +++ b/frontend/src/Components/Icon.css @@ -12,10 +12,18 @@ .info { color: var(--infoColor); + + &:global(.darken) { + color: color(var(--infoColor) shade(30%)); + } } .pink { color: var(--pink); + + &:global(.darken) { + color: color(var(--pink) shade(30%)); + } } .success { diff --git a/frontend/src/Components/Icon.js b/frontend/src/Components/Icon.js index d200b8c08..90842b039 100644 --- a/frontend/src/Components/Icon.js +++ b/frontend/src/Components/Icon.js @@ -18,6 +18,7 @@ class Icon extends PureComponent { kind, size, title, + darken, isSpinning, ...otherProps } = this.props; @@ -26,7 +27,8 @@ class Icon extends PureComponent {