mirror of
https://github.com/Radarr/Radarr.git
synced 2024-10-03 22:57:18 +02:00
parent
83d437cbb3
commit
82fb355930
@ -1,8 +1,14 @@
|
|||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
|
import Icon from 'Components/Icon';
|
||||||
|
import Label from 'Components/Label';
|
||||||
|
import Link from 'Components/Link/Link';
|
||||||
import MonitorToggleButton from 'Components/MonitorToggleButton';
|
import MonitorToggleButton from 'Components/MonitorToggleButton';
|
||||||
|
import Popover from 'Components/Tooltip/Popover';
|
||||||
|
import { icons, kinds, sizes } from 'Helpers/Props';
|
||||||
import MovieHeadshot from 'Movie/MovieHeadshot';
|
import MovieHeadshot from 'Movie/MovieHeadshot';
|
||||||
import EditImportListModalConnector from 'Settings/ImportLists/ImportLists/EditImportListModalConnector';
|
import EditImportListModalConnector from 'Settings/ImportLists/ImportLists/EditImportListModalConnector';
|
||||||
|
import translate from 'Utilities/String/translate';
|
||||||
import styles from '../MovieCreditPoster.css';
|
import styles from '../MovieCreditPoster.css';
|
||||||
|
|
||||||
class MovieCastPoster extends Component {
|
class MovieCastPoster extends Component {
|
||||||
@ -52,6 +58,7 @@ class MovieCastPoster extends Component {
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
|
tmdbId,
|
||||||
personName,
|
personName,
|
||||||
character,
|
character,
|
||||||
images,
|
images,
|
||||||
@ -83,15 +90,35 @@ class MovieCastPoster extends Component {
|
|||||||
style={contentStyle}
|
style={contentStyle}
|
||||||
>
|
>
|
||||||
<div className={styles.posterContainer}>
|
<div className={styles.posterContainer}>
|
||||||
<div className={styles.controls}>
|
<div className={styles.toggleMonitoredContainer}>
|
||||||
<MonitorToggleButton
|
<MonitorToggleButton
|
||||||
className={styles.action}
|
className={styles.monitorToggleButton}
|
||||||
monitored={monitored}
|
monitored={monitored}
|
||||||
size={20}
|
size={20}
|
||||||
onPress={importListId > 0 ? this.onEditImportListPress : this.onAddImportListPress}
|
onPress={importListId > 0 ? this.onEditImportListPress : this.onAddImportListPress}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<Label className={styles.controls}>
|
||||||
|
<span className={styles.externalLinks}>
|
||||||
|
<Popover
|
||||||
|
anchor={<Icon name={icons.EXTERNAL_LINK} size={12} />}
|
||||||
|
title={translate('Links')}
|
||||||
|
body={
|
||||||
|
<Link to={`https://www.themoviedb.org/person/${tmdbId}`}>
|
||||||
|
<Label
|
||||||
|
className={styles.externalLinkLabel}
|
||||||
|
kind={kinds.INFO}
|
||||||
|
size={sizes.LARGE}
|
||||||
|
>
|
||||||
|
{translate('TMDb')}
|
||||||
|
</Label>
|
||||||
|
</Link>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</Label>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
style={elementStyle}
|
style={elementStyle}
|
||||||
>
|
>
|
||||||
|
@ -1,8 +1,14 @@
|
|||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
|
import Icon from 'Components/Icon';
|
||||||
|
import Label from 'Components/Label';
|
||||||
|
import Link from 'Components/Link/Link';
|
||||||
import MonitorToggleButton from 'Components/MonitorToggleButton';
|
import MonitorToggleButton from 'Components/MonitorToggleButton';
|
||||||
|
import Popover from 'Components/Tooltip/Popover';
|
||||||
|
import { icons, kinds, sizes } from 'Helpers/Props';
|
||||||
import MovieHeadshot from 'Movie/MovieHeadshot';
|
import MovieHeadshot from 'Movie/MovieHeadshot';
|
||||||
import EditImportListModalConnector from 'Settings/ImportLists/ImportLists/EditImportListModalConnector';
|
import EditImportListModalConnector from 'Settings/ImportLists/ImportLists/EditImportListModalConnector';
|
||||||
|
import translate from 'Utilities/String/translate';
|
||||||
import styles from '../MovieCreditPoster.css';
|
import styles from '../MovieCreditPoster.css';
|
||||||
|
|
||||||
class MovieCrewPoster extends Component {
|
class MovieCrewPoster extends Component {
|
||||||
@ -52,6 +58,7 @@ class MovieCrewPoster extends Component {
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
|
tmdbId,
|
||||||
personName,
|
personName,
|
||||||
job,
|
job,
|
||||||
images,
|
images,
|
||||||
@ -83,15 +90,35 @@ class MovieCrewPoster extends Component {
|
|||||||
style={contentStyle}
|
style={contentStyle}
|
||||||
>
|
>
|
||||||
<div className={styles.posterContainer}>
|
<div className={styles.posterContainer}>
|
||||||
<div className={styles.controls}>
|
<div className={styles.toggleMonitoredContainer}>
|
||||||
<MonitorToggleButton
|
<MonitorToggleButton
|
||||||
className={styles.action}
|
className={styles.monitorToggleButton}
|
||||||
monitored={monitored}
|
monitored={monitored}
|
||||||
size={20}
|
size={20}
|
||||||
onPress={importListId > 0 ? this.onEditImportListPress : this.onAddImportListPress}
|
onPress={importListId > 0 ? this.onEditImportListPress : this.onAddImportListPress}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<Label className={styles.controls}>
|
||||||
|
<span className={styles.externalLinks}>
|
||||||
|
<Popover
|
||||||
|
anchor={<Icon name={icons.EXTERNAL_LINK} size={12} />}
|
||||||
|
title={translate('Links')}
|
||||||
|
body={
|
||||||
|
<Link to={`https://www.themoviedb.org/person/${tmdbId}`}>
|
||||||
|
<Label
|
||||||
|
className={styles.externalLinkLabel}
|
||||||
|
kind={kinds.INFO}
|
||||||
|
size={sizes.LARGE}
|
||||||
|
>
|
||||||
|
{translate('TMDb')}
|
||||||
|
</Label>
|
||||||
|
</Link>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</Label>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
style={elementStyle}
|
style={elementStyle}
|
||||||
>
|
>
|
||||||
|
@ -1,13 +1,17 @@
|
|||||||
$hoverScale: 1.05;
|
$hoverScale: 1.05;
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
border-radius: '5px';
|
|
||||||
transition: all 200ms ease-in;
|
transition: all 200ms ease-in;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
box-shadow: 0 0 12px var(--black);
|
box-shadow: 0 0 12px var(--black);
|
||||||
transition: all 200ms ease-in;
|
transition: all 200ms ease-in;
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
opacity: 0.9;
|
||||||
|
transition: opacity 200ms linear 150ms;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -44,13 +48,13 @@ $hoverScale: 1.05;
|
|||||||
font-size: $smallFontSize;
|
font-size: $smallFontSize;
|
||||||
}
|
}
|
||||||
|
|
||||||
.controls {
|
.toggleMonitoredContainer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action {
|
.monitorToggleButton {
|
||||||
composes: toggleButton from '~Components/MonitorToggleButton.css';
|
composes: toggleButton from '~Components/MonitorToggleButton.css';
|
||||||
|
|
||||||
width: 25px;
|
width: 25px;
|
||||||
@ -61,8 +65,39 @@ $hoverScale: 1.05;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10px;
|
||||||
|
left: 10px;
|
||||||
|
z-index: 3;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #707070;
|
||||||
|
color: var(--white);
|
||||||
|
font-size: $smallFontSize;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action {
|
||||||
|
composes: button from '~Components/Link/IconButton.css';
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--iconButtonHoverLightColor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: $breakpointSmall) {
|
@media only screen and (max-width: $breakpointSmall) {
|
||||||
.container {
|
.container {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.externalLinks {
|
||||||
|
margin: 0 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.externalLinkLabel {
|
||||||
|
composes: label from '~Components/Label.css';
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
@ -5,10 +5,14 @@ interface CssExports {
|
|||||||
'container': string;
|
'container': string;
|
||||||
'content': string;
|
'content': string;
|
||||||
'controls': string;
|
'controls': string;
|
||||||
|
'externalLinkLabel': string;
|
||||||
|
'externalLinks': string;
|
||||||
|
'monitorToggleButton': string;
|
||||||
'overlayTitle': string;
|
'overlayTitle': string;
|
||||||
'poster': string;
|
'poster': string;
|
||||||
'posterContainer': string;
|
'posterContainer': string;
|
||||||
'title': string;
|
'title': string;
|
||||||
|
'toggleMonitoredContainer': string;
|
||||||
}
|
}
|
||||||
export const cssExports: CssExports;
|
export const cssExports: CssExports;
|
||||||
export default cssExports;
|
export default cssExports;
|
||||||
|
Loading…
Reference in New Issue
Block a user