diff --git a/packages/strapi-plugin-content-manager/admin/src/components/FiltersPickWrapper/Div.js b/packages/strapi-plugin-content-manager/admin/src/components/FiltersPickWrapper/Div.js index 01ac82c5cc..3fbb6e8a16 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/FiltersPickWrapper/Div.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/FiltersPickWrapper/Div.js @@ -1,10 +1,14 @@ import styled from 'styled-components'; const Div = styled.div` - width: 100%; + overflow-x: hidden; + width: calc(100% + 60px); + margin: ${props => props.show ? '-100px -30px 30px' : '-280px -30px 120px'}; background: #fff; box-shadow: 0 2px 4px #E3E9F3; padding: 18px 30px 0px 30px; + transition: ${props => props.show ? 'margin-top .3s ease-out, margin-bottom .2s ease-out' : 'margin .3s ease-in'};; `; + export default Div; diff --git a/packages/strapi-plugin-content-manager/admin/src/components/FiltersPickWrapper/index.js b/packages/strapi-plugin-content-manager/admin/src/components/FiltersPickWrapper/index.js index a6d336ce93..0336302fa8 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/FiltersPickWrapper/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/FiltersPickWrapper/index.js @@ -7,8 +7,7 @@ import React from 'react'; import moment from 'moment'; import PropTypes from 'prop-types'; import { FormattedMessage } from 'react-intl'; -import { isObject } from 'lodash'; -import { Collapse } from 'reactstrap'; +import { isObject, size } from 'lodash'; import FilterOptions from 'components/FilterOptions/Loadable'; // You can find these components in either @@ -35,7 +34,7 @@ class FiltersPickWrapper extends React.PureComponent { componentDidUpdate(prevProps) { const { appliedFilters, show } = this.props; - if (prevProps.show !== show && show && appliedFilters.length === 0) { + if (size(prevProps.appliedFilters) !== size(appliedFilters) && size(appliedFilters) === 0) { this.handleClickAdd(); } @@ -136,43 +135,41 @@ class FiltersPickWrapper extends React.PureComponent { const { appliedFilters, filterToFocus, schema, show } = this.props; return ( -
- -
-
- - - {appliedFilters.map((filter, key) => ( - - ))} - -
- - - -   - - -
-
-
+
+
+
+ + + {appliedFilters.map((filter, key) => ( + + ))} + +
+ + + +   + + +
+
); } } diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/index.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/index.js index 7312bf1933..e0674b09ff 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/index.js @@ -62,7 +62,7 @@ import { import styles from './styles.scss'; export class ListPage extends React.Component { - state = { showWarning: false, target: '', showHeader: true }; + state = { showWarning: false, target: '' }; componentDidMount() { this.getData(this.props); @@ -73,22 +73,18 @@ export class ListPage extends React.Component { location: { pathname, search }, } = prevProps; const { - listPage: { showFilter, filtersUpdated }, + listPage: { filtersUpdated }, } = this.props; if (pathname !== this.props.location.pathname) { this.getData(this.props); - this.shouldDisplayPluginHeader(); + this.shouldHideFilters(); } if (search !== this.props.location.search) { this.getData(this.props); } - if (prevProps.listPage.showFilter !== showFilter) { - this.hidePluginHeader(showFilter); - } - if (prevProps.listPage.filtersUpdated !== filtersUpdated) { const updatedSearch = this.generateSearch(); this.props.history.push({ pathname, search: updatedSearch }); @@ -145,18 +141,9 @@ export class ListPage extends React.Component { get(this.props.schema, [this.getCurrentModelName(), 'fields']) || get(this.props.schema, ['plugins', this.getSource(), this.getCurrentModelName(), 'fields']); - hidePluginHeader = showFilter => { - if (showFilter) { - this.setState(prevState => ({ showHeader: !prevState.showHeader })); - } else { - this.setState({ showHeader: true }); - } - }; - - shouldDisplayPluginHeader = () => { + shouldHideFilters = () => { if (this.props.listPage.showFilter) { this.props.onToggleFilters(); - this.setState({ showHeader: true }); } }; @@ -322,92 +309,91 @@ export class ListPage extends React.Component { return (
-
- {this.state.showHeader && ( - 1 - ? 'content-manager.containers.List.pluginHeaderDescription' - : 'content-manager.containers.List.pluginHeaderDescription.singular', - values: { - label: listPage.count, - }, - }} - title={{ - id: this.getCurrentModelName() || 'Content Manager', - }} + 1 + ? 'content-manager.containers.List.pluginHeaderDescription' + : 'content-manager.containers.List.pluginHeaderDescription.singular', + values: { + label: listPage.count, + }, + }} + title={{ + id: this.getCurrentModelName() || 'Content Manager', + }} + /> +
+ - )} -
-
-
0} - > -
- - {filters.map((filter, key) => ( - - ))} -
-
+
+
+
0} + > +
+ + {filters.map((filter, key) => ( + + ))} +
+
+
-
-
-
- - - +
+
+
+ + + diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/reducer.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/reducer.js index b297dcc085..b1fa01a835 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/reducer.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/reducer.js @@ -69,10 +69,18 @@ function listPageReducer(state = initialState, action) { case ON_TOGGLE_FILTERS: return state .update('filterToFocus', () => null) - .update('showFilter', v => !v); + .update('showFilter', v => !v) + .update('appliedFilters', () => { + if (state.get('showFilter') === true) { + return List([]); + } + + return state.get('filters'); + }); case OPEN_FILTERS_WITH_SELECTION: return state .update('showFilter', () => true) + .update('appliedFilters', () => state.get('filters')) .update('filterToFocus', () => action.index); case REMOVE_ALL_FILTERS: return state @@ -84,19 +92,12 @@ function listPageReducer(state = initialState, action) { case SET_PARAMS: return state .update('params', () => Map(action.params)) - .update('appliedFilters', (list) => { - if (state.get('showFilter') === true) { - return list; - } - - return fromJS(action.filters); - }) .update('filters', () => fromJS(action.filters)) .update('showFilter', () => false); case SUBMIT: return state .update('filters', () => state.get('appliedFilters').filter(filter => filter.get('value') !== '')) - .update('appliedFilters', (list) => list.filter(filter => filter.get('value') !== '')) + .update('appliedFilters', () => List([])) .update('showFilter', () => false) .update('filtersUpdated', v => v = !v); default: diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/styles.scss b/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/styles.scss index 40c8fdbcc9..8be6d6161b 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/styles.scss +++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/styles.scss @@ -1,4 +1,5 @@ .containerFluid { /* stylelint-disable */ + position: relative; padding: 18px 30px; .modal-content{ @@ -14,3 +15,11 @@ padding-left: 0 !important; padding-right: 0 !important; } + + +.wrapper{ + position: absolute; + top: 100px; + left: 30px; + width: calc(100% - 60px); +} diff --git a/packages/strapi-plugin-content-manager/config/layout.json b/packages/strapi-plugin-content-manager/config/layout.json index 0967ef424b..40b22571c0 100644 --- a/packages/strapi-plugin-content-manager/config/layout.json +++ b/packages/strapi-plugin-content-manager/config/layout.json @@ -1 +1,18 @@ -{} +{ + "product": { + "attributes": { + "name": { + "appearance": "" + }, + "pric": { + "appearance": "" + }, + "float": { + "appearance": "" + }, + "decimal": { + "appearance": "" + } + } + } +} \ No newline at end of file