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:
parent
d3f14d5f5e
commit
e35b39b4b1
@ -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;
|
||||
};
|
||||
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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;
|
||||
|
@ -8,8 +8,10 @@ interface CssExports {
|
||||
'info': string;
|
||||
'link': string;
|
||||
'overview': string;
|
||||
'overviewContainer': string;
|
||||
'poster': string;
|
||||
'posterContainer': string;
|
||||
'tags': string;
|
||||
'title': string;
|
||||
'titleRow': string;
|
||||
}
|
||||
|
@ -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}
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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;
|
||||
|
@ -10,6 +10,8 @@ interface CssExports {
|
||||
'nextAiring': string;
|
||||
'overlayTitle': string;
|
||||
'posterContainer': string;
|
||||
'tags': string;
|
||||
'tagsList': string;
|
||||
'title': string;
|
||||
}
|
||||
export const cssExports: CssExports;
|
||||
|
@ -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}
|
||||
|
@ -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':
|
||||
|
@ -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
|
||||
},
|
||||
|
||||
|
@ -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",
|
||||
|
Loading…
Reference in New Issue
Block a user