tsai
/
ant-design-pro
mirror of https://github.com/ant-design/ant-design-pro
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

update list style

pull/21/head
nikogu 9 years ago
parent
402532cd98
commit
05ca4cf82b
14 changed files with 118 additions and 97 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 32
      mock/api.js
  2. 3
      mock/rule.js
  3. 2
      src/components/AvatarList/index.less
  4. 20
      src/components/StandardTable/index.js
  5. 5
      src/routes/List/BasicList.js
  6. 6
      src/routes/List/BasicList.less
  7. 6
      src/routes/List/CardList.js
  8. 6
      src/routes/List/CardList.less
  9. 55
      src/routes/List/CoverCardList.js
  10. 7
      src/routes/List/CoverCardList.less
  11. 31
      src/routes/List/FilterCardList.js
  12. 25
      src/routes/List/FilterCardList.less
  13. 12
      src/routes/List/SearchList.js
  14. 5
      src/routes/List/SearchList.less

32
mock/api.js
View File

@ -2,13 +2,13 @@ import { imgMap, getUrlParams } from './utils';
export function fakeList(count) { export function fakeList(count) {
const titles = [ const titles = [
'凤蝶', 'Vue',
'AntDesignPro', 'AntDesignPro',
'DesignLab', 'DesignLab',
'Basement', 'Angular',
'AntDesign', 'AntDesign',
'云雀', 'React',
'体验云', 'Alipay',
'AntDesignMobile', 'AntDesignMobile',
]; ];
const avatars = [ const avatars = [
@ -18,10 +18,10 @@ export function fakeList(count) {
'https://gw.alipayobjects.com/zos/rmsportal/VcmdbCBcwPTGYgbYeMzX.png', // DesignLab 'https://gw.alipayobjects.com/zos/rmsportal/VcmdbCBcwPTGYgbYeMzX.png', // DesignLab
]; ];
const covers = [ const covers = [
'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png', 'https://gw.alipayobjects.com/zos/rmsportal/nQIAJyTLNeVJfUpTskWk.png',
'https://gw.alipayobjects.com/zos/rmsportal/xMPpMvGSIXusgtgUPAdw.png', 'https://gw.alipayobjects.com/zos/rmsportal/pnhtvpOTzypPvmHVrfKN.png',
'https://gw.alipayobjects.com/zos/rmsportal/hQReiajgtqzIVFjLXjHp.png', 'https://gw.alipayobjects.com/zos/rmsportal/SVrKVZEFDnhDTNpkplZj.png',
'https://gw.alipayobjects.com/zos/rmsportal/nczfTaXEzhSpvgZZjBev.png', 'https://gw.alipayobjects.com/zos/rmsportal/bUIOUkPTHgfGdDhgsAgE.png',
]; ];
const list = []; const list = [];
@ -48,20 +48,16 @@ export function fakeList(count) {
content: '段落示意：蚂蚁金服设计平台 design.alipay.com，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 design.alipay.com，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。', content: '段落示意：蚂蚁金服设计平台 design.alipay.com，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 design.alipay.com，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。',
members: [ members: [
{ {
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WPOxPBHGyqsgKPsFtVlJ.png', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
name: '王昭君', name: '曲丽丽',
},
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WPOxPBHGyqsgKPsFtVlJ.png',
name: '王昭君',
}, },
{ {
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WPOxPBHGyqsgKPsFtVlJ.png', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
name: '王昭君', name: '王昭君',
}, },
{ {
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WPOxPBHGyqsgKPsFtVlJ.png', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
name: '王昭君', name: '董娜娜',
}, },
], ],
}); });
@ -136,7 +132,7 @@ export const getNotice = [
logo: imgMap.c, logo: imgMap.c,
description: '这是一条描述信息这是一条描述信息', description: '这是一条描述信息这是一条描述信息',
updatedAt: new Date('2017-07-23 06:23:00'), updatedAt: new Date('2017-07-23 06:23:00'),
member: '成都超级小分队', member: '成都小分队',
}, },
]; ];

3
mock/rule.js
View File

@ -5,6 +5,7 @@ let tableListDataSource = [];
for (let i = 0; i < 46; i += 1) { for (let i = 0; i < 46; i += 1) {
tableListDataSource.push({ tableListDataSource.push({
key: i, key: i,
disabled: ((i % 6) === 0),
href: 'https://ant.design', href: 'https://ant.design',
avatar: ['https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png', 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png'][i % 2], avatar: ['https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png', 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png'][i % 2],
no: `TradeCode ${i}`, no: `TradeCode ${i}`,
@ -12,7 +13,7 @@ for (let i = 0; i < 46; i += 1) {
owner: '曲丽丽', owner: '曲丽丽',
description: '这是一段描述', description: '这是一段描述',
callNo: Math.floor(Math.random() * 1000), callNo: Math.floor(Math.random() * 1000),
status: Math.floor(Math.random() * 10) % 2, status: Math.floor(Math.random() * 10) % 4,
updatedAt: new Date(`2017-07-${Math.floor(i / 2) + 1} ${Math.floor(i / 2) + 1}:00:00`), updatedAt: new Date(`2017-07-${Math.floor(i / 2) + 1} ${Math.floor(i / 2) + 1}:00:00`),
createdAt: new Date(`2017-07-${Math.floor(i / 2) + 1} ${Math.floor(i / 2) + 1}:00:00`), createdAt: new Date(`2017-07-${Math.floor(i / 2) + 1} ${Math.floor(i / 2) + 1}:00:00`),
progress: Math.ceil(Math.random() * 100), progress: Math.ceil(Math.random() * 100),

2
src/components/AvatarList/index.less
View File

@ -10,8 +10,8 @@
} }
.avatarItem { .avatarItem {
border: 1px solid #fff;
display: inline-block; display: inline-block;
overflow: hidden;
font-size: @font-size-base; font-size: @font-size-base;
margin-left: -8px; margin-left: -8px;
width: @avatar-size-base; width: @avatar-size-base;

20
src/components/StandardTable/index.js
View File

@ -3,6 +3,7 @@ import moment from 'moment';
import { Table, Alert, Badge } from 'antd'; import { Table, Alert, Badge } from 'antd';
import styles from './index.less'; import styles from './index.less';
const statusMap = ['default', 'processing', 'success', 'error'];
class StandardTable extends PureComponent { class StandardTable extends PureComponent {
state = { state = {
selectedRowKeys: [], selectedRowKeys: [],
@ -43,7 +44,7 @@ class StandardTable extends PureComponent {
const { selectedRowKeys, totalCallNo } = this.state; const { selectedRowKeys, totalCallNo } = this.state;
const { data: { list, pagination }, loading } = this.props; const { data: { list, pagination }, loading } = this.props;
const status = ['关闭', '运行中']; const status = ['关闭', '运行中', '已上线', '异常'];
const columns = [ const columns = [
{ {
@ -76,13 +77,17 @@ class StandardTable extends PureComponent {
text: status[1], text: status[1],
value: 1, value: 1,
}, },
{
text: status[2],
value: 2,
},
{
text: status[3],
value: 3,
},
], ],
render(val) { render(val) {
if (val === 0) { return <Badge status={statusMap[val]} text={status[val]} />;
return <Badge status="default" text={status[val]} />;
} else {
return <Badge status="processing" text={status[val]} />;
}
}, },
}, },
{ {
@ -112,6 +117,9 @@ class StandardTable extends PureComponent {
const rowSelection = { const rowSelection = {
selectedRowKeys, selectedRowKeys,
onChange: this.handleRowSelectChange, onChange: this.handleRowSelectChange,
getCheckboxProps: record => ({
disabled: record.disabled,
}),
}; };
return ( return (

5
src/routes/List/BasicList.js
View File

@ -112,10 +112,11 @@ export default class BasicList extends PureComponent {
<Card <Card
bordered={false} bordered={false}
title="基础列表" title="基础列表"
style={{ marginTop: 16 }} style={{ marginTop: 24 }}
bodyStyle={{ padding: '16px 32px 40px 32px' }}
extra={extraContent} extra={extraContent}
> >
<Button type="dashed" style={{ width: '100%' }}> <Button type="dashed" style={{ width: '100%', marginBottom: 12 }}>
<Icon type="plus" /> 添加 <Icon type="plus" /> 添加
</Button> </Button>
<List <List

6
src/routes/List/BasicList.less
View File

@ -3,6 +3,12 @@
.standardList { .standardList {
:global { :global {
.ant-card-head {
border-bottom: none;
}
.ant-card-head-title {
line-height: 32px;
}
.ant-list-pagination { .ant-list-pagination {
text-align: right; text-align: right;
} }

6
src/routes/List/CardList.js
View File

@ -44,7 +44,7 @@ export default class CardList extends PureComponent {
const extraContent = ( const extraContent = (
<div className={styles.extraImg}> <div className={styles.extraImg}>
<img alt="这是一个标题" src="https://gw.alipayobjects.com/zos/rmsportal/QfpzdhbrqRtdSyZHKhjp.png" /> <img alt="这是一个标题" src="https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png" />
</div> </div>
); );
@ -58,12 +58,12 @@ export default class CardList extends PureComponent {
<List <List
rowKey="id" rowKey="id"
loading={loading} loading={loading}
grid={{ gutter: 16, lg: 3, md: 2, sm: 1, xs: 1 }} grid={{ gutter: 24, lg: 3, md: 2, sm: 1, xs: 1 }}
dataSource={['', ...list]} dataSource={['', ...list]}
renderItem={item => (item ? ( renderItem={item => (item ? (
<List.Item key={item.id}> <List.Item key={item.id}>
<Link to="/list/card-list"> <Link to="/list/card-list">
<Card actions={[<a>操作一</a>, <a>操作二</a>]}> <Card hoverable actions={[<a>操作一</a>, <a>操作二</a>]}>
<Card.Meta <Card.Meta
avatar={<Avatar size="large" src={item.avatar} />} avatar={<Avatar size="large" src={item.avatar} />}
title={item.title} title={item.title}

6
src/routes/List/CardList.less
View File

@ -2,6 +2,7 @@
@import "../../utils/utils.less"; @import "../../utils/utils.less";
.cardList { .cardList {
margin-bottom: -24px;
:global { :global {
.ant-card-meta-content { .ant-card-meta-content {
margin-top: 0; margin-top: 0;
@ -19,14 +20,11 @@
} }
.newButton { .newButton {
background-color: transparent; background-color: #fff;
border-color: @border-color-base; border-color: @border-color-base;
color: @text-color-secondary; color: @text-color-secondary;
width: 100%; width: 100%;
height: 178px; height: 178px;
&:hover {
background-color: transparent;
}
} }
.cardDescription { .cardDescription {

55
src/routes/List/CoverCardList.js
View File

@ -1,7 +1,7 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import moment from 'moment'; import moment from 'moment';
import { connect } from 'dva'; import { connect } from 'dva';
import { routerRedux } from 'dva/router'; import { Link, routerRedux } from 'dva/router';
import { Row, Col, Form, Card, Select, List, Input } from 'antd'; import { Row, Col, Form, Card, Select, List, Input } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout'; import PageHeaderLayout from '../../layouts/PageHeaderLayout';
@ -74,34 +74,37 @@ export default class CoverCardList extends PureComponent {
<List <List
rowKey="id" rowKey="id"
loading={loading} loading={loading}
grid={{ gutter: 16, lg: 4, md: 3, sm: 2, xs: 1 }} grid={{ gutter: 24, lg: 4, md: 3, sm: 2, xs: 1 }}
dataSource={list} dataSource={list}
renderItem={item => ( renderItem={item => (
<List.Item> <List.Item>
<Card <Link>
cover={<img alt={item.title} src={item.cover} />} <Card
> hoverable
<Card.Meta cover={<img alt={item.title} src={item.cover} />}
title={item.title} >
description={item.subDescription} <Card.Meta
/> title={item.title}
<div className={styles.cardItemContent}> description={item.subDescription}
<span>{moment(item.updatedAt).fromNow()}</span> />
<div className={styles.avatarList}> <div className={styles.cardItemContent}>
<AvatarList size="small"> <span>{moment(item.updatedAt).fromNow()}</span>
{ <div className={styles.avatarList}>
item.members.map((member, i) => ( <AvatarList size="small">
<AvatarList.Item {
key={`${item.id}-avatar-${i}`} item.members.map((member, i) => (
src={member.avatar} <AvatarList.Item
tips={member.name} key={`${item.id}-avatar-${i}`}
/> src={member.avatar}
)) tips={member.name}
} />
</AvatarList> ))
}
</AvatarList>
</div>
</div> </div>
</div> </Card>
</Card> </Link>
</List.Item> </List.Item>
)} )}
/> />
@ -179,7 +182,7 @@ export default class CoverCardList extends PureComponent {
grid grid
last last
> >
<Row gutter={16}> <Row gutter={24}>
<Col lg={8} md={10} sm={10} xs={24}> <Col lg={8} md={10} sm={10} xs={24}>
<FormItem <FormItem
{...formItemLayout} {...formItemLayout}

7
src/routes/List/CoverCardList.less
View File

@ -2,6 +2,7 @@
@import "../../utils/utils.less"; @import "../../utils/utils.less";
.coverCardList { .coverCardList {
margin-bottom: -24px;
:global { :global {
.ant-card-meta-description { .ant-card-meta-description {
font-size: 12px; font-size: 12px;
@ -9,13 +10,13 @@
} }
.cardItemContent { .cardItemContent {
display: flex; display: flex;
margin-top: 8px; margin-top: 12px;
line-height: 20px; line-height: 20px;
height: 20px; height: 20px;
span { & > span {
color: @disabled-color;
flex: 1; flex: 1;
font-size: 12px; font-size: 12px;
color: @disabled-color;
} }
.avatarList { .avatarList {
flex: 0 1 auto; flex: 0 1 auto;

31
src/routes/List/FilterCardList.js
View File

@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
import numeral from 'numeral'; import numeral from 'numeral';
import { connect } from 'dva'; import { connect } from 'dva';
import { routerRedux } from 'dva/router'; import { routerRedux } from 'dva/router';
import { Row, Col, Form, Card, Select, Icon, Avatar, List, Tooltip, Input } from 'antd'; import { Row, Col, Form, Card, Select, Icon, Avatar, List, Tooltip, Input, Dropdown, Menu } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout'; import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import StandardFormRow from '../../components/StandardFormRow'; import StandardFormRow from '../../components/StandardFormRow';
@ -102,7 +102,6 @@ export default class FilterCardList extends PureComponent {
<div> <div>
<p>活跃用户</p> <p>活跃用户</p>
<p>{activeUser}</p> <p>{activeUser}</p>
<span />
</div> </div>
<div> <div>
<p>新增用户</p> <p>新增用户</p>
@ -130,6 +129,20 @@ export default class FilterCardList extends PureComponent {
}, },
}; };
const itemMenu = (
<Menu>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">1st menu item</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">2nd menu item</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">3d menu item</a>
</Menu.Item>
</Menu>
);
return ( return (
<PageHeaderLayout <PageHeaderLayout
title="带筛选卡片列表" title="带筛选卡片列表"
@ -201,22 +214,22 @@ export default class FilterCardList extends PureComponent {
</Card> </Card>
<List <List
rowKey="id" rowKey="id"
style={{ marginTop: 16 }} style={{ marginTop: 24 }}
grid={{ gutter: 16, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }} grid={{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}
loading={loading} loading={loading}
dataSource={list} dataSource={list}
renderItem={item => ( renderItem={item => (
<List.Item key={item.id}> <List.Item key={item.id}>
<Card <Card
actions={[ actions={[
<Tooltip title="复制"><Icon type="copy" /></Tooltip>, <Tooltip title="下载"><Icon type="download" /></Tooltip>,
<Tooltip title="用户"><Icon type="solution" /></Tooltip>, <Tooltip title="编辑"><Icon type="edit" /></Tooltip>,
<Tooltip title="设置"><Icon type="setting" /></Tooltip>, <Tooltip title="分享"><Icon type="share-alt" /></Tooltip>,
<Tooltip title="删除"><Icon type="delete" /></Tooltip>, <Dropdown overlay={itemMenu}><Icon type="ellipsis" /></Dropdown>,
]} ]}
> >
<Card.Meta <Card.Meta
avatar={<Avatar size="large" src={item.avatar} />} avatar={<Avatar size="small" src={item.avatar} />}
title={item.title} title={item.title}
/> />
<div className={styles.cardItemContent}> <div className={styles.cardItemContent}>

25
src/routes/List/FilterCardList.less
View File

@ -2,43 +2,30 @@
@import "../../utils/utils.less"; @import "../../utils/utils.less";
.filterCardList { .filterCardList {
margin-bottom: -24px;
:global { :global {
.ant-card-meta-title {
position: relative;
top: 8px;
}
.ant-card-meta-content { .ant-card-meta-content {
margin-top: 0; margin-top: 0;
} }
} }
.cardInfo { .cardInfo {
.clearfix(); .clearfix();
border: 1px solid @border-color-base; margin-top: 12px;
border-radius: @border-radius-base; margin-left: 40px;
padding: 8px 0;
margin-top: 16px;
width: 100%;
& > div { & > div {
position: relative; position: relative;
text-align: center; text-align: left;
float: left; float: left;
width: 50%; width: 50%;
& > span {
background-color: @border-color-split;
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 44px;
}
p { p {
color: @text-color-secondary; color: @text-color;
line-height: 32px; line-height: 32px;
font-size: 24px; font-size: 24px;
} }
p:first-child { p:first-child {
font-size: 12px; font-size: 12px;
line-height: 20px; line-height: 20px;
margin-bottom: 4px;
} }
} }
} }

12
src/routes/List/SearchList.js
View File

@ -167,7 +167,7 @@ export default class SearchList extends Component {
}; };
const loadMore = showLoadMore ? ( const loadMore = showLoadMore ? (
<div style={{ textAlign: 'center', marginTop: 8 }}> <div style={{ textAlign: 'center', marginTop: 16 }}>
<Button onClick={this.handleLoadMore}> <Button onClick={this.handleLoadMore}>
{loadingMore && (<span><Icon type="loading" /> 加载中...</span>)} {loadingMore && (<span><Icon type="loading" /> 加载中...</span>)}
{!loadingMore && (<span>加载更多</span>)} {!loadingMore && (<span>加载更多</span>)}
@ -202,7 +202,7 @@ export default class SearchList extends Component {
</FormItem> </FormItem>
</StandardFormRow> </StandardFormRow>
<StandardFormRow <StandardFormRow
title="Owner" title="owner"
grid grid
> >
<Row> <Row>
@ -276,9 +276,13 @@ export default class SearchList extends Component {
</StandardFormRow> </StandardFormRow>
</Form> </Form>
</Card> </Card>
<Card style={{ marginTop: 16 }} bordered={false}> <Card
style={{ marginTop: 24 }}
bordered={false}
bodyStyle={{ padding: '12px 24px 32px 24px' }}
>
<List <List
loading={loading} loading={!loadingMore && loading}
rowKey="id" rowKey="id"
itemLayout="vertical" itemLayout="vertical"
loadMore={loadMore} loadMore={loadMore}

5
src/routes/List/SearchList.less
View File

@ -10,7 +10,7 @@
margin-top: 16px; margin-top: 16px;
height: 22px; height: 22px;
line-height: 22px; line-height: 22px;
img { & > img {
margin-right: 16px; margin-right: 16px;
} }
& > span { & > span {
@ -18,6 +18,9 @@
margin-right: 16px; margin-right: 16px;
width: 20px; width: 20px;
height: 20px; height: 20px;
& > img {
vertical-align: top;
}
} }
& > em { & > em {
color: @disabled-color; color: @disabled-color;

Write Preview
Loading…
Cancel
Save