Skip to content

GitLab

A
ant-design-pro
Commit 348c62be authored by ddcat1115's avatar ddcat1115
Browse files
Options

Merge branch 'master' of https://github.com/ant-design/test2

parents 9c0b6752 54b17ee1
Hide whitespace changes
Inline Side-by-side
Showing with 110 additions and 91 deletions
src/components/Charts/Radar/index.js
View file @ 348c62be
......@@ -53,9 +53,11 @@ class Radar extends PureComponent {
hasLegend = true,
fit = true,
tickCount = 4,
margin = [16, 30, 16, 30] } = this.props;
margin = [24, 30, 16, 30] } = this.props;
const colors = ['#1890FF', '#FACC14', '#2FC25B'];
const colors = [
'#1890FF', '#FACC14', '#2FC25B', '#8543E0', '#F04864', '#13C2C2', '#fa8c16', '#a0d911',
];
if (!data || (data && data.length < 1)) {
return;
......@@ -87,16 +89,40 @@ class Radar extends PureComponent {
chart.axis('label', {
line: null,
labelOffset: 8,
labels: {
label: {
fill: 'rgba(0, 0, 0, .65)',
},
},
grid: {
line: {
stroke: '#e9e9e9',
lineWidth: 1,
lineDash: [0, 0],
},
},
});
chart.axis('value', {
grid: {
type: 'polygon',
line: {
stroke: '#e9e9e9',
lineWidth: 1,
lineDash: [0, 0],
},
},
labels: {
label: {
fill: 'rgba(0, 0, 0, .65)',
},
},
});
chart.line().position('label*value').color('name', colors);
chart.point().position('label*value').color('name', colors).shape('circle');
chart.point().position('label*value').color('name', colors).shape('circle')
.size(3);
chart.render();
......@@ -129,7 +155,7 @@ class Radar extends PureComponent {
return (
<div className={styles.radar} style={{ height }}>
<div>
{ title && <h4>{title}</h4>}
{title && <h4>{title}</h4>}
<div ref={this.handleRef} />
{
hasLegend && (
......@@ -147,9 +173,6 @@ class Radar extends PureComponent {
<span>{item.name}</span>
</p>
<h6>{item.value}</h6>
{
i !== (legendData.length - 1) && <div className={styles.split} />
}
</div>
</Col>
))
......
src/components/Charts/Radar/index.less
View file @ 348c62be
......@@ -7,33 +7,37 @@
.legendItem {
position: relative;
text-align: center;
p {
cursor: pointer;
}
cursor: pointer;
color: @text-color-secondary;
line-height: 22px;
h6 {
color: @heading-color;
padding-left: 16px;
font-size: 24px;
line-height: 32px;
margin-top: 2px;
margin-top: 4px;
}
.split {
&:after {
background-color: @border-color-split;
position: absolute;
top: 8px;
right: 0;
height: 40px;
width: 1px;
content: '';
}
}
> :last-child .legendItem:after {
display: none;
}
.dot {
border-radius: 8px;
border-radius: 6px;
display: inline-block;
margin-right: 8px;
margin-right: 6px;
position: relative;
top: -1px;
height: 8px;
width: 8px;
height: 6px;
width: 6px;
}
}
}
src/components/EditableLinkGroup/index.js
View file @ 348c62be
import React, { PureComponent, createElement } from 'react';
import PropTypes from 'prop-types';
import { Button, Icon } from 'antd';
import { Button } from 'antd';
import styles from './index.less';
// TODO: 添加逻辑
......@@ -32,8 +32,8 @@ class EditableLinkGroup extends PureComponent {
))
}
{
<Button size="small" onClick={onAdd}>
<Icon type="plus" />添加
<Button size="small" type="primary" ghost onClick={onAdd} icon="plus">
添加
</Button>
}
</div>
......
src/components/EditableLinkGroup/index.less
View file @ 348c62be
......@@ -8,23 +8,9 @@
display: inline-block;
font-size: @font-size-base;
margin-bottom: 13px;
margin-right: 32px;
width: 25%;
&:hover {
color: @primary-color;
}
}
& > button {
border-color: @primary-color;
color: @primary-color;
padding-left: 12px;
padding-right: 12px;
i {
position: relative;
top: -1px;
}
span {
position: relative;
top: -1px;
}
}
}
src/routes/Dashboard/Workplace.js
View file @ 348c62be
......@@ -106,7 +106,7 @@ export default class Workplace extends PureComponent {
const pageHeaderContent = (
<div className={styles.pageHeaderContent}>
<div className={styles.avatar}>
<Avatar size="large" src="https://gw.alipayobjects.com/zos/rmsportal/XertDCubOxUvZbCdgWTW.png" />
<Avatar size="large" src="https://gw.alipayobjects.com/zos/rmsportal/TmNVmrOsXeZwnvvZMNmo.png" />
</div>
<div className={styles.content}>
<p className={styles.contentTitle}>早安，曲丽丽，祝你开心每一天！</p>
......@@ -120,12 +120,10 @@ export default class Workplace extends PureComponent {
<div>
<p>项目数</p>
<p>56</p>
<em />
</div>
<div>
<p>团队内排名</p>
<p>8<span> / 24</span></p>
<em />
</div>
<div>
<p>项目访问</p>
......@@ -156,18 +154,20 @@ export default class Workplace extends PureComponent {
<Card bodyStyle={{ padding: 0 }} bordered={false}>
<Card.Meta
title={(
<span className={styles.cardTitle}>
<div className={styles.cardTitle}>
<Avatar size="small" src={item.logo} />
<Link to={item.href}>{item.title}</Link>
</span>
</div>
)}
description={item.description}
/>
<div className={styles.projectItemContent}>
<Link to={item.memberLink}>{item.member || ''}</Link>
{
item.updatedAt && <span>{moment(item.updatedAt).fromNow()}</span>
}
{item.updatedAt && (
<span className={styles.datetime} title={item.updatedAt}>
{moment(item.updatedAt).fromNow()}
</span>
)}
</div>
</Card>
</Card.Grid>
......@@ -189,11 +189,19 @@ export default class Workplace extends PureComponent {
<List.Item.Meta
avatar={<Avatar src={item.user.avatar} />}
title={
<p>
<a style={{ fontWeight: 'bold' }}>{item.user.name}</a> 在 <a>xx</a> 新建了项目 <a>xxxx</a>
</p>
<span>
<a className={styles.username}>{item.user.name}</a>
&nbsp;
<span className={styles.operation}>
在 <a>xx</a> 新建了项目 <a>xxxx</a>
</span>
</span>
}
description={
<span className={styles.datetime} title={item.updatedAt}>
{moment(item.updatedAt).fromNow()}
</span>
}
description={moment(item.updatedAt).fromNow()}
/>
</List.Item>
))
......@@ -218,21 +226,15 @@ export default class Workplace extends PureComponent {
<Card
style={{ marginBottom: 24 }}
bordered={false}
title="xx 指数"
title="XX 指数"
loading={radarData.length === 0}
>
<div className={styles.chart}>
{
<Radar
hasLegend
height={286}
data={radarData}
/>
}
<Radar hasLegend height={286} data={radarData} />
</div>
</Card>
<Card
bodyStyle={{ paddingBottom: 0 }}
bodyStyle={{ paddingTop: 12, paddingBottom: 12 }}
bordered={false}
title="团队"
>
......@@ -242,8 +244,8 @@ export default class Workplace extends PureComponent {
members.map(item => (
<Col span={12} key={`members-item-${item.id}`}>
<Link to={item.link}>
<img src={item.logo} alt={item.title} />
<span>{item.title}</span>
<Avatar src={item.logo} size="small" />
<span className={styles.member}>{item.title}</span>
</Link>
</Col>
))
......
src/routes/Dashboard/Workplace.less
View file @ 348c62be
......@@ -2,11 +2,12 @@
@import "../../utils/utils.less";
.activitiesList {
padding: 0 24px 24px 24px;
:global {
.ant-list-item-meta-title:hover {
color: @text-color;
}
padding: 0 24px 8px 24px;
.username {
color: @text-color;
}
.operation {
font-weight: normal;
}
}
......@@ -14,7 +15,7 @@
display: flex;
.avatar {
flex: 0 1 72px;
margin-bottom: 12px;
margin-bottom: 8px;
& > span {
border-radius: 72px;
display: block;
......@@ -24,12 +25,14 @@
}
.content {
position: relative;
top: 8px;
top: 4px;
margin-left: 24px;
flex: 1 1 auto;
color: @text-color-secondary;
line-height: 22px;
.contentTitle {
font-size: 20px;
line-height: 28px;
font-weight: 500;
color: @heading-color;
margin-bottom: 12px;
......@@ -40,7 +43,6 @@
.pageHeaderExtra {
.clearfix();
float: right;
margin-right: 8px;
& > div {
padding: 0 32px;
position: relative;
......@@ -60,43 +62,40 @@
font-size: 20px;
}
}
& > em {
&:after {
background-color: @border-color-split;
position: absolute;
top: 8px;
right: 0;
width: 1px;
height: 40px;
content: '';
}
}
& > div:last-child {
padding-right: 0;
&:after {
display: none;
}
}
}
.members {
margin-bottom: 35px;
a {
display: block;
margin-bottom: 24px;
margin: 12px 0;
line-height: 24px;
height: 24px;
.textOverflow();
img {
border-radius: 24px;
display: inline;
position: relative;
top: -2px;
width: 24px;
height: 24px;
margin-right: 12px;
vertical-align: middle;
}
span {
.member {
font-size: @font-size-base;
color: @text-color;
line-height: 24px;
max-width: 100px;
vertical-align: top;
margin-left: 12px;
transition: all .3s;
display: inline-block;
.textOverflow();
}
&:hover {
......@@ -111,20 +110,21 @@
:global {
.ant-card-meta-description {
color: @text-color-secondary;
min-height: 42px;
height: 44px;
line-height: 22px;
overflow: hidden;
}
}
.cardTitle {
font-size: 14px;
:global {
.ant-avatar {
position: relative;
top: 5px;
}
}
font-size: 0;
a {
color: @heading-color;
margin-left: 12px;
line-height: 24px;
height: 24px;
display: inline-block;
vertical-align: top;
font-size: @font-size-base;
&:hover {
color: @primary-color;
}
......@@ -135,7 +135,7 @@
}
.projectItemContent {
display: flex;
margin-top: 12px;
margin-top: 8px;
overflow: hidden;
font-size: 12px;
height: 20px;
......@@ -150,14 +150,18 @@
color: @primary-color;
}
}
span {
color: @text-color-secondary;
.datetime {
color: @disabled-color;
flex: 0 0 auto;
float: right;
}
}
}
.datetime {
color: @disabled-color;
}
@media screen and (max-width: @screen-xl) and (min-width: @screen-lg) {
.activeCard {
margin-bottom: 24px;
......@@ -186,7 +190,7 @@
& > div {
padding: 0 16px;
text-align: left;
& > em {
&:after {
display: none;
}
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment