From c5dc892300376ec8697b6bb6dbb2d330131c5cf0 Mon Sep 17 00:00:00 2001 From: zuiidea Date: Mon, 27 Feb 2017 22:15:13 +0800 Subject: [PATCH] add user-IsMotion --- src/components/layout/header.js | 1 - src/components/users/list.js | 20 ++--- src/components/users/list.less | 141 +++++++++++++++++--------------- src/components/users/search.js | 5 +- src/models/users.js | 12 +++ src/routes/users.js | 7 +- 6 files changed, 102 insertions(+), 84 deletions(-) diff --git a/src/components/layout/header.js b/src/components/layout/header.js index e99dc3e..c757272 100644 --- a/src/components/layout/header.js +++ b/src/components/layout/header.js @@ -16,7 +16,6 @@ function Header ({user, logout, switchSider, siderFold, isNavbar, menuPopoverVis navOpenKeys, changeOpenKeys } - console.log(menuPopoverVisible) return (
{isNavbar diff --git a/src/components/users/list.js b/src/components/users/list.js index fb4ada3..81f5b1e 100644 --- a/src/components/users/list.js +++ b/src/components/users/list.js @@ -1,22 +1,12 @@ import React, {PropTypes} from 'react' import {Table, Dropdown, Button, Menu, Icon, Modal} from 'antd' import styles from './list.less' +import classnames from 'classnames' import TableBodyWrapper from '../common/TableBodyWrapper' const confirm = Modal.confirm -function list ({ - loading, - dataSource, - pagination, - updatePower, - deletePower, - onPageChange, - onDeleteItem, - onEditItem, - onStatusItem, - location -}) { +function list ({ loading, dataSource, pagination, updatePower, deletePower, onPageChange, onDeleteItem, onEditItem, onStatusItem, isMotion, location }) { const handleMenuClick = (record, e) => { if (e.key === '1') { onEditItem(record) @@ -97,12 +87,14 @@ function list ({ current: pagination.current } - const getBodyWrapper = (body) => () + console.log(isMotion) + + const getBodyWrapper = body => isMotion ? : body return (
tr > td, .ant-table-thead > tr > th { - height: 60px; - - &:nth-child(1) { - width: 6%; - } - - &:nth-child(2) { - width: 8%; - } - - &:nth-child(3) { - width: 8%; - } - - &:nth-child(4) { - width: 6%; - } - - &:nth-child(5) { - width: 6%; - } - - &:nth-child(6) { - width: 8%; - } - - &:nth-child(7) { - width: 16%; - } - - &:nth-child(8) { - width: 20%; - } - - &:nth-child(9) { - width: 14%; - } - - &:nth-child(10) { - width: 8%; - } + height: 62px; } + } - .ant-table-thead { - & > tr { - transition: none; - display: block; - - & > th { - display: inline-flex; - align-items: center; - justify-content: center; - } - } - } - - .ant-table-tbody { - & > tr { - transition: none; - display: block; - border-bottom: 1px solid #f5f5f5; - - & > td { - border-bottom: none; - display: inline-flex; - align-items: center; - justify-content: center; + &.motion { + :global { + .ant-table-tbody > tr > td, + .ant-table-thead > tr > th { + &:nth-child(1) { + width: 6%; } - &.ant-table-expanded-row-level-1 > td { - height: auto; + &:nth-child(2) { + width: 8%; + } + + &:nth-child(3) { + width: 8%; + } + + &:nth-child(4) { + width: 6%; + } + + &:nth-child(5) { + width: 6%; + } + + &:nth-child(6) { + width: 8%; + } + + &:nth-child(7) { + width: 16%; + } + + &:nth-child(8) { + width: 20%; + } + + &:nth-child(9) { + width: 14%; + } + + &:nth-child(10) { + width: 8%; + } + } + + .ant-table-thead { + & > tr { + transition: none; + display: block; + + & > th { + display: inline-flex; + align-items: center; + justify-content: center; + } + } + } + + .ant-table-tbody { + & > tr { + transition: none; + display: block; + border-bottom: 1px solid #f5f5f5; + + & > td { + border-bottom: none; + display: inline-flex; + align-items: center; + justify-content: center; + } + + &.ant-table-expanded-row-level-1 > td { + height: auto; + } } } } diff --git a/src/components/users/search.js b/src/components/users/search.js index 0d2d175..1c67b5a 100644 --- a/src/components/users/search.js +++ b/src/components/users/search.js @@ -1,5 +1,5 @@ import React, { PropTypes } from 'react' -import { Form, Button, Row, Col } from 'antd' +import { Form, Button, Row, Col, Switch } from 'antd' import SearchGroup from '../ui/search' const search = ({ @@ -7,6 +7,8 @@ const search = ({ keyword, onSearch, onAdd, + isMotion, + switchIsMotion, form: { getFieldDecorator, validateFields, @@ -33,6 +35,7 @@ const search = ({ + diff --git a/src/models/users.js b/src/models/users.js index 8e22b19..93aa381 100644 --- a/src/models/users.js +++ b/src/models/users.js @@ -11,6 +11,7 @@ export default { currentItem: {}, modalVisible: false, modalType: 'create', + isMotion: localStorage.getItem('antdAdminUserIsMotion') === 'true', pagination: { showSizeChanger: true, showQuickJumper: true, @@ -98,6 +99,13 @@ export default { } }) } + }, + *switchIsMotion ({ + payload + }, {put}) { + yield put({ + type: 'handleSwitchIsMotion' + }) } }, @@ -120,6 +128,10 @@ export default { }, hideModal (state) { return { ...state, modalVisible: false } + }, + handleSwitchIsMotion (state) { + localStorage.setItem('antdAdminUserIsMotion', !state.isMotion) + return { ...state, isMotion: !state.isMotion } } } diff --git a/src/routes/users.js b/src/routes/users.js index dd02126..e5f3886 100644 --- a/src/routes/users.js +++ b/src/routes/users.js @@ -6,7 +6,7 @@ import UserSearch from '../components/users/search' import UserModal from '../components/users/modal' function Users ({ location, dispatch, users }) { - const { loading, list, pagination, currentItem, modalVisible, modalType } = users + const { loading, list, pagination, currentItem, modalVisible, modalType, isMotion } = users const { field, keyword } = location.query const userModalProps = { @@ -31,6 +31,7 @@ function Users ({ location, dispatch, users }) { loading, pagination: pagination, location, + isMotion, onPageChange (page) { const { query, pathname } = location dispatch(routerRedux.push({ @@ -62,6 +63,7 @@ function Users ({ location, dispatch, users }) { const userSearchProps = { field, keyword, + isMotion, onSearch (fieldsValue) { fieldsValue.keyword.length ? dispatch(routerRedux.push({ pathname: '/users', @@ -80,6 +82,9 @@ function Users ({ location, dispatch, users }) { modalType: 'create' } }) + }, + switchIsMotion () { + dispatch({type: 'users/switchIsMotion'}) } }