Fix anim

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;

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 { isObject, size } from 'lodash';
-import { Collapse } from 'reactstrap';
 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,9 +135,8 @@ class FiltersPickWrapper extends React.PureComponent {
     const { appliedFilters, filterToFocus, schema, show } = this.props;
 
     return (
+      <Div show={show} appliedFilters={size(appliedFilters)}>
         <form onSubmit={this.handleSubmit}>
-        <Collapse isOpen={show}>
-          <Div>
           <div>
             <PluginHeader
               actions={this.generateActions()}
@@ -170,9 +168,8 @@ class FiltersPickWrapper extends React.PureComponent {
               &nbsp;
             </span>
           </Flex>
-          </Div>
-        </Collapse>
         </form>
+      </Div>
     );
   }
 }

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 => {
+  shouldHideFilters = () => {
-    if (showFilter) {
-      this.setState(prevState => ({ showHeader: !prevState.showHeader }));
-    } else {
-      this.setState({ showHeader: true });
-    }
-  };
-
-  shouldDisplayPluginHeader = () => {
     if (this.props.listPage.showFilter) {
       this.props.onToggleFilters();
-      this.setState({ showHeader: true });
     }
   };
 
@@ -322,21 +309,7 @@ export class ListPage extends React.Component {
 
     return (
       <div>
-        <FiltersPickWrapper
-          addFilter={addFilter}
-          appliedFilters={appliedFilters}
-          close={onToggleFilters}
-          filterToFocus={filterToFocus}
-          modelName={this.getCurrentModelName()}
-          onChange={onChange}
-          onSubmit={this.handleSubmit}
-          removeAllFilters={removeAllFilters}
-          removeFilter={removeFilter}
-          schema={this.getCurrentSchema()}
-          show={showFilter}
-        />
         <div className={cn('container-fluid', styles.containerFluid)}>
-          {this.state.showHeader && (
           <PluginHeader
             actions={pluginHeaderActions}
             description={{
@@ -352,11 +325,23 @@ export class ListPage extends React.Component {
               id: this.getCurrentModelName() || 'Content Manager',
             }}
           />
-          )}
+          <div className={cn(styles.wrapper)}>
+            <FiltersPickWrapper
+              addFilter={addFilter}
+              appliedFilters={appliedFilters}
+              close={onToggleFilters}
+              filterToFocus={filterToFocus}
+              modelName={this.getCurrentModelName()}
+              onChange={onChange}
+              onSubmit={this.handleSubmit}
+              removeAllFilters={removeAllFilters}
+              removeFilter={removeFilter}
+              schema={this.getCurrentSchema()}
+              show={showFilter}
+            />
             <div className={cn('row', styles.row)}>
               <div className="col-md-12">
                 <Div
-                increaseMargin={!this.state.showHeader}
                   decreaseMarginBottom={filters.length > 0}
                 >
                   <div className="row">
@@ -412,6 +397,7 @@ export class ListPage extends React.Component {
             </div>
           </div>
         </div>
+      </div>
     );
   }
 }

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:

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);
+}

packages/strapi-plugin-content-manager/config/layout.json

@@ -1 +1,18 @@
-{}
+{
+  "product": {
+    "attributes": {
+      "name": {
+        "appearance": ""
+      },
+      "pric": {
+        "appearance": ""
+      },
+      "float": {
+        "appearance": ""
+      },
+      "decimal": {
+        "appearance": ""
+      }
+    }
+  }
+}