1
0
mirror of https://github.com/Sonarr/Sonarr.git synced 2024-10-29 23:12:39 +01:00

New: Add option to show tags on series Poster and Overview

Closes #6946
This commit is contained in:
Mark McDowall 2024-07-14 11:56:25 -07:00 committed by Mark McDowall
parent d3f14d5f5e
commit e35b39b4b1
12 changed files with 95 additions and 9 deletions

View File

@ -20,6 +20,7 @@ export interface SeriesIndexAppState {
showTitle: boolean;
showMonitored: boolean;
showQualityProfile: boolean;
showTags: boolean;
showSearchAction: boolean;
};
@ -34,6 +35,7 @@ export interface SeriesIndexAppState {
showSeasonCount: boolean;
showPath: boolean;
showSizeOnDisk: boolean;
showTags: boolean;
showSearchAction: boolean;
};

View File

@ -55,6 +55,7 @@ function SeriesIndexOverviewOptionsModalContent(
showSeasonCount,
showPath,
showSizeOnDisk,
showTags,
showSearchAction,
} = useSelector(selectOverviewOptions);
@ -185,6 +186,17 @@ function SeriesIndexOverviewOptionsModalContent(
/>
</FormGroup>
<FormGroup>
<FormLabel>{translate('ShowTags')}</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showTags"
value={showTags}
onChange={onOverviewOptionChange}
/>
</FormGroup>
<FormGroup>
<FormLabel>{translate('ShowSearch')}</FormLabel>

View File

@ -73,14 +73,26 @@ $hoverScale: 1.05;
flex: 1 0 auto;
}
.overviewContainer {
display: flex;
justify-content: space-between;
flex: 0 1 1000px;
flex-direction: column;
}
.overview {
composes: link;
flex: 0 1 1000px;
overflow: hidden;
min-height: 0;
}
.tags {
display: flex;
justify-content: space-around;
overflow: hidden;
}
@media only screen and (max-width: $breakpointSmall) {
.overview {
display: none;

View File

@ -8,8 +8,10 @@ interface CssExports {
'info': string;
'link': string;
'overview': string;
'overviewContainer': string;
'poster': string;
'posterContainer': string;
'tags': string;
'title': string;
'titleRow': string;
}

View File

@ -5,6 +5,7 @@ import { REFRESH_SERIES, SERIES_SEARCH } from 'Commands/commandNames';
import IconButton from 'Components/Link/IconButton';
import Link from 'Components/Link/Link';
import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
import TagListConnector from 'Components/TagListConnector';
import { icons } from 'Helpers/Props';
import DeleteSeriesModal from 'Series/Delete/DeleteSeriesModal';
import EditSeriesModalConnector from 'Series/Edit/EditSeriesModalConnector';
@ -70,6 +71,7 @@ function SeriesIndexOverview(props: SeriesIndexOverviewProps) {
overview,
statistics = {} as Statistics,
images,
tags,
network,
} = series;
@ -205,15 +207,22 @@ function SeriesIndexOverview(props: SeriesIndexOverviewProps) {
</div>
<div className={styles.details}>
<Link className={styles.overview} to={link}>
<TextTruncate
line={Math.floor(
overviewHeight / (defaultFontSize * lineHeight)
)}
text={overview}
/>
</Link>
<div className={styles.overviewContainer}>
<Link className={styles.overview} to={link}>
<TextTruncate
line={Math.floor(
overviewHeight / (defaultFontSize * lineHeight)
)}
text={overview}
/>
</Link>
{overviewOptions.showTags ? (
<div className={styles.tags}>
<TagListConnector tags={tags} />
</div>
) : null}
</div>
<SeriesIndexOverviewInfo
height={overviewHeight}
monitored={monitored}

View File

@ -52,6 +52,7 @@ function SeriesIndexPosterOptionsModalContent(
showTitle,
showMonitored,
showQualityProfile,
showTags,
showSearchAction,
} = posterOptions;
@ -130,6 +131,18 @@ function SeriesIndexPosterOptionsModalContent(
/>
</FormGroup>
<FormGroup>
<FormLabel>{translate('ShowTags')}</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showTags"
value={showTags}
helpText={translate('ShowTagsHelpText')}
onChange={onPosterOptionChange}
/>
</FormGroup>
<FormGroup>
<FormLabel>{translate('ShowSearch')}</FormLabel>

View File

@ -57,6 +57,20 @@ $hoverScale: 1.05;
font-size: $smallFontSize;
}
.tags {
display: flex;
align-items: center;
justify-content: space-around;
padding: 0 3px;
height: 21px;
background-color: var(--seriesBackgroundColor);
}
.tagsList {
display: flex;
overflow: hidden;
}
.ended {
position: absolute;
top: 0;

View File

@ -10,6 +10,8 @@ interface CssExports {
'nextAiring': string;
'overlayTitle': string;
'posterContainer': string;
'tags': string;
'tagsList': string;
'title': string;
}
export const cssExports: CssExports;

View File

@ -5,6 +5,7 @@ import Label from 'Components/Label';
import IconButton from 'Components/Link/IconButton';
import Link from 'Components/Link/Link';
import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
import TagListConnector from 'Components/TagListConnector';
import { icons } from 'Helpers/Props';
import DeleteSeriesModal from 'Series/Delete/DeleteSeriesModal';
import EditSeriesModalConnector from 'Series/Edit/EditSeriesModalConnector';
@ -41,6 +42,7 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
showTitle,
showMonitored,
showQualityProfile,
showTags,
showSearchAction,
} = useSelector(selectPosterOptions);
@ -60,6 +62,7 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
added,
statistics = {} as Statistics,
images,
tags,
} = series;
const {
@ -208,6 +211,14 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
</div>
) : null}
{showTags && tags.length ? (
<div className={styles.tags}>
<div className={styles.tagsList}>
<TagListConnector tags={tags} />
</div>
</div>
) : null}
{nextAiring ? (
<div
className={styles.nextAiring}

View File

@ -141,6 +141,7 @@ export default function SeriesIndexPosters(props: SeriesIndexPostersProps) {
showTitle,
showMonitored,
showQualityProfile,
showTags,
} = posterOptions;
const nextAiringHeight = 19;
@ -164,6 +165,10 @@ export default function SeriesIndexPosters(props: SeriesIndexPostersProps) {
heights.push(19);
}
if (showTags) {
heights.push(21);
}
switch (sortKey) {
case 'network':
case 'seasons':

View File

@ -29,6 +29,7 @@ export const defaultState = {
showTitle: false,
showMonitored: true,
showQualityProfile: true,
showTags: false,
showSearchAction: false
},
@ -43,6 +44,7 @@ export const defaultState = {
showSeasonCount: true,
showPath: false,
showSizeOnDisk: false,
showTags: false,
showSearchAction: false
},

View File

@ -1864,6 +1864,8 @@
"ShowSeasonCount": "Show Season Count",
"ShowSeriesTitleHelpText": "Show series title under poster",
"ShowSizeOnDisk": "Show Size on Disk",
"ShowTags": "Show Tags",
"ShowTagsHelpText": "Show tags under poster",
"ShowTitle": "Show Title",
"ShowUnknownSeriesItems": "Show Unknown Series Items",
"ShowUnknownSeriesItemsHelpText": "Show items without a series in the queue, this could include removed series, movies or anything else in {appName}'s category",