mirror
/
Radarr
mirror of https://github.com/Radarr/Radarr
1
0
Fork 0
Code Issues Releases Wiki Activity

New: Tooltip for Links on AddNew

This commit is contained in:
Qstick 2020-08-08 22:07:57 -04:00
parent 2d121e9857
commit 5eeb42c3f6
2 changed files with 36 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css
View File

@ -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;
}

104
frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js
View File

@ -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,