mirror of https://github.com/Radarr/Radarr
Refactor icons on full color calendar events
(cherry picked from commit 9884f6f282560ff2a0ea193e9306c6284cf8672c) Closes #9646
This commit is contained in:
parent
d0e400c55a
commit
bc9b2cd283
|
@ -147,7 +147,7 @@ class AgendaEvent extends Component {
|
||||||
className={styles.statusIcon}
|
className={styles.statusIcon}
|
||||||
name={icons.MOVIE_FILE}
|
name={icons.MOVIE_FILE}
|
||||||
kind={kinds.WARNING}
|
kind={kinds.WARNING}
|
||||||
title={translate('QualityCutoffHasNotBeenMet')}
|
title={translate('QualityCutoffNotMet')}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -48,6 +48,10 @@ $fullColorGradient: rgba(244, 245, 246, 0.2);
|
||||||
.statusContainer {
|
.statusContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
|
&:global(.fullColor) {
|
||||||
|
filter: var(--calendarFullColorFilter)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.statusIcon {
|
.statusIcon {
|
||||||
|
|
|
@ -76,12 +76,18 @@ class CalendarEvent extends Component {
|
||||||
{title}
|
{title}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={styles.statusContainer}>
|
<div
|
||||||
|
className={classNames(
|
||||||
|
styles.statusContainer,
|
||||||
|
fullColorEvents && 'fullColor'
|
||||||
|
)}
|
||||||
|
>
|
||||||
{
|
{
|
||||||
queueItem ?
|
queueItem ?
|
||||||
<span className={styles.statusIcon}>
|
<span className={styles.statusIcon}>
|
||||||
<CalendarEventQueueDetails
|
<CalendarEventQueueDetails
|
||||||
{...queueItem}
|
{...queueItem}
|
||||||
|
fullColorEvents={fullColorEvents}
|
||||||
/>
|
/>
|
||||||
</span> :
|
</span> :
|
||||||
null
|
null
|
||||||
|
@ -98,12 +104,14 @@ class CalendarEvent extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
{
|
{
|
||||||
showCutoffUnmetIcon && !!movieFile && movieFile.qualityCutoffNotMet ?
|
showCutoffUnmetIcon &&
|
||||||
|
!!movieFile &&
|
||||||
|
movieFile.qualityCutoffNotMet ?
|
||||||
<Icon
|
<Icon
|
||||||
className={styles.statusIcon}
|
className={styles.statusIcon}
|
||||||
name={icons.MOVIE_FILE}
|
name={icons.MOVIE_FILE}
|
||||||
kind={kinds.WARNING}
|
kind={kinds.WARNING}
|
||||||
title={translate('QualityCutoffHasNotBeenMet')}
|
title={translate('QualityCutoffNotMet')}
|
||||||
/> :
|
/> :
|
||||||
null
|
null
|
||||||
}
|
}
|
||||||
|
|
|
@ -20,10 +20,11 @@ function Legend(props) {
|
||||||
if (showCutoffUnmetIcon) {
|
if (showCutoffUnmetIcon) {
|
||||||
iconsToShow.push(
|
iconsToShow.push(
|
||||||
<LegendIconItem
|
<LegendIconItem
|
||||||
name={translate('CutoffUnmet')}
|
name={translate('CutoffNotMet')}
|
||||||
icon={icons.MOVIE_FILE}
|
icon={icons.MOVIE_FILE}
|
||||||
kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
|
kind={kinds.WARNING}
|
||||||
tooltip={translate('QualityOrLangCutoffHasNotBeenMet')}
|
fullColorEvents={fullColorEvents}
|
||||||
|
tooltip={translate('QualityCutoffNotMet')}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,4 +4,8 @@
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
|
|
||||||
|
&:global(.fullColorEvents) {
|
||||||
|
filter: var(--calendarFullColorFilter)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
import classNames from 'classnames';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Icon from 'Components/Icon';
|
import Icon from 'Components/Icon';
|
||||||
|
@ -6,9 +7,9 @@ import styles from './LegendIconItem.css';
|
||||||
function LegendIconItem(props) {
|
function LegendIconItem(props) {
|
||||||
const {
|
const {
|
||||||
name,
|
name,
|
||||||
|
fullColorEvents,
|
||||||
icon,
|
icon,
|
||||||
kind,
|
kind,
|
||||||
darken,
|
|
||||||
tooltip
|
tooltip
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
|
@ -18,9 +19,11 @@ function LegendIconItem(props) {
|
||||||
title={tooltip}
|
title={tooltip}
|
||||||
>
|
>
|
||||||
<Icon
|
<Icon
|
||||||
className={styles.icon}
|
className={classNames(
|
||||||
|
styles.icon,
|
||||||
|
fullColorEvents && 'fullColorEvents'
|
||||||
|
)}
|
||||||
name={icon}
|
name={icon}
|
||||||
darken={darken}
|
|
||||||
kind={kind}
|
kind={kind}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
@ -31,14 +34,10 @@ function LegendIconItem(props) {
|
||||||
|
|
||||||
LegendIconItem.propTypes = {
|
LegendIconItem.propTypes = {
|
||||||
name: PropTypes.string.isRequired,
|
name: PropTypes.string.isRequired,
|
||||||
|
fullColorEvents: PropTypes.bool.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;
|
||||||
|
|
|
@ -12,18 +12,10 @@
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
color: var(--infoColor);
|
color: var(--infoColor);
|
||||||
|
|
||||||
&:global(.darken) {
|
|
||||||
color: color(var(--infoColor) shade(30%));
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pink {
|
.pink {
|
||||||
color: var(--pink);
|
color: var(--pink);
|
||||||
|
|
||||||
&:global(.darken) {
|
|
||||||
color: color(var(--pink) shade(30%));
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.success {
|
.success {
|
||||||
|
|
|
@ -18,7 +18,6 @@ class Icon extends PureComponent {
|
||||||
kind,
|
kind,
|
||||||
size,
|
size,
|
||||||
title,
|
title,
|
||||||
darken,
|
|
||||||
isSpinning,
|
isSpinning,
|
||||||
...otherProps
|
...otherProps
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
@ -27,8 +26,7 @@ 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}
|
||||||
|
@ -61,7 +59,6 @@ Icon.propTypes = {
|
||||||
kind: PropTypes.string.isRequired,
|
kind: PropTypes.string.isRequired,
|
||||||
size: PropTypes.number.isRequired,
|
size: PropTypes.number.isRequired,
|
||||||
title: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
|
title: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
|
||||||
darken: PropTypes.bool.isRequired,
|
|
||||||
isSpinning: PropTypes.bool.isRequired,
|
isSpinning: PropTypes.bool.isRequired,
|
||||||
fixedWidth: PropTypes.bool.isRequired
|
fixedWidth: PropTypes.bool.isRequired
|
||||||
};
|
};
|
||||||
|
@ -69,7 +66,6 @@ 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
|
||||||
};
|
};
|
||||||
|
|
|
@ -215,6 +215,8 @@ module.exports = {
|
||||||
calendarTextDim: '#eee',
|
calendarTextDim: '#eee',
|
||||||
calendarTextDimAlternate: '#fff',
|
calendarTextDimAlternate: '#fff',
|
||||||
|
|
||||||
|
calendarFullColorFilter: 'grayscale(90%) contrast(200%) saturate(50%)',
|
||||||
|
|
||||||
//
|
//
|
||||||
// Table
|
// Table
|
||||||
|
|
||||||
|
|
|
@ -216,6 +216,8 @@ module.exports = {
|
||||||
calendarTextDim: '#666',
|
calendarTextDim: '#666',
|
||||||
calendarTextDimAlternate: '#242424',
|
calendarTextDimAlternate: '#242424',
|
||||||
|
|
||||||
|
calendarFullColorFilter: 'brightness(30%)',
|
||||||
|
|
||||||
//
|
//
|
||||||
// Table
|
// Table
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
export interface UiSettings {
|
export interface UiSettings {
|
||||||
|
theme: string;
|
||||||
showRelativeDates: boolean;
|
showRelativeDates: boolean;
|
||||||
shortDateFormat: string;
|
shortDateFormat: string;
|
||||||
longDateFormat: string;
|
longDateFormat: string;
|
||||||
|
|
|
@ -223,6 +223,7 @@
|
||||||
"Cutoff": "Cutoff",
|
"Cutoff": "Cutoff",
|
||||||
"CutoffFormatScoreHelpText": "Once the quality cutoff is met or exceeded and this custom format score is reached {appName} will no longer grab or import upgrades for those movies",
|
"CutoffFormatScoreHelpText": "Once the quality cutoff is met or exceeded and this custom format score is reached {appName} will no longer grab or import upgrades for those movies",
|
||||||
"CutoffHelpText": "Once this quality is reached {appName} will no longer download movies after the custom format cutoff score is met or exceeded",
|
"CutoffHelpText": "Once this quality is reached {appName} will no longer download movies after the custom format cutoff score is met or exceeded",
|
||||||
|
"CutoffNotMet": "Cutoff Not Met",
|
||||||
"CutoffUnmet": "Cut-off Unmet",
|
"CutoffUnmet": "Cut-off Unmet",
|
||||||
"DBMigration": "DB Migration",
|
"DBMigration": "DB Migration",
|
||||||
"Database": "Database",
|
"Database": "Database",
|
||||||
|
@ -1061,10 +1062,9 @@
|
||||||
"QualitiesHelpText": "Qualities higher in the list are more preferred even if not checked. Qualities within the same group are equal. Only checked qualities are wanted",
|
"QualitiesHelpText": "Qualities higher in the list are more preferred even if not checked. Qualities within the same group are equal. Only checked qualities are wanted",
|
||||||
"QualitiesLoadError": "Unable to load qualities",
|
"QualitiesLoadError": "Unable to load qualities",
|
||||||
"Quality": "Quality",
|
"Quality": "Quality",
|
||||||
"QualityCutoffHasNotBeenMet": "Quality cutoff has not been met",
|
"QualityCutoffNotMet": "Quality cutoff has not been met",
|
||||||
"QualityDefinitions": "Quality Definitions",
|
"QualityDefinitions": "Quality Definitions",
|
||||||
"QualityLimitsHelpText": "Limits are automatically adjusted for the movie runtime.",
|
"QualityLimitsHelpText": "Limits are automatically adjusted for the movie runtime.",
|
||||||
"QualityOrLangCutoffHasNotBeenMet": "Quality or Language cutoff has not been met",
|
|
||||||
"QualityProfile": "Quality Profile",
|
"QualityProfile": "Quality Profile",
|
||||||
"QualityProfileInUse": "Can't delete a quality profile that is attached to a movie, list, or collection",
|
"QualityProfileInUse": "Can't delete a quality profile that is attached to a movie, list, or collection",
|
||||||
"QualityProfiles": "Quality Profiles",
|
"QualityProfiles": "Quality Profiles",
|
||||||
|
|
Loading…
Reference in New Issue