Mirrors/Sonarr
1
0
Fork 0
mirror of https://github.com/Sonarr/Sonarr.git synced 2024-10-30 07:22:35 +01:00
Code Issues Releases Wiki Activity

New: Calendar option for full color events

Browse Source
This commit is contained in:
Mark McDowall 2021-03-27 18:05:17 -07:00
parent 66c805feaf
commit 0210b5c5c1
12 changed files with 238 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/src/Calendar/Events/CalendarEvent.css
View File

@ -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);
}
} }

188
frontend/src/Calendar/Events/CalendarEvent.js
View File

@ -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

16
frontend/src/Calendar/Events/CalendarEventGroup.js
View File

@ -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

24
frontend/src/Calendar/Legend/Legend.js
View File

@ -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
}; };

4
frontend/src/Calendar/Legend/LegendConnector.js
View File

@ -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
}; };
} }

7
frontend/src/Calendar/Legend/LegendIconItem.js
View File

@ -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;

7
frontend/src/Calendar/Legend/LegendItem.js
View File

@ -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
frontend/src/Calendar/Options/CalendarOptionsModalContent.js
View File

@ -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

8
frontend/src/Components/Icon.css
View File

@ -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 {

6
frontend/src/Components/Icon.js
View File

@ -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
}; };

3
frontend/src/Store/Actions/calendarActions.js
View File

@ -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',

5
frontend/src/Styles/Variables/colors.js
View File

@ -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