From eee44f0d7c5a0f0418f20863bba95171a9efa789 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Fri, 18 May 2018 14:28:33 +0800
Subject: [PATCH] [Improvement] Progress: support gradient color (#1098)

---
 docs/src/demo-common.js                       |  2 ++
 docs/src/index.js                             |  2 +-
 packages/progress/demo/index.vue              | 25 +++++++-------
 packages/progress/en-US.md                    | 32 +++++++++++------
 packages/progress/index.vue                   | 15 ++++----
 .../test/__snapshots__/demo.spec.js.snap      | 19 ++++++-----
 packages/progress/zh-CN.md                    | 34 +++++++++++++------
 packages/vant-css/src/progress.css            | 14 ++++----
 8 files changed, 87 insertions(+), 56 deletions(-)

diff --git a/docs/src/demo-common.js b/docs/src/demo-common.js
index 900655b8e..2c353a3ac 100644
--- a/docs/src/demo-common.js
+++ b/docs/src/demo-common.js
@@ -33,6 +33,7 @@ Locale.add({
     red: '红色',
     orange: '橙色',
     yellow: '黄色',
+    purple: '紫色',
     tab: '标签',
     tag: '标签',
     desc: '描述信息',
@@ -60,6 +61,7 @@ Locale.add({
     red: 'Red',
     orange: 'Orange',
     yellow: 'Yellow',
+    purple: 'Purple',
     tab: 'Tab',
     tag: 'Tag',
     desc: 'Description',
diff --git a/docs/src/index.js b/docs/src/index.js
index d4a91af17..912917a6f 100644
--- a/docs/src/index.js
+++ b/docs/src/index.js
@@ -16,7 +16,7 @@ const router = new VueRouter({
 
 router.beforeEach((route, redirect, next) => {
   if (isMobile) {
-    location.replace('/zanui/vant/examples' + location.hash);
+    location.replace(location.pathname === '/' ? 'examples.html' : '/zanui/vant/examples' + location.hash);
   }
   document.title = route.meta.title || document.title;
   next();
diff --git a/packages/progress/demo/index.vue b/packages/progress/demo/index.vue
index d8135b157..fb0c6484b 100644
--- a/packages/progress/demo/index.vue
+++ b/packages/progress/demo/index.vue
@@ -1,21 +1,22 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-progress :percentage="0" />
-      <van-progress :percentage="46" />
-      <van-progress :percentage="100" />
+      <van-progress :percentage="50" />
     </demo-block>
 
     <demo-block :title="$t('title2')">
-      <van-progress inactive :percentage="0" />
-      <van-progress inactive :percentage="46" />
-      <van-progress inactive :percentage="100" />
+      <van-progress inactive :percentage="50" />
     </demo-block>
 
     <demo-block :title="$t('title3')">
-      <van-progress :pivot-text="$t('red')" color="#ed5050" :percentage="26" />
-      <van-progress :pivot-text="$t('orange')" color="#f60" :percentage="46" />
-      <van-progress :pivot-text="$t('yellow')" color="#f09000" :percentage="66" />
+      <van-progress :pivot-text="$t('orange')" color="#f2826a" :percentage="25" />
+      <van-progress :pivot-text="$t('red')" color="#f3594b" :percentage="50" />
+      <van-progress
+        :percentage="75"
+        :pivot-text="$t('purple')"
+        pivot-color="#7232dd"
+        color="linear-gradient(to right, #be99ff, #7232dd)"
+      />
     </demo-block>
   </demo-section>
 </template>
@@ -24,7 +25,7 @@
 export default {
   i18n: {
     'zh-CN': {
-      title2: '进度条置灰',
+      title2: '置灰',
       title3: '样式定制'
     },
     'en-US': {
@@ -38,10 +39,10 @@ export default {
 <style lang="postcss">
 .demo-progress {
   .van-progress {
-    margin: 20px 10px;
+    margin: 20px;
 
     &:first-of-type {
-      margin-top: 10px;
+      margin-top: 5px;
     }
   }
 }
diff --git a/packages/progress/en-US.md b/packages/progress/en-US.md
index 950f40693..546ac0d83 100644
--- a/packages/progress/en-US.md
+++ b/packages/progress/en-US.md
@@ -13,18 +13,14 @@ Vue.use(Progress);
 Use 'percentage' prop to set current progress
 
 ```html
-<van-progress :percentage="0" />
-<van-progress :percentage="46" />
-<van-progress :percentage="100" />
+<van-progress :percentage="50" />
 ```
 
 
 #### Inactive
 
 ```html
-<van-progress inactive :percentage="0" />
-<van-progress inactive :percentage="46" />
-<van-progress inactive :percentage="100" />
+<van-progress inactive :percentage="50" />
 ```
 
 
@@ -32,9 +28,24 @@ Use 'percentage' prop to set current progress
 Use `pivot-text` to custom text，use `color` to custom bar color
 
 ```html
-<van-progress pivot-text="Red" color="#ed5050" :percentage="26" />
-<van-progress pivot-text="Orange" color="#f60" :percentage="46" />
-<van-progress pivot-text="Yellow" color="#f09000" :percentage="66" />
+<van-progress
+  pivot-text="Orange"
+  color="#f2826a"
+  :percentage="25"
+/>
+
+<van-progress
+  pivot-text="Red"
+  color="#f3594b"
+  :percentage="50"
+/>
+
+<van-progress
+  :percentage="75"
+  pivot-text="Purple"
+  pivot-color="#7232dd"
+  color="linear-gradient(to right, #be99ff, #7232dd)"
+/>
 ```
 
 ### API
@@ -44,6 +55,7 @@ Use `pivot-text` to custom text，use `color` to custom bar color
 | inactive | Whether to be gray | `Boolean` | `false` |
 | percentage | Percentage | `Number` | `false` |
 | show-pivot | Whether to show text | `Boolean` | `true` |
-| pivot-text | Text | `String` | percentage |
 | color | Color | `String` | `#38f` |
+| pivot-text | Text | `String` | percentage |
+| pivot-color | Text background color | `String` | inherit progress color |
 | text-color | Text color | `String` | `#fff` |
diff --git a/packages/progress/index.vue b/packages/progress/index.vue
index 9bd2ffca1..5900e1f76 100644
--- a/packages/progress/index.vue
+++ b/packages/progress/index.vue
@@ -1,7 +1,8 @@
 <template>
   <div :class="b()">
-    <span :class="b('portion')" :style="portionStyle" />
-    <span :class="b('pivot')" v-show="showPivot" :style="pivotStyle">{{ pivotText }}</span>
+    <span :class="b('portion')" :style="portionStyle">
+      <span :class="b('pivot')" v-show="showPivot" :style="pivotStyle">{{ pivotText }}</span>
+    </span>
   </div>
 </template>
 
@@ -13,6 +14,7 @@ export default create({
 
   props: {
     inactive: Boolean,
+    pivotColor: String,
     percentage: {
       type: Number,
       required: true,
@@ -42,19 +44,18 @@ export default create({
     componentColor() {
       return this.inactive ? '#cacaca' : this.color;
     },
+
     pivotStyle() {
-      const { percentage } = this;
       return {
         color: this.textColor,
-        backgroundColor: this.componentColor,
-        left: percentage <= 5 ? '0%' : percentage >= 95 ? '100%' : percentage + '%',
-        marginLeft: percentage <= 5 ? '0' : percentage >= 95 ? '-28px' : '-14px'
+        background: this.pivotColor || this.componentColor
       };
     },
+
     portionStyle() {
       return {
         width: this.percentage + '%',
-        backgroundColor: this.componentColor
+        background: this.componentColor
       };
     }
   }
diff --git a/packages/progress/test/__snapshots__/demo.spec.js.snap b/packages/progress/test/__snapshots__/demo.spec.js.snap
index 89e83d0d9..66029b4e7 100644
--- a/packages/progress/test/__snapshots__/demo.spec.js.snap
+++ b/packages/progress/test/__snapshots__/demo.spec.js.snap
@@ -3,19 +3,20 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-progress"><span class="van-progress__portion" style="width:0%;background-color:#38f;"></span> <span class="van-progress__pivot" style="color:#fff;background-color:#38f;left:0%;margin-left:0;">0%</span></div>
-    <div class="van-progress"><span class="van-progress__portion" style="width:46%;background-color:#38f;"></span> <span class="van-progress__pivot" style="color:#fff;background-color:#38f;left:46%;margin-left:-14px;">46%</span></div>
-    <div class="van-progress"><span class="van-progress__portion" style="width:100%;background-color:#38f;"></span> <span class="van-progress__pivot" style="color:#fff;background-color:#38f;left:100%;margin-left:-28px;">100%</span></div>
+    <div class="van-progress"><span class="van-progress__portion" style="width:50%;background:#38f;"><span class="van-progress__pivot" style="color:#fff;background:#38f;">50%</span></span>
+    </div>
   </div>
   <div>
-    <div class="van-progress"><span class="van-progress__portion" style="width:0%;background-color:#cacaca;"></span> <span class="van-progress__pivot" style="color:#fff;background-color:#cacaca;left:0%;margin-left:0;">0%</span></div>
-    <div class="van-progress"><span class="van-progress__portion" style="width:46%;background-color:#cacaca;"></span> <span class="van-progress__pivot" style="color:#fff;background-color:#cacaca;left:46%;margin-left:-14px;">46%</span></div>
-    <div class="van-progress"><span class="van-progress__portion" style="width:100%;background-color:#cacaca;"></span> <span class="van-progress__pivot" style="color:#fff;background-color:#cacaca;left:100%;margin-left:-28px;">100%</span></div>
+    <div class="van-progress"><span class="van-progress__portion" style="width:50%;background:#cacaca;"><span class="van-progress__pivot" style="color:#fff;background:#cacaca;">50%</span></span>
+    </div>
   </div>
   <div>
-    <div class="van-progress"><span class="van-progress__portion" style="width:26%;background-color:#ed5050;"></span> <span class="van-progress__pivot" style="color:#fff;background-color:#ed5050;left:26%;margin-left:-14px;">红色</span></div>
-    <div class="van-progress"><span class="van-progress__portion" style="width:46%;background-color:#f60;"></span> <span class="van-progress__pivot" style="color:#fff;background-color:#f60;left:46%;margin-left:-14px;">橙色</span></div>
-    <div class="van-progress"><span class="van-progress__portion" style="width:66%;background-color:#f09000;"></span> <span class="van-progress__pivot" style="color:#fff;background-color:#f09000;left:66%;margin-left:-14px;">黄色</span></div>
+    <div class="van-progress"><span class="van-progress__portion" style="width:25%;background:#f2826a;"><span class="van-progress__pivot" style="color:#fff;background:#f2826a;">橙色</span></span>
+    </div>
+    <div class="van-progress"><span class="van-progress__portion" style="width:50%;background:#f3594b;"><span class="van-progress__pivot" style="color:#fff;background:#f3594b;">红色</span></span>
+    </div>
+    <div class="van-progress"><span class="van-progress__portion" style="width:75%;background:linear-gradient(to right, #be99ff, #7232dd);"><span class="van-progress__pivot" style="color:#fff;background:#7232dd;">紫色</span></span>
+    </div>
   </div>
 </div>
 `;
diff --git a/packages/progress/zh-CN.md b/packages/progress/zh-CN.md
index 8d22e3f9d..d528e7fa8 100644
--- a/packages/progress/zh-CN.md
+++ b/packages/progress/zh-CN.md
@@ -14,18 +14,14 @@ Vue.use(Progress);
 进度条默认为蓝色，使用`percentage`属性来设置当前进度
 
 ```html
-<van-progress :percentage="0" />
-<van-progress :percentage="46" />
-<van-progress :percentage="100" />
+<van-progress :percentage="50" />
 ```
 
 
-#### 进度条置灰
+#### 置灰
 
 ```html
-<van-progress inactive :percentage="0" />
-<van-progress inactive :percentage="46" />
-<van-progress inactive :percentage="100" />
+<van-progress inactive :percentage="50" />
 ```
 
 
@@ -34,9 +30,24 @@ Vue.use(Progress);
 可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色
 
 ```html
-<van-progress pivot-text="红色" color="#ed5050" :percentage="26" />
-<van-progress pivot-text="橙色" color="#f60" :percentage="46" />
-<van-progress pivot-text="黄色" color="#f09000" :percentage="66" />
+<van-progress
+  pivot-text="橙色"
+  color="#f2826a"
+  :percentage="25"
+/>
+
+<van-progress
+  pivot-text="红色"
+  color="#f3594b"
+  :percentage="50"
+/>
+
+<van-progress
+  :percentage="75"
+  pivot-text="紫色"
+  pivot-color="#7232dd"
+  color="linear-gradient(to right, #be99ff, #7232dd)"
+/>
 ```
 
 ### API
@@ -46,6 +57,7 @@ Vue.use(Progress);
 | inactive | 是否置灰 | `Boolean` | `false` |
 | percentage | 进度百分比 | `Number` | `false` |
 | show-pivot | 是否显示进度文字 | `Boolean` | `true` |
-| pivot-text | 文字显示 | `String` | 百分比文字 |
 | color | 进度条颜色 | `String` | `#38f` |
 | text-color | 进度条文字颜色 | `String` | `#fff` |
+| pivot-text | 文字显示 | `String` | 百分比文字 |
+| pivot-color | 文字背景色 | `String` | 与进度条颜色一致 |
diff --git a/packages/vant-css/src/progress.css b/packages/vant-css/src/progress.css
index bcce448a7..20e24f36b 100644
--- a/packages/vant-css/src/progress.css
+++ b/packages/vant-css/src/progress.css
@@ -10,20 +10,22 @@
     left: 0;
     height: 100%;
     position: absolute;
-    border-radius: 4px;
+    border-radius: inherit;
   }
 
   &__pivot {
     top: 50%;
-    min-width: 28px;
+    right: 0;
+    min-width: 2em;
     padding: 0 5px;
-    font-size: 8px;
-    margin-top: -6px;
+    font-size: 10px;
     position: absolute;
-    border-radius: 6px;
-    line-height: 12px;
+    line-height: 1.6;
     text-align: center;
+    border-radius: 1em;
+    word-break: keep-all;
     box-sizing: border-box;
     background-color: $gray-light;
+    transform: translate(50%, -50%);
   }
 }