mirror of
https://github.com/Radarr/Radarr.git
synced 2024-10-26 22:52:40 +02:00
New: Tooltip for Links on AddNew
This commit is contained in:
parent
2d121e9857
commit
5eeb42c3f6
@ -47,12 +47,6 @@
|
|||||||
color: $disabledColor;
|
color: $disabledColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.externalLink {
|
|
||||||
margin-top: 5px;
|
|
||||||
margin-left: auto;
|
|
||||||
color: $textColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alreadyExistsIcon {
|
.alreadyExistsIcon {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
color: #37bc9b;
|
color: #37bc9b;
|
||||||
@ -68,3 +62,8 @@
|
|||||||
.overview {
|
.overview {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.links {
|
||||||
|
margin-left: 8px;
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
@ -4,7 +4,9 @@ import HeartRating from 'Components/HeartRating';
|
|||||||
import Icon from 'Components/Icon';
|
import Icon from 'Components/Icon';
|
||||||
import Label from 'Components/Label';
|
import Label from 'Components/Label';
|
||||||
import Link from 'Components/Link/Link';
|
import Link from 'Components/Link/Link';
|
||||||
import { icons, kinds, sizes } from 'Helpers/Props';
|
import Tooltip from 'Components/Tooltip/Tooltip';
|
||||||
|
import { icons, kinds, sizes, tooltipPositions } from 'Helpers/Props';
|
||||||
|
import MovieDetailsLinks from 'Movie/Details/MovieDetailsLinks';
|
||||||
import MoviePoster from 'Movie/MoviePoster';
|
import MoviePoster from 'Movie/MoviePoster';
|
||||||
import AddNewMovieModal from './AddNewMovieModal';
|
import AddNewMovieModal from './AddNewMovieModal';
|
||||||
import styles from './AddNewMovieSearchResult.css';
|
import styles from './AddNewMovieSearchResult.css';
|
||||||
@ -50,6 +52,7 @@ class AddNewMovieSearchResult extends Component {
|
|||||||
const {
|
const {
|
||||||
tmdbId,
|
tmdbId,
|
||||||
imdbId,
|
imdbId,
|
||||||
|
youTubeTrailerId,
|
||||||
title,
|
title,
|
||||||
titleSlug,
|
titleSlug,
|
||||||
year,
|
year,
|
||||||
@ -117,42 +120,6 @@ class AddNewMovieSearchResult extends Component {
|
|||||||
title="Movie is on Net Import Exclusion List"
|
title="Movie is on Net Import Exclusion List"
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
|
|
||||||
{
|
|
||||||
isSmallScreen ?
|
|
||||||
null :
|
|
||||||
<div className={styles.externalLink}>
|
|
||||||
<Link
|
|
||||||
to={`https://www.themoviedb.org/movie/${tmdbId}`}
|
|
||||||
onPress={this.onExternalLinkPress}
|
|
||||||
>
|
|
||||||
<Label size={sizes.LARGE}>
|
|
||||||
TMDb
|
|
||||||
</Label>
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
{
|
|
||||||
imdbId &&
|
|
||||||
<Link
|
|
||||||
to={`https://www.imdb.com/title/${imdbId}`}
|
|
||||||
onPress={this.onExternalLinkPress}
|
|
||||||
>
|
|
||||||
<Label size={sizes.LARGE}>
|
|
||||||
IMDb
|
|
||||||
</Label>
|
|
||||||
</Link>
|
|
||||||
}
|
|
||||||
|
|
||||||
<Link
|
|
||||||
to={`https://trakt.tv/search/tmdb/${tmdbId}?id_type=movie`}
|
|
||||||
onPress={this.onExternalLinkPress}
|
|
||||||
>
|
|
||||||
<Label size={sizes.LARGE}>
|
|
||||||
Trakt
|
|
||||||
</Label>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
@ -170,6 +137,32 @@ class AddNewMovieSearchResult extends Component {
|
|||||||
</Label>
|
</Label>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
<Tooltip
|
||||||
|
anchor={
|
||||||
|
<Label
|
||||||
|
size={sizes.LARGE}
|
||||||
|
>
|
||||||
|
<Icon
|
||||||
|
name={icons.EXTERNAL_LINK}
|
||||||
|
size={13}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<span className={styles.links}>
|
||||||
|
Links
|
||||||
|
</span>
|
||||||
|
</Label>
|
||||||
|
}
|
||||||
|
tooltip={
|
||||||
|
<MovieDetailsLinks
|
||||||
|
tmdbId={tmdbId}
|
||||||
|
youTubeTrailerId={youTubeTrailerId}
|
||||||
|
imdbId={imdbId}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
kind={kinds.INVERSE}
|
||||||
|
position={tooltipPositions.BOTTOM}
|
||||||
|
/>
|
||||||
|
|
||||||
{
|
{
|
||||||
status === 'ended' &&
|
status === 'ended' &&
|
||||||
<Label
|
<Label
|
||||||
@ -181,42 +174,6 @@ class AddNewMovieSearchResult extends Component {
|
|||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{
|
|
||||||
isSmallScreen ?
|
|
||||||
<div className={styles.externalLink}>
|
|
||||||
<Link
|
|
||||||
to={`https://www.themoviedb.org/movie/${tmdbId}`}
|
|
||||||
onPress={this.onExternalLinkPress}
|
|
||||||
>
|
|
||||||
<Label size={sizes.LARGE}>
|
|
||||||
TMDb
|
|
||||||
</Label>
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
{
|
|
||||||
imdbId &&
|
|
||||||
<Link
|
|
||||||
to={`https://www.imdb.com/title/${imdbId}`}
|
|
||||||
onPress={this.onExternalLinkPress}
|
|
||||||
>
|
|
||||||
<Label size={sizes.LARGE}>
|
|
||||||
IMDb
|
|
||||||
</Label>
|
|
||||||
</Link>
|
|
||||||
}
|
|
||||||
|
|
||||||
<Link
|
|
||||||
to={`https://trakt.tv/search/tmdb/${tmdbId}?id_type=movie`}
|
|
||||||
onPress={this.onExternalLinkPress}
|
|
||||||
>
|
|
||||||
<Label size={sizes.LARGE}>
|
|
||||||
Trakt
|
|
||||||
</Label>
|
|
||||||
</Link>
|
|
||||||
</div> :
|
|
||||||
null
|
|
||||||
}
|
|
||||||
|
|
||||||
<div className={styles.overview}>
|
<div className={styles.overview}>
|
||||||
{overview}
|
{overview}
|
||||||
</div>
|
</div>
|
||||||
@ -241,6 +198,7 @@ class AddNewMovieSearchResult extends Component {
|
|||||||
AddNewMovieSearchResult.propTypes = {
|
AddNewMovieSearchResult.propTypes = {
|
||||||
tmdbId: PropTypes.number.isRequired,
|
tmdbId: PropTypes.number.isRequired,
|
||||||
imdbId: PropTypes.string,
|
imdbId: PropTypes.string,
|
||||||
|
youTubeTrailerId: PropTypes.string,
|
||||||
title: PropTypes.string.isRequired,
|
title: PropTypes.string.isRequired,
|
||||||
titleSlug: PropTypes.string.isRequired,
|
titleSlug: PropTypes.string.isRequired,
|
||||||
year: PropTypes.number.isRequired,
|
year: PropTypes.number.isRequired,
|
||||||
|
Loading…
Reference in New Issue
Block a user