diff --git a/frontend/src/Movie/Details/Credits/Cast/MovieCastPoster.js b/frontend/src/Movie/Details/Credits/Cast/MovieCastPoster.js index 381d3b2fb..e1cebf9f7 100644 --- a/frontend/src/Movie/Details/Credits/Cast/MovieCastPoster.js +++ b/frontend/src/Movie/Details/Credits/Cast/MovieCastPoster.js @@ -1,8 +1,14 @@ import PropTypes from 'prop-types'; 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 Popover from 'Components/Tooltip/Popover'; +import { icons, kinds, sizes } from 'Helpers/Props'; import MovieHeadshot from 'Movie/MovieHeadshot'; import EditImportListModalConnector from 'Settings/ImportLists/ImportLists/EditImportListModalConnector'; +import translate from 'Utilities/String/translate'; import styles from '../MovieCreditPoster.css'; class MovieCastPoster extends Component { @@ -52,6 +58,7 @@ class MovieCastPoster extends Component { render() { const { + tmdbId, personName, character, images, @@ -83,15 +90,35 @@ class MovieCastPoster extends Component { style={contentStyle} >
-
+
0 ? this.onEditImportListPress : this.onAddImportListPress} />
+ +
diff --git a/frontend/src/Movie/Details/Credits/Crew/MovieCrewPoster.js b/frontend/src/Movie/Details/Credits/Crew/MovieCrewPoster.js index 2cb5d9185..284d30637 100644 --- a/frontend/src/Movie/Details/Credits/Crew/MovieCrewPoster.js +++ b/frontend/src/Movie/Details/Credits/Crew/MovieCrewPoster.js @@ -1,8 +1,14 @@ import PropTypes from 'prop-types'; 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 Popover from 'Components/Tooltip/Popover'; +import { icons, kinds, sizes } from 'Helpers/Props'; import MovieHeadshot from 'Movie/MovieHeadshot'; import EditImportListModalConnector from 'Settings/ImportLists/ImportLists/EditImportListModalConnector'; +import translate from 'Utilities/String/translate'; import styles from '../MovieCreditPoster.css'; class MovieCrewPoster extends Component { @@ -52,6 +58,7 @@ class MovieCrewPoster extends Component { render() { const { + tmdbId, personName, job, images, @@ -83,15 +90,35 @@ class MovieCrewPoster extends Component { style={contentStyle} >
-
+
0 ? this.onEditImportListPress : this.onAddImportListPress} />
+ +
diff --git a/frontend/src/Movie/Details/Credits/MovieCreditPoster.css b/frontend/src/Movie/Details/Credits/MovieCreditPoster.css index 0b9bfeea9..4b9587427 100644 --- a/frontend/src/Movie/Details/Credits/MovieCreditPoster.css +++ b/frontend/src/Movie/Details/Credits/MovieCreditPoster.css @@ -1,13 +1,17 @@ $hoverScale: 1.05; .content { - border-radius: '5px'; transition: all 200ms ease-in; &:hover { z-index: 2; box-shadow: 0 0 12px var(--black); transition: all 200ms ease-in; + + .controls { + opacity: 0.9; + transition: opacity 200ms linear 150ms; + } } } @@ -44,13 +48,13 @@ $hoverScale: 1.05; font-size: $smallFontSize; } -.controls { +.toggleMonitoredContainer { position: absolute; top: 10px; z-index: 3; } -.action { +.monitorToggleButton { composes: toggleButton from '~Components/MonitorToggleButton.css'; 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) { .container { padding: 5px; } } + +.externalLinks { + margin: 0 2px; +} + +.externalLinkLabel { + composes: label from '~Components/Label.css'; + + cursor: pointer; +} diff --git a/frontend/src/Movie/Details/Credits/MovieCreditPoster.css.d.ts b/frontend/src/Movie/Details/Credits/MovieCreditPoster.css.d.ts index d23790117..4a2587043 100644 --- a/frontend/src/Movie/Details/Credits/MovieCreditPoster.css.d.ts +++ b/frontend/src/Movie/Details/Credits/MovieCreditPoster.css.d.ts @@ -5,10 +5,14 @@ interface CssExports { 'container': string; 'content': string; 'controls': string; + 'externalLinkLabel': string; + 'externalLinks': string; + 'monitorToggleButton': string; 'overlayTitle': string; 'poster': string; 'posterContainer': string; 'title': string; + 'toggleMonitoredContainer': string; } export const cssExports: CssExports; export default cssExports;