mirror of
https://github.com/Sonarr/Sonarr.git
synced 2024-10-30 07:22:35 +01:00
New: Calendar option for full color events
This commit is contained in:
parent
66c805feaf
commit
0210b5c5c1
@ -1,3 +1,5 @@
|
|||||||
|
$fullColorGradient: rgba(244, 245, 246, 0.2);
|
||||||
|
|
||||||
.event {
|
.event {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
margin: 4px 2px;
|
margin: 4px 2px;
|
||||||
@ -36,6 +38,11 @@
|
|||||||
margin-left: 3px;
|
margin-left: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.statusContainer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
.statusIcon {
|
.statusIcon {
|
||||||
margin-left: 3px;
|
margin-left: 3px;
|
||||||
}
|
}
|
||||||
@ -51,6 +58,10 @@
|
|||||||
.downloaded {
|
.downloaded {
|
||||||
border-left-color: $successColor !important;
|
border-left-color: $successColor !important;
|
||||||
|
|
||||||
|
&:global(.fullColor) {
|
||||||
|
background-color: rgba(39, 194, 76, 0.4) !important;
|
||||||
|
}
|
||||||
|
|
||||||
&:global(.colorImpaired) {
|
&:global(.colorImpaired) {
|
||||||
border-left-color: color($successColor, saturation(+15%)) !important;
|
border-left-color: color($successColor, saturation(+15%)) !important;
|
||||||
}
|
}
|
||||||
@ -58,37 +69,73 @@
|
|||||||
|
|
||||||
.downloading {
|
.downloading {
|
||||||
border-left-color: $purple !important;
|
border-left-color: $purple !important;
|
||||||
|
|
||||||
|
&:global(.fullColor) {
|
||||||
|
background-color: rgba(122, 67, 182, 0.4) !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.unmonitored {
|
.unmonitored {
|
||||||
border-left-color: $gray !important;
|
border-left-color: $gray !important;
|
||||||
|
|
||||||
|
&:global(.fullColor) {
|
||||||
|
background-color: rgba(173, 173, 173, 0.5) !important;
|
||||||
|
}
|
||||||
|
|
||||||
&:global(.colorImpaired) {
|
&:global(.colorImpaired) {
|
||||||
background: repeating-linear-gradient(45deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
|
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 {
|
.onAir {
|
||||||
border-left-color: $warningColor !important;
|
border-left-color: $warningColor !important;
|
||||||
|
|
||||||
|
&:global(.fullColor) {
|
||||||
|
background-color: rgba(255, 165, 0, 0.6) !important;
|
||||||
|
}
|
||||||
|
|
||||||
&:global(.colorImpaired) {
|
&:global(.colorImpaired) {
|
||||||
background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
|
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 {
|
.missing {
|
||||||
border-left-color: $dangerColor !important;
|
border-left-color: $dangerColor !important;
|
||||||
|
|
||||||
|
&:global(.fullColor) {
|
||||||
|
background-color: rgba(240, 80, 80, 0.6) !important;
|
||||||
|
}
|
||||||
|
|
||||||
&:global(.colorImpaired) {
|
&:global(.colorImpaired) {
|
||||||
border-left-color: color($dangerColor saturation(+15%)) !important;
|
border-left-color: color($dangerColor saturation(+15%)) !important;
|
||||||
background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
|
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 {
|
.unaired {
|
||||||
border-left-color: $primaryColor !important;
|
border-left-color: $primaryColor !important;
|
||||||
|
|
||||||
|
&:global(.fullColor) {
|
||||||
|
background-color: rgba(93, 156, 236, 0.4) !important;
|
||||||
|
}
|
||||||
|
|
||||||
&:global(.colorImpaired) {
|
&:global(.colorImpaired) {
|
||||||
background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
|
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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import React, { Component } from 'react';
|
import React, { Component, Fragment } from 'react';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { icons, kinds } from 'Helpers/Props';
|
import { icons, kinds } from 'Helpers/Props';
|
||||||
import formatTime from 'Utilities/Date/formatTime';
|
import formatTime from 'Utilities/Date/formatTime';
|
||||||
@ -62,6 +62,7 @@ class CalendarEvent extends Component {
|
|||||||
showFinaleIcon,
|
showFinaleIcon,
|
||||||
showSpecialIcon,
|
showSpecialIcon,
|
||||||
showCutoffUnmetIcon,
|
showCutoffUnmetIcon,
|
||||||
|
fullColorEvents,
|
||||||
timeFormat,
|
timeFormat,
|
||||||
colorImpairedMode
|
colorImpairedMode
|
||||||
} = this.props;
|
} = this.props;
|
||||||
@ -80,12 +81,13 @@ class CalendarEvent extends Component {
|
|||||||
const seasonStatistics = season.statistics || {};
|
const seasonStatistics = season.statistics || {};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<Fragment>
|
||||||
<Link
|
<Link
|
||||||
className={classNames(
|
className={classNames(
|
||||||
styles.event,
|
styles.event,
|
||||||
styles[statusStyle],
|
styles[statusStyle],
|
||||||
colorImpairedMode && 'colorImpaired'
|
colorImpairedMode && 'colorImpaired',
|
||||||
|
fullColorEvents && 'fullColor'
|
||||||
)}
|
)}
|
||||||
component="div"
|
component="div"
|
||||||
onPress={this.onPress}
|
onPress={this.onPress}
|
||||||
@ -95,95 +97,107 @@ class CalendarEvent extends Component {
|
|||||||
{series.title}
|
{series.title}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{
|
<div className={styles.statusContainer}>
|
||||||
missingAbsoluteNumber &&
|
{
|
||||||
<Icon
|
missingAbsoluteNumber ?
|
||||||
className={styles.statusIcon}
|
<Icon
|
||||||
name={icons.WARNING}
|
className={styles.statusIcon}
|
||||||
title="Episode does not have an absolute episode number"
|
name={icons.WARNING}
|
||||||
/>
|
title="Episode does not have an absolute episode number"
|
||||||
}
|
/> :
|
||||||
|
null
|
||||||
|
}
|
||||||
|
|
||||||
{
|
{
|
||||||
!!queueItem &&
|
queueItem ?
|
||||||
<span className={styles.statusIcon}>
|
<span className={styles.statusIcon}>
|
||||||
<CalendarEventQueueDetails
|
<CalendarEventQueueDetails
|
||||||
{...queueItem}
|
{...queueItem}
|
||||||
/>
|
/>
|
||||||
</span>
|
</span> :
|
||||||
}
|
null
|
||||||
|
}
|
||||||
|
|
||||||
{
|
{
|
||||||
!queueItem && grabbed &&
|
!queueItem && grabbed ?
|
||||||
<Icon
|
<Icon
|
||||||
className={styles.statusIcon}
|
className={styles.statusIcon}
|
||||||
name={icons.DOWNLOADING}
|
name={icons.DOWNLOADING}
|
||||||
title="Episode is downloading"
|
title="Episode is downloading"
|
||||||
/>
|
/> :
|
||||||
}
|
null
|
||||||
|
}
|
||||||
|
|
||||||
{
|
{
|
||||||
showCutoffUnmetIcon &&
|
showCutoffUnmetIcon &&
|
||||||
!!episodeFile &&
|
!!episodeFile &&
|
||||||
episodeFile.qualityCutoffNotMet &&
|
episodeFile.qualityCutoffNotMet ?
|
||||||
<Icon
|
<Icon
|
||||||
className={styles.statusIcon}
|
className={styles.statusIcon}
|
||||||
name={icons.EPISODE_FILE}
|
name={icons.EPISODE_FILE}
|
||||||
kind={kinds.WARNING}
|
kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
|
||||||
title="Quality cutoff has not been met"
|
title="Quality cutoff has not been met"
|
||||||
/>
|
/> :
|
||||||
}
|
null
|
||||||
|
}
|
||||||
|
|
||||||
{
|
{
|
||||||
showCutoffUnmetIcon &&
|
showCutoffUnmetIcon &&
|
||||||
!!episodeFile &&
|
!!episodeFile &&
|
||||||
episodeFile.languageCutoffNotMet &&
|
episodeFile.languageCutoffNotMet &&
|
||||||
!episodeFile.qualityCutoffNotMet &&
|
!episodeFile.qualityCutoffNotMet ?
|
||||||
<Icon
|
<Icon
|
||||||
className={styles.statusIcon}
|
className={styles.statusIcon}
|
||||||
name={icons.EPISODE_FILE}
|
name={icons.EPISODE_FILE}
|
||||||
kind={kinds.WARNING}
|
kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
|
||||||
title="Language cutoff has not been met"
|
title="Language cutoff has not been met"
|
||||||
/>
|
/> :
|
||||||
}
|
null
|
||||||
|
}
|
||||||
|
|
||||||
{
|
{
|
||||||
episodeNumber === 1 && seasonNumber > 0 &&
|
episodeNumber === 1 && seasonNumber > 0 ?
|
||||||
<Icon
|
<Icon
|
||||||
className={styles.statusIcon}
|
className={styles.statusIcon}
|
||||||
name={icons.INFO}
|
name={icons.INFO}
|
||||||
kind={kinds.INFO}
|
kind={kinds.INFO}
|
||||||
title={seasonNumber === 1 ? 'Series premiere' : 'Season premiere'}
|
darken={fullColorEvents}
|
||||||
/>
|
title={seasonNumber === 1 ? 'Series premiere' : 'Season premiere'}
|
||||||
}
|
/> :
|
||||||
|
null
|
||||||
|
}
|
||||||
|
|
||||||
{
|
{
|
||||||
showFinaleIcon &&
|
showFinaleIcon &&
|
||||||
episodeNumber !== 1 &&
|
episodeNumber !== 1 &&
|
||||||
seasonNumber > 0 &&
|
seasonNumber > 0 &&
|
||||||
episodeNumber === seasonStatistics.totalEpisodeCount &&
|
episodeNumber === seasonStatistics.totalEpisodeCount ?
|
||||||
<Icon
|
<Icon
|
||||||
className={styles.statusIcon}
|
className={styles.statusIcon}
|
||||||
name={icons.INFO}
|
name={icons.INFO}
|
||||||
kind={kinds.WARNING}
|
kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
|
||||||
title={series.status === 'ended' ? 'Series finale' : 'Season finale'}
|
title={series.status === 'ended' ? 'Series finale' : 'Season finale'}
|
||||||
/>
|
/> :
|
||||||
}
|
null
|
||||||
|
}
|
||||||
|
|
||||||
{
|
{
|
||||||
showSpecialIcon &&
|
showSpecialIcon &&
|
||||||
(episodeNumber === 0 || seasonNumber === 0) &&
|
(episodeNumber === 0 || seasonNumber === 0) ?
|
||||||
<Icon
|
<Icon
|
||||||
className={styles.statusIcon}
|
className={styles.statusIcon}
|
||||||
name={icons.INFO}
|
name={icons.INFO}
|
||||||
kind={kinds.PINK}
|
kind={kinds.PINK}
|
||||||
title="Special"
|
darken={fullColorEvents}
|
||||||
/>
|
title="Special"
|
||||||
}
|
/> :
|
||||||
|
null
|
||||||
|
}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{
|
{
|
||||||
showEpisodeInformation &&
|
showEpisodeInformation ?
|
||||||
<div className={styles.episodeInfo}>
|
<div className={styles.episodeInfo}>
|
||||||
<div className={styles.episodeTitle}>
|
<div className={styles.episodeTitle}>
|
||||||
{title}
|
{title}
|
||||||
@ -193,11 +207,12 @@ class CalendarEvent extends Component {
|
|||||||
{seasonNumber}x{padNumber(episodeNumber, 2)}
|
{seasonNumber}x{padNumber(episodeNumber, 2)}
|
||||||
|
|
||||||
{
|
{
|
||||||
series.seriesType === 'anime' && absoluteEpisodeNumber &&
|
series.seriesType === 'anime' && absoluteEpisodeNumber ?
|
||||||
<span className={styles.absoluteEpisodeNumber}>({absoluteEpisodeNumber})</span>
|
<span className={styles.absoluteEpisodeNumber}>({absoluteEpisodeNumber})</span> : null
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> :
|
||||||
|
null
|
||||||
}
|
}
|
||||||
|
|
||||||
<div className={styles.airTime}>
|
<div className={styles.airTime}>
|
||||||
@ -214,7 +229,7 @@ class CalendarEvent extends Component {
|
|||||||
showOpenSeriesButton={true}
|
showOpenSeriesButton={true}
|
||||||
onModalClose={this.onDetailsModalClose}
|
onModalClose={this.onDetailsModalClose}
|
||||||
/>
|
/>
|
||||||
</div>
|
</Fragment>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -236,6 +251,7 @@ CalendarEvent.propTypes = {
|
|||||||
showFinaleIcon: PropTypes.bool.isRequired,
|
showFinaleIcon: PropTypes.bool.isRequired,
|
||||||
showSpecialIcon: PropTypes.bool.isRequired,
|
showSpecialIcon: PropTypes.bool.isRequired,
|
||||||
showCutoffUnmetIcon: PropTypes.bool.isRequired,
|
showCutoffUnmetIcon: PropTypes.bool.isRequired,
|
||||||
|
fullColorEvents: PropTypes.bool.isRequired,
|
||||||
timeFormat: PropTypes.string.isRequired,
|
timeFormat: PropTypes.string.isRequired,
|
||||||
colorImpairedMode: PropTypes.bool.isRequired,
|
colorImpairedMode: PropTypes.bool.isRequired,
|
||||||
onEventModalOpenToggle: PropTypes.func.isRequired
|
onEventModalOpenToggle: PropTypes.func.isRequired
|
||||||
|
@ -74,6 +74,7 @@ class CalendarEventGroup extends Component {
|
|||||||
showEpisodeInformation,
|
showEpisodeInformation,
|
||||||
showFinaleIcon,
|
showFinaleIcon,
|
||||||
timeFormat,
|
timeFormat,
|
||||||
|
fullColorEvents,
|
||||||
colorImpairedMode,
|
colorImpairedMode,
|
||||||
onEventModalOpenToggle
|
onEventModalOpenToggle
|
||||||
} = this.props;
|
} = this.props;
|
||||||
@ -133,7 +134,8 @@ class CalendarEventGroup extends Component {
|
|||||||
className={classNames(
|
className={classNames(
|
||||||
styles.eventGroup,
|
styles.eventGroup,
|
||||||
styles[statusStyle],
|
styles[statusStyle],
|
||||||
colorImpairedMode && 'colorImpaired'
|
colorImpairedMode && 'colorImpaired',
|
||||||
|
fullColorEvents && 'fullColor'
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div className={styles.info}>
|
<div className={styles.info}>
|
||||||
@ -144,7 +146,7 @@ class CalendarEventGroup extends Component {
|
|||||||
{
|
{
|
||||||
isMissingAbsoluteNumber &&
|
isMissingAbsoluteNumber &&
|
||||||
<Icon
|
<Icon
|
||||||
className={styles.statusIcon}
|
containerClassName={styles.statusIcon}
|
||||||
name={icons.WARNING}
|
name={icons.WARNING}
|
||||||
title="Episode does not have an absolute episode number"
|
title="Episode does not have an absolute episode number"
|
||||||
/>
|
/>
|
||||||
@ -153,7 +155,7 @@ class CalendarEventGroup extends Component {
|
|||||||
{
|
{
|
||||||
anyDownloading &&
|
anyDownloading &&
|
||||||
<Icon
|
<Icon
|
||||||
className={styles.statusIcon}
|
containerClassName={styles.statusIcon}
|
||||||
name={icons.DOWNLOADING}
|
name={icons.DOWNLOADING}
|
||||||
title="An episode is downloading"
|
title="An episode is downloading"
|
||||||
/>
|
/>
|
||||||
@ -162,9 +164,10 @@ class CalendarEventGroup extends Component {
|
|||||||
{
|
{
|
||||||
firstEpisode.episodeNumber === 1 && seasonNumber > 0 &&
|
firstEpisode.episodeNumber === 1 && seasonNumber > 0 &&
|
||||||
<Icon
|
<Icon
|
||||||
className={styles.statusIcon}
|
containerClassName={styles.statusIcon}
|
||||||
name={icons.INFO}
|
name={icons.INFO}
|
||||||
kind={kinds.INFO}
|
kind={kinds.INFO}
|
||||||
|
darken={fullColorEvents}
|
||||||
title={seasonNumber === 1 ? 'Series Premiere' : 'Season Premiere'}
|
title={seasonNumber === 1 ? 'Series Premiere' : 'Season Premiere'}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
@ -175,9 +178,9 @@ class CalendarEventGroup extends Component {
|
|||||||
seasonNumber > 0 &&
|
seasonNumber > 0 &&
|
||||||
lastEpisode.episodeNumber === series.seasons.find((season) => season.seasonNumber === seasonNumber).statistics.totalEpisodeCount &&
|
lastEpisode.episodeNumber === series.seasons.find((season) => season.seasonNumber === seasonNumber).statistics.totalEpisodeCount &&
|
||||||
<Icon
|
<Icon
|
||||||
className={styles.statusIcon}
|
containerClassName={styles.statusIcon}
|
||||||
name={icons.INFO}
|
name={icons.INFO}
|
||||||
kind={kinds.WARNING}
|
kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
|
||||||
title={series.status === 'ended' ? 'Series finale' : 'Season finale'}
|
title={series.status === 'ended' ? 'Series finale' : 'Season finale'}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
@ -237,6 +240,7 @@ CalendarEventGroup.propTypes = {
|
|||||||
isDownloading: PropTypes.bool.isRequired,
|
isDownloading: PropTypes.bool.isRequired,
|
||||||
showEpisodeInformation: PropTypes.bool.isRequired,
|
showEpisodeInformation: PropTypes.bool.isRequired,
|
||||||
showFinaleIcon: PropTypes.bool.isRequired,
|
showFinaleIcon: PropTypes.bool.isRequired,
|
||||||
|
fullColorEvents: PropTypes.bool.isRequired,
|
||||||
timeFormat: PropTypes.string.isRequired,
|
timeFormat: PropTypes.string.isRequired,
|
||||||
colorImpairedMode: PropTypes.bool.isRequired,
|
colorImpairedMode: PropTypes.bool.isRequired,
|
||||||
onEventModalOpenToggle: PropTypes.func.isRequired
|
onEventModalOpenToggle: PropTypes.func.isRequired
|
||||||
|
@ -7,19 +7,23 @@ import styles from './Legend.css';
|
|||||||
|
|
||||||
function Legend(props) {
|
function Legend(props) {
|
||||||
const {
|
const {
|
||||||
|
view,
|
||||||
showFinaleIcon,
|
showFinaleIcon,
|
||||||
showSpecialIcon,
|
showSpecialIcon,
|
||||||
showCutoffUnmetIcon,
|
showCutoffUnmetIcon,
|
||||||
|
fullColorEvents,
|
||||||
colorImpairedMode
|
colorImpairedMode
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
const iconsToShow = [];
|
const iconsToShow = [];
|
||||||
|
const isAgendaView = view === 'agenda';
|
||||||
|
|
||||||
if (showFinaleIcon) {
|
if (showFinaleIcon) {
|
||||||
iconsToShow.push(
|
iconsToShow.push(
|
||||||
<LegendIconItem
|
<LegendIconItem
|
||||||
name="Finale"
|
name="Finale"
|
||||||
icon={icons.INFO}
|
icon={icons.INFO}
|
||||||
kind={kinds.WARNING}
|
kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
|
||||||
tooltip="Series or season finale"
|
tooltip="Series or season finale"
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
@ -31,6 +35,7 @@ function Legend(props) {
|
|||||||
name="Special"
|
name="Special"
|
||||||
icon={icons.INFO}
|
icon={icons.INFO}
|
||||||
kind={kinds.PINK}
|
kind={kinds.PINK}
|
||||||
|
darken={fullColorEvents}
|
||||||
tooltip="Special episode"
|
tooltip="Special episode"
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
@ -41,7 +46,7 @@ function Legend(props) {
|
|||||||
<LegendIconItem
|
<LegendIconItem
|
||||||
name="Cutoff Not Met"
|
name="Cutoff Not Met"
|
||||||
icon={icons.EPISODE_FILE}
|
icon={icons.EPISODE_FILE}
|
||||||
kind={kinds.WARNING}
|
kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
|
||||||
tooltip="Quality or language cutoff has not been met"
|
tooltip="Quality or language cutoff has not been met"
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
@ -53,12 +58,16 @@ function Legend(props) {
|
|||||||
<LegendItem
|
<LegendItem
|
||||||
status="unaired"
|
status="unaired"
|
||||||
tooltip="Episode hasn't aired yet"
|
tooltip="Episode hasn't aired yet"
|
||||||
|
isAgendaView={isAgendaView}
|
||||||
|
fullColorEvents={fullColorEvents}
|
||||||
colorImpairedMode={colorImpairedMode}
|
colorImpairedMode={colorImpairedMode}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<LegendItem
|
<LegendItem
|
||||||
status="unmonitored"
|
status="unmonitored"
|
||||||
tooltip="Episode is unmonitored"
|
tooltip="Episode is unmonitored"
|
||||||
|
isAgendaView={isAgendaView}
|
||||||
|
fullColorEvents={fullColorEvents}
|
||||||
colorImpairedMode={colorImpairedMode}
|
colorImpairedMode={colorImpairedMode}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@ -68,12 +77,16 @@ function Legend(props) {
|
|||||||
status="onAir"
|
status="onAir"
|
||||||
name="On Air"
|
name="On Air"
|
||||||
tooltip="Episode is currently airing"
|
tooltip="Episode is currently airing"
|
||||||
|
isAgendaView={isAgendaView}
|
||||||
|
fullColorEvents={fullColorEvents}
|
||||||
colorImpairedMode={colorImpairedMode}
|
colorImpairedMode={colorImpairedMode}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<LegendItem
|
<LegendItem
|
||||||
status="missing"
|
status="missing"
|
||||||
tooltip="Episode has aired and is missing from disk"
|
tooltip="Episode has aired and is missing from disk"
|
||||||
|
isAgendaView={isAgendaView}
|
||||||
|
fullColorEvents={fullColorEvents}
|
||||||
colorImpairedMode={colorImpairedMode}
|
colorImpairedMode={colorImpairedMode}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@ -82,12 +95,16 @@ function Legend(props) {
|
|||||||
<LegendItem
|
<LegendItem
|
||||||
status="downloading"
|
status="downloading"
|
||||||
tooltip="Episode is currently downloading"
|
tooltip="Episode is currently downloading"
|
||||||
|
isAgendaView={isAgendaView}
|
||||||
|
fullColorEvents={fullColorEvents}
|
||||||
colorImpairedMode={colorImpairedMode}
|
colorImpairedMode={colorImpairedMode}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<LegendItem
|
<LegendItem
|
||||||
status="downloaded"
|
status="downloaded"
|
||||||
tooltip="Episode was downloaded and sorted"
|
tooltip="Episode was downloaded and sorted"
|
||||||
|
isAgendaView={isAgendaView}
|
||||||
|
fullColorEvents={fullColorEvents}
|
||||||
colorImpairedMode={colorImpairedMode}
|
colorImpairedMode={colorImpairedMode}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@ -97,6 +114,7 @@ function Legend(props) {
|
|||||||
name="Premiere"
|
name="Premiere"
|
||||||
icon={icons.INFO}
|
icon={icons.INFO}
|
||||||
kind={kinds.INFO}
|
kind={kinds.INFO}
|
||||||
|
darken={true}
|
||||||
tooltip="Series or season premiere"
|
tooltip="Series or season premiere"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@ -115,9 +133,11 @@ function Legend(props) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
Legend.propTypes = {
|
Legend.propTypes = {
|
||||||
|
view: PropTypes.string.isRequired,
|
||||||
showFinaleIcon: PropTypes.bool.isRequired,
|
showFinaleIcon: PropTypes.bool.isRequired,
|
||||||
showSpecialIcon: PropTypes.bool.isRequired,
|
showSpecialIcon: PropTypes.bool.isRequired,
|
||||||
showCutoffUnmetIcon: PropTypes.bool.isRequired,
|
showCutoffUnmetIcon: PropTypes.bool.isRequired,
|
||||||
|
fullColorEvents: PropTypes.bool.isRequired,
|
||||||
colorImpairedMode: PropTypes.bool.isRequired
|
colorImpairedMode: PropTypes.bool.isRequired
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -6,10 +6,12 @@ import Legend from './Legend';
|
|||||||
function createMapStateToProps() {
|
function createMapStateToProps() {
|
||||||
return createSelector(
|
return createSelector(
|
||||||
(state) => state.calendar.options,
|
(state) => state.calendar.options,
|
||||||
|
(state) => state.calendar.view,
|
||||||
createUISettingsSelector(),
|
createUISettingsSelector(),
|
||||||
(calendarOptions, uiSettings) => {
|
(calendarOptions, view, uiSettings) => {
|
||||||
return {
|
return {
|
||||||
...calendarOptions,
|
...calendarOptions,
|
||||||
|
view,
|
||||||
colorImpairedMode: uiSettings.enableColorImpairedMode
|
colorImpairedMode: uiSettings.enableColorImpairedMode
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -8,6 +8,7 @@ function LegendIconItem(props) {
|
|||||||
name,
|
name,
|
||||||
icon,
|
icon,
|
||||||
kind,
|
kind,
|
||||||
|
darken,
|
||||||
tooltip
|
tooltip
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
@ -19,6 +20,7 @@ function LegendIconItem(props) {
|
|||||||
<Icon
|
<Icon
|
||||||
className={styles.icon}
|
className={styles.icon}
|
||||||
name={icon}
|
name={icon}
|
||||||
|
darken={darken}
|
||||||
kind={kind}
|
kind={kind}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@ -31,7 +33,12 @@ LegendIconItem.propTypes = {
|
|||||||
name: PropTypes.string.isRequired,
|
name: PropTypes.string.isRequired,
|
||||||
icon: PropTypes.object.isRequired,
|
icon: PropTypes.object.isRequired,
|
||||||
kind: PropTypes.string.isRequired,
|
kind: PropTypes.string.isRequired,
|
||||||
|
darken: PropTypes.bool.isRequired,
|
||||||
tooltip: PropTypes.string.isRequired
|
tooltip: PropTypes.string.isRequired
|
||||||
};
|
};
|
||||||
|
|
||||||
|
LegendIconItem.defaultProps = {
|
||||||
|
darken: false
|
||||||
|
};
|
||||||
|
|
||||||
export default LegendIconItem;
|
export default LegendIconItem;
|
||||||
|
@ -9,6 +9,8 @@ function LegendItem(props) {
|
|||||||
name,
|
name,
|
||||||
status,
|
status,
|
||||||
tooltip,
|
tooltip,
|
||||||
|
isAgendaView,
|
||||||
|
fullColorEvents,
|
||||||
colorImpairedMode
|
colorImpairedMode
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
@ -17,7 +19,8 @@ function LegendItem(props) {
|
|||||||
className={classNames(
|
className={classNames(
|
||||||
styles.legendItem,
|
styles.legendItem,
|
||||||
styles[status],
|
styles[status],
|
||||||
colorImpairedMode && 'colorImpaired'
|
colorImpairedMode && 'colorImpaired',
|
||||||
|
fullColorEvents && !isAgendaView && 'fullColor'
|
||||||
)}
|
)}
|
||||||
title={tooltip}
|
title={tooltip}
|
||||||
>
|
>
|
||||||
@ -30,6 +33,8 @@ LegendItem.propTypes = {
|
|||||||
name: PropTypes.string,
|
name: PropTypes.string,
|
||||||
status: PropTypes.string.isRequired,
|
status: PropTypes.string.isRequired,
|
||||||
tooltip: PropTypes.string.isRequired,
|
tooltip: PropTypes.string.isRequired,
|
||||||
|
isAgendaView: PropTypes.bool.isRequired,
|
||||||
|
fullColorEvents: PropTypes.bool.isRequired,
|
||||||
colorImpairedMode: PropTypes.bool.isRequired
|
colorImpairedMode: PropTypes.bool.isRequired
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -25,14 +25,16 @@ class CalendarOptionsModalContent extends Component {
|
|||||||
firstDayOfWeek,
|
firstDayOfWeek,
|
||||||
calendarWeekColumnHeader,
|
calendarWeekColumnHeader,
|
||||||
timeFormat,
|
timeFormat,
|
||||||
enableColorImpairedMode
|
enableColorImpairedMode,
|
||||||
|
fullColorEvents
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
firstDayOfWeek,
|
firstDayOfWeek,
|
||||||
calendarWeekColumnHeader,
|
calendarWeekColumnHeader,
|
||||||
timeFormat,
|
timeFormat,
|
||||||
enableColorImpairedMode
|
enableColorImpairedMode,
|
||||||
|
fullColorEvents
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -96,6 +98,7 @@ class CalendarOptionsModalContent extends Component {
|
|||||||
showFinaleIcon,
|
showFinaleIcon,
|
||||||
showSpecialIcon,
|
showSpecialIcon,
|
||||||
showCutoffUnmetIcon,
|
showCutoffUnmetIcon,
|
||||||
|
fullColorEvents,
|
||||||
onModalClose
|
onModalClose
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
@ -174,6 +177,18 @@ class CalendarOptionsModalContent extends Component {
|
|||||||
onChange={this.onOptionInputChange}
|
onChange={this.onOptionInputChange}
|
||||||
/>
|
/>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
|
|
||||||
|
<FormGroup>
|
||||||
|
<FormLabel>Full Color Events</FormLabel>
|
||||||
|
|
||||||
|
<FormInputGroup
|
||||||
|
type={inputTypes.CHECK}
|
||||||
|
name="fullColorEvents"
|
||||||
|
value={fullColorEvents}
|
||||||
|
helpText="Altered style to color the entire event with the status color, instead of just the left edge. Does not apply to Agenda"
|
||||||
|
onChange={this.onOptionInputChange}
|
||||||
|
/>
|
||||||
|
</FormGroup>
|
||||||
</Form>
|
</Form>
|
||||||
</FieldSet>
|
</FieldSet>
|
||||||
|
|
||||||
@ -214,7 +229,9 @@ class CalendarOptionsModalContent extends Component {
|
|||||||
value={timeFormat}
|
value={timeFormat}
|
||||||
onChange={this.onGlobalInputChange}
|
onChange={this.onGlobalInputChange}
|
||||||
/>
|
/>
|
||||||
</FormGroup><FormGroup>
|
</FormGroup>
|
||||||
|
|
||||||
|
<FormGroup>
|
||||||
<FormLabel>Enable Color-Impaired Mode</FormLabel>
|
<FormLabel>Enable Color-Impaired Mode</FormLabel>
|
||||||
|
|
||||||
<FormInputGroup
|
<FormInputGroup
|
||||||
@ -225,7 +242,6 @@ class CalendarOptionsModalContent extends Component {
|
|||||||
onChange={this.onGlobalInputChange}
|
onChange={this.onGlobalInputChange}
|
||||||
/>
|
/>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
|
|
||||||
</Form>
|
</Form>
|
||||||
</FieldSet>
|
</FieldSet>
|
||||||
</ModalBody>
|
</ModalBody>
|
||||||
@ -250,6 +266,7 @@ CalendarOptionsModalContent.propTypes = {
|
|||||||
calendarWeekColumnHeader: PropTypes.string.isRequired,
|
calendarWeekColumnHeader: PropTypes.string.isRequired,
|
||||||
timeFormat: PropTypes.string.isRequired,
|
timeFormat: PropTypes.string.isRequired,
|
||||||
enableColorImpairedMode: PropTypes.bool.isRequired,
|
enableColorImpairedMode: PropTypes.bool.isRequired,
|
||||||
|
fullColorEvents: PropTypes.bool.isRequired,
|
||||||
dispatchSetCalendarOption: PropTypes.func.isRequired,
|
dispatchSetCalendarOption: PropTypes.func.isRequired,
|
||||||
dispatchSaveUISettings: PropTypes.func.isRequired,
|
dispatchSaveUISettings: PropTypes.func.isRequired,
|
||||||
onModalClose: PropTypes.func.isRequired
|
onModalClose: PropTypes.func.isRequired
|
||||||
|
@ -12,10 +12,18 @@
|
|||||||
|
|
||||||
.info {
|
.info {
|
||||||
color: $infoColor;
|
color: $infoColor;
|
||||||
|
|
||||||
|
&:global(.darken) {
|
||||||
|
color: color($infoColor shade(30%));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pink {
|
.pink {
|
||||||
color: $pink;
|
color: $pink;
|
||||||
|
|
||||||
|
&:global(.darken) {
|
||||||
|
color: color($pink shade(30%));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.success {
|
.success {
|
||||||
|
@ -18,6 +18,7 @@ class Icon extends PureComponent {
|
|||||||
kind,
|
kind,
|
||||||
size,
|
size,
|
||||||
title,
|
title,
|
||||||
|
darken,
|
||||||
isSpinning,
|
isSpinning,
|
||||||
...otherProps
|
...otherProps
|
||||||
} = this.props;
|
} = this.props;
|
||||||
@ -26,7 +27,8 @@ class Icon extends PureComponent {
|
|||||||
<FontAwesomeIcon
|
<FontAwesomeIcon
|
||||||
className={classNames(
|
className={classNames(
|
||||||
className,
|
className,
|
||||||
styles[kind]
|
styles[kind],
|
||||||
|
darken && 'darken'
|
||||||
)}
|
)}
|
||||||
icon={name}
|
icon={name}
|
||||||
spin={isSpinning}
|
spin={isSpinning}
|
||||||
@ -59,6 +61,7 @@ Icon.propTypes = {
|
|||||||
kind: PropTypes.string.isRequired,
|
kind: PropTypes.string.isRequired,
|
||||||
size: PropTypes.number.isRequired,
|
size: PropTypes.number.isRequired,
|
||||||
title: PropTypes.string,
|
title: PropTypes.string,
|
||||||
|
darken: PropTypes.bool.isRequired,
|
||||||
isSpinning: PropTypes.bool.isRequired,
|
isSpinning: PropTypes.bool.isRequired,
|
||||||
fixedWidth: PropTypes.bool.isRequired
|
fixedWidth: PropTypes.bool.isRequired
|
||||||
};
|
};
|
||||||
@ -66,6 +69,7 @@ Icon.propTypes = {
|
|||||||
Icon.defaultProps = {
|
Icon.defaultProps = {
|
||||||
kind: kinds.DEFAULT,
|
kind: kinds.DEFAULT,
|
||||||
size: 14,
|
size: 14,
|
||||||
|
darken: false,
|
||||||
isSpinning: false,
|
isSpinning: false,
|
||||||
fixedWidth: false
|
fixedWidth: false
|
||||||
};
|
};
|
||||||
|
@ -44,7 +44,8 @@ export const defaultState = {
|
|||||||
showEpisodeInformation: true,
|
showEpisodeInformation: true,
|
||||||
showFinaleIcon: false,
|
showFinaleIcon: false,
|
||||||
showSpecialIcon: false,
|
showSpecialIcon: false,
|
||||||
showCutoffUnmetIcon: false
|
showCutoffUnmetIcon: false,
|
||||||
|
fullColorEvents: false
|
||||||
},
|
},
|
||||||
|
|
||||||
selectedFilterKey: 'monitored',
|
selectedFilterKey: 'monitored',
|
||||||
|
@ -64,6 +64,10 @@ module.exports = {
|
|||||||
inputWarningBoxShadowColor: 'rgba(255, 165, 0, 0.6)',
|
inputWarningBoxShadowColor: 'rgba(255, 165, 0, 0.6)',
|
||||||
colorImpairedGradient: '#ffffff',
|
colorImpairedGradient: '#ffffff',
|
||||||
colorImpairedGradientDark: '#f4f5f6',
|
colorImpairedGradientDark: '#f4f5f6',
|
||||||
|
colorImpairedDangerGradient: '#d84848',
|
||||||
|
colorImpairedWarningGradient: '#e59400',
|
||||||
|
colorImpairedPrimaryGradient: '#538cd4',
|
||||||
|
colorImpairedGrayGradient: '#9b9b9b ',
|
||||||
|
|
||||||
//
|
//
|
||||||
// Buttons
|
// Buttons
|
||||||
@ -177,6 +181,7 @@ module.exports = {
|
|||||||
calendarTodayBackgroundColor: '#ddd',
|
calendarTodayBackgroundColor: '#ddd',
|
||||||
calendarBorderColor: '#cecece',
|
calendarBorderColor: '#cecece',
|
||||||
calendarTextDim: '#666',
|
calendarTextDim: '#666',
|
||||||
|
calendarTextDimAlternate: '#eee',
|
||||||
|
|
||||||
//
|
//
|
||||||
// Table
|
// Table
|
||||||
|
Loading…
Reference in New Issue
Block a user