From 1764c4a0eaf26b060a41e19c38a915ed1111acf8 Mon Sep 17 00:00:00 2001
From: zwjamnsss <zwjamnsss@gmail.com>
Date: Tue, 18 Jul 2017 18:23:38 +0800
Subject: [PATCH] feat: add style

---
 .../ProjectGroups/GroupList/GroupList.js      | 21 ++++++++++++++-----
 .../ProjectGroups/GroupList/GroupList.scss    | 14 +++++++++++++
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/client/containers/ProjectGroups/GroupList/GroupList.js b/client/containers/ProjectGroups/GroupList/GroupList.js
index 073d3ef0..1c9979f2 100644
--- a/client/containers/ProjectGroups/GroupList/GroupList.js
+++ b/client/containers/ProjectGroups/GroupList/GroupList.js
@@ -5,6 +5,8 @@ import { Button, Icon, Modal, Input, message, Menu } from 'antd'
 import { autobind } from 'core-decorators';
 import axios from 'axios';
 
+const Search = Input.Search;
+
 import {
   fetchGroupList,
   setCurrGroup,
@@ -93,18 +95,23 @@ export default class GroupList extends Component {
       <div>
         <div className="group-bar">
           <div className="curr-group">
-            <div className="curr-group-name">{currGroup.group_name}</div>
+            <div className="curr-group-name">{currGroup.group_name}<Icon className="edit-group" type="edit"/></div>
             <div className="curr-group-desc">简介：{currGroup.group_desc}</div>
           </div>
           <div className="group-operate">
+            <div className="search">
+              <Search
+                placeholder="input search text"
+                onSearch={value => console.log(value)}
+              />
+            </div>
             <Button type="primary" onClick={this.showModal}>添加分组</Button>
           </div>
           <Menu className="group-list" mode="inline">
             {
               groupList.map((group, index) => (
                 <Menu.Item key={index} className="group-item">
-                  <div className="group-name">{group.group_name}</div>
-                  <div className="group-edit"><Icon type="edit" /></div>
+                  <Icon type="folder-open" />{group.group_name}
                 </Menu.Item>
               ))
             }
@@ -116,8 +123,12 @@ export default class GroupList extends Component {
           onOk={this.addGroup}
           onCancel={this.handleCancel}
         >
-          <Input placeholder="请输入分组名称" onChange={this.inputNewGroupName}></Input>
-          <Input placeholder="请输入分组描述" onChange={this.inputNewGroupDesc}></Input>
+          <div className="modal-input">
+            分组名：<Input placeholder="请输入分组名称" onChange={this.inputNewGroupName} style={{display: 'inline-block'}}></Input>
+          </div>
+          <div className="modal-input">
+            简介：<Input placeholder="请输入分组描述" onChange={this.inputNewGroupDesc} style={{display: 'inline-block'}}></Input>
+          </div>
         </Modal>
       </div>
     )
diff --git a/client/containers/ProjectGroups/GroupList/GroupList.scss b/client/containers/ProjectGroups/GroupList/GroupList.scss
index 10d7d7b1..000690ef 100644
--- a/client/containers/ProjectGroups/GroupList/GroupList.scss
+++ b/client/containers/ProjectGroups/GroupList/GroupList.scss
@@ -12,11 +12,22 @@
       color: #fff;
       font-size: 12px;
     }
+    .edit-group {
+      margin-left: 12px;
+      cursor: pointer;
+    }
+    .edit-group:hover {
+      color: #ccc;
+    }
   }
   .group-operate {
     height: 48px;
     padding: 10px 6px;
     background: #fff;
+    .search {
+      display: inline-block;
+      margin-right: 6px;
+    }
   }
   .group-list {
     // background: #fff;
@@ -45,3 +56,6 @@
     }
   }
 }
+.modal-input {
+  margin: 24px;
+}