diff --git a/frontend/src/Components/Menu/PageMenuButton.css b/frontend/src/Components/Menu/PageMenuButton.css index f207d5232..d979a1708 100644 --- a/frontend/src/Components/Menu/PageMenuButton.css +++ b/frontend/src/Components/Menu/PageMenuButton.css @@ -6,12 +6,6 @@ } } -.indicatorContainer { - position: absolute; - top: 10px; - right: 12px; -} - .label { margin-left: 5px; } diff --git a/frontend/src/Components/Menu/PageMenuButton.js b/frontend/src/Components/Menu/PageMenuButton.js index 29e7abfd3..76c5591b8 100644 --- a/frontend/src/Components/Menu/PageMenuButton.js +++ b/frontend/src/Components/Menu/PageMenuButton.js @@ -1,7 +1,5 @@ import PropTypes from 'prop-types'; import React from 'react'; -import classNames from 'classnames'; -import { icons } from 'Helpers/Props'; import Icon from 'Components/Icon'; import MenuButton from 'Components/Menu/MenuButton'; import styles from './PageMenuButton.css'; @@ -9,8 +7,8 @@ import styles from './PageMenuButton.css'; function PageMenuButton(props) { const { iconName, - text, indicator, + text, ...otherProps } = props; @@ -24,21 +22,6 @@ function PageMenuButton(props) { size={18} /> - { - indicator && - - - - } -
{text}
diff --git a/frontend/src/InteractiveSearch/InteractiveSearchContent.js b/frontend/src/InteractiveSearch/InteractiveSearchContent.js index f9a5bc3b5..3292c7cdb 100644 --- a/frontend/src/InteractiveSearch/InteractiveSearchContent.js +++ b/frontend/src/InteractiveSearch/InteractiveSearchContent.js @@ -1,13 +1,10 @@ import PropTypes from 'prop-types'; import React from 'react'; -import { align, icons, sortDirections } from 'Helpers/Props'; +import { icons, sortDirections } from 'Helpers/Props'; import LoadingIndicator from 'Components/Loading/LoadingIndicator'; import Icon from 'Components/Icon'; -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 InteractiveSearchFilterModalConnector from './InteractiveSearchFilterModalConnector'; import InteractiveSearchRow from './InteractiveSearchRow'; import styles from './InteractiveSearchContent.css'; @@ -90,32 +87,16 @@ function InteractiveSearchContent(props) { error, totalReleasesCount, items, - selectedFilterKey, - filters, - customFilters, sortKey, sortDirection, longDateFormat, timeFormat, onSortPress, - onFilterSelect, onGrabPress } = props; return (
-
- -
- { isFetching && @@ -186,15 +167,11 @@ InteractiveSearchContent.propTypes = { 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 }; diff --git a/frontend/src/InteractiveSearch/InteractiveSearchFilterMenu.js b/frontend/src/InteractiveSearch/InteractiveSearchFilterMenu.js new file mode 100644 index 000000000..fecad5d63 --- /dev/null +++ b/frontend/src/InteractiveSearch/InteractiveSearchFilterMenu.js @@ -0,0 +1,39 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import { align } from 'Helpers/Props'; +import FilterMenu from 'Components/Menu/FilterMenu'; +import PageMenuButton from 'Components/Menu/PageMenuButton'; +import InteractiveSearchFilterModalConnector from './InteractiveSearchFilterModalConnector'; +import styles from './InteractiveSearchContent.css'; + +function InteractiveSearchFilterMenu(props) { + const { + selectedFilterKey, + filters, + customFilters, + onFilterSelect + } = props; + + return ( +
+ +
+ ); +} + +InteractiveSearchFilterMenu.propTypes = { + selectedFilterKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, + filters: PropTypes.arrayOf(PropTypes.object).isRequired, + customFilters: PropTypes.arrayOf(PropTypes.object).isRequired, + onFilterSelect: PropTypes.func.isRequired +}; + +export default InteractiveSearchFilterMenu; diff --git a/frontend/src/InteractiveSearch/InteractiveSearchFilterMenuConnector.js b/frontend/src/InteractiveSearch/InteractiveSearchFilterMenuConnector.js new file mode 100644 index 000000000..d3156aabc --- /dev/null +++ b/frontend/src/InteractiveSearch/InteractiveSearchFilterMenuConnector.js @@ -0,0 +1,46 @@ +import React, { Component } from 'react'; +import { connect } from 'react-redux'; +import { createSelector } from 'reselect'; +import { setReleasesFilter } from 'Store/Actions/releaseActions'; +import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector'; +import InteractiveSearchFilterMenu from './InteractiveSearchFilterMenu'; + +function createMapStateToProps(appState) { + return createSelector( + createClientSideCollectionSelector('releases'), + (releases) => { + return { + ...releases + }; + } + ); +} + +function createMapDispatchToProps(dispatch, props) { + return { + onFilterSelect(selectedFilterKey) { + dispatch(setReleasesFilter({ selectedFilterKey })); + } + }; +} + +class InteractiveSearchFilterMenuConnector extends Component { + + // + // Render + + render() { + const { + ...otherProps + } = this.props; + + return ( + + + ); + } +} + +export default connect(createMapStateToProps, createMapDispatchToProps)(InteractiveSearchFilterMenuConnector); diff --git a/frontend/src/Movie/Details/MovieDetails.css b/frontend/src/Movie/Details/MovieDetails.css index a45e93f8e..de2f8939a 100644 --- a/frontend/src/Movie/Details/MovieDetails.css +++ b/frontend/src/Movie/Details/MovieDetails.css @@ -83,6 +83,10 @@ margin-left: 20px; } +.filterIcon { + float: right; +} + .movieNavigationButtons { white-space: nowrap; } diff --git a/frontend/src/Movie/Details/MovieDetails.js b/frontend/src/Movie/Details/MovieDetails.js index ef9b8abe4..208fc131b 100644 --- a/frontend/src/Movie/Details/MovieDetails.js +++ b/frontend/src/Movie/Details/MovieDetails.js @@ -33,7 +33,8 @@ import MovieHistoryTable from 'Movie/History/MovieHistoryTable'; import MovieTitlesTable from 'Movie/Titles/MovieTitlesTable'; import MovieAlternateTitles from './MovieAlternateTitles'; import MovieDetailsLinks from './MovieDetailsLinks'; -import InteractiveSearchTable from '../../InteractiveSearch/InteractiveSearchTable'; +import InteractiveSearchTable from 'InteractiveSearch/InteractiveSearchTable'; +import InteractiveSearchFilterMenuConnector from 'InteractiveSearch/InteractiveSearchFilterMenuConnector'; // import MovieTagsConnector from './MovieTagsConnector'; import styles from './MovieDetails.css'; import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; @@ -74,6 +75,7 @@ class MovieDetails extends Component { allExpanded: false, allCollapsed: false, expandedState: {}, + selectedTabIndex: 0, overviewHeight: 0 }; } @@ -192,7 +194,8 @@ class MovieDetails extends Component { isEditMovieModalOpen, isDeleteMovieModalOpen, isInteractiveImportModalOpen, - overviewHeight + overviewHeight, + selectedTabIndex } = this.state; return ( @@ -447,7 +450,7 @@ class MovieDetails extends Component {
Loading movie files failed
} - + this.setState({ selectedTabIndex: tabIndex })}> @@ -478,6 +481,14 @@ class MovieDetails extends Component { > Titles + + { + selectedTabIndex === 1 && +
+ +
+ } +