From 5d1d44e09ef43754f91484846ca0313bd0eb0baf Mon Sep 17 00:00:00 2001 From: Bogdan <mynameisbogdan@users.noreply.github.com> Date: Fri, 13 Dec 2024 23:54:50 +0200 Subject: [PATCH] New: Series genres for search results --- .../AddNewSeries/AddNewSeriesSearchResult.css | 7 ++- .../AddNewSeriesSearchResult.css.d.ts | 1 + .../AddNewSeries/AddNewSeriesSearchResult.js | 19 +++++++ frontend/src/Helpers/Props/icons.ts | 2 + frontend/src/Series/Details/SeriesDetails.css | 3 +- .../src/Series/Details/SeriesDetails.css.d.ts | 1 + frontend/src/Series/Details/SeriesDetails.js | 4 +- frontend/src/Series/Details/SeriesGenres.css | 3 -- .../src/Series/Details/SeriesGenres.css.d.ts | 7 --- frontend/src/Series/Details/SeriesGenres.js | 53 ------------------- frontend/src/Series/SeriesGenres.tsx | 38 +++++++++++++ 11 files changed, 71 insertions(+), 67 deletions(-) delete mode 100644 frontend/src/Series/Details/SeriesGenres.css delete mode 100644 frontend/src/Series/Details/SeriesGenres.css.d.ts delete mode 100644 frontend/src/Series/Details/SeriesGenres.js create mode 100644 frontend/src/Series/SeriesGenres.tsx diff --git a/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css b/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css index c32e6efcb..dcf3f6de3 100644 --- a/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css +++ b/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css @@ -70,10 +70,15 @@ } .originalLanguageName, -.network { +.network, +.genres { margin-left: 8px; } +.genres { + pointer-events: all; +} + .tvdbLink { composes: link from '~Components/Link/Link.css'; diff --git a/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css.d.ts b/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css.d.ts index 4d51aab62..b6fcfe361 100644 --- a/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css.d.ts +++ b/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css.d.ts @@ -3,6 +3,7 @@ interface CssExports { 'alreadyExistsIcon': string; 'content': string; + 'genres': string; 'icons': string; 'network': string; 'originalLanguageName': string; diff --git a/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.js b/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.js index 9ec6cf283..8ce556456 100644 --- a/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.js +++ b/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.js @@ -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; diff --git a/frontend/src/Helpers/Props/icons.ts b/frontend/src/Helpers/Props/icons.ts index ba6859e58..32d0ce55d 100644 --- a/frontend/src/Helpers/Props/icons.ts +++ b/frontend/src/Helpers/Props/icons.ts @@ -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; diff --git a/frontend/src/Series/Details/SeriesDetails.css b/frontend/src/Series/Details/SeriesDetails.css index 21ff2722d..fe62642c3 100644 --- a/frontend/src/Series/Details/SeriesDetails.css +++ b/frontend/src/Series/Details/SeriesDetails.css @@ -110,7 +110,8 @@ font-size: 20px; } -.runtime { +.runtime, +.genres { margin-right: 15px; } diff --git a/frontend/src/Series/Details/SeriesDetails.css.d.ts b/frontend/src/Series/Details/SeriesDetails.css.d.ts index 9dbf4d792..939838592 100644 --- a/frontend/src/Series/Details/SeriesDetails.css.d.ts +++ b/frontend/src/Series/Details/SeriesDetails.css.d.ts @@ -8,6 +8,7 @@ interface CssExports { 'details': string; 'detailsLabel': string; 'fileCountMessage': string; + 'genres': string; 'header': string; 'headerContent': string; 'info': string; diff --git a/frontend/src/Series/Details/SeriesDetails.js b/frontend/src/Series/Details/SeriesDetails.js index 211b40dd5..d416f4792 100644 --- a/frontend/src/Series/Details/SeriesDetails.js +++ b/frontend/src/Series/Details/SeriesDetails.js @@ -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} diff --git a/frontend/src/Series/Details/SeriesGenres.css b/frontend/src/Series/Details/SeriesGenres.css deleted file mode 100644 index 93a028748..000000000 --- a/frontend/src/Series/Details/SeriesGenres.css +++ /dev/null @@ -1,3 +0,0 @@ -.genres { - margin-right: 15px; -} diff --git a/frontend/src/Series/Details/SeriesGenres.css.d.ts b/frontend/src/Series/Details/SeriesGenres.css.d.ts deleted file mode 100644 index 83399e63b..000000000 --- a/frontend/src/Series/Details/SeriesGenres.css.d.ts +++ /dev/null @@ -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; diff --git a/frontend/src/Series/Details/SeriesGenres.js b/frontend/src/Series/Details/SeriesGenres.js deleted file mode 100644 index 7cd1e7720..000000000 --- a/frontend/src/Series/Details/SeriesGenres.js +++ /dev/null @@ -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; diff --git a/frontend/src/Series/SeriesGenres.tsx b/frontend/src/Series/SeriesGenres.tsx new file mode 100644 index 000000000..3db1a3e47 --- /dev/null +++ b/frontend/src/Series/SeriesGenres.tsx @@ -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;