1
0
mirror of https://github.com/Sonarr/Sonarr.git synced 2024-12-23 02:05:27 +02:00

New: Series genres for search results

This commit is contained in:
Bogdan 2024-12-13 23:54:50 +02:00 committed by Mark McDowall
parent 3b00112447
commit 5d1d44e09e
11 changed files with 71 additions and 67 deletions

View File

@ -70,10 +70,15 @@
}
.originalLanguageName,
.network {
.network,
.genres {
margin-left: 8px;
}
.genres {
pointer-events: all;
}
.tvdbLink {
composes: link from '~Components/Link/Link.css';

View File

@ -3,6 +3,7 @@
interface CssExports {
'alreadyExistsIcon': string;
'content': string;
'genres': string;
'icons': string;
'network': string;
'originalLanguageName': string;

View File

@ -6,6 +6,7 @@ import Label from 'Components/Label';
import Link from 'Components/Link/Link';
import MetadataAttribution from 'Components/MetadataAttribution';
import { icons, kinds, sizes } from 'Helpers/Props';
import SeriesGenres from 'Series/SeriesGenres';
import SeriesPoster from 'Series/SeriesPoster';
import translate from 'Utilities/String/translate';
import AddNewSeriesModal from './AddNewSeriesModal';
@ -56,6 +57,7 @@ class AddNewSeriesSearchResult extends Component {
year,
network,
originalLanguage,
genres,
status,
overview,
statistics,
@ -181,6 +183,18 @@ class AddNewSeriesSearchResult extends Component {
null
}
{
genres.length > 0 ?
<Label size={sizes.LARGE}>
<Icon
name={icons.GENRE}
size={13}
/>
<SeriesGenres className={styles.genres} genres={genres} />
</Label> :
null
}
{
seasonCount ?
<Label size={sizes.LARGE}>
@ -243,6 +257,7 @@ AddNewSeriesSearchResult.propTypes = {
year: PropTypes.number.isRequired,
network: PropTypes.string,
originalLanguage: PropTypes.object,
genres: PropTypes.arrayOf(PropTypes.string),
status: PropTypes.string.isRequired,
overview: PropTypes.string,
statistics: PropTypes.object.isRequired,
@ -254,4 +269,8 @@ AddNewSeriesSearchResult.propTypes = {
isSmallScreen: PropTypes.bool.isRequired
};
AddNewSeriesSearchResult.defaultProps = {
genres: []
};
export default AddNewSeriesSearchResult;

View File

@ -102,6 +102,7 @@ import {
faTable as fasTable,
faTags as fasTags,
faTh as fasTh,
faTheaterMasks as fasTheaterMasks,
faThList as fasThList,
faTimes as fasTimes,
faTimesCircle as fasTimesCircle,
@ -162,6 +163,7 @@ export const FLAG = fasFlag;
export const FOOTNOTE = fasAsterisk;
export const FOLDER = farFolder;
export const FOLDER_OPEN = fasFolderOpen;
export const GENRE = fasTheaterMasks;
export const GROUP = farObjectGroup;
export const HEALTH = fasMedkit;
export const HEART = fasHeart;

View File

@ -110,7 +110,8 @@
font-size: 20px;
}
.runtime {
.runtime,
.genres {
margin-right: 15px;
}

View File

@ -8,6 +8,7 @@ interface CssExports {
'details': string;
'detailsLabel': string;
'fileCountMessage': string;
'genres': string;
'header': string;
'headerContent': string;
'info': string;

View File

@ -27,6 +27,7 @@ import DeleteSeriesModal from 'Series/Delete/DeleteSeriesModal';
import EditSeriesModal from 'Series/Edit/EditSeriesModal';
import SeriesHistoryModal from 'Series/History/SeriesHistoryModal';
import MonitoringOptionsModal from 'Series/MonitoringOptions/MonitoringOptionsModal';
import SeriesGenres from 'Series/SeriesGenres';
import SeriesPoster from 'Series/SeriesPoster';
import { getSeriesStatusDetails } from 'Series/SeriesStatus';
import QualityProfileNameConnector from 'Settings/Profiles/Quality/QualityProfileNameConnector';
@ -38,7 +39,6 @@ import toggleSelected from 'Utilities/Table/toggleSelected';
import SeriesAlternateTitles from './SeriesAlternateTitles';
import SeriesDetailsLinks from './SeriesDetailsLinks';
import SeriesDetailsSeasonConnector from './SeriesDetailsSeasonConnector';
import SeriesGenres from './SeriesGenres';
import SeriesTagsConnector from './SeriesTagsConnector';
import styles from './SeriesDetails.css';
@ -419,7 +419,7 @@ class SeriesDetails extends Component {
null
}
<SeriesGenres genres={genres} />
<SeriesGenres className={styles.genres} genres={genres} />
<span>
{runningYears}

View File

@ -1,3 +0,0 @@
.genres {
margin-right: 15px;
}

View File

@ -1,7 +0,0 @@
// This file is automatically generated.
// Please do not change this file!
interface CssExports {
'genres': string;
}
export const cssExports: CssExports;
export default cssExports;

View File

@ -1,53 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
import Label from 'Components/Label';
import Tooltip from 'Components/Tooltip/Tooltip';
import { kinds, sizes, tooltipPositions } from 'Helpers/Props';
import styles from './SeriesGenres.css';
function SeriesGenres({ genres }) {
const [firstGenre, ...otherGenres] = genres;
if (otherGenres.length) {
return (
<Tooltip
anchor={
<span className={styles.genres}>
{firstGenre}
</span>
}
tooltip={
<div>
{
otherGenres.map((tag) => {
return (
<Label
key={tag}
kind={kinds.INFO}
size={sizes.LARGE}
>
{tag}
</Label>
);
})
}
</div>
}
kind={kinds.INVERSE}
position={tooltipPositions.TOP}
/>
);
}
return (
<span className={styles.genres}>
{firstGenre}
</span>
);
}
SeriesGenres.propTypes = {
genres: PropTypes.arrayOf(PropTypes.string).isRequired
};
export default SeriesGenres;

View File

@ -0,0 +1,38 @@
import React from 'react';
import Label from 'Components/Label';
import Tooltip from 'Components/Tooltip/Tooltip';
import { kinds, sizes, tooltipPositions } from 'Helpers/Props';
interface SeriesGenresProps {
className?: string;
genres: string[];
}
function SeriesGenres({ className, genres }: SeriesGenresProps) {
const [firstGenre, ...otherGenres] = genres;
if (otherGenres.length) {
return (
<Tooltip
anchor={<span className={className}>{firstGenre}</span>}
tooltip={
<div>
{otherGenres.map((tag) => {
return (
<Label key={tag} kind={kinds.INFO} size={sizes.LARGE}>
{tag}
</Label>
);
})}
</div>
}
kind={kinds.INVERSE}
position={tooltipPositions.TOP}
/>
);
}
return <span className={className}>{firstGenre}</span>;
}
export default SeriesGenres;