fix: Upload thumbnail icon broken styles

vueComponent · Dec 19, 2018 · f1e130b · f1e130b
1 parent 81e8495
commit f1e130b
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 34 deletions.
diff --git a/components/upload/UploadList.jsx b/components/upload/UploadList.jsx
@@ -105,15 +105,12 @@ export default {
         if (listType === 'picture-card' && file.status === 'uploading') {
           icon = <div class={`${prefixCls}-list-item-uploading-text`}>{locale.uploading}</div>
         } else if (!file.thumbUrl && !file.url) {
-          icon = <Icon class={`${prefixCls}-list-item-thumbnail`} type='picture' />
+          icon = <Icon class={`${prefixCls}-list-item-thumbnail`} type='picture' theme="twoTone"/>
         } else {
           const thumbnail = isImageUrl(file) ? (
             <img src={file.thumbUrl || file.url} alt={file.name} />
           ) : (
-            <Icon
-              type='file'
-              style={{ fontSize: '48px', color: 'rgba(0,0,0,0.5)' }}
-            />
+            <Icon type="file" class={`${prefixCls}-list-item-icon`} theme="twoTone" />
           )
           icon = (
             <a

diff --git a/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap b/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap
@@ -41,7 +41,7 @@ exports[`Upload List handle error 2`] = `
 exports[`Upload List should be uploading when upload a file 1`] = `<span><div class="ant-upload ant-upload-select ant-upload-select-text"><span role="button" tabindex="0" class="ant-upload ant-upload-btn"><input type="file" accept="" style="display: none;"><button>upload</button></span></div><span tag="div" class="ant-upload-list ant-upload-list-text"></span></span>`;
 
 exports[`Upload List should non-image format file preview 1`] = `
-<span><div class="ant-upload ant-upload-select ant-upload-select-picture"><!----></div><span tag="div" class="ant-upload-list ant-upload-list-picture"><div class="ant-upload-list-item ant-upload-list-item-done"><div class="ant-upload-list-item-info"><span><a href="https://cdn.xxx.com/aaa.zip" target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-thumbnail"><i class="anticon anticon-file" style="font-size: 48px; color: rgba(0, 0, 0, 0.5);"><svg viewBox="64 64 896 896" data-icon="file" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"></path></svg></i></a><a target="_blank" rel="noopener noreferrer" title="not-image" href="https://cdn.xxx.com/aaa.zip" class="ant-upload-list-item-name">not-image</a></span></div><i class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+<span><div class="ant-upload ant-upload-select ant-upload-select-picture"><!----></div><span tag="div" class="ant-upload-list ant-upload-list-picture"><div class="ant-upload-list-item ant-upload-list-item-done"><div class="ant-upload-list-item-info"><span><a href="https://cdn.xxx.com/aaa.zip" target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-thumbnail"><i class="ant-upload-list-item-icon anticon anticon-file"><svg viewBox="64 64 896 896" data-icon="file" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path fill="#e6f7ff" d="M534 352V136H232v752h560V394H576a42 42 0 0 1-42-42z"></path><path fill="#1890ff" d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM602 137.8L790.2 326H602V137.8zM792 888H232V136h302v216a42 42 0 0 0 42 42h216v494z"></path></svg></i></a><a target="_blank" rel="noopener noreferrer" title="not-image" href="https://cdn.xxx.com/aaa.zip" class="ant-upload-list-item-name">not-image</a></span></div><i class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
     <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
   </svg></i>
 <!---->
@@ -53,13 +53,13 @@ exports[`Upload List should non-image format file preview 1`] = `
   <!---->
 </div>
 <div class="ant-upload-list-item ant-upload-list-item-done">
-  <div class="ant-upload-list-item-info"><span><a href="https://cdn.xxx.com/aaa.xx" target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-thumbnail"><i class="anticon anticon-file" style="font-size: 48px; color: rgba(0, 0, 0, 0.5);"><svg viewBox="64 64 896 896" data-icon="file" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"></path></svg></i></a><a target="_blank" rel="noopener noreferrer" title="not-image" href="https://cdn.xxx.com/aaa.xx" class="ant-upload-list-item-name">not-image</a></span></div><i class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+  <div class="ant-upload-list-item-info"><span><a href="https://cdn.xxx.com/aaa.xx" target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-thumbnail"><i class="ant-upload-list-item-icon anticon anticon-file"><svg viewBox="64 64 896 896" data-icon="file" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path fill="#e6f7ff" d="M534 352V136H232v752h560V394H576a42 42 0 0 1-42-42z"></path><path fill="#1890ff" d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM602 137.8L790.2 326H602V137.8zM792 888H232V136h302v216a42 42 0 0 0 42 42h216v494z"></path></svg></i></a><a target="_blank" rel="noopener noreferrer" title="not-image" href="https://cdn.xxx.com/aaa.xx" class="ant-upload-list-item-name">not-image</a></span></div><i class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
       <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
     </svg></i>
   <!---->
 </div>
 <div class="ant-upload-list-item ant-upload-list-item-done">
-  <div class="ant-upload-list-item-info"><span><a href="https://cdn.xxx.com/aaa.png/xx.xx" target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-thumbnail"><i class="anticon anticon-file" style="font-size: 48px; color: rgba(0, 0, 0, 0.5);"><svg viewBox="64 64 896 896" data-icon="file" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"></path></svg></i></a><a target="_blank" rel="noopener noreferrer" title="not-image" href="https://cdn.xxx.com/aaa.png/xx.xx" class="ant-upload-list-item-name">not-image</a></span></div><i class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+  <div class="ant-upload-list-item-info"><span><a href="https://cdn.xxx.com/aaa.png/xx.xx" target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-thumbnail"><i class="ant-upload-list-item-icon anticon anticon-file"><svg viewBox="64 64 896 896" data-icon="file" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path fill="#e6f7ff" d="M534 352V136H232v752h560V394H576a42 42 0 0 1-42-42z"></path><path fill="#1890ff" d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM602 137.8L790.2 326H602V137.8zM792 888H232V136h302v216a42 42 0 0 0 42 42h216v494z"></path></svg></i></a><a target="_blank" rel="noopener noreferrer" title="not-image" href="https://cdn.xxx.com/aaa.png/xx.xx" class="ant-upload-list-item-name">not-image</a></span></div><i class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
       <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
     </svg></i>
   <!---->

diff --git a/components/upload/style/index.less b/components/upload/style/index.less
@@ -1,8 +1,8 @@
-@import "../../style/themes/default";
-@import "../../style/mixins/index";
+@import '../../style/themes/default';
+@import '../../style/mixins/index';
 
-@upload-prefix-cls: ~"@{ant-prefix}-upload";
-@upload-item: ~"@{ant-prefix}-upload-list-item";
+@upload-prefix-cls: ~'@{ant-prefix}-upload';
+@upload-item: ~'@{ant-prefix}-upload-list-item';
 @upload-pictrue-card-size: 104px;
 
 .@{upload-prefix-cls} {
@@ -19,7 +19,7 @@
     outline: none;
   }
 
-  input[type="file"] {
+  input[type='file'] {
     cursor: pointer;
   }
 
@@ -57,7 +57,7 @@
 
   &&-drag {
     border: @border-width-base dashed @border-color-base;
-    transition: border-color .3s;
+    transition: border-color 0.3s;
     cursor: pointer;
     border-radius: @border-radius-base;
     text-align: center;
@@ -110,7 +110,7 @@
     }
     .@{iconfont-css-prefix}-plus {
       font-size: 30px;
-      transition: all .3s;
+      transition: all 0.3s;
       color: @disabled-color;
       &:hover {
         color: @text-color-secondary;
@@ -142,7 +142,7 @@
     &-info {
       height: 100%;
       padding: 0 12px 0 4px;
-      transition: background-color .3s;
+      transition: background-color 0.3s;
 
       > span {
         display: block;
@@ -159,7 +159,7 @@
 
     .@{iconfont-css-prefix}-close {
       .iconfont-size-under-12px(10px);
-      transition: all .3s;
+      transition: all 0.3s;
       opacity: 0;
       cursor: pointer;
       position: absolute;
@@ -236,16 +236,17 @@
       top: 8px;
       left: 8px;
       text-align: center;
+      line-height: 54px;
+      font-size: 26px;
+      opacity: 0.8;
     }
 
     .@{upload-item}-icon {
-      color: @disabled-color;
-      font-size: 36px;
+      font-size: 26px;
       position: absolute;
       top: 50%;
       left: 50%;
-      margin-top: -18px;
-      margin-left: -18px;
+      transform: translate(-50%, -50%);
     }
 
     .@{upload-item}-thumbnail img {
@@ -255,19 +256,13 @@
       overflow: hidden;
     }
 
-    .@{upload-item}-thumbnail.@{iconfont-css-prefix}:before {
-      line-height: 48px;
-      font-size: 24px;
-      color: @text-color-secondary;
-    }
-
     .@{upload-item}-name {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       margin: 0 0 0 8px;
       line-height: 44px;
-      transition: all .3s;
+      transition: all 0.3s;
       padding-left: 48px;
       padding-right: 8px;
       max-width: 100%;
@@ -283,7 +278,7 @@
       padding-left: 56px;
       margin-top: 0;
       bottom: 14px;
-      width: ~"calc(100% - 24px)";
+      width: ~'calc(100% - 24px)';
     }
 
     .@{iconfont-css-prefix}-close {
@@ -319,7 +314,7 @@
         position: absolute;
         z-index: 1;
         background-color: rgba(0, 0, 0, 0.5);
-        transition: all .3s;
+        transition: all 0.3s;
         width: 100%;
         height: 100%;
         opacity: 0;
@@ -338,12 +333,12 @@
       z-index: 10;
       white-space: nowrap;
       opacity: 0;
-      transition: all .3s;
+      transition: all 0.3s;
 
       .@{iconfont-css-prefix}-eye-o,
       .@{iconfont-css-prefix}-delete {
         z-index: 10;
-        transition: all .3s;
+        transition: all 0.3s;
         cursor: pointer;
         font-size: 16px;
         width: 16px;
@@ -415,7 +410,7 @@
   .@{upload-prefix-cls}-animate-leave,
   .@{upload-prefix-cls}-animate-inline-enter,
   .@{upload-prefix-cls}-animate-inline-leave {
-    animation-duration: .3s;
+    animation-duration: 0.3s;
     animation-fill-mode: @ease-in-out-circ;
   }
 
@@ -472,4 +467,4 @@
     padding: 0;
     opacity: 0;
   }
-}
+}