From aeee6b97d18dfe6aca7b34f2ad8fe3bc27d9c450 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Mon, 14 Oct 2019 13:58:42 +0800
Subject: [PATCH] feat(Uploader): update delete icon style (#4712)

---
 src/style/var.less                                 |  5 +++--
 src/uploader/index.js                              |  2 +-
 src/uploader/index.less                            |  7 ++++---
 src/uploader/test/__snapshots__/demo.spec.js.snap  |  2 +-
 src/uploader/test/__snapshots__/index.spec.js.snap | 14 +++++++-------
 5 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/style/var.less b/src/style/var.less
index bf4bf7b43..4f988220b 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -684,8 +684,9 @@
 @uploader-upload-border-color: @gray-light;
 @uploader-upload-border-radius: 4px;
 @uploader-upload-background-color: @white;
-@uploader-delete-color: @white;
-@uploader-delete-background-color: rgba(0, 0, 0, .45);
+@uploader-delete-color: @gray-dark;
+@uploader-delete-icon-size: 18px;
+@uploader-delete-background-color: @white;
 @uploader-file-background-color: @background-color;
 @uploader-file-icon-size: 20px;
 @uploader-file-icon-color: @gray-darker;
diff --git a/src/uploader/index.js b/src/uploader/index.js
index 5d79fff04..8a2e1abab 100644
--- a/src/uploader/index.js
+++ b/src/uploader/index.js
@@ -210,7 +210,7 @@ export default createComponent({
     renderPreviewItem(item, index) {
       const DeleteIcon = (
         <Icon
-          name="delete"
+          name="clear"
           class={bem('preview-delete')}
           onClick={event => {
             event.stopPropagation();
diff --git a/src/uploader/index.less b/src/uploader/index.less
index b7a5c5b8e..ffd9cbb3e 100644
--- a/src/uploader/index.less
+++ b/src/uploader/index.less
@@ -62,11 +62,12 @@
 
     &-delete {
       position: absolute;
-      right: 0;
-      bottom: 0;
-      padding: 1px;
+      top: -8px;
+      right: -8px;
       color: @uploader-delete-color;
+      font-size: @uploader-delete-icon-size;
       background-color: @uploader-delete-background-color;
+      border-radius: 100%;
     }
   }
 
diff --git a/src/uploader/test/__snapshots__/demo.spec.js.snap b/src/uploader/test/__snapshots__/demo.spec.js.snap
index 39f2c0eb9..9ddb5089a 100644
--- a/src/uploader/test/__snapshots__/demo.spec.js.snap
+++ b/src/uploader/test/__snapshots__/demo.spec.js.snap
@@ -17,7 +17,7 @@ exports[`renders demo correctly 1`] = `
           <div class="van-image van-uploader__preview-image" style="overflow: hidden; border-radius: 4px;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
             <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
                 <!----></i></div>
-          </div><i class="van-icon van-icon-delete van-uploader__preview-delete">
+          </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
             <!----></i>
         </div>
         <div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">
diff --git a/src/uploader/test/__snapshots__/index.spec.js.snap b/src/uploader/test/__snapshots__/index.spec.js.snap
index f1eb03887..d7bd236ac 100644
--- a/src/uploader/test/__snapshots__/index.spec.js.snap
+++ b/src/uploader/test/__snapshots__/index.spec.js.snap
@@ -25,7 +25,7 @@ exports[`image-fit prop 1`] = `
       <div class="van-image van-uploader__preview-image" style="overflow: hidden; border-radius: 4px;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: contain;">
         <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
             <!----></i></div>
-      </div><i class="van-icon van-icon-delete van-uploader__preview-delete">
+      </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
         <!----></i>
     </div>
     <div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">
@@ -41,7 +41,7 @@ exports[`max-count prop 1`] = `
       <div class="van-image van-uploader__preview-image" style="overflow: hidden; border-radius: 4px;"><img src="data:image/test" class="van-image__img" style="object-fit: cover;">
         <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
             <!----></i></div>
-      </div><i class="van-icon van-icon-delete van-uploader__preview-delete">
+      </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
         <!----></i>
     </div>
   </div>
@@ -55,7 +55,7 @@ exports[`preview-size prop 1`] = `
       <div class="van-image van-uploader__preview-image" style="width: 30px; height: 30px; overflow: hidden; border-radius: 4px;"><img src="data:image/test" class="van-image__img" style="object-fit: cover;">
         <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
             <!----></i></div>
-      </div><i class="van-icon van-icon-delete van-uploader__preview-delete">
+      </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
         <!----></i>
     </div>
     <div class="van-uploader__upload" style="width: 30px; height: 30px;"><i class="van-icon van-icon-plus van-uploader__upload-icon">
@@ -71,28 +71,28 @@ exports[`render preview image 1`] = `
       <div class="van-image van-uploader__preview-image" style="overflow: hidden; border-radius: 4px;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
         <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
             <!----></i></div>
-      </div><i class="van-icon van-icon-delete van-uploader__preview-delete">
+      </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
         <!----></i>
     </div>
     <div class="van-uploader__preview">
       <div class="van-uploader__file"><i class="van-icon van-icon-description van-uploader__file-icon">
           <!----></i>
         <div class="van-uploader__file-name van-ellipsis">https://img.yzcdn.cn/vant/test.pdf</div>
-      </div><i class="van-icon van-icon-delete van-uploader__preview-delete">
+      </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
         <!----></i>
     </div>
     <div class="van-uploader__preview">
       <div class="van-uploader__file"><i class="van-icon van-icon-description van-uploader__file-icon">
           <!----></i>
         <div class="van-uploader__file-name van-ellipsis">test.pdf</div>
-      </div><i class="van-icon van-icon-delete van-uploader__preview-delete">
+      </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
         <!----></i>
     </div>
     <div class="van-uploader__preview">
       <div class="van-image van-uploader__preview-image" style="overflow: hidden; border-radius: 4px;"><img src="data:image/test" class="van-image__img" style="object-fit: cover;">
         <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
             <!----></i></div>
-      </div><i class="van-icon van-icon-delete van-uploader__preview-delete">
+      </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
         <!----></i>
     </div>
     <div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">