From 54b17ee17db2c9dd5bceb4ac71afe73bf2435e29 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 26 Oct 2017 16:41:56 +0800
Subject: [PATCH] Fix workspace style

---
 src/components/Charts/Radar/index.js   | 37 +++++++++++++++++++++-----
 src/components/Charts/Radar/index.less | 22 ++++++++-------
 src/routes/Dashboard/Workplace.js      | 26 +++++++++---------
 src/routes/Dashboard/Workplace.less    | 30 +++++++++------------
 4 files changed, 67 insertions(+), 48 deletions(-)

diff --git a/src/components/Charts/Radar/index.js b/src/components/Charts/Radar/index.js
index 1da52c38..b3c1afcf 100644
--- a/src/components/Charts/Radar/index.js
+++ b/src/components/Charts/Radar/index.js
@@ -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>
                   ))
diff --git a/src/components/Charts/Radar/index.less b/src/components/Charts/Radar/index.less
index 1978111f..a3e85eeb 100644
--- a/src/components/Charts/Radar/index.less
+++ b/src/components/Charts/Radar/index.less
@@ -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;
     }
   }
 }
diff --git a/src/routes/Dashboard/Workplace.js b/src/routes/Dashboard/Workplace.js
index d18c7248..935a3a58 100644
--- a/src/routes/Dashboard/Workplace.js
+++ b/src/routes/Dashboard/Workplace.js
@@ -189,9 +189,13 @@ 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}>
@@ -222,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="团队"
             >
@@ -246,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>
                     ))
diff --git a/src/routes/Dashboard/Workplace.less b/src/routes/Dashboard/Workplace.less
index 50a0ce45..0174a317 100644
--- a/src/routes/Dashboard/Workplace.less
+++ b/src/routes/Dashboard/Workplace.less
@@ -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;
   }
 }
 
@@ -80,28 +81,21 @@
 }
 
 .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 {
-- 
GitLab