diff --git a/frontend/src/Calendar/Events/CalendarEvent.css b/frontend/src/Calendar/Events/CalendarEvent.css
index 9acf6dcf5..fb7a39855 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;
@@ -36,6 +38,11 @@
margin-left: 3px;
}
+.statusContainer {
+ display: flex;
+ align-items: center;
+}
+
.statusIcon {
margin-left: 3px;
}
@@ -51,6 +58,10 @@
.downloaded {
border-left-color: $successColor !important;
+ &:global(.fullColor) {
+ background-color: rgba(39, 194, 76, 0.4) !important;
+ }
+
&:global(.colorImpaired) {
border-left-color: color($successColor, saturation(+15%)) !important;
}
@@ -58,37 +69,73 @@
.downloading {
border-left-color: $purple !important;
+
+ &:global(.fullColor) {
+ background-color: rgba(122, 67, 182, 0.4) !important;
+ }
}
.unmonitored {
border-left-color: $gray !important;
+ &:global(.fullColor) {
+ background-color: rgba(173, 173, 173, 0.5) !important;
+ }
+
&:global(.colorImpaired) {
background: repeating-linear-gradient(45deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
}
+
+ &:global(.fullColor.colorImpaired) {
+ background: repeating-linear-gradient(45deg, $fullColorGradient, $fullColorGradient 5px, transparent 5px, transparent 10px);
+ }
}
.onAir {
border-left-color: $warningColor !important;
+ &:global(.fullColor) {
+ background-color: rgba(255, 165, 0, 0.6) !important;
+ }
+
&:global(.colorImpaired) {
background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
}
+
+ &:global(.fullColor.colorImpaired) {
+ background: repeating-linear-gradient(90deg, $fullColorGradient, $fullColorGradient 5px, transparent 5px, transparent 10px);
+ }
}
.missing {
border-left-color: $dangerColor !important;
+ &:global(.fullColor) {
+ background-color: rgba(240, 80, 80, 0.6) !important;
+ }
+
&:global(.colorImpaired) {
border-left-color: color($dangerColor saturation(+15%)) !important;
background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
}
+
+ &:global(.fullColor.colorImpaired) {
+ background: repeating-linear-gradient(90deg, $fullColorGradient, $fullColorGradient 5px, transparent 5px, transparent 10px);
+ }
}
.unaired {
border-left-color: $primaryColor !important;
+ &:global(.fullColor) {
+ background-color: rgba(93, 156, 236, 0.4) !important;
+ }
+
&:global(.colorImpaired) {
background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $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.js b/frontend/src/Calendar/Events/CalendarEvent.js
index 21cddeb5b..00e91aa8c 100644
--- a/frontend/src/Calendar/Events/CalendarEvent.js
+++ b/frontend/src/Calendar/Events/CalendarEvent.js
@@ -1,6 +1,6 @@
import moment from 'moment';
import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
import classNames from 'classnames';
import { icons, kinds } from 'Helpers/Props';
import formatTime from 'Utilities/Date/formatTime';
@@ -62,6 +62,7 @@ class CalendarEvent extends Component {
showFinaleIcon,
showSpecialIcon,
showCutoffUnmetIcon,
+ fullColorEvents,
timeFormat,
colorImpairedMode
} = this.props;
@@ -80,12 +81,13 @@ class CalendarEvent extends Component {
const seasonStatistics = season.statistics || {};
return (
-
+
- {
- missingAbsoluteNumber &&
-
- }
+
+ {
+ missingAbsoluteNumber ?
+ :
+ null
+ }
- {
- !!queueItem &&
-
-
-
- }
+ {
+ queueItem ?
+
+
+ :
+ null
+ }
- {
- !queueItem && grabbed &&
-
- }
+ {
+ !queueItem && grabbed ?
+ :
+ null
+ }
- {
- showCutoffUnmetIcon &&
- !!episodeFile &&
- episodeFile.qualityCutoffNotMet &&
-
- }
+ {
+ showCutoffUnmetIcon &&
+ !!episodeFile &&
+ episodeFile.qualityCutoffNotMet ?
+ :
+ null
+ }
- {
- showCutoffUnmetIcon &&
- !!episodeFile &&
- episodeFile.languageCutoffNotMet &&
- !episodeFile.qualityCutoffNotMet &&
-
- }
+ {
+ showCutoffUnmetIcon &&
+ !!episodeFile &&
+ episodeFile.languageCutoffNotMet &&
+ !episodeFile.qualityCutoffNotMet ?
+ :
+ null
+ }
- {
- episodeNumber === 1 && seasonNumber > 0 &&
-
- }
+ {
+ episodeNumber === 1 && seasonNumber > 0 ?
+ :
+ null
+ }
- {
- showFinaleIcon &&
- episodeNumber !== 1 &&
- seasonNumber > 0 &&
- episodeNumber === seasonStatistics.totalEpisodeCount &&
-
- }
+ {
+ showFinaleIcon &&
+ episodeNumber !== 1 &&
+ seasonNumber > 0 &&
+ episodeNumber === seasonStatistics.totalEpisodeCount ?
+ :
+ null
+ }
- {
- showSpecialIcon &&
- (episodeNumber === 0 || seasonNumber === 0) &&
-
- }
+ {
+ showSpecialIcon &&
+ (episodeNumber === 0 || seasonNumber === 0) ?
+ :
+ null
+ }
+
{
- showEpisodeInformation &&
+ showEpisodeInformation ?
{title}
@@ -193,11 +207,12 @@ class CalendarEvent extends Component {
{seasonNumber}x{padNumber(episodeNumber, 2)}
{
- series.seriesType === 'anime' && absoluteEpisodeNumber &&
- ({absoluteEpisodeNumber})
+ series.seriesType === 'anime' && absoluteEpisodeNumber ?
+ ({absoluteEpisodeNumber}) : null
}
-
+ :
+ null
}
@@ -214,7 +229,7 @@ class CalendarEvent extends Component {
showOpenSeriesButton={true}
onModalClose={this.onDetailsModalClose}
/>
-
+
);
}
}
@@ -236,6 +251,7 @@ CalendarEvent.propTypes = {
showFinaleIcon: PropTypes.bool.isRequired,
showSpecialIcon: PropTypes.bool.isRequired,
showCutoffUnmetIcon: PropTypes.bool.isRequired,
+ fullColorEvents: PropTypes.bool.isRequired,
timeFormat: PropTypes.string.isRequired,
colorImpairedMode: PropTypes.bool.isRequired,
onEventModalOpenToggle: PropTypes.func.isRequired
diff --git a/frontend/src/Calendar/Events/CalendarEventGroup.js b/frontend/src/Calendar/Events/CalendarEventGroup.js
index 147440e94..320ae8cc6 100644
--- a/frontend/src/Calendar/Events/CalendarEventGroup.js
+++ b/frontend/src/Calendar/Events/CalendarEventGroup.js
@@ -74,6 +74,7 @@ class CalendarEventGroup extends Component {
showEpisodeInformation,
showFinaleIcon,
timeFormat,
+ fullColorEvents,
colorImpairedMode,
onEventModalOpenToggle
} = this.props;
@@ -133,7 +134,8 @@ class CalendarEventGroup extends Component {
className={classNames(
styles.eventGroup,
styles[statusStyle],
- colorImpairedMode && 'colorImpaired'
+ colorImpairedMode && 'colorImpaired',
+ fullColorEvents && 'fullColor'
)}
>
@@ -144,7 +146,7 @@ class CalendarEventGroup extends Component {
{
isMissingAbsoluteNumber &&
@@ -153,7 +155,7 @@ class CalendarEventGroup extends Component {
{
anyDownloading &&
@@ -162,9 +164,10 @@ class CalendarEventGroup extends Component {
{
firstEpisode.episodeNumber === 1 && seasonNumber > 0 &&
}
@@ -175,9 +178,9 @@ class CalendarEventGroup extends Component {
seasonNumber > 0 &&
lastEpisode.episodeNumber === series.seasons.find((season) => season.seasonNumber === seasonNumber).statistics.totalEpisodeCount &&
}
@@ -237,6 +240,7 @@ CalendarEventGroup.propTypes = {
isDownloading: PropTypes.bool.isRequired,
showEpisodeInformation: PropTypes.bool.isRequired,
showFinaleIcon: PropTypes.bool.isRequired,
+ fullColorEvents: PropTypes.bool.isRequired,
timeFormat: PropTypes.string.isRequired,
colorImpairedMode: PropTypes.bool.isRequired,
onEventModalOpenToggle: PropTypes.func.isRequired
diff --git a/frontend/src/Calendar/Legend/Legend.js b/frontend/src/Calendar/Legend/Legend.js
index 0b7e8a325..0945f7b3e 100644
--- a/frontend/src/Calendar/Legend/Legend.js
+++ b/frontend/src/Calendar/Legend/Legend.js
@@ -7,19 +7,23 @@ import styles from './Legend.css';
function Legend(props) {
const {
+ view,
showFinaleIcon,
showSpecialIcon,
showCutoffUnmetIcon,
+ fullColorEvents,
colorImpairedMode
} = props;
const iconsToShow = [];
+ const isAgendaView = view === 'agenda';
+
if (showFinaleIcon) {
iconsToShow.push(
);
@@ -31,6 +35,7 @@ function Legend(props) {
name="Special"
icon={icons.INFO}
kind={kinds.PINK}
+ darken={fullColorEvents}
tooltip="Special episode"
/>
);
@@ -41,7 +46,7 @@ function Legend(props) {
);
@@ -53,12 +58,16 @@ function Legend(props) {
@@ -68,12 +77,16 @@ function Legend(props) {
status="onAir"
name="On Air"
tooltip="Episode is currently airing"
+ isAgendaView={isAgendaView}
+ fullColorEvents={fullColorEvents}
colorImpairedMode={colorImpairedMode}
/>
@@ -82,12 +95,16 @@ function Legend(props) {
@@ -97,6 +114,7 @@ function Legend(props) {
name="Premiere"
icon={icons.INFO}
kind={kinds.INFO}
+ darken={true}
tooltip="Series or season premiere"
/>
@@ -115,9 +133,11 @@ function Legend(props) {
}
Legend.propTypes = {
+ view: PropTypes.string.isRequired,
showFinaleIcon: PropTypes.bool.isRequired,
showSpecialIcon: PropTypes.bool.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.js b/frontend/src/Calendar/Legend/LegendItem.js
index 961f48b86..a63cbf527 100644
--- a/frontend/src/Calendar/Legend/LegendItem.js
+++ b/frontend/src/Calendar/Legend/LegendItem.js
@@ -9,6 +9,8 @@ function LegendItem(props) {
name,
status,
tooltip,
+ isAgendaView,
+ fullColorEvents,
colorImpairedMode
} = props;
@@ -17,7 +19,8 @@ function LegendItem(props) {
className={classNames(
styles.legendItem,
styles[status],
- colorImpairedMode && 'colorImpaired'
+ colorImpairedMode && 'colorImpaired',
+ fullColorEvents && !isAgendaView && 'fullColor'
)}
title={tooltip}
>
@@ -30,6 +33,8 @@ LegendItem.propTypes = {
name: PropTypes.string,
status: PropTypes.string.isRequired,
tooltip: 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 9ff7b3f82..0b34219a0 100644
--- a/frontend/src/Calendar/Options/CalendarOptionsModalContent.js
+++ b/frontend/src/Calendar/Options/CalendarOptionsModalContent.js
@@ -25,14 +25,16 @@ class CalendarOptionsModalContent extends Component {
firstDayOfWeek,
calendarWeekColumnHeader,
timeFormat,
- enableColorImpairedMode
+ enableColorImpairedMode,
+ fullColorEvents
} = props;
this.state = {
firstDayOfWeek,
calendarWeekColumnHeader,
timeFormat,
- enableColorImpairedMode
+ enableColorImpairedMode,
+ fullColorEvents
};
}
@@ -96,6 +98,7 @@ class CalendarOptionsModalContent extends Component {
showFinaleIcon,
showSpecialIcon,
showCutoffUnmetIcon,
+ fullColorEvents,
onModalClose
} = this.props;
@@ -174,6 +177,18 @@ class CalendarOptionsModalContent extends Component {
onChange={this.onOptionInputChange}
/>
+
+
+ Full Color Events
+
+
+
@@ -214,7 +229,9 @@ class CalendarOptionsModalContent extends Component {
value={timeFormat}
onChange={this.onGlobalInputChange}
/>
-
+
+
+
Enable Color-Impaired Mode
-
@@ -250,6 +266,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 db95e019b..3f0022c6c 100644
--- a/frontend/src/Components/Icon.css
+++ b/frontend/src/Components/Icon.css
@@ -12,10 +12,18 @@
.info {
color: $infoColor;
+
+ &:global(.darken) {
+ color: color($infoColor shade(30%));
+ }
}
.pink {
color: $pink;
+
+ &:global(.darken) {
+ color: color($pink shade(30%));
+ }
}
.success {
diff --git a/frontend/src/Components/Icon.js b/frontend/src/Components/Icon.js
index d7748d2e7..6a9b43c67 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 {