From a61acfdcb725579735574e250f1ef7840975347c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Tue, 26 Jun 2018 09:43:26 +0800
Subject: [PATCH] update Transfer icons

---
 examples/routers/transfer.vue         | 42 +++++++++++++++++----------
 src/components/transfer/operation.vue |  4 +--
 src/components/transfer/search.vue    |  2 +-
 src/styles/components/transfer.less   |  9 +++++-
 4 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/examples/routers/transfer.vue b/examples/routers/transfer.vue
index 7a7a4a4c..ab918085 100644
--- a/examples/routers/transfer.vue
+++ b/examples/routers/transfer.vue
@@ -1,16 +1,27 @@
 <template>
     <Transfer
-            :data="data1"
-            :target-keys="targetKeys1"
-            :render-format="render1"
-            @on-change="handleChange1"></Transfer>
+            :data="data3"
+            :target-keys="targetKeys3"
+            :list-style="listStyle"
+            :render-format="render3"
+            :operations="['To left','To right']"
+            filterable
+            @on-change="handleChange3">
+        <div :style="{float: 'right', margin: '5px'}">
+            <Button type="ghost" size="small" @click="reloadMockData">Refresh</Button>
+        </div>
+    </Transfer>
 </template>
 <script>
     export default {
         data () {
             return {
-                data1: this.getMockData(),
-                targetKeys1: this.getTargetKeys()
+                data3: this.getMockData(),
+                targetKeys3: this.getTargetKeys(),
+                listStyle: {
+                    width: '250px',
+                    height: '300px'
+                }
             }
         },
         methods: {
@@ -19,8 +30,8 @@
                 for (let i = 1; i <= 20; i++) {
                     mockData.push({
                         key: i.toString(),
-                        label: '内容' + i,
-                        description: '内容' + i + '的描述信息',
+                        label: 'Content ' + i,
+                        description: 'The desc of content  ' + i,
                         disabled: Math.random() * 3 < 1
                     });
                 }
@@ -31,14 +42,15 @@
                     .filter(() => Math.random() * 2 > 1)
                     .map(item => item.key);
             },
-            render1 (item) {
-                return item.label;
+            handleChange3 (newTargetKeys) {
+                this.targetKeys3 = newTargetKeys;
             },
-            handleChange1 (newTargetKeys, direction, moveKeys) {
-                console.log(newTargetKeys);
-                console.log(direction);
-                console.log(moveKeys);
-                this.targetKeys1 = newTargetKeys;
+            render3 (item) {
+                return item.label + ' - ' + item.description;
+            },
+            reloadMockData () {
+                this.data3 = this.getMockData();
+                this.targetKeys3 = this.getTargetKeys();
             }
         }
     }
diff --git a/src/components/transfer/operation.vue b/src/components/transfer/operation.vue
index 9950c64b..177f6b0a 100644
--- a/src/components/transfer/operation.vue
+++ b/src/components/transfer/operation.vue
@@ -1,10 +1,10 @@
 <template>
     <div :class="prefixCls + '-operation'">
         <i-button type="primary" size="small" :disabled="!rightActive" @click.native="moveToLeft">
-            <Icon type="ios-arrow-left"></Icon> {{ operations[0] }}
+            <Icon type="ios-arrow-back"></Icon> <span>{{ operations[0] }}</span>
         </i-button>
         <i-button type="primary" size="small" :disabled="!leftActive" @click.native="moveToRight">
-            {{ operations[1] }} <Icon type="ios-arrow-right"></Icon>
+            <span>{{ operations[1] }}</span> <Icon type="ios-arrow-forward"></Icon>
         </i-button>
     </div>
 </template>
diff --git a/src/components/transfer/search.vue b/src/components/transfer/search.vue
index ba85bfc7..d7f98817 100644
--- a/src/components/transfer/search.vue
+++ b/src/components/transfer/search.vue
@@ -34,7 +34,7 @@
         },
         computed: {
             icon () {
-                return this.query === '' ? 'ios-search' : 'ios-close';
+                return this.query === '' ? 'ios-search' : 'ios-close-circle';
             }
         },
         methods: {
diff --git a/src/styles/components/transfer.less b/src/styles/components/transfer.less
index bbadb235..1a756907 100644
--- a/src/styles/components/transfer.less
+++ b/src/styles/components/transfer.less
@@ -115,7 +115,7 @@
     }
     &-operation {
         display: inline-block;
-        overflow: hidden;
+        //overflow: hidden;
         margin: 0 16px;
         vertical-align: middle;
 
@@ -127,6 +127,13 @@
                 margin-bottom: 12px;
             }
         }
+        .@{btn-prefix-cls}{
+            span {
+                i, span{
+                    vertical-align: middle;
+                }
+            }
+        }
     }
 }
 .select-item(@transfer-prefix-cls, @transfer-item-prefix-cls);
\ No newline at end of file