yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-08-07 00:09:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix anim

Browse Source
This commit is contained in:
soupette 2018-05-30 13:59:49 +02:00
parent e0376cdd28
commit 6a720481b6
6 changed files with 165 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/strapi-plugin-content-manager/admin/src/components/FiltersPickWrapper/Div.js
View File

@ -1,10 +1,14 @@
import styled from 'styled-components'; import styled from 'styled-components';
const Div = styled.div` 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; background: #fff;
box-shadow: 0 2px 4px #E3E9F3; box-shadow: 0 2px 4px #E3E9F3;
padding: 18px 30px 0px 30px; 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; export default Div;

77
packages/strapi-plugin-content-manager/admin/src/components/FiltersPickWrapper/index.js
View File

@ -7,8 +7,7 @@ import React from 'react';
import moment from 'moment'; import moment from 'moment';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { isObject } from 'lodash'; import { isObject, size } from 'lodash';
import { Collapse } from 'reactstrap';
import FilterOptions from 'components/FilterOptions/Loadable'; import FilterOptions from 'components/FilterOptions/Loadable';
// You can find these components in either // You can find these components in either
@ -35,7 +34,7 @@ class FiltersPickWrapper extends React.PureComponent {
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
const { appliedFilters, show } = this.props; const { appliedFilters, show } = this.props;
if (prevProps.show !== show && show && appliedFilters.length === 0) { if (size(prevProps.appliedFilters) !== size(appliedFilters) && size(appliedFilters) === 0) {
this.handleClickAdd(); this.handleClickAdd();
} }
@ -136,43 +135,41 @@ class FiltersPickWrapper extends React.PureComponent {
const { appliedFilters, filterToFocus, schema, show } = this.props; const { appliedFilters, filterToFocus, schema, show } = this.props;
return ( return (
<form onSubmit={this.handleSubmit}> <Div show={show} appliedFilters={size(appliedFilters)}>
<Collapse isOpen={show}> <form onSubmit={this.handleSubmit}>
<Div> <div>
<div> <PluginHeader
<PluginHeader actions={this.generateActions()}
actions={this.generateActions()} description={{
description={{ id: 'content-manager.components.FiltersPickWrapper.PluginHeader.description',
id: 'content-manager.components.FiltersPickWrapper.PluginHeader.description', }}
}} title={this.renderTitle()}
title={this.renderTitle()} />
/> <Wrapper>
<Wrapper> {appliedFilters.map((filter, key) => (
{appliedFilters.map((filter, key) => ( <FilterOptions
<FilterOptions key={key}
key={key} filter={filter}
filter={filter} filterToFocus={filterToFocus}
filterToFocus={filterToFocus} index={key}
index={key} onChange={this.handleChange}
onChange={this.handleChange} onClickAdd={this.handleClickAdd}
onClickAdd={this.handleClickAdd} onClickRemove={this.handleClickRemove}
onClickRemove={this.handleClickRemove} schema={schema}
schema={schema} show={this.state.showInput}
show={this.state.showInput} showAddButton={this.shouldDisplayAddButton(key)}
showAddButton={this.shouldDisplayAddButton(key)} />
/> ))}
))} </Wrapper>
</Wrapper> </div>
</div> <Flex>
<Flex> <span onClick={this.handleClickClose}>
<span onClick={this.handleClickClose}> <FormattedMessage id="content-manager.components.FiltersPickWrapper.hide" />
<FormattedMessage id="content-manager.components.FiltersPickWrapper.hide" /> &nbsp;
&nbsp; </span>
</span> </Flex>
</Flex> </form>
</Div> </Div>
</Collapse>
</form>
); );
} }
} }

186
packages/strapi-plugin-content-manager/admin/src/containers/ListPage/index.js
View File

@ -62,7 +62,7 @@ import {
import styles from './styles.scss'; import styles from './styles.scss';
export class ListPage extends React.Component { export class ListPage extends React.Component {
state = { showWarning: false, target: '', showHeader: true }; state = { showWarning: false, target: '' };
componentDidMount() { componentDidMount() {
this.getData(this.props); this.getData(this.props);
@ -73,22 +73,18 @@ export class ListPage extends React.Component {
location: { pathname, search }, location: { pathname, search },
} = prevProps; } = prevProps;
const { const {
listPage: { showFilter, filtersUpdated }, listPage: { filtersUpdated },
} = this.props; } = this.props;
if (pathname !== this.props.location.pathname) { if (pathname !== this.props.location.pathname) {
this.getData(this.props); this.getData(this.props);
this.shouldDisplayPluginHeader(); this.shouldHideFilters();
} }
if (search !== this.props.location.search) { if (search !== this.props.location.search) {
this.getData(this.props); this.getData(this.props);
} }
if (prevProps.listPage.showFilter !== showFilter) {
this.hidePluginHeader(showFilter);
}
if (prevProps.listPage.filtersUpdated !== filtersUpdated) { if (prevProps.listPage.filtersUpdated !== filtersUpdated) {
const updatedSearch = this.generateSearch(); const updatedSearch = this.generateSearch();
this.props.history.push({ pathname, search: updatedSearch }); 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, [this.getCurrentModelName(), 'fields']) ||
get(this.props.schema, ['plugins', this.getSource(), 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) { if (this.props.listPage.showFilter) {
this.props.onToggleFilters(); this.props.onToggleFilters();
this.setState({ showHeader: true });
} }
}; };
@ -322,92 +309,91 @@ export class ListPage extends React.Component {
return ( return (
<div> <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)}> <div className={cn('container-fluid', styles.containerFluid)}>
{this.state.showHeader && ( <PluginHeader
<PluginHeader actions={pluginHeaderActions}
actions={pluginHeaderActions} description={{
description={{ id:
id: listPage.count > 1
listPage.count > 1 ? 'content-manager.containers.List.pluginHeaderDescription'
? 'content-manager.containers.List.pluginHeaderDescription' : 'content-manager.containers.List.pluginHeaderDescription.singular',
: 'content-manager.containers.List.pluginHeaderDescription.singular', values: {
values: { label: listPage.count,
label: listPage.count, },
}, }}
}} title={{
title={{ id: this.getCurrentModelName() || 'Content Manager',
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={cn('row', styles.row)}> <div className="col-md-12">
<div className="col-md-12"> <Div
<Div decreaseMarginBottom={filters.length > 0}
increaseMargin={!this.state.showHeader} >
decreaseMarginBottom={filters.length > 0} <div className="row">
> <AddFilterCTA onClick={onToggleFilters} showHideText={showFilter} />
<div className="row"> {filters.map((filter, key) => (
<AddFilterCTA onClick={onToggleFilters} showHideText={showFilter} /> <Filter
{filters.map((filter, key) => ( key={key}
<Filter filter={filter}
key={key} index={key}
filter={filter} onClick={onClickRemove}
index={key} onClickOpen={openFiltersWithSelections}
onClick={onClickRemove} schema={this.getCurrentSchema()}
onClickOpen={openFiltersWithSelections} />
schema={this.getCurrentSchema()} ))}
/> </div>
))} </Div>
</div> </div>
</Div>
</div> </div>
</div> <div className={cn('row', styles.row)}>
<div className={cn('row', styles.row)}> <div className="col-md-12">
<div className="col-md-12"> <Table
<Table records={listPage.records}
records={listPage.records} route={this.props.match}
route={this.props.match} routeParams={this.props.match.params}
routeParams={this.props.match.params} headers={this.generateTableHeaders()}
headers={this.generateTableHeaders()} filters={filters}
filters={filters} onChangeSort={this.handleChangeSort}
onChangeSort={this.handleChangeSort} sort={params._sort}
sort={params._sort} history={this.props.history}
history={this.props.history} primaryKey={this.getCurrentModel().primaryKey || 'id'}
primaryKey={this.getCurrentModel().primaryKey || 'id'} handleDelete={this.toggleModalWarning}
handleDelete={this.toggleModalWarning} redirectUrl={this.generateRedirectURI()}
redirectUrl={this.generateRedirectURI()} />
/> <PopUpWarning
<PopUpWarning isOpen={this.state.showWarning}
isOpen={this.state.showWarning} toggleModal={this.toggleModalWarning}
toggleModal={this.toggleModalWarning} content={{
content={{ title: 'content-manager.popUpWarning.title',
title: 'content-manager.popUpWarning.title', message: 'content-manager.popUpWarning.bodyMessage.contentType.delete',
message: 'content-manager.popUpWarning.bodyMessage.contentType.delete', cancel: 'content-manager.popUpWarning.button.cancel',
cancel: 'content-manager.popUpWarning.button.cancel', confirm: 'content-manager.popUpWarning.button.confirm',
confirm: 'content-manager.popUpWarning.button.confirm', }}
}} popUpWarningType="danger"
popUpWarningType="danger" onConfirm={this.handleDelete}
onConfirm={this.handleDelete} />
/> <PageFooter
<PageFooter count={listPage.count}
count={listPage.count} onChangeParams={this.handleChangeParams}
onChangeParams={this.handleChangeParams} params={listPage.params}
params={listPage.params} style={{ marginTop: '2.9rem', padding: '0 15px 0 15px' }}
style={{ marginTop: '2.9rem', padding: '0 15px 0 15px' }} />
/> </div>
</div> </div>
</div> </div>
</div> </div>

19
packages/strapi-plugin-content-manager/admin/src/containers/ListPage/reducer.js
View File

@ -69,10 +69,18 @@ function listPageReducer(state = initialState, action) {
case ON_TOGGLE_FILTERS: case ON_TOGGLE_FILTERS:
return state return state
.update('filterToFocus', () => null) .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: case OPEN_FILTERS_WITH_SELECTION:
return state return state
.update('showFilter', () => true) .update('showFilter', () => true)
.update('appliedFilters', () => state.get('filters'))
.update('filterToFocus', () => action.index); .update('filterToFocus', () => action.index);
case REMOVE_ALL_FILTERS: case REMOVE_ALL_FILTERS:
return state return state
@ -84,19 +92,12 @@ function listPageReducer(state = initialState, action) {
case SET_PARAMS: case SET_PARAMS:
return state return state
.update('params', () => Map(action.params)) .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('filters', () => fromJS(action.filters))
.update('showFilter', () => false); .update('showFilter', () => false);
case SUBMIT: case SUBMIT:
return state return state
.update('filters', () => state.get('appliedFilters').filter(filter => filter.get('value') !== '')) .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('showFilter', () => false)
.update('filtersUpdated', v => v = !v); .update('filtersUpdated', v => v = !v);
default: default:

9
packages/strapi-plugin-content-manager/admin/src/containers/ListPage/styles.scss
View File

@ -1,4 +1,5 @@
.containerFluid { /* stylelint-disable */ .containerFluid { /* stylelint-disable */
position: relative;
padding: 18px 30px; padding: 18px 30px;
.modal-content{ .modal-content{
@ -14,3 +15,11 @@
padding-left: 0 !important; padding-left: 0 !important;
padding-right: 0 !important; padding-right: 0 !important;
} }
.wrapper{
position: absolute;
top: 100px;
left: 30px;
width: calc(100% - 60px);
}

19
packages/strapi-plugin-content-manager/config/layout.json
View File

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