tedkulp/Sonarr
1
0
Fork 0
mirror of https://github.com/Sonarr/Sonarr.git synced 2026-04-26 22:56:23 -04:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/Series/Index/Overview/Options/SeriesIndexOverviewOptionsModalContent.tsx
+12
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>
frontend/src/Series/Index/Overview/SeriesIndexOverview.css
+13 -1
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;
frontend/src/Series/Index/Overview/SeriesIndexOverview.css.d.ts
Vendored
+2
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;
}
frontend/src/Series/Index/Overview/SeriesIndexOverview.tsx
+17 -8
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}
frontend/src/Series/Index/Posters/Options/SeriesIndexPosterOptionsModalContent.tsx
+13
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>
frontend/src/Series/Index/Posters/SeriesIndexPoster.css
+14
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;
frontend/src/Series/Index/Posters/SeriesIndexPoster.css.d.ts
Vendored
+2
View File
@@ -10,6 +10,8 @@ interface CssExports {
'nextAiring': string;
'overlayTitle': string;
'posterContainer': string;
'tags': string;
'tagsList': string;
'title': string;
}
export const cssExports: CssExports;
frontend/src/Series/Index/Posters/SeriesIndexPoster.tsx
+11
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}
frontend/src/Series/Index/Posters/SeriesIndexPosters.tsx
+5
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':