From d9fb7f7e6d322c86981180388a7abaa5b11fcddc Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Mon, 27 Aug 2018 14:05:46 +0800
Subject: [PATCH] [Improvement] Contact: upgrade style (#1693)

---
 packages/contact-card/index.vue               | 30 ++++-----
 .../test/__snapshots__/demo.spec.js.snap      | 48 +++++---------
 .../test/__snapshots__/index.spec.js.snap     | 13 +---
 packages/contact-list/index.vue               | 20 +++---
 packages/locale/lang/en-US.js                 |  1 -
 packages/locale/lang/zh-CN.js                 |  1 -
 packages/locale/lang/zh-HK.js                 |  1 -
 packages/vant-css/src/address-list.css        |  2 +
 packages/vant-css/src/contact-card.css        | 65 +++++--------------
 packages/vant-css/src/contact-list.css        | 39 +++++------
 10 files changed, 82 insertions(+), 138 deletions(-)

diff --git a/packages/contact-card/index.vue b/packages/contact-card/index.vue
index a9f78b60e..17c06aa39 100644
--- a/packages/contact-card/index.vue
+++ b/packages/contact-card/index.vue
@@ -1,20 +1,18 @@
 <template>
-  <div :class="b([type, { uneditable: !editable }])" @click="onClick">
-    <div :class="b('content')">
-      <template v-if="type === 'add'">
-        <icon :class="b('icon')" name="add2" />
-        <div :class="b('text')">{{ addText || $t('addText') }}</div>
-      </template>
-      <template v-else-if="type === 'edit'">
-        <icon :class="b('icon')" name="contact" />
-        <div :class="b('text')">
-          <div>{{ $t('contact') }}：{{ name }}</div>
-          <div>{{ $t('tel') }}：{{ tel }}</div>
-        </div>
-      </template>
-    </div>
-    <icon v-if="editable" :class="b('arrow')" name="arrow" />
-  </div>
+  <cell
+    center
+    :border="false"
+    :class="b([type])"
+    :is-link="editable"
+    :icon="type === 'edit' ? 'contact' : 'add2'"
+    @click="onClick"
+  >
+    <template v-if="type === 'add'">{{ addText || $t('addText') }}</template>
+    <template v-else>
+      <div>{{ $t('name') }}：{{ name }}</div>
+      <div>{{ $t('tel') }}：{{ tel }}</div>
+    </template>
+  </cell>
 </template>
 
 <script>
diff --git a/packages/contact-card/test/__snapshots__/demo.spec.js.snap b/packages/contact-card/test/__snapshots__/demo.spec.js.snap
index 0957982f3..71aad8910 100644
--- a/packages/contact-card/test/__snapshots__/demo.spec.js.snap
+++ b/packages/contact-card/test/__snapshots__/demo.spec.js.snap
@@ -3,14 +3,13 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-contact-card van-contact-card--add">
-      <div class="van-contact-card__content">
-        <i class="van-icon van-icon-add2 van-contact-card__icon" style="color:undefined;font-size:undefined;">
-          <!---->
-        </i>
-        <div class="van-contact-card__text">添加订单联系人信息</div>
-      </div>
-      <i class="van-icon van-icon-arrow van-contact-card__arrow" style="color:undefined;font-size:undefined;">
+    <div class="van-cell van-cell--center van-cell--clickable van-contact-card van-contact-card--add">
+      <i class="van-icon van-icon-add2 van-cell__left-icon" style="color:undefined;font-size:undefined;">
+        <!---->
+      </i>
+      <!---->
+      <div class="van-cell__value van-cell__value--alone">添加订单联系人信息</div>
+      <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
         <!---->
       </i>
     </div>
@@ -22,7 +21,7 @@ exports[`renders demo correctly 1`] = `
               <!---->
               <!---->
               <div class="van-cell__value van-cell__value--alone">
-                <div class="van-radio"><span class="van-radio__input"><input type="radio" value="0" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label"><p class="van-contact-list__text">联系人：张三</p> <p class="van-contact-list__text">电话：13000000000</p></span></div>
+                <div class="van-radio"><span class="van-radio__input"><input type="radio" value="0" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label"><div class="van-contact-list__name">张三，13000000000</div></span></div>
               </div>
               <i class="van-icon van-icon-edit van-contact-list__edit" style="color:undefined;font-size:undefined;">
                 <!---->
@@ -30,18 +29,8 @@ exports[`renders demo correctly 1`] = `
             </div>
           </div>
         </div>
-        <div class="van-hairline--top van-cell van-cell--clickable van-hairline van-contact-list__add">
-          <i class="van-icon van-icon-add van-cell__left-icon" style="color:undefined;font-size:undefined;">
-            <!---->
-          </i>
-          <div class="van-cell__title"><span>新建联系人</span>
-            <!---->
-          </div>
-          <!---->
-          <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
-            <!---->
-          </i>
-        </div>
+        <button class="van-button van-button--danger van-button--large van-button--square van-contact-list__add">
+          <!----><span class="van-button__text">新建联系人</span></button>
       </div>
     </div>
     <div name="popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
@@ -89,15 +78,14 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-contact-card van-contact-card--edit van-contact-card--uneditable">
-      <div class="van-contact-card__content">
-        <i class="van-icon van-icon-contact van-contact-card__icon" style="color:undefined;font-size:undefined;">
-          <!---->
-        </i>
-        <div class="van-contact-card__text">
-          <div>联系人：张三</div>
-          <div>电话：13000000000</div>
-        </div>
+    <div class="van-cell van-cell--center van-contact-card van-contact-card--edit">
+      <i class="van-icon van-icon-contact van-cell__left-icon" style="color:undefined;font-size:undefined;">
+        <!---->
+      </i>
+      <!---->
+      <div class="van-cell__value van-cell__value--alone">
+        <div>张三：张三</div>
+        <div>电话：13000000000</div>
       </div>
       <!---->
     </div>
diff --git a/packages/contact-card/test/__snapshots__/index.spec.js.snap b/packages/contact-card/test/__snapshots__/index.spec.js.snap
index 27336c7ce..c5c724fb4 100644
--- a/packages/contact-card/test/__snapshots__/index.spec.js.snap
+++ b/packages/contact-card/test/__snapshots__/index.spec.js.snap
@@ -5,17 +5,6 @@ exports[`ContactList render 1`] = `
   <div class="van-radio-group">
     <div class="van-cell-group van-hairline--top-bottom"></div>
   </div>
-  <div class="van-hairline--top van-cell van-cell--clickable van-hairline van-contact-list__add">
-    <i class="van-icon van-icon-add van-cell__left-icon">
-      <!---->
-    </i>
-    <div class="van-cell__title"><span>新建联系人</span>
-      <!---->
-    </div>
-    <!---->
-    <i class="van-icon van-icon-arrow van-cell__right-icon">
-      <!---->
-    </i>
-  </div>
+  <van-button square="" size="large" type="danger" text="新建联系人" class="van-contact-list__add"></van-button>
 </div>
 `;
diff --git a/packages/contact-list/index.vue b/packages/contact-list/index.vue
index 207979280..5af5623fb 100644
--- a/packages/contact-list/index.vue
+++ b/packages/contact-list/index.vue
@@ -4,19 +4,23 @@
       <cell-group>
         <cell v-for="(item, index) in list" :key="item.id" is-link>
           <radio :name="item.id" @click="$emit('select', item, index)">
-            <p :class="b('text')">{{ $t('contact') }}：{{ item.name }}</p>
-            <p :class="b('text')">{{ $t('tel') }}：{{ item.tel }}</p>
+            <div :class="b('name')">{{ item.name }}，{{ item.tel }}</div>
           </radio>
-          <icon slot="right-icon" name="edit" :class="b('edit')" @click="$emit('edit', item, index)" />
+          <icon
+            slot="right-icon"
+            name="edit"
+            :class="b('edit')"
+            @click="$emit('edit', item, index)"
+          />
         </cell>
       </cell-group>
     </radio-group>
-    <cell
-      icon="add"
-      is-link
+    <van-button
+      square
+      size="large"
+      type="danger"
       :class="b('add')"
-      class="van-hairline--top"
-      :title="addText || $t('addText')"
+      :text="addText || $t('addText')"
       @click="$emit('add')"
     />
   </div>
diff --git a/packages/locale/lang/en-US.js b/packages/locale/lang/en-US.js
index 128bfbdb5..e942452b6 100644
--- a/packages/locale/lang/en-US.js
+++ b/packages/locale/lang/en-US.js
@@ -6,7 +6,6 @@ export default {
   cancel: 'Cancel',
   delete: 'Delete',
   complete: 'Complete',
-  contact: 'Name',
   loadingTip: 'Loading...',
   telEmpty: 'Please fill in the tel',
   nameEmpty: 'Please fill in the name',
diff --git a/packages/locale/lang/zh-CN.js b/packages/locale/lang/zh-CN.js
index cf27c5a2e..5c288039e 100644
--- a/packages/locale/lang/zh-CN.js
+++ b/packages/locale/lang/zh-CN.js
@@ -6,7 +6,6 @@ export default {
   cancel: '取消',
   delete: '删除',
   complete: '完成',
-  contact: '联系人',
   loadingTip: '加载中...',
   telEmpty: '请填写电话',
   nameEmpty: '请填写姓名',
diff --git a/packages/locale/lang/zh-HK.js b/packages/locale/lang/zh-HK.js
index 9512d76c4..342426634 100644
--- a/packages/locale/lang/zh-HK.js
+++ b/packages/locale/lang/zh-HK.js
@@ -6,7 +6,6 @@ export default {
   cancel: '取消',
   delete: '刪除',
   complete: '完成',
-  contact: '聯系人',
   loadingTip: '加載中...',
   telEmpty: '請填寫電話',
   nameEmpty: '請填寫姓名',
diff --git a/packages/vant-css/src/address-list.css b/packages/vant-css/src/address-list.css
index c0286339f..7c338cc49 100644
--- a/packages/vant-css/src/address-list.css
+++ b/packages/vant-css/src/address-list.css
@@ -2,6 +2,8 @@
 
 .van-address-list {
   height: 100%;
+  padding-bottom: 100px;
+  box-sizing: border-box;
 
   .van-cell {
     padding: 15px;
diff --git a/packages/vant-css/src/contact-card.css b/packages/vant-css/src/contact-card.css
index 53f5b3180..a7e9c49da 100644
--- a/packages/vant-css/src/contact-card.css
+++ b/packages/vant-css/src/contact-card.css
@@ -1,68 +1,33 @@
 @import './common/var.css';
 
 .van-contact-card {
-  position: relative;
-  background-color: $white;
+  padding: 15px;
 
-  &:active {
-    background-color: $active-color;
-  }
-
-  &--uneditable {
-    &:active {
-      background-color: $white;
-    }
+  .van-cell__value {
+    margin-left: 5px;
+    line-height: 20px;
+    display: inline-block;
+    vertical-align: middle;
   }
 
   &--add {
-    line-height: 40px;
+    .van-cell__value {
+      line-height: 40px;
+    }
 
-    .van-contact-card__icon {
-      width: 40px;
+    .van-cell__left-icon {
       color: $blue;
       font-size: 40px;
     }
   }
 
-  &--edit {
-    .van-contact-card__icon {
-      font-size: 18px;
-      vertical-align: top;
-    }
-  }
-
-  &__content {
-    padding: 15px 10px;
-  }
-
-  &__icon,
-  &__text {
-    display: inline-block;
-    vertical-align: middle;
-  }
-
-  &__icon {
-    margin-right: 10px;
-  }
-
-  &__text {
-    line-height: 20px;
-    font-size: 14px;
-  }
-
-  &__arrow {
-    top: 50%;
-    right: 10px;
-    font-size: 12px;
-    position: absolute;
-    color: $gray-dark;
-    transform: translate3d(0, -50%, 0);
-  }
-
-  &::after {
+  &::before {
     content: '';
-    display: block;
+    left: 0;
+    right: 0;
+    bottom: 0;
     height: 2px;
+    position: absolute;
     background: repeating-linear-gradient(
       -45deg,
       #ff6c6c 0,
diff --git a/packages/vant-css/src/contact-list.css b/packages/vant-css/src/contact-list.css
index 84640c90f..f20df098c 100644
--- a/packages/vant-css/src/contact-list.css
+++ b/packages/vant-css/src/contact-list.css
@@ -2,10 +2,12 @@
 
 .van-contact-list {
   height: 100%;
-  overflow-y: auto;
-  padding-bottom: 55px;
+  padding-bottom: 65px;
   box-sizing: border-box;
-  background-color: $background-color;
+
+  .van-cell {
+    padding: 15px;
+  }
 
   .van-cell__value {
     color: $text-color;
@@ -14,33 +16,40 @@
   }
 
   .van-radio__label {
-    margin-left: 32px;
+    margin-left: 27px;
   }
 
   .van-radio__input {
     top: 50%;
     left: 0;
+    font-size: 16px;
     position: absolute;
     transform: translate(0, -50%);
   }
 
   .van-icon-checked {
-    color: $blue;
+    color: $red;
   }
 
-  &__text {
-    margin: 0;
-    color: $text-color;
+  &__group {
+    height: 100%;
+    overflow-y: scroll;
+    padding-bottom: 100px;
+    box-sizing: border-box;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  &__name {
     font-size: 14px;
-    line-height: 1.5;
+    font-weight: 500;
+    line-height: 20px;
   }
 
   &__edit {
     position: absolute;
     top: 50%;
     right: 15px;
-    font-size: 20px;
-    color: $gray-dark;
+    font-size: 16px;
     transform: translate(0, -50%);
   }
 
@@ -49,13 +58,5 @@
     left: 0;
     bottom: 0;
     z-index: 9999;
-    padding-left: 15px;
-    font-size: 16px;
-
-    .van-icon-add {
-      color: $blue;
-      font-size: 20px;
-      line-height: 1.2;
-    }
   }
 }