From c11c0bb4c7231440fb829414bd572fbfb7ebf6ea Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Thu, 8 Feb 2018 09:47:15 +0800
Subject: [PATCH] [Improvement] Loading: change default type to circular (#623)

---
 docs/demos/views/button.vue      |  4 ++++
 docs/demos/views/loading.vue     | 29 +++++++++++------------------
 docs/demos/views/toast.vue       |  3 ++-
 docs/markdown/en-US/loading.md   | 21 +++++++--------------
 docs/markdown/en-US/toast.md     |  5 ++++-
 docs/markdown/zh-CN/loading.md   | 21 +++++++--------------
 docs/markdown/zh-CN/toast.md     |  5 ++++-
 packages/actionsheet/index.vue   |  2 +-
 packages/button/index.vue        |  7 +------
 packages/loading/index.vue       |  2 +-
 packages/picker/index.vue        |  2 +-
 packages/toast/toast.vue         |  6 +++++-
 packages/vant-css/src/button.css |  4 ----
 packages/vant-css/src/switch.css |  6 ++----
 14 files changed, 50 insertions(+), 67 deletions(-)

diff --git a/docs/demos/views/button.vue b/docs/demos/views/button.vue
index cad8cdfc4..7d3b5a291 100644
--- a/docs/demos/views/button.vue
+++ b/docs/demos/views/button.vue
@@ -92,6 +92,10 @@ export default {
     &--normal {
       margin-right: 10px;
     }
+
+    .van-loading {
+      margin: 0 18px;
+    }
   }
 
   .van-doc-demo-block {
diff --git a/docs/demos/views/loading.vue b/docs/demos/views/loading.vue
index c4870a2bf..b6726f641 100644
--- a/docs/demos/views/loading.vue
+++ b/docs/demos/views/loading.vue
@@ -1,23 +1,18 @@
 <template>
   <demo-section>
     <demo-block :title="$t('title1')">
-      <van-loading type="circle" color="black" />
-      <van-loading type="circle" color="white" />
+      <van-loading color="black" />
+      <van-loading color="white" />
     </demo-block>
 
     <demo-block :title="$t('title2')">
-      <van-loading type="gradient-circle" color="black" />
-      <van-loading type="gradient-circle" color="white" />
-    </demo-block>
-
-    <demo-block :title="$t('title3')">
       <van-loading type="spinner" color="black" />
       <van-loading type="spinner" color="white" />
     </demo-block>
 
-    <demo-block :title="$t('title4')">
-      <van-loading type="circular" color="black" />
-      <van-loading type="circular" color="white" />
+    <demo-block :title="$t('title3')">
+      <van-loading type="circle" color="black" />
+      <van-loading type="circle" color="white" />
     </demo-block>
   </demo-section>
 </template>
@@ -26,16 +21,14 @@
 export default {
   i18n: {
     'zh-CN': {
-      title1: '单色圆环',
-      title2: '渐变色圆环',
-      title3: 'Spinner',
-      title4: 'Circular'
+      title1: 'Circular',
+      title2: 'Spinner',
+      title3: 'Circle'
     },
     'en-US': {
-      title1: 'Solid Circle',
-      title2: 'Gradient Circle',
-      title3: 'Spinner',
-      title4: 'Circular'
+      title1: 'Circular',
+      title2: 'Spinner',
+      title3: 'Circle'
     }
   }
 };
diff --git a/docs/demos/views/toast.vue b/docs/demos/views/toast.vue
index 7e5c62bc1..e08891241 100644
--- a/docs/demos/views/toast.vue
+++ b/docs/demos/views/toast.vue
@@ -23,6 +23,7 @@
 export default {
   i18n: {
     'zh-CN': {
+      loading: '加载中',
       title1: '文字提示',
       title2: '加载提示',
       title3: '成功/失败提示',
@@ -52,7 +53,7 @@ export default {
     },
 
     showLoadingToast() {
-      Toast.loading({ mask: true });
+      Toast.loading({ mask: true, message: this.$t('loading') + '...' });
     },
 
     showSuccessToast() {
diff --git a/docs/markdown/en-US/loading.md b/docs/markdown/en-US/loading.md
index 9676585aa..73c7bf0d4 100644
--- a/docs/markdown/en-US/loading.md
+++ b/docs/markdown/en-US/loading.md
@@ -9,18 +9,11 @@ Vue.use(Loading);
 
 ### Usage
 
-#### Solid Circle
+#### Circular
 
 ```html
-<van-loading type="circle" color="black" />
-<van-loading type="circle" color="white" />
-```
-
-#### Gradient Circle
-
-```html
-<van-loading type="gradient-circle" color="black" />
-<van-loading type="gradient-circle" color="white" />
+<van-loading color="black" />
+<van-loading color="white" />
 ```
 
 #### Spinner
@@ -30,11 +23,11 @@ Vue.use(Loading);
 <van-loading type="spinner" color="white" />
 ```
 
-#### Circular
+#### Circle
 
 ```html
-<van-loading type="circular" color="black" />
-<van-loading type="circular" color="white" />
+<van-loading type="circle" color="black" />
+<van-loading type="circle" color="white" />
 ```
 
 ### API
@@ -42,5 +35,5 @@ Vue.use(Loading);
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
 | color | Color | `String` | `black` | `black` `white` |
-| type | Type | `String` | `gradient-circle` | `spinner` `circle` |
+| type | Type | `String` | `circular` | `spinner` `circle` |
 | size | Size | `String` | `30px` | - |
diff --git a/docs/markdown/en-US/toast.md b/docs/markdown/en-US/toast.md
index 30aa56739..10927d2a9 100644
--- a/docs/markdown/en-US/toast.md
+++ b/docs/markdown/en-US/toast.md
@@ -18,7 +18,10 @@ Toast('Some messages');
 #### Loading
 
 ```javascript
-Toast.loading({ mask: true });
+Toast.loading({
+  mask: true,
+  message: 'Loading...'
+});
 ```
 
 
diff --git a/docs/markdown/zh-CN/loading.md b/docs/markdown/zh-CN/loading.md
index b5e8651f6..b60c9da49 100644
--- a/docs/markdown/zh-CN/loading.md
+++ b/docs/markdown/zh-CN/loading.md
@@ -9,18 +9,11 @@ Vue.use(Loading);
 
 ### 代码演示
 
-#### 单色圆环
+#### Circular
 
 ```html
-<van-loading type="circle" color="black" />
-<van-loading type="circle" color="white" />
-```
-
-#### 渐变色圆环
-
-```html
-<van-loading type="gradient-circle" color="black" />
-<van-loading type="gradient-circle" color="white" />
+<van-loading color="black" />
+<van-loading color="white" />
 ```
 
 #### Spinner
@@ -30,11 +23,11 @@ Vue.use(Loading);
 <van-loading type="spinner" color="white" />
 ```
 
-#### Circular
+#### Circle
 
 ```html
-<van-loading type="circular" color="black" />
-<van-loading type="circular" color="white" />
+<van-loading type="circle" color="black" />
+<van-loading type="circle" color="white" />
 ```
 
 ### API
@@ -42,5 +35,5 @@ Vue.use(Loading);
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
 | color | 颜色 | `String` | `black` | `black` `white` |
-| type | 类型 | `String` | `gradient-circle` | `spinner` `circle` |
+| type | 类型 | `String` | `circular` | `spinner` `circle` |
 | size | 大小 | `String` | `30px` | - |
diff --git a/docs/markdown/zh-CN/toast.md b/docs/markdown/zh-CN/toast.md
index da42f3826..a6955a265 100644
--- a/docs/markdown/zh-CN/toast.md
+++ b/docs/markdown/zh-CN/toast.md
@@ -18,7 +18,10 @@ Toast('我是提示文案，建议不超过十五字~');
 #### 加载提示
 
 ```javascript
-Toast.loading({ mask: true });
+Toast.loading({
+  mask: true,
+  message: '加载中...'
+});
 ```
 
 
diff --git a/packages/actionsheet/index.vue b/packages/actionsheet/index.vue
index 0cc15f580..f04920049 100644
--- a/packages/actionsheet/index.vue
+++ b/packages/actionsheet/index.vue
@@ -17,7 +17,7 @@
             <span class="van-actionsheet__name">{{ item.name }}</span>
             <span class="van-actionsheet__subname" v-if="item.subname">{{ item.subname }}</span>
           </template>
-          <loading v-else class="van-actionsheet__loading" type="circle" />
+          <loading v-else class="van-actionsheet__loading" size="20px" />
         </li>
       </ul>
       <div
diff --git a/packages/button/index.vue b/packages/button/index.vue
index 4fe3aab95..8e9df67d0 100644
--- a/packages/button/index.vue
+++ b/packages/button/index.vue
@@ -16,12 +16,7 @@
     ]"
     @click="onClick"
   >
-    <loading
-      v-if="loading"
-      class="van-button__icon-loading"
-      type="circle"
-      :color="type === 'default' ? 'black' : 'white'"
-    />
+    <loading v-if="loading" size="20px" :color="type === 'default' ? 'black' : 'white'" />
     <span class="van-button__text">
       <slot>{{ text }}</slot>
     </span>
diff --git a/packages/loading/index.vue b/packages/loading/index.vue
index 4ba0f1819..897ac305e 100644
--- a/packages/loading/index.vue
+++ b/packages/loading/index.vue
@@ -21,7 +21,7 @@ export default {
     size: String,
     type: {
       type: String,
-      default: 'gradient-circle'
+      default: 'circular'
     },
     color: {
       type: String,
diff --git a/packages/picker/index.vue b/packages/picker/index.vue
index faecea353..843e74091 100644
--- a/packages/picker/index.vue
+++ b/packages/picker/index.vue
@@ -8,7 +8,7 @@
       </slot>
     </div>
     <div v-if="loading" class="van-picker__loading">
-      <loading type="circular" />
+      <loading />
     </div>
     <div class="van-picker__columns" :style="columnsStyle" @touchmove.prevent>
       <picker-column
diff --git a/packages/toast/toast.vue b/packages/toast/toast.vue
index 04630688c..3e5d60526 100644
--- a/packages/toast/toast.vue
+++ b/packages/toast/toast.vue
@@ -10,7 +10,7 @@
         <template v-if="displayStyle === 'default'">
           <loading v-if="type === 'loading'" color="white" />
           <icon v-else class="van-toast__icon" :name="type" />
-          <div v-if="message !== undefined" class="van-toast__text">{{ message }}</div>
+          <div v-if="hasMessage" class="van-toast__text">{{ message }}</div>
         </template>
       </div>
       <div class="van-toast__overlay" :class="{ 'van-toast__overlay--mask': mask }" v-if="forbidClick || mask" />
@@ -49,6 +49,10 @@ export default create({
   computed: {
     displayStyle() {
       return STYLE_LIST.indexOf(this.type) !== -1 ? 'default' : this.type;
+    },
+
+    hasMessage() {
+      return this.message || this.message === 0;
     }
   }
 });
diff --git a/packages/vant-css/src/button.css b/packages/vant-css/src/button.css
index d55aa67b0..ef92beafb 100644
--- a/packages/vant-css/src/button.css
+++ b/packages/vant-css/src/button.css
@@ -31,10 +31,6 @@
     opacity: .3;
   }
 
-  &__icon-loading {
-    display: inline-block;
-  }
-
   &--default {
     color: $button-default-color;
     background-color: $button-default-background-color;
diff --git a/packages/vant-css/src/switch.css b/packages/vant-css/src/switch.css
index 746b81e52..a1341b945 100644
--- a/packages/vant-css/src/switch.css
+++ b/packages/vant-css/src/switch.css
@@ -30,13 +30,11 @@
   }
 
   &__loading {
+    top: 50%;
+    left: 50%;
     width: 16px;
     height: 16px;
-    position: relative;
-    left: 50%;
-    top: 50%;
     transform: translate3d(-50%, -50%, 0);
-    margin: 0;
   }
 
   &--on {