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 { 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 (
-      <form onSubmit={this.handleSubmit}>
-        <Collapse isOpen={show}>
-          <Div>
-            <div>
-              <PluginHeader
-                actions={this.generateActions()}
-                description={{
-                  id: 'content-manager.components.FiltersPickWrapper.PluginHeader.description',
-                }}
-                title={this.renderTitle()}
-              />
-              <Wrapper>
-                {appliedFilters.map((filter, key) => (
-                  <FilterOptions
-                    key={key}
-                    filter={filter}
-                    filterToFocus={filterToFocus}
-                    index={key}
-                    onChange={this.handleChange}
-                    onClickAdd={this.handleClickAdd}
-                    onClickRemove={this.handleClickRemove}
-                    schema={schema}
-                    show={this.state.showInput}
-                    showAddButton={this.shouldDisplayAddButton(key)}
-                  />
-                ))}
-              </Wrapper>
-            </div>
-            <Flex>
-              <span onClick={this.handleClickClose}>
-                <FormattedMessage id="content-manager.components.FiltersPickWrapper.hide" />
-                &nbsp;
-              </span>
-            </Flex>
-          </Div>
-        </Collapse>
-      </form>
+      <Div show={show} appliedFilters={size(appliedFilters)}>
+        <form onSubmit={this.handleSubmit}>
+          <div>
+            <PluginHeader
+              actions={this.generateActions()}
+              description={{
+                id: 'content-manager.components.FiltersPickWrapper.PluginHeader.description',
+              }}
+              title={this.renderTitle()}
+            />
+            <Wrapper>
+              {appliedFilters.map((filter, key) => (
+                <FilterOptions
+                  key={key}
+                  filter={filter}
+                  filterToFocus={filterToFocus}
+                  index={key}
+                  onChange={this.handleChange}
+                  onClickAdd={this.handleClickAdd}
+                  onClickRemove={this.handleClickRemove}
+                  schema={schema}
+                  show={this.state.showInput}
+                  showAddButton={this.shouldDisplayAddButton(key)}
+                />
+              ))}
+            </Wrapper>
+          </div>
+          <Flex>
+            <span onClick={this.handleClickClose}>
+              <FormattedMessage id="content-manager.components.FiltersPickWrapper.hide" />
+              &nbsp;
+            </span>
+          </Flex>
+        </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 => {
-    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 (
       <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={{
-                id:
-                  listPage.count > 1
-                    ? 'content-manager.containers.List.pluginHeaderDescription'
-                    : 'content-manager.containers.List.pluginHeaderDescription.singular',
-                values: {
-                  label: listPage.count,
-                },
-              }}
-              title={{
-                id: this.getCurrentModelName() || 'Content Manager',
-              }}
+          <PluginHeader
+            actions={pluginHeaderActions}
+            description={{
+              id:
+              listPage.count > 1
+                ? 'content-manager.containers.List.pluginHeaderDescription'
+                : 'content-manager.containers.List.pluginHeaderDescription.singular',
+              values: {
+                label: listPage.count,
+              },
+            }}
+            title={{
+              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">
-                  <AddFilterCTA onClick={onToggleFilters} showHideText={showFilter} />
-                  {filters.map((filter, key) => (
-                    <Filter
-                      key={key}
-                      filter={filter}
-                      index={key}
-                      onClick={onClickRemove}
-                      onClickOpen={openFiltersWithSelections}
-                      schema={this.getCurrentSchema()}
-                    />
-                  ))}
-                </div>
-              </Div>
+            <div className={cn('row', styles.row)}>
+              <div className="col-md-12">
+                <Div
+                  decreaseMarginBottom={filters.length > 0}
+                >
+                  <div className="row">
+                    <AddFilterCTA onClick={onToggleFilters} showHideText={showFilter} />
+                    {filters.map((filter, key) => (
+                      <Filter
+                        key={key}
+                        filter={filter}
+                        index={key}
+                        onClick={onClickRemove}
+                        onClickOpen={openFiltersWithSelections}
+                        schema={this.getCurrentSchema()}
+                      />
+                    ))}
+                  </div>
+                </Div>
+              </div>
             </div>
-          </div>
-          <div className={cn('row', styles.row)}>
-            <div className="col-md-12">
-              <Table
-                records={listPage.records}
-                route={this.props.match}
-                routeParams={this.props.match.params}
-                headers={this.generateTableHeaders()}
-                filters={filters}
-                onChangeSort={this.handleChangeSort}
-                sort={params._sort}
-                history={this.props.history}
-                primaryKey={this.getCurrentModel().primaryKey || 'id'}
-                handleDelete={this.toggleModalWarning}
-                redirectUrl={this.generateRedirectURI()}
-              />
-              <PopUpWarning
-                isOpen={this.state.showWarning}
-                toggleModal={this.toggleModalWarning}
-                content={{
-                  title: 'content-manager.popUpWarning.title',
-                  message: 'content-manager.popUpWarning.bodyMessage.contentType.delete',
-                  cancel: 'content-manager.popUpWarning.button.cancel',
-                  confirm: 'content-manager.popUpWarning.button.confirm',
-                }}
-                popUpWarningType="danger"
-                onConfirm={this.handleDelete}
-              />
-              <PageFooter
-                count={listPage.count}
-                onChangeParams={this.handleChangeParams}
-                params={listPage.params}
-                style={{ marginTop: '2.9rem', padding: '0 15px 0 15px' }}
-              />
+            <div className={cn('row', styles.row)}>
+              <div className="col-md-12">
+                <Table
+                  records={listPage.records}
+                  route={this.props.match}
+                  routeParams={this.props.match.params}
+                  headers={this.generateTableHeaders()}
+                  filters={filters}
+                  onChangeSort={this.handleChangeSort}
+                  sort={params._sort}
+                  history={this.props.history}
+                  primaryKey={this.getCurrentModel().primaryKey || 'id'}
+                  handleDelete={this.toggleModalWarning}
+                  redirectUrl={this.generateRedirectURI()}
+                />
+                <PopUpWarning
+                  isOpen={this.state.showWarning}
+                  toggleModal={this.toggleModalWarning}
+                  content={{
+                    title: 'content-manager.popUpWarning.title',
+                    message: 'content-manager.popUpWarning.bodyMessage.contentType.delete',
+                    cancel: 'content-manager.popUpWarning.button.cancel',
+                    confirm: 'content-manager.popUpWarning.button.confirm',
+                  }}
+                  popUpWarningType="danger"
+                  onConfirm={this.handleDelete}
+                />
+                <PageFooter
+                  count={listPage.count}
+                  onChangeParams={this.handleChangeParams}
+                  params={listPage.params}
+                  style={{ marginTop: '2.9rem', padding: '0 15px 0 15px' }}
+                />
+              </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": ""
+      }
+    }
+  }
+}