Archive-Team
/
sonarr-repo-only
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed: Icons on full color calendar events 

Closes #6331
This commit is contained in:
Mark McDowall 2024-01-18 21:43:51 -08:00 committed by GitHub
parent e792db4d33
commit 9884f6f282
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 118 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -52,6 +52,10 @@ $fullColorGradient: rgba(244, 245, 246, 0.2);
.statusContainer {
display: flex;
align-items: center;
&:global(.fullColor) {
filter: var(--calendarFullColorFilter)
}
}
.statusIcon {

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

@ -102,7 +102,12 @@ class CalendarEvent extends Component {
{series.title}
</div>
<div className={styles.statusContainer}>
<div
className={classNames(
styles.statusContainer,
fullColorEvents && 'fullColor'
)}
>
{
missingAbsoluteNumber ?
<Icon
@ -128,6 +133,7 @@ class CalendarEvent extends Component {
<span className={styles.statusIcon}>
<CalendarEventQueueDetails
{...queueItem}
fullColorEvents={fullColorEvents}
/>
</span> :
null
@ -150,7 +156,7 @@ class CalendarEvent extends Component {
<Icon
className={styles.statusIcon}
name={icons.EPISODE_FILE}
kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
kind={kinds.WARNING}
title={translate('QualityCutoffNotMet')}
/> :
null
@ -160,9 +166,8 @@ class CalendarEvent extends Component {
episodeNumber === 1 && seasonNumber > 0 ?
<Icon
className={styles.statusIcon}
name={icons.INFO}
name={icons.PREMIERE}
kind={kinds.INFO}
darken={fullColorEvents}
title={seasonNumber === 1 ? translate('SeriesPremiere') : translate('SeasonPremiere')}
/> :
null
@ -173,8 +178,8 @@ class CalendarEvent extends Component {
finaleType ?
<Icon
className={styles.statusIcon}
name={icons.INFO}
kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
name={finaleType === 'series' ? icons.FINALE_SERIES : icons.FINALE_SEASON}
kind={finaleType === 'series' ? kinds.DANGER : kinds.WARNING}
title={getFinaleTypeName(finaleType)}
/> :
null
@ -187,7 +192,6 @@ class CalendarEvent extends Component {
className={styles.statusIcon}
name={icons.INFO}
kind={kinds.PINK}
darken={fullColorEvents}
title={translate('Special')}
/> :
null

9
frontend/src/Calendar/Events/CalendarEventGroup.css
View File

@ -50,6 +50,15 @@
margin-bottom: 5px;
}
.statusContainer {
display: flex;
align-items: center;
&:global(.fullColor) {
filter: var(--calendarFullColorFilter)
}
}
.statusIcon {
margin-left: 3px;
}

1
frontend/src/Calendar/Events/CalendarEventGroup.css.d.ts vendored
View File

@ -16,6 +16,7 @@ interface CssExports {
'onAir': string;
'premiere': string;
'seriesTitle': string;
'statusContainer': string;
'statusIcon': string;
'unaired': string;
'unmonitored': string;

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

@ -145,6 +145,12 @@ class CalendarEventGroup extends Component {
{series.title}
</div>
<div
className={classNames(
styles.statusContainer,
fullColorEvents && 'fullColor'
)}
>
{
isMissingAbsoluteNumber &&
<Icon
@ -167,9 +173,8 @@ class CalendarEventGroup extends Component {
firstEpisode.episodeNumber === 1 && seasonNumber > 0 &&
<Icon
containerClassName={styles.statusIcon}
name={icons.INFO}
name={icons.PREMIERE}
kind={kinds.INFO}
darken={fullColorEvents}
title={seasonNumber === 1 ? translate('SeriesPremiere') : translate('SeasonPremiere')}
/>
}
@ -179,12 +184,13 @@ class CalendarEventGroup extends Component {
lastEpisode.finaleType ?
<Icon
containerClassName={styles.statusIcon}
name={icons.INFO}
kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
name={lastEpisode.finaleType === 'series' ? icons.FINALE_SERIES : icons.FINALE_SEASON}
kind={lastEpisode.finaleType === 'series' ? kinds.DANGER : kinds.WARNING}
title={getFinaleTypeName(lastEpisode.finaleType)}
/> : null
}
</div>
</div>
<div className={styles.airingInfo}>
<div className={styles.airTime}>

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

@ -22,9 +22,20 @@ function Legend(props) {
if (showFinaleIcon) {
iconsToShow.push(
<LegendIconItem
name="Finale"
icon={icons.INFO}
kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
name={translate('SeasonFinale')}
icon={icons.FINALE_SEASON}
kind={kinds.WARNING}
fullColorEvents={fullColorEvents}
tooltip={translate('CalendarLegendSeriesFinaleTooltip')}
/>
);
iconsToShow.push(
<LegendIconItem
name={translate('SeriesFinale')}
icon={icons.FINALE_SERIES}
kind={kinds.DANGER}
fullColorEvents={fullColorEvents}
tooltip={translate('CalendarLegendSeriesFinaleTooltip')}
/>
);
@ -33,10 +44,10 @@ function Legend(props) {
if (showSpecialIcon) {
iconsToShow.push(
<LegendIconItem
name="Special"
name={translate('Special')}
icon={icons.INFO}
kind={kinds.PINK}
darken={fullColorEvents}
fullColorEvents={fullColorEvents}
tooltip={translate('SpecialEpisode')}
/>
);
@ -45,9 +56,10 @@ function Legend(props) {
if (showCutoffUnmetIcon) {
iconsToShow.push(
<LegendIconItem
name="Cutoff Not Met"
name={translate('Cutoff Not Met')}
icon={icons.EPISODE_FILE}
kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
kind={kinds.WARNING}
fullColorEvents={fullColorEvents}
tooltip={translate('QualityCutoffNotMet')}
/>
);
@ -112,10 +124,10 @@ function Legend(props) {
<div>
<LegendIconItem
name="Premiere"
icon={icons.INFO}
name={translate('Premiere')}
icon={icons.PREMIERE}
kind={kinds.INFO}
darken={true}
fullColorEvents={fullColorEvents}
tooltip={translate('CalendarLegendSeriesPremiereTooltip')}
/>
@ -129,6 +141,12 @@ function Legend(props) {
{iconsToShow[2]}
</div>
}
{
iconsToShow.length > 3 &&
<div>
{iconsToShow[3]}
</div>
}
</div>
);
}

4
frontend/src/Calendar/Legend/LegendIconItem.css
View File

@ -7,4 +7,8 @@
.icon {
margin-right: 5px;
&:global(.fullColorEvents) {
filter: var(--calendarFullColorFilter)
}
}

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

@ -1,3 +1,4 @@
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import Icon from 'Components/Icon';
@ -6,9 +7,9 @@ import styles from './LegendIconItem.css';
function LegendIconItem(props) {
const {
name,
fullColorEvents,
icon,
kind,
darken,
tooltip
} = props;
@ -18,9 +19,11 @@ function LegendIconItem(props) {
title={tooltip}
>
<Icon
className={styles.icon}
className={classNames(
styles.icon,
fullColorEvents && 'fullColorEvents'
)}
name={icon}
darken={darken}
kind={kind}
/>
@ -31,14 +34,10 @@ function LegendIconItem(props) {
LegendIconItem.propTypes = {
name: PropTypes.string.isRequired,
fullColorEvents: PropTypes.bool.isRequired,
icon: PropTypes.object.isRequired,
kind: PropTypes.string.isRequired,
darken: PropTypes.bool.isRequired,
tooltip: PropTypes.string.isRequired
};
LegendIconItem.defaultProps = {
darken: false
};
export default LegendIconItem;

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

@ -12,18 +12,10 @@
.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 {

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

@ -18,7 +18,6 @@ class Icon extends PureComponent {
kind,
size,
title,
darken,
isSpinning,
...otherProps
} = this.props;
@ -27,8 +26,7 @@ class Icon extends PureComponent {
<FontAwesomeIcon
className={classNames(
className,
styles[kind],
darken && 'darken'
styles[kind]
)}
icon={name}
spin={isSpinning}
@ -61,7 +59,6 @@ Icon.propTypes = {
kind: PropTypes.string.isRequired,
size: PropTypes.number.isRequired,
title: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
darken: PropTypes.bool.isRequired,
isSpinning: PropTypes.bool.isRequired,
fixedWidth: PropTypes.bool.isRequired
};
@ -69,7 +66,6 @@ Icon.propTypes = {
Icon.defaultProps = {
kind: kinds.DEFAULT,
size: 14,
darken: false,
isSpinning: false,
fixedWidth: false
};

6
frontend/src/Helpers/Props/icons.js
View File

@ -41,6 +41,9 @@ import {
faChevronCircleUp as fasChevronCircleUp,
faCircle as fasCircle,
faCircleDown as fasCircleDown,
faCirclePause as fasCirclePause,
faCirclePlay as fasCirclePlay,
faCircleStop as fasCircleStop,
faCloud as fasCloud,
faCloudDownloadAlt as fasCloudDownloadAlt,
faCog as fasCog,
@ -149,6 +152,8 @@ export const FATAL = fasTimesCircle;
export const FILE = farFile;
export const FILE_MISSING = fasFileCircleQuestion;
export const FILTER = fasFilter;
export const FINALE_SEASON = fasCirclePause;
export const FINALE_SERIES = fasCircleStop;
export const FOOTNOTE = fasAsterisk;
export const FOLDER = farFolder;
export const FOLDER_OPEN = fasFolderOpen;
@ -180,6 +185,7 @@ export const PARENT = fasLevelUpAlt;
export const PARSE = fasCalculator;
export const PAUSED = fasPause;
export const PENDING = farClock;
export const PREMIERE = fasCirclePlay;
export const PROFILE = fasUser;
export const POSTER = fasTh;
export const QUEUED = fasCloud;

2
frontend/src/Styles/Themes/dark.js
View File

@ -213,6 +213,8 @@ module.exports = {
calendarTextDim: '#eee',
calendarTextDimAlternate: '#fff',
calendarFullColorFilter: 'grayscale(90%) contrast(200%) saturate(50%)',
//
// Table

2
frontend/src/Styles/Themes/light.js
View File

@ -215,6 +215,8 @@ module.exports = {
calendarTextDim: '#666',
calendarTextDimAlternate: '#242424',
calendarFullColorFilter: 'brightness(30%)',
//
// Table

1
frontend/src/typings/UiSettings.ts
View File

@ -1,4 +1,5 @@
export interface UiSettings {
theme: string;
showRelativeDates: boolean;
shortDateFormat: string;
longDateFormat: string;