From 155b8f774b976f9fa5e97a4c6aae066beac2b66d Mon Sep 17 00:00:00 2001 From: Qstick Date: Wed, 16 Mar 2022 21:14:09 -0500 Subject: [PATCH] New: Rework Movie Details view --- .../Collection/Overview/CollectionOverview.js | 18 +- frontend/src/Components/Carousel.js | 37 ++++ ...earchContent.css => InteractiveSearch.css} | 0 ...eSearchContent.js => InteractiveSearch.js} | 90 ++++++---- ...ector.js => InteractiveSearchConnector.js} | 10 +- .../InteractiveSearchRow.css | 37 ++-- .../InteractiveSearch/InteractiveSearchRow.js | 80 ++++----- .../InteractiveSearchTable.js | 16 -- .../Details/Credits/Cast/MovieCastPoster.js | 3 +- .../Details/Credits/Crew/MovieCrewPoster.js | 3 +- .../Details/Credits/MovieCreditPoster.css | 1 + .../Details/Credits/MovieCreditPosters.css | 4 + .../Details/Credits/MovieCreditPosters.js | 71 +++----- .../Movie/Details/MovieAlternateTitles.css | 3 - .../src/Movie/Details/MovieAlternateTitles.js | 28 --- frontend/src/Movie/Details/MovieDetails.css | 7 +- frontend/src/Movie/Details/MovieDetails.js | 159 +++++++----------- .../Movie/Details/Titles/MovieTitlesTable.css | 9 + .../Movie/Details/Titles/MovieTitlesTable.js | 9 +- .../src/Movie/History/MovieHistoryTable.css | 9 + .../src/Movie/History/MovieHistoryTable.js | 9 +- .../Search/MovieInteractiveSearchModal.js | 35 ++++ .../MovieInteractiveSearchModalConnector.js | 15 ++ .../MovieInteractiveSearchModalContent.js | 45 +++++ .../MovieFile/Editor/MovieFileEditorTable.css | 1 - 25 files changed, 384 insertions(+), 315 deletions(-) create mode 100644 frontend/src/Components/Carousel.js rename frontend/src/InteractiveSearch/{InteractiveSearchContent.css => InteractiveSearch.css} (100%) rename frontend/src/InteractiveSearch/{InteractiveSearchContent.js => InteractiveSearch.js} (70%) rename frontend/src/InteractiveSearch/{InteractiveSearchContentConnector.js => InteractiveSearchConnector.js} (90%) delete mode 100644 frontend/src/InteractiveSearch/InteractiveSearchTable.js delete mode 100644 frontend/src/Movie/Details/MovieAlternateTitles.css delete mode 100644 frontend/src/Movie/Details/MovieAlternateTitles.js create mode 100644 frontend/src/Movie/Details/Titles/MovieTitlesTable.css create mode 100644 frontend/src/Movie/History/MovieHistoryTable.css create mode 100644 frontend/src/Movie/Search/MovieInteractiveSearchModal.js create mode 100644 frontend/src/Movie/Search/MovieInteractiveSearchModalConnector.js create mode 100644 frontend/src/Movie/Search/MovieInteractiveSearchModalContent.js diff --git a/frontend/src/Collection/Overview/CollectionOverview.js b/frontend/src/Collection/Overview/CollectionOverview.js index 1931140ef..1e2811f12 100644 --- a/frontend/src/Collection/Overview/CollectionOverview.js +++ b/frontend/src/Collection/Overview/CollectionOverview.js @@ -1,8 +1,8 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; -import Slider from 'react-slick'; import TextTruncate from 'react-text-truncate'; import EditCollectionModalConnector from 'Collection/Edit/EditCollectionModalConnector'; +import Carousel from 'Components/Carousel'; import CheckInput from 'Components/Form/CheckInput'; import Icon from 'Components/Icon'; import Label from 'Components/Label'; @@ -16,9 +16,6 @@ import translate from 'Utilities/String/translate'; import CollectionMovieConnector from './CollectionMovieConnector'; import styles from './CollectionOverview.css'; -import 'slick-carousel/slick/slick.css'; -import 'slick-carousel/slick/slick-theme.css'; - const columnPadding = parseInt(dimensions.movieIndexColumnPadding); const columnPaddingSmallScreen = parseInt(dimensions.movieIndexColumnPaddingSmallScreen); const defaultFontSize = parseInt(fonts.defaultFontSize); @@ -118,15 +115,6 @@ class CollectionOverview extends Component { const contentHeight = getContentHeight(rowHeight, isSmallScreen); const overviewHeight = contentHeight - titleRowHeight - posterHeight; - const sliderSettings = { - arrows: false, - dots: false, - infinite: false, - slidesToShow: 1, - slidesToScroll: 1, - variableWidth: true - }; - return (
@@ -262,7 +250,7 @@ class CollectionOverview extends Component { }
- + {movies.map((movie) => (
))} - +
diff --git a/frontend/src/Components/Carousel.js b/frontend/src/Components/Carousel.js new file mode 100644 index 000000000..13077c4d4 --- /dev/null +++ b/frontend/src/Components/Carousel.js @@ -0,0 +1,37 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import Slider from 'react-slick'; +import styles from './Alert.css'; + +import 'slick-carousel/slick/slick.css'; +import 'slick-carousel/slick/slick-theme.css'; + +function Carousel({ className, setRef, children, ...otherProps }) { + + const sliderSettings = { + arrows: false, + dots: false, + infinite: false, + slidesToShow: 1, + slidesToScroll: 1, + variableWidth: true + }; + + return ( + + {children} + + ); +} + +Carousel.propTypes = { + className: PropTypes.string.isRequired, + setRef: PropTypes.func.isRequired, + children: PropTypes.node.isRequired +}; + +Carousel.defaultProps = { + className: styles.alert +}; + +export default Carousel; diff --git a/frontend/src/InteractiveSearch/InteractiveSearchContent.css b/frontend/src/InteractiveSearch/InteractiveSearch.css similarity index 100% rename from frontend/src/InteractiveSearch/InteractiveSearchContent.css rename to frontend/src/InteractiveSearch/InteractiveSearch.css diff --git a/frontend/src/InteractiveSearch/InteractiveSearchContent.js b/frontend/src/InteractiveSearch/InteractiveSearch.js similarity index 70% rename from frontend/src/InteractiveSearch/InteractiveSearchContent.js rename to frontend/src/InteractiveSearch/InteractiveSearch.js index 56f58c0c5..993866047 100644 --- a/frontend/src/InteractiveSearch/InteractiveSearchContent.js +++ b/frontend/src/InteractiveSearch/InteractiveSearch.js @@ -2,12 +2,15 @@ import PropTypes from 'prop-types'; import React from 'react'; import Icon from 'Components/Icon'; import LoadingIndicator from 'Components/Loading/LoadingIndicator'; +import FilterMenu from 'Components/Menu/FilterMenu'; +import PageMenuButton from 'Components/Menu/PageMenuButton'; import Table from 'Components/Table/Table'; import TableBody from 'Components/Table/TableBody'; -import { icons, sortDirections } from 'Helpers/Props'; +import { align, icons, sortDirections } from 'Helpers/Props'; import translate from 'Utilities/String/translate'; +import InteractiveSearchFilterModalConnector from './InteractiveSearchFilterModalConnector'; import InteractiveSearchRowConnector from './InteractiveSearchRowConnector'; -import styles from './InteractiveSearchContent.css'; +import styles from './InteractiveSearch.css'; const columns = [ { @@ -22,20 +25,6 @@ const columns = [ isSortable: true, isVisible: true }, - { - name: 'releaseWeight', - label: React.createElement(Icon, { name: icons.DOWNLOAD }), - isSortable: true, - fixedSortDirection: sortDirections.ASCENDING, - isVisible: true - }, - { - name: 'rejections', - label: React.createElement(Icon, { name: icons.DANGER }), - isSortable: true, - fixedSortDirection: sortDirections.ASCENDING, - isVisible: true - }, { name: 'title', label: translate('Title'), @@ -99,10 +88,24 @@ const columns = [ label: React.createElement(Icon, { name: icons.FLAG }), isSortable: true, isVisible: true + }, + { + name: 'rejections', + label: React.createElement(Icon, { name: icons.DANGER }), + isSortable: true, + fixedSortDirection: sortDirections.ASCENDING, + isVisible: true + }, + { + name: 'releaseWeight', + label: React.createElement(Icon, { name: icons.DOWNLOAD }), + isSortable: true, + fixedSortDirection: sortDirections.ASCENDING, + isVisible: true } ]; -function InteractiveSearchContent(props) { +function InteractiveSearch(props) { const { searchPayload, isFetching, @@ -110,44 +113,63 @@ function InteractiveSearchContent(props) { error, totalReleasesCount, items, + selectedFilterKey, + filters, + customFilters, sortKey, sortDirection, longDateFormat, timeFormat, onSortPress, + onFilterSelect, onGrabPress } = props; return (
+
+ +
+ { - isFetching && - + isFetching ? : null } { - !isFetching && !!error && + !isFetching && error ?
{translate('UnableToLoadResultsIntSearch')} -
+
: + null } { - !isFetching && isPopulated && !totalReleasesCount && + !isFetching && isPopulated && !totalReleasesCount ?
{translate('NoResultsFound')} -
+ : + null } { - !!totalReleasesCount && isPopulated && !items.length && + !!totalReleasesCount && isPopulated && !items.length ?
{translate('AllResultsHiddenFilter')} -
+ : + null } { - isPopulated && !!items.length && + isPopulated && !!items.length ? -
+ : + null } { - totalReleasesCount !== items.length && !!items.length && + totalReleasesCount !== items.length && !!items.length ?
{translate('SomeResultsHiddenFilter')} -
+ : + null } ); } -InteractiveSearchContent.propTypes = { +InteractiveSearch.propTypes = { searchPayload: PropTypes.object.isRequired, isFetching: PropTypes.bool.isRequired, isPopulated: PropTypes.bool.isRequired, error: PropTypes.object, totalReleasesCount: PropTypes.number.isRequired, items: PropTypes.arrayOf(PropTypes.object).isRequired, + selectedFilterKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, + filters: PropTypes.arrayOf(PropTypes.object).isRequired, + customFilters: PropTypes.arrayOf(PropTypes.object).isRequired, sortKey: PropTypes.string, sortDirection: PropTypes.string, longDateFormat: PropTypes.string.isRequired, timeFormat: PropTypes.string.isRequired, onSortPress: PropTypes.func.isRequired, + onFilterSelect: PropTypes.func.isRequired, onGrabPress: PropTypes.func.isRequired }; -export default InteractiveSearchContent; +export default InteractiveSearch; diff --git a/frontend/src/InteractiveSearch/InteractiveSearchContentConnector.js b/frontend/src/InteractiveSearch/InteractiveSearchConnector.js similarity index 90% rename from frontend/src/InteractiveSearch/InteractiveSearchContentConnector.js rename to frontend/src/InteractiveSearch/InteractiveSearchConnector.js index f4432d9e3..7b8cd2c04 100644 --- a/frontend/src/InteractiveSearch/InteractiveSearchContentConnector.js +++ b/frontend/src/InteractiveSearch/InteractiveSearchConnector.js @@ -5,7 +5,7 @@ import { createSelector } from 'reselect'; import * as releaseActions from 'Store/Actions/releaseActions'; import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector'; import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector'; -import InteractiveSearchContent from './InteractiveSearchContent'; +import InteractiveSearch from './InteractiveSearch'; function createMapStateToProps(appState) { return createSelector( @@ -48,7 +48,7 @@ function createMapDispatchToProps(dispatch, props) { }; } -class InteractiveSearchContentConnector extends Component { +class InteractiveSearchConnector extends Component { // // Lifecycle @@ -79,18 +79,18 @@ class InteractiveSearchContentConnector extends Component { return ( - ); } } -InteractiveSearchContentConnector.propTypes = { +InteractiveSearchConnector.propTypes = { searchPayload: PropTypes.object.isRequired, isPopulated: PropTypes.bool.isRequired, dispatchFetchReleases: PropTypes.func.isRequired, dispatchClearReleases: PropTypes.func.isRequired }; -export default connect(createMapStateToProps, createMapDispatchToProps)(InteractiveSearchContentConnector); +export default connect(createMapStateToProps, createMapDispatchToProps)(InteractiveSearchConnector); diff --git a/frontend/src/InteractiveSearch/InteractiveSearchRow.css b/frontend/src/InteractiveSearch/InteractiveSearchRow.css index 6545102ca..1cf5f0e26 100644 --- a/frontend/src/InteractiveSearch/InteractiveSearchRow.css +++ b/frontend/src/InteractiveSearch/InteractiveSearchRow.css @@ -1,15 +1,20 @@ -.cell { +.protocol { composes: cell from '~Components/Table/Cells/TableRowCell.css'; + + width: 80px; } -.protocol { - composes: cell; +.title { + composes: cell from '~Components/Table/Cells/TableRowCell.css'; - width: 80px; + display: flex; + align-items: center; + justify-content: space-between; + word-break: break-all; } .indexer { - composes: cell; + composes: cell from '~Components/Table/Cells/TableRowCell.css'; width: 85px; } @@ -17,7 +22,9 @@ .quality, .customFormat, .language { - composes: cell; + composes: cell from '~Components/Table/Cells/TableRowCell.css'; + + text-align: center; } .language { @@ -25,7 +32,7 @@ } .customFormatScore { - composes: cell; + composes: cell from '~Components/Table/Cells/TableRowCell.css'; width: 55px; font-weight: bold; @@ -35,34 +42,26 @@ .rejected, .indexerFlags, .download { - composes: cell; + composes: cell from '~Components/Table/Cells/TableRowCell.css'; width: 50px; } .age, .size { - composes: cell; + composes: cell from '~Components/Table/Cells/TableRowCell.css'; white-space: nowrap; } .peers { - composes: cell; + composes: cell from '~Components/Table/Cells/TableRowCell.css'; width: 75px; } -.title { - composes: cell; -} - -.title div { - overflow-wrap: break-word; -} - .history { - composes: cell; + composes: cell from '~Components/Table/Cells/TableRowCell.css'; width: 75px; } diff --git a/frontend/src/InteractiveSearch/InteractiveSearchRow.js b/frontend/src/InteractiveSearch/InteractiveSearchRow.js index 5b7cc6c6f..92699e8ac 100644 --- a/frontend/src/InteractiveSearch/InteractiveSearchRow.js +++ b/frontend/src/InteractiveSearch/InteractiveSearchRow.js @@ -145,46 +145,6 @@ class InteractiveSearchRow extends Component { {formatAge(age, ageHours, ageMinutes)} - - - - - - { - !!rejections.length && - - } - title={translate('ReleaseRejected')} - body={ -
    - { - rejections.map((rejection, index) => { - return ( -
  • - {rejection} -
    • - ); - }) - } -
- } - position={tooltipPositions.BOTTOM} - /> - } - - + + { + !!rejections.length && + + } + title={translate('ReleaseRejected')} + body={ +
    + { + rejections.map((rejection, index) => { + return ( +
  • + {rejection} +
    • + ); + }) + } +
+ } + position={tooltipPositions.LEFT} + /> + } + + + + + + - ); -} - -InteractiveSearchTable.propTypes = { -}; - -export default InteractiveSearchTable; diff --git a/frontend/src/Movie/Details/Credits/Cast/MovieCastPoster.js b/frontend/src/Movie/Details/Credits/Cast/MovieCastPoster.js index 1898e094c..028b0a807 100644 --- a/frontend/src/Movie/Details/Credits/Cast/MovieCastPoster.js +++ b/frontend/src/Movie/Details/Credits/Cast/MovieCastPoster.js @@ -69,7 +69,8 @@ class MovieCastPoster extends Component { const elementStyle = { width: `${posterWidth}px`, - height: `${posterHeight}px` + height: `${posterHeight}px`, + borderRadius: '5px' }; const contentStyle = { diff --git a/frontend/src/Movie/Details/Credits/Crew/MovieCrewPoster.js b/frontend/src/Movie/Details/Credits/Crew/MovieCrewPoster.js index 7831114a2..f27131171 100644 --- a/frontend/src/Movie/Details/Credits/Crew/MovieCrewPoster.js +++ b/frontend/src/Movie/Details/Credits/Crew/MovieCrewPoster.js @@ -69,7 +69,8 @@ class MovieCrewPoster extends Component { const elementStyle = { width: `${posterWidth}px`, - height: `${posterHeight}px` + height: `${posterHeight}px`, + borderRadius: '5px' }; const contentStyle = { diff --git a/frontend/src/Movie/Details/Credits/MovieCreditPoster.css b/frontend/src/Movie/Details/Credits/MovieCreditPoster.css index 3c0d27827..d5589304e 100644 --- a/frontend/src/Movie/Details/Credits/MovieCreditPoster.css +++ b/frontend/src/Movie/Details/Credits/MovieCreditPoster.css @@ -1,6 +1,7 @@ $hoverScale: 1.05; .content { + border-radius: 5px; transition: all 200ms ease-in; &:hover { diff --git a/frontend/src/Movie/Details/Credits/MovieCreditPosters.css b/frontend/src/Movie/Details/Credits/MovieCreditPosters.css index d80f951a0..2bd05a5e0 100644 --- a/frontend/src/Movie/Details/Credits/MovieCreditPosters.css +++ b/frontend/src/Movie/Details/Credits/MovieCreditPosters.css @@ -2,6 +2,10 @@ flex: 1 0 auto; } +.movie { + padding: 10px; +} + .container { padding: 10px; } diff --git a/frontend/src/Movie/Details/Credits/MovieCreditPosters.js b/frontend/src/Movie/Details/Credits/MovieCreditPosters.js index 7815da3ca..57e2a49d0 100644 --- a/frontend/src/Movie/Details/Credits/MovieCreditPosters.js +++ b/frontend/src/Movie/Details/Credits/MovieCreditPosters.js @@ -1,7 +1,6 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; -import { Grid, WindowScroller } from 'react-virtualized'; -import Measure from 'Components/Measure'; +import Carousel from 'Components/Carousel'; import dimensions from 'Styles/Variables/dimensions'; import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder'; import MovieCreditPosterConnector from './MovieCreditPosterConnector'; @@ -169,56 +168,36 @@ class MovieCreditPosters extends Component { render() { const { - items + items, + itemComponent } = this.props; const { - width, - columnWidth, - columnCount, - rowHeight + posterWidth, + posterHeight } = this.state; - const rowCount = Math.ceil(items.length / columnCount); - return ( - - - {({ height, registerChild, onChildScroll, scrollTop }) => { - if (!height) { - return
; - } - - return ( -
- -
- ); - } - } - - + +
+ + {items.map((movie) => ( +
+ +
+ ))} + +
); } } diff --git a/frontend/src/Movie/Details/MovieAlternateTitles.css b/frontend/src/Movie/Details/MovieAlternateTitles.css deleted file mode 100644 index 1af1ae68b..000000000 --- a/frontend/src/Movie/Details/MovieAlternateTitles.css +++ /dev/null @@ -1,3 +0,0 @@ -.alternateTitle { - white-space: nowrap; -} diff --git a/frontend/src/Movie/Details/MovieAlternateTitles.js b/frontend/src/Movie/Details/MovieAlternateTitles.js deleted file mode 100644 index 5b0fdaeaa..000000000 --- a/frontend/src/Movie/Details/MovieAlternateTitles.js +++ /dev/null @@ -1,28 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import styles from './MovieAlternateTitles.css'; - -function MovieAlternateTitles({ alternateTitles }) { - return ( -
    - { - alternateTitles.filter((x, i, a) => a.indexOf(x) === i).map((alternateTitle) => { - return ( -
  • - {alternateTitle} -
    • - ); - }) - } -
- ); -} - -MovieAlternateTitles.propTypes = { - alternateTitles: PropTypes.arrayOf(PropTypes.string).isRequired -}; - -export default MovieAlternateTitles; diff --git a/frontend/src/Movie/Details/MovieDetails.css b/frontend/src/Movie/Details/MovieDetails.css index 4b1ed1441..35cf5d055 100644 --- a/frontend/src/Movie/Details/MovieDetails.css +++ b/frontend/src/Movie/Details/MovieDetails.css @@ -5,7 +5,7 @@ .header { position: relative; width: 100%; - height: 375px; + height: 425px; } .errorMessage { @@ -39,10 +39,11 @@ } .poster { + z-index: 2; flex-shrink: 0; margin-right: 35px; - width: 217px; - height: 319px; + width: 250px; + height: 368px; } .info { diff --git a/frontend/src/Movie/Details/MovieDetails.js b/frontend/src/Movie/Details/MovieDetails.js index bc9a3577f..09a402d3d 100644 --- a/frontend/src/Movie/Details/MovieDetails.js +++ b/frontend/src/Movie/Details/MovieDetails.js @@ -1,8 +1,8 @@ import _ from 'lodash'; import PropTypes from 'prop-types'; import React, { Component } from 'react'; -import { Tab, TabList, TabPanel, Tabs } from 'react-tabs'; import TextTruncate from 'react-text-truncate'; +import FieldSet from 'Components/FieldSet'; import Icon from 'Components/Icon'; import ImdbRating from 'Components/ImdbRating'; import InfoLabel from 'Components/InfoLabel'; @@ -22,12 +22,11 @@ import Popover from 'Components/Tooltip/Popover'; import Tooltip from 'Components/Tooltip/Tooltip'; import { icons, kinds, sizes, tooltipPositions } from 'Helpers/Props'; import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal'; -import InteractiveSearchFilterMenuConnector from 'InteractiveSearch/InteractiveSearchFilterMenuConnector'; -import InteractiveSearchTable from 'InteractiveSearch/InteractiveSearchTable'; import DeleteMovieModal from 'Movie/Delete/DeleteMovieModal'; import EditMovieModalConnector from 'Movie/Edit/EditMovieModalConnector'; import MovieHistoryTable from 'Movie/History/MovieHistoryTable'; import MoviePoster from 'Movie/MoviePoster'; +import MovieInteractiveSearchModalConnector from 'Movie/Search/MovieInteractiveSearchModalConnector'; import MovieFileEditorTable from 'MovieFile/Editor/MovieFileEditorTable'; import ExtraFileTable from 'MovieFile/Extras/ExtraFileTable'; import OrganizePreviewModalConnector from 'Organize/OrganizePreviewModalConnector'; @@ -81,10 +80,10 @@ class MovieDetails extends Component { isEditMovieModalOpen: false, isDeleteMovieModalOpen: false, isInteractiveImportModalOpen: false, + isInteractiveSearchModalOpen: false, allExpanded: false, allCollapsed: false, expandedState: {}, - selectedTabIndex: 0, overviewHeight: 0, titleWidth: 0 }; @@ -137,6 +136,14 @@ class MovieDetails extends Component { this.setState({ isEditMovieModalOpen: false }); }; + onInteractiveSearchPress = () => { + this.setState({ isInteractiveSearchModalOpen: true }); + }; + + onInteractiveSearchModalClose = () => { + this.setState({ isInteractiveSearchModalOpen: false }); + }; + onDeleteMoviePress = () => { this.setState({ isEditMovieModalOpen: false, @@ -298,9 +305,9 @@ class MovieDetails extends Component { isEditMovieModalOpen, isDeleteMovieModalOpen, isInteractiveImportModalOpen, + isInteractiveSearchModalOpen, overviewHeight, - titleWidth, - selectedTabIndex + titleWidth } = this.state; const marqueeWidth = isSmallScreen ? titleWidth : (titleWidth - 150); @@ -326,6 +333,14 @@ class MovieDetails extends Component { onPress={onSearchPress} /> + + } - - - - {translate('History')} - - - - {translate('Search')} - - - - {translate('Files')} - - - - {translate('Titles')} - - - - {translate('Cast')} - - - - {translate('Crew')} - - - { - selectedTabIndex === 1 && -
- -
- } - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+ +
+
+ + + +
+ +
+ +
+ +
+ +
+ +
+ +
+ + ); diff --git a/frontend/src/Movie/Details/Titles/MovieTitlesTable.css b/frontend/src/Movie/Details/Titles/MovieTitlesTable.css new file mode 100644 index 000000000..a2074b388 --- /dev/null +++ b/frontend/src/Movie/Details/Titles/MovieTitlesTable.css @@ -0,0 +1,9 @@ +.container { + border: 1px solid $borderColor; + border-radius: 4px; + background-color: $white; + + &:last-of-type { + margin-bottom: 0; + } +} diff --git a/frontend/src/Movie/Details/Titles/MovieTitlesTable.js b/frontend/src/Movie/Details/Titles/MovieTitlesTable.js index 9223a7585..1309de519 100644 --- a/frontend/src/Movie/Details/Titles/MovieTitlesTable.js +++ b/frontend/src/Movie/Details/Titles/MovieTitlesTable.js @@ -1,5 +1,6 @@ import React from 'react'; import MovieTitlesTableContentConnector from './MovieTitlesTableContentConnector'; +import styles from './MovieTitlesTable.css'; function MovieTitlesTable(props) { const { @@ -7,9 +8,11 @@ function MovieTitlesTable(props) { } = props; return ( - +
+ +
); } diff --git a/frontend/src/Movie/History/MovieHistoryTable.css b/frontend/src/Movie/History/MovieHistoryTable.css new file mode 100644 index 000000000..a2074b388 --- /dev/null +++ b/frontend/src/Movie/History/MovieHistoryTable.css @@ -0,0 +1,9 @@ +.container { + border: 1px solid $borderColor; + border-radius: 4px; + background-color: $white; + + &:last-of-type { + margin-bottom: 0; + } +} diff --git a/frontend/src/Movie/History/MovieHistoryTable.js b/frontend/src/Movie/History/MovieHistoryTable.js index f5cfd2404..e07bfa561 100644 --- a/frontend/src/Movie/History/MovieHistoryTable.js +++ b/frontend/src/Movie/History/MovieHistoryTable.js @@ -1,5 +1,6 @@ import React from 'react'; import MovieHistoryTableContentConnector from './MovieHistoryTableContentConnector'; +import styles from './MovieHistoryTable.css'; function MovieHistoryTable(props) { const { @@ -7,9 +8,11 @@ function MovieHistoryTable(props) { } = props; return ( - +
+ +
); } diff --git a/frontend/src/Movie/Search/MovieInteractiveSearchModal.js b/frontend/src/Movie/Search/MovieInteractiveSearchModal.js new file mode 100644 index 000000000..ec8987dfa --- /dev/null +++ b/frontend/src/Movie/Search/MovieInteractiveSearchModal.js @@ -0,0 +1,35 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import Modal from 'Components/Modal/Modal'; +import { sizes } from 'Helpers/Props'; +import MovieInteractiveSearchModalContent from './MovieInteractiveSearchModalContent'; + +function MovieInteractiveSearchModal(props) { + const { + isOpen, + movieId, + onModalClose + } = props; + + return ( + + + + ); +} + +MovieInteractiveSearchModal.propTypes = { + isOpen: PropTypes.bool.isRequired, + movieId: PropTypes.number.isRequired, + onModalClose: PropTypes.func.isRequired +}; + +export default MovieInteractiveSearchModal; diff --git a/frontend/src/Movie/Search/MovieInteractiveSearchModalConnector.js b/frontend/src/Movie/Search/MovieInteractiveSearchModalConnector.js new file mode 100644 index 000000000..f00b1cb4d --- /dev/null +++ b/frontend/src/Movie/Search/MovieInteractiveSearchModalConnector.js @@ -0,0 +1,15 @@ +import { connect } from 'react-redux'; +import { cancelFetchReleases, clearReleases } from 'Store/Actions/releaseActions'; +import MovieInteractiveSearchModal from './MovieInteractiveSearchModal'; + +function createMapDispatchToProps(dispatch, props) { + return { + onModalClose() { + dispatch(cancelFetchReleases()); + dispatch(clearReleases()); + props.onModalClose(); + } + }; +} + +export default connect(null, createMapDispatchToProps)(MovieInteractiveSearchModal); diff --git a/frontend/src/Movie/Search/MovieInteractiveSearchModalContent.js b/frontend/src/Movie/Search/MovieInteractiveSearchModalContent.js new file mode 100644 index 000000000..ff85b10ed --- /dev/null +++ b/frontend/src/Movie/Search/MovieInteractiveSearchModalContent.js @@ -0,0 +1,45 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import Button from 'Components/Link/Button'; +import ModalBody from 'Components/Modal/ModalBody'; +import ModalContent from 'Components/Modal/ModalContent'; +import ModalFooter from 'Components/Modal/ModalFooter'; +import ModalHeader from 'Components/Modal/ModalHeader'; +import { scrollDirections } from 'Helpers/Props'; +import InteractiveSearchConnector from 'InteractiveSearch/InteractiveSearchConnector'; + +function MovieInteractiveSearchModalContent(props) { + const { + movieId, + onModalClose + } = props; + + return ( + + + Interactive Search + + + + + + + + + + + ); +} + +MovieInteractiveSearchModalContent.propTypes = { + movieId: PropTypes.number.isRequired, + onModalClose: PropTypes.func.isRequired +}; + +export default MovieInteractiveSearchModalContent; diff --git a/frontend/src/MovieFile/Editor/MovieFileEditorTable.css b/frontend/src/MovieFile/Editor/MovieFileEditorTable.css index 50d1a9e93..a2074b388 100644 --- a/frontend/src/MovieFile/Editor/MovieFileEditorTable.css +++ b/frontend/src/MovieFile/Editor/MovieFileEditorTable.css @@ -1,5 +1,4 @@ .container { - margin-top: 20px; border: 1px solid $borderColor; border-radius: 4px; background-color: $white;