From 664e928928fc31e31dc87caf4e4652ffc074b355 Mon Sep 17 00:00:00 2001
From: niko <644506165@qq.com>
Date: Thu, 19 Oct 2017 03:55:15 -0500
Subject: [PATCH] update style (#21)

---
 src/components/Charts/MiniProgress/index.js |  6 +--
 src/components/StandardFormRow/index.less   |  2 +-
 src/components/TagSelect/index.js           | 44 +++++++++++----------
 src/components/TagSelect/index.less         |  9 +++++
 src/layouts/BasicLayout.js                  |  4 +-
 src/layouts/BasicLayout.less                |  8 ++--
 src/routes/List/CardList.js                 |  8 ++--
 src/routes/List/CardList.less               |  2 +-
 src/routes/List/CoverCardList.js            |  2 +-
 src/routes/List/FilterCardList.js           |  4 +-
 src/routes/List/FilterCardList.less         |  8 +++-
 src/routes/List/SearchList.js               |  2 +-
 src/theme.js                                |  1 +
 13 files changed, 59 insertions(+), 41 deletions(-)

diff --git a/src/components/Charts/MiniProgress/index.js b/src/components/Charts/MiniProgress/index.js
index 8d1d82a2..2f0fafcd 100644
--- a/src/components/Charts/MiniProgress/index.js
+++ b/src/components/Charts/MiniProgress/index.js
@@ -1,11 +1,11 @@
 import React from 'react';
-import { Popover } from 'antd';
+import { Tooltip } from 'antd';
 
 import styles from './index.less';
 
 const MiniProgress = ({ target, color, strokeWidth, percent }) => (
   <div className={styles.miniProgress}>
-    <Popover title={null} content={`目标值: ${target}%`}>
+    <Tooltip title={`目标值: ${target}%`}>
       <div
         className={styles.target}
         style={{ left: (target ? `${target}%` : null) }}
@@ -13,7 +13,7 @@ const MiniProgress = ({ target, color, strokeWidth, percent }) => (
         <span style={{ backgroundColor: (color || null) }} />
         <span style={{ backgroundColor: (color || null) }} />
       </div>
-    </Popover>
+    </Tooltip>
     <div className={styles.progressWrap}>
       <div
         className={styles.progress}
diff --git a/src/components/StandardFormRow/index.less b/src/components/StandardFormRow/index.less
index 9f11453d..f1fb2f31 100644
--- a/src/components/StandardFormRow/index.less
+++ b/src/components/StandardFormRow/index.less
@@ -12,7 +12,7 @@
     }
     .ant-form-item-label label {
       color: @text-color;
-      margin-right: 16px;
+      margin-right: 0;
     }
   }
   .label {
diff --git a/src/components/TagSelect/index.js b/src/components/TagSelect/index.js
index a6065e1f..7394152f 100644
--- a/src/components/TagSelect/index.js
+++ b/src/components/TagSelect/index.js
@@ -123,27 +123,29 @@ class TagSelect extends PureComponent {
 
     return (
       <div className={cls} style={style}>
-        <CheckableTag
-          checked={checkedAll}
-          key="tag-select-__all__"
-          onChange={this.onSelectAll}
-        >
-          全部
-        </CheckableTag>
-        {
-          children.filter(child => child.props.displayName === 'TagSelectOption').map(child => React.cloneElement(child, {
-            key: `tag-select-${child.props.value}`,
-            checked: checkedTags.indexOf(child.props.value) > -1,
-            onChange: this.handleTagChange,
-          }))
-        }
-        {
-          expandNode && (
-            <a className={styles.trigger} onClick={this.handleExpand}>
-              { expand ? '收起' : '展开'} <Icon type={expand ? 'up' : 'down'} />
-            </a>
-          )
-        }
+        <div>
+          <CheckableTag
+            checked={checkedAll}
+            key="tag-select-__all__"
+            onChange={this.onSelectAll}
+          >
+            全部
+          </CheckableTag>
+          {
+            children.filter(child => child.props.displayName === 'TagSelectOption').map(child => React.cloneElement(child, {
+              key: `tag-select-${child.props.value}`,
+              checked: checkedTags.indexOf(child.props.value) > -1,
+              onChange: this.handleTagChange,
+            }))
+          }
+          {
+            expandNode && (
+              <a className={styles.trigger} onClick={this.handleExpand}>
+                { expand ? '收起' : '展开'} <Icon type={expand ? 'up' : 'down'} />
+              </a>
+            )
+          }
+        </div>
         {
           expandNode && (
             <div className={expand ? styles.expand : styles.fold}>
diff --git a/src/components/TagSelect/index.less b/src/components/TagSelect/index.less
index c669684b..bc02cc89 100644
--- a/src/components/TagSelect/index.less
+++ b/src/components/TagSelect/index.less
@@ -5,6 +5,12 @@
   user-select: none;
   margin-left: -8px;
   position: relative;
+  :global {
+    .ant-tag {
+      padding: 0 8px;
+      margin-right: 24px;
+    }
+  }
   .expand {
     transition: all 0.32s ease;
     overflow: hidden;
@@ -18,6 +24,9 @@
     position: absolute;
     top: 0;
     right: 0;
+    i {
+      font-size: 12px;
+    }
   }
 }
 .expandTag {
diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js
index 9674e269..f560947f 100644
--- a/src/layouts/BasicLayout.js
+++ b/src/layouts/BasicLayout.js
@@ -193,7 +193,7 @@ class BasicLayout extends React.PureComponent {
           >
             <div className={styles.logo}>
               <Link to="/">
-                <img src="https://gw.alipayobjects.com/zos/rmsportal/osjtaBtmmQzWRvMbcKeb.svg" alt="logo" />
+                <img src="https://gw.alipayobjects.com/zos/rmsportal/iwWyPinUoseUxIAeElSx.svg" alt="logo" />
                 <h1>Ant Design Pro</h1>
               </Link>
             </div>
@@ -204,7 +204,7 @@ class BasicLayout extends React.PureComponent {
               onOpenChange={this.handleOpenChange}
               selectedKeys={this.getCurrentMenuSelectedKeys()}
               style={{ margin: '24px 0', width: '100%' }}
-              inlineIndent={32}
+              inlineIndent={24}
             >
               {this.getNavMenuItems(this.menus)}
             </Menu>
diff --git a/src/layouts/BasicLayout.less b/src/layouts/BasicLayout.less
index 40d3b95d..0fabb0cc 100644
--- a/src/layouts/BasicLayout.less
+++ b/src/layouts/BasicLayout.less
@@ -1,7 +1,7 @@
 @import "~antd/lib/style/themes/default.less";
 
 .header {
-  padding: 0 16px 0 0;
+  padding: 0 12px 0 0;
   background: #fff;
   box-shadow: 0 1px 4px rgba(0, 21, 41, .12);
   position: relative;
@@ -24,7 +24,7 @@
     color: #fff;
     display: inline-block;
     vertical-align: middle;
-    font-size: 22px;
+    font-size: 18px;
     margin-left: 12px;
     font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
     margin-top: -2px;
@@ -43,7 +43,7 @@
   line-height: 64px;
   cursor: pointer;
   transition: all .3s;
-  padding: 0 28px;
+  padding: 0 24px;
   &:hover {
     background: rgba(0, 0, 0, .04);
   }
@@ -103,5 +103,5 @@
   min-height: 100vh;
   box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
   position: relative;
-  z-index: 1;
+  z-index: 10;
 }
diff --git a/src/routes/List/CardList.js b/src/routes/List/CardList.js
index 2866d1b5..0eb54085 100644
--- a/src/routes/List/CardList.js
+++ b/src/routes/List/CardList.js
@@ -62,8 +62,8 @@ export default class CardList extends PureComponent {
             dataSource={['', ...list]}
             renderItem={item => (item ? (
               <List.Item key={item.id}>
-                <Link to="/list/card-list">
-                  <Card hoverable actions={[<a>操作一</a>, <a>操作二</a>]}>
+                <Card hoverable actions={[<a>操作一</a>, <a>操作二</a>]}>
+                  <Link to="/list/card-list">
                     <Card.Meta
                       avatar={<Avatar size="large" src={item.avatar} />}
                       title={item.title}
@@ -73,8 +73,8 @@ export default class CardList extends PureComponent {
                         </p>
                       )}
                     />
-                  </Card>
-                </Link>
+                  </Link>
+                </Card>
               </List.Item>
               ) : (
                 <List.Item>
diff --git a/src/routes/List/CardList.less b/src/routes/List/CardList.less
index 8a5c958c..d6c3cfd8 100644
--- a/src/routes/List/CardList.less
+++ b/src/routes/List/CardList.less
@@ -24,7 +24,7 @@
   border-color: @border-color-base;
   color: @text-color-secondary;
   width: 100%;
-  height: 178px;
+  height: 185px;
 }
 
 .cardDescription {
diff --git a/src/routes/List/CoverCardList.js b/src/routes/List/CoverCardList.js
index 0ad34b5d..6d0aa290 100644
--- a/src/routes/List/CoverCardList.js
+++ b/src/routes/List/CoverCardList.js
@@ -153,7 +153,7 @@ export default class CoverCardList extends PureComponent {
         onTabChange={this.handleTabChange}
       >
         <div className={styles.coverCardList}>
-          <Card bordered={false}>
+          <Card bordered={false} bodyStyle={{ padding: 24 }}>
             <Form layout="inline">
               <StandardFormRow title="所属类目" block>
                 <FormItem>
diff --git a/src/routes/List/FilterCardList.js b/src/routes/List/FilterCardList.js
index 542ef5aa..a42ebddd 100644
--- a/src/routes/List/FilterCardList.js
+++ b/src/routes/List/FilterCardList.js
@@ -151,7 +151,7 @@ export default class FilterCardList extends PureComponent {
         onTabChange={this.handleTabChange}
       >
         <div className={styles.filterCardList}>
-          <Card bordered={false}>
+          <Card bordered={false} bodyStyle={{ padding: 24 }}>
             <Form layout="inline">
               <StandardFormRow title="所属类目" block>
                 <FormItem>
@@ -221,6 +221,8 @@ export default class FilterCardList extends PureComponent {
             renderItem={item => (
               <List.Item key={item.id}>
                 <Card
+                  hoverable
+                  bodyStyle={{ paddingBottom: 16 }}
                   actions={[
                     <Tooltip title="下载"><Icon type="download" /></Tooltip>,
                     <Tooltip title="编辑"><Icon type="edit" /></Tooltip>,
diff --git a/src/routes/List/FilterCardList.less b/src/routes/List/FilterCardList.less
index d8cf0dc7..2be27dff 100644
--- a/src/routes/List/FilterCardList.less
+++ b/src/routes/List/FilterCardList.less
@@ -7,10 +7,14 @@
     .ant-card-meta-content {
       margin-top: 0;
     }
+    // disabled white space
+    .ant-card-meta-avatar {
+      font-size: 0;
+    }
   }
   .cardInfo {
     .clearfix();
-    margin-top: 12px;
+    margin-top: 16px;
     margin-left: 40px;
     & > div {
       position: relative;
@@ -18,7 +22,7 @@
       float: left;
       width: 50%;
       p {
-        color: @text-color;
+        color: @text-color-secondary;
         line-height: 32px;
         font-size: 24px;
       }
diff --git a/src/routes/List/SearchList.js b/src/routes/List/SearchList.js
index 2319fbeb..bcc02434 100644
--- a/src/routes/List/SearchList.js
+++ b/src/routes/List/SearchList.js
@@ -183,7 +183,7 @@ export default class SearchList extends Component {
         onTabChange={this.handleTabChange}
       >
         <div>
-          <Card bordered={false}>
+          <Card bordered={false} bodyStyle={{ padding: 24 }}>
             <Form layout="inline">
               <StandardFormRow title="所属类目" block>
                 <FormItem>
diff --git a/src/theme.js b/src/theme.js
index 20cf8a81..08c3b20b 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -1,4 +1,5 @@
 // https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
 module.exports = {
   // 'primary-color': '#10e99b',
+  'card-actions-background': '#f7f9fa',
 };
-- 
GitLab