From 7b21a23caea49fc26632450e9f7400254d6ce35d Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sat, 11 Jul 2020 10:57:04 +0800
Subject: [PATCH] style(Uploader): update delete icon style (#6750)

* style(Uploader): remove round border radius

* style(Uploader): update delete icon style

* fix: snapshot
---
 src/form/test/__snapshots__/demo.spec.js.snap |  5 ++-
 src/style/var.less                            |  6 +--
 src/uploader/index.js                         |  7 +--
 src/uploader/index.less                       | 20 ++++++---
 .../test/__snapshots__/demo.spec.js.snap      | 30 ++++++++-----
 .../test/__snapshots__/index.spec.js.snap     | 45 +++++++++++--------
 6 files changed, 70 insertions(+), 43 deletions(-)

diff --git a/src/form/test/__snapshots__/demo.spec.js.snap b/src/form/test/__snapshots__/demo.spec.js.snap
index c978f58fe..f9691d577 100644
--- a/src/form/test/__snapshots__/demo.spec.js.snap
+++ b/src/form/test/__snapshots__/demo.spec.js.snap
@@ -177,8 +177,9 @@ exports[`renders demo correctly 1`] = `
                     <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/leaf.jpg" class="van-image__img" style="object-fit: cover;">
                       <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
                           <!----></i></div>
-                    </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
-                      <!----></i>
+                    </div>
+                    <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+                        <!----></i></div>
                   </div>
                   <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
                       <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
diff --git a/src/style/var.less b/src/style/var.less
index 60cb31459..a0957a179 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -815,9 +815,9 @@
 @uploader-text-font-size: @font-size-sm;
 @uploader-upload-background-color: @gray-1;
 @uploader-upload-active-color: @active-color;
-@uploader-delete-color: @gray-6;
-@uploader-delete-icon-size: 18px;
-@uploader-delete-background-color: @white;
+@uploader-delete-color: @white;
+@uploader-delete-icon-size: 14px;
+@uploader-delete-background-color: rgba(0, 0, 0, 0.7);
 @uploader-file-background-color: @background-color;
 @uploader-file-icon-size: 20px;
 @uploader-file-icon-color: @gray-7;
diff --git a/src/uploader/index.js b/src/uploader/index.js
index 4f38acb43..1ede615a5 100644
--- a/src/uploader/index.js
+++ b/src/uploader/index.js
@@ -308,14 +308,15 @@ export default createComponent({
       const showDelete = item.status !== 'uploading' && this.deletable;
 
       const DeleteIcon = showDelete && (
-        <Icon
-          name="clear"
+        <div
           class={bem('preview-delete')}
           onClick={(event) => {
             event.stopPropagation();
             this.onDelete(item, index);
           }}
-        />
+        >
+          <Icon name="cross" class={bem('preview-delete-icon')} />
+        </div>
       );
 
       const PreviewCoverContent = this.slots('preview-cover', item);
diff --git a/src/uploader/index.less b/src/uploader/index.less
index bffa9589d..cd8922065 100644
--- a/src/uploader/index.less
+++ b/src/uploader/index.less
@@ -74,12 +74,22 @@
 
     &-delete {
       position: absolute;
-      top: -8px;
-      right: -8px;
-      color: @uploader-delete-color;
-      font-size: @uploader-delete-icon-size;
+      top: 0;
+      right: 0;
+      width: @uploader-delete-icon-size;
+      height: @uploader-delete-icon-size;
       background-color: @uploader-delete-background-color;
-      border-radius: 100%;
+      border-radius: 0 0 0 12px;
+
+      &-icon {
+        position: absolute;
+        top: -2px;
+        right: -2px;
+        color: #fff;
+        color: @uploader-delete-color;
+        font-size: 16px;
+        transform: scale(0.5);
+      }
     }
 
     &-cover {
diff --git a/src/uploader/test/__snapshots__/demo.spec.js.snap b/src/uploader/test/__snapshots__/demo.spec.js.snap
index b9933f7e4..9ada94279 100644
--- a/src/uploader/test/__snapshots__/demo.spec.js.snap
+++ b/src/uploader/test/__snapshots__/demo.spec.js.snap
@@ -17,15 +17,17 @@ exports[`renders demo correctly 1`] = `
           <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/leaf.jpg" class="van-image__img" style="object-fit: cover;">
             <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
                 <!----></i></div>
-          </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
-            <!----></i>
+          </div>
+          <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+              <!----></i></div>
         </div>
         <div class="van-uploader__preview">
           <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/tree.jpg" class="van-image__img" style="object-fit: cover;">
             <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
                 <!----></i></div>
-          </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
-            <!----></i>
+          </div>
+          <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+              <!----></i></div>
         </div>
         <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
             <!----></i><input multiple="multiple" type="file" accept="*" class="van-uploader__input"></div>
@@ -53,8 +55,9 @@ exports[`renders demo correctly 1`] = `
           <div class="van-uploader__mask"><i class="van-icon van-icon-close van-uploader__mask-icon">
               <!----></i>
             <div class="van-uploader__mask-message">上传失败</div>
-          </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
-            <!----></i>
+          </div>
+          <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+              <!----></i></div>
         </div>
         <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
             <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
@@ -68,8 +71,9 @@ exports[`renders demo correctly 1`] = `
           <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/sand.jpg" class="van-image__img" style="object-fit: cover;">
             <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
                 <!----></i></div>
-          </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
-            <!----></i>
+          </div>
+          <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+              <!----></i></div>
         </div>
         <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
             <!----></i><input multiple="multiple" type="file" accept="image/*" class="van-uploader__input"></div>
@@ -83,8 +87,9 @@ exports[`renders demo correctly 1`] = `
           <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/sand.jpg" class="van-image__img" style="object-fit: cover;">
             <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
                 <!----></i></div>
-          </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
-            <!----></i>
+          </div>
+          <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+              <!----></i></div>
         </div>
         <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
             <!----></i><input multiple="multiple" type="file" accept="image/*" class="van-uploader__input"></div>
@@ -113,8 +118,9 @@ exports[`renders demo correctly 1`] = `
             <div class="van-uploader__preview-cover">
               <div class="preview-cover van-ellipsis">图片名称</div>
             </div>
-          </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
-            <!----></i>
+          </div>
+          <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+              <!----></i></div>
         </div>
         <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
             <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
diff --git a/src/uploader/test/__snapshots__/index.spec.js.snap b/src/uploader/test/__snapshots__/index.spec.js.snap
index 60e2160f8..978aeb5aa 100644
--- a/src/uploader/test/__snapshots__/index.spec.js.snap
+++ b/src/uploader/test/__snapshots__/index.spec.js.snap
@@ -44,8 +44,9 @@ exports[`image-fit prop 1`] = `
       <div class="van-image van-uploader__preview-image"><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 van-image__loading-icon">
             <!----></i></div>
-      </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
-        <!----></i>
+      </div>
+      <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+          <!----></i></div>
     </div>
     <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
         <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
@@ -60,8 +61,9 @@ exports[`max-count prop 1`] = `
       <div class="van-image van-uploader__preview-image"><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 van-image__loading-icon">
             <!----></i></div>
-      </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
-        <!----></i>
+      </div>
+      <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+          <!----></i></div>
     </div>
   </div>
 </div>
@@ -75,16 +77,18 @@ exports[`preview-cover slot 1`] = `
         <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
             <!----></i></div>
         <div class="van-uploader__preview-cover">https://img.yzcdn.cn/vant/cat.jpeg</div>
-      </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
-        <!----></i>
+      </div>
+      <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+          <!----></i></div>
     </div>
     <div class="van-uploader__preview">
       <div class="van-image van-uploader__preview-image"><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 van-image__loading-icon">
             <!----></i></div>
         <div class="van-uploader__preview-cover">https://img.yzcdn.cn/vant/cat.jpeg</div>
-      </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
-        <!----></i>
+      </div>
+      <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+          <!----></i></div>
     </div>
     <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
         <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
@@ -99,8 +103,9 @@ exports[`preview-size prop 1`] = `
       <div class="van-image van-uploader__preview-image" style="width: 30px; height: 30px;"><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 van-image__loading-icon">
             <!----></i></div>
-      </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
-        <!----></i>
+      </div>
+      <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+          <!----></i></div>
     </div>
     <div class="van-uploader__upload" style="width: 30px; height: 30px;"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
         <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
@@ -115,29 +120,33 @@ exports[`render preview image 1`] = `
       <div class="van-image van-uploader__preview-image"><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 van-image__loading-icon">
             <!----></i></div>
-      </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
-        <!----></i>
+      </div>
+      <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+          <!----></i></div>
     </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-clear van-uploader__preview-delete">
-        <!----></i>
+      </div>
+      <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+          <!----></i></div>
     </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-clear van-uploader__preview-delete">
-        <!----></i>
+      </div>
+      <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+          <!----></i></div>
     </div>
     <div class="van-uploader__preview">
       <div class="van-image van-uploader__preview-image"><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 van-image__loading-icon">
             <!----></i></div>
-      </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
-        <!----></i>
+      </div>
+      <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+          <!----></i></div>
     </div>
     <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
         <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>