New: Tooltip for Links on AddNew

pull/4848/head
Qstick 4 years ago
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,52 +137,42 @@ class AddNewMovieSearchResult extends Component {
</Label> </Label>
} }
{ <Tooltip
status === 'ended' && anchor={
<Label <Label
kind={kinds.DANGER}
size={sizes.LARGE} size={sizes.LARGE}
> >
Ended <Icon
</Label> name={icons.EXTERNAL_LINK}
} size={13}
</div> />
{
isSmallScreen ?
<div className={styles.externalLink}>
<Link
to={`https://www.themoviedb.org/movie/${tmdbId}`}
onPress={this.onExternalLinkPress}
>
<Label size={sizes.LARGE}>
TMDb
</Label>
</Link>
{ <span className={styles.links}>
imdbId && Links
<Link </span>
to={`https://www.imdb.com/title/${imdbId}`}
onPress={this.onExternalLinkPress}
>
<Label size={sizes.LARGE}>
IMDb
</Label> </Label>
</Link>
} }
tooltip={
<MovieDetailsLinks
tmdbId={tmdbId}
youTubeTrailerId={youTubeTrailerId}
imdbId={imdbId}
/>
}
kind={kinds.INVERSE}
position={tooltipPositions.BOTTOM}
/>
<Link {
to={`https://trakt.tv/search/tmdb/${tmdbId}?id_type=movie`} status === 'ended' &&
onPress={this.onExternalLinkPress} <Label
kind={kinds.DANGER}
size={sizes.LARGE}
> >
<Label size={sizes.LARGE}> Ended
Trakt
</Label> </Label>
</Link>
</div> :
null
} }
</div>
<div className={styles.overview}> <div className={styles.overview}>
{overview} {overview}
@ -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…
Cancel
Save