mirror of
https://github.com/Radarr/Radarr.git
synced 2024-09-11 20:12:41 +02:00
New: Tooltip for Links on AddNew
This commit is contained in:
parent
2d121e9857
commit
5eeb42c3f6
@ -47,12 +47,6 @@
|
||||
color: $disabledColor;
|
||||
}
|
||||
|
||||
.externalLink {
|
||||
margin-top: 5px;
|
||||
margin-left: auto;
|
||||
color: $textColor;
|
||||
}
|
||||
|
||||
.alreadyExistsIcon {
|
||||
margin-left: 10px;
|
||||
color: #37bc9b;
|
||||
@ -68,3 +62,8 @@
|
||||
.overview {
|
||||
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 Label from 'Components/Label';
|
||||
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 AddNewMovieModal from './AddNewMovieModal';
|
||||
import styles from './AddNewMovieSearchResult.css';
|
||||
@ -50,6 +52,7 @@ class AddNewMovieSearchResult extends Component {
|
||||
const {
|
||||
tmdbId,
|
||||
imdbId,
|
||||
youTubeTrailerId,
|
||||
title,
|
||||
titleSlug,
|
||||
year,
|
||||
@ -117,42 +120,6 @@ class AddNewMovieSearchResult extends Component {
|
||||
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>
|
||||
@ -170,6 +137,32 @@ class AddNewMovieSearchResult extends Component {
|
||||
</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' &&
|
||||
<Label
|
||||
@ -181,42 +174,6 @@ class AddNewMovieSearchResult extends Component {
|
||||
}
|
||||
</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}>
|
||||
{overview}
|
||||
</div>
|
||||
@ -241,6 +198,7 @@ class AddNewMovieSearchResult extends Component {
|
||||
AddNewMovieSearchResult.propTypes = {
|
||||
tmdbId: PropTypes.number.isRequired,
|
||||
imdbId: PropTypes.string,
|
||||
youTubeTrailerId: PropTypes.string,
|
||||
title: PropTypes.string.isRequired,
|
||||
titleSlug: PropTypes.string.isRequired,
|
||||
year: PropTypes.number.isRequired,
|
||||
|
Loading…
Reference in New Issue
Block a user