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:
Mark McDowall
Bogdan
parent
d0e400c55a
commit
bc9b2cd283
|
|
@ -147,7 +147,7 @@ class AgendaEvent extends Component {
|
|||
className={styles.statusIcon}
|
||||
name={icons.MOVIE_FILE}
|
||||
kind={kinds.WARNING}
|
||||
title={translate('QualityCutoffHasNotBeenMet')}
|
||||
title={translate('QualityCutoffNotMet')}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -48,6 +48,10 @@ $fullColorGradient: rgba(244, 245, 246, 0.2);
|
|||
.statusContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:global(.fullColor) {
|
||||
filter: var(--calendarFullColorFilter)
|
||||
}
|
||||
}
|
||||
|
||||
.statusIcon {
|
||||
|
|
|
|||
|
|
@ -76,12 +76,18 @@ class CalendarEvent extends Component {
|
|||
{title}
|
||||
</div>
|
||||
|
||||
<div className={styles.statusContainer}>
|
||||
<div
|
||||
className={classNames(
|
||||
styles.statusContainer,
|
||||
fullColorEvents && 'fullColor'
|
||||
)}
|
||||
>
|
||||
{
|
||||
queueItem ?
|
||||
<span className={styles.statusIcon}>
|
||||
<CalendarEventQueueDetails
|
||||
{...queueItem}
|
||||
fullColorEvents={fullColorEvents}
|
||||
/>
|
||||
</span> :
|
||||
null
|
||||
|
|
@ -98,12 +104,14 @@ class CalendarEvent extends Component {
|
|||
}
|
||||
|
||||
{
|
||||
showCutoffUnmetIcon && !!movieFile && movieFile.qualityCutoffNotMet ?
|
||||
showCutoffUnmetIcon &&
|
||||
!!movieFile &&
|
||||
movieFile.qualityCutoffNotMet ?
|
||||
<Icon
|
||||
className={styles.statusIcon}
|
||||
name={icons.MOVIE_FILE}
|
||||
kind={kinds.WARNING}
|
||||
title={translate('QualityCutoffHasNotBeenMet')}
|
||||
title={translate('QualityCutoffNotMet')}
|
||||
/> :
|
||||
null
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,10 +20,11 @@ function Legend(props) {
|
|||
if (showCutoffUnmetIcon) {
|
||||
iconsToShow.push(
|
||||
<LegendIconItem
|
||||
name={translate('CutoffUnmet')}
|
||||
name={translate('CutoffNotMet')}
|
||||
icon={icons.MOVIE_FILE}
|
||||
kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
|
||||
tooltip={translate('QualityOrLangCutoffHasNotBeenMet')}
|
||||
kind={kinds.WARNING}
|
||||
fullColorEvents={fullColorEvents}
|
||||
tooltip={translate('QualityCutoffNotMet')}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,4 +4,8 @@
|
|||
|
||||
.icon {
|
||||
margin-right: 5px;
|
||||
|
||||
&:global(.fullColorEvents) {
|
||||
filter: var(--calendarFullColorFilter)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
};
|
||||
|
|
|
|||
|
|
@ -215,6 +215,8 @@ module.exports = {
|
|||
calendarTextDim: '#eee',
|
||||
calendarTextDimAlternate: '#fff',
|
||||
|
||||
calendarFullColorFilter: 'grayscale(90%) contrast(200%) saturate(50%)',
|
||||
|
||||
//
|
||||
// Table
|
||||
|
||||
|
|
|
|||
|
|
@ -216,6 +216,8 @@ module.exports = {
|
|||
calendarTextDim: '#666',
|
||||
calendarTextDimAlternate: '#242424',
|
||||
|
||||
calendarFullColorFilter: 'brightness(30%)',
|
||||
|
||||
//
|
||||
// Table
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
export interface UiSettings {
|
||||
theme: string;
|
||||
showRelativeDates: boolean;
|
||||
shortDateFormat: string;
|
||||
longDateFormat: string;
|
||||
|
|
|
|||
|
|
@ -223,6 +223,7 @@
|
|||
"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",
|
||||
"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",
|
||||
"DBMigration": "DB Migration",
|
||||
"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",
|
||||
"QualitiesLoadError": "Unable to load qualities",
|
||||
"Quality": "Quality",
|
||||
"QualityCutoffHasNotBeenMet": "Quality cutoff has not been met",
|
||||
"QualityCutoffNotMet": "Quality cutoff has not been met",
|
||||
"QualityDefinitions": "Quality Definitions",
|
||||
"QualityLimitsHelpText": "Limits are automatically adjusted for the movie runtime.",
|
||||
"QualityOrLangCutoffHasNotBeenMet": "Quality or Language cutoff has not been met",
|
||||
"QualityProfile": "Quality Profile",
|
||||
"QualityProfileInUse": "Can't delete a quality profile that is attached to a movie, list, or collection",
|
||||
"QualityProfiles": "Quality Profiles",
|
||||
|
|
|
|||
Loading…
Reference in New Issue