Skip to content

Commit f1e130b

Browse files
tangjinzhoutangjinzhou
committed
fix: Upload thumbnail icon broken styles
1 parent 81e8495 commit f1e130b

File tree

3 files changed

+26
-34
lines changed

3 files changed

+26
-34
lines changed

‎components/upload/UploadList.jsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -105,15 +105,12 @@ export default {
105105
if (listType === 'picture-card' && file.status === 'uploading') {
106106
icon = <div class={`${prefixCls}-list-item-uploading-text`}>{locale.uploading}</div>
107107
} else if (!file.thumbUrl && !file.url) {
108-
icon = <Icon class={`${prefixCls}-list-item-thumbnail`} type='picture' />
108+
icon = <Icon class={`${prefixCls}-list-item-thumbnail`} type='picture' theme="twoTone"/>
109109
} else {
110110
const thumbnail = isImageUrl(file) ? (
111111
<img src={file.thumbUrl || file.url} alt={file.name} />
112112
) : (
113-
<Icon
114-
type='file'
115-
style={{ fontSize: '48px', color: 'rgba(0,0,0,0.5)' }}
116-
/>
113+
<Icon type="file" class={`${prefixCls}-list-item-icon`} theme="twoTone" />
117114
)
118115
icon = (
119116
<a

‎components/upload/__tests__/__snapshots__/uploadlist.test.js.snap

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ exports[`Upload List handle error 2`] = `
4141
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>`;
4242
4343
exports[`Upload List should non-image format file preview 1`] = `
44-
<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="">
44+
<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="">
4545
<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>
4646
</svg></i>
4747
<!---->
@@ -53,13 +53,13 @@ exports[`Upload List should non-image format file preview 1`] = `
5353
<!---->
5454
</div>
5555
<div class="ant-upload-list-item ant-upload-list-item-done">
56-
<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="">
56+
<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="">
5757
<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>
5858
</svg></i>
5959
<!---->
6060
</div>
6161
<div class="ant-upload-list-item ant-upload-list-item-done">
62-
<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="">
62+
<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="">
6363
<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>
6464
</svg></i>
6565
<!---->

‎components/upload/style/index.less

Lines changed: 21 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
@import "../../style/themes/default";
2-
@import "../../style/mixins/index";
1+
@import '../../style/themes/default';
2+
@import '../../style/mixins/index';
33

4-
@upload-prefix-cls: ~"@{ant-prefix}-upload";
5-
@upload-item: ~"@{ant-prefix}-upload-list-item";
4+
@upload-prefix-cls: ~'@{ant-prefix}-upload';
5+
@upload-item: ~'@{ant-prefix}-upload-list-item';
66
@upload-pictrue-card-size: 104px;
77

88
.@{upload-prefix-cls} {
@@ -19,7 +19,7 @@
1919
outline: none;
2020
}
2121

22-
input[type="file"] {
22+
input[type='file'] {
2323
cursor: pointer;
2424
}
2525

@@ -57,7 +57,7 @@
5757

5858
&&-drag {
5959
border: @border-width-base dashed @border-color-base;
60-
transition: border-color .3s;
60+
transition: border-color 0.3s;
6161
cursor: pointer;
6262
border-radius: @border-radius-base;
6363
text-align: center;
@@ -110,7 +110,7 @@
110110
}
111111
.@{iconfont-css-prefix}-plus {
112112
font-size: 30px;
113-
transition: all .3s;
113+
transition: all 0.3s;
114114
color: @disabled-color;
115115
&:hover {
116116
color: @text-color-secondary;
@@ -142,7 +142,7 @@
142142
&-info {
143143
height: 100%;
144144
padding: 0 12px 0 4px;
145-
transition: background-color .3s;
145+
transition: background-color 0.3s;
146146

147147
> span {
148148
display: block;
@@ -159,7 +159,7 @@
159159

160160
.@{iconfont-css-prefix}-close {
161161
.iconfont-size-under-12px(10px);
162-
transition: all .3s;
162+
transition: all 0.3s;
163163
opacity: 0;
164164
cursor: pointer;
165165
position: absolute;
@@ -236,16 +236,17 @@
236236
top: 8px;
237237
left: 8px;
238238
text-align: center;
239+
line-height: 54px;
240+
font-size: 26px;
241+
opacity: 0.8;
239242
}
240243

241244
.@{upload-item}-icon {
242-
color: @disabled-color;
243-
font-size: 36px;
245+
font-size: 26px;
244246
position: absolute;
245247
top: 50%;
246248
left: 50%;
247-
margin-top: -18px;
248-
margin-left: -18px;
249+
transform: translate(-50%, -50%);
249250
}
250251

251252
.@{upload-item}-thumbnail img {
@@ -255,19 +256,13 @@
255256
overflow: hidden;
256257
}
257258

258-
.@{upload-item}-thumbnail.@{iconfont-css-prefix}:before {
259-
line-height: 48px;
260-
font-size: 24px;
261-
color: @text-color-secondary;
262-
}
263-
264259
.@{upload-item}-name {
265260
overflow: hidden;
266261
text-overflow: ellipsis;
267262
white-space: nowrap;
268263
margin: 0 0 0 8px;
269264
line-height: 44px;
270-
transition: all .3s;
265+
transition: all 0.3s;
271266
padding-left: 48px;
272267
padding-right: 8px;
273268
max-width: 100%;
@@ -283,7 +278,7 @@
283278
padding-left: 56px;
284279
margin-top: 0;
285280
bottom: 14px;
286-
width: ~"calc(100% - 24px)";
281+
width: ~'calc(100% - 24px)';
287282
}
288283

289284
.@{iconfont-css-prefix}-close {
@@ -319,7 +314,7 @@
319314
position: absolute;
320315
z-index: 1;
321316
background-color: rgba(0, 0, 0, 0.5);
322-
transition: all .3s;
317+
transition: all 0.3s;
323318
width: 100%;
324319
height: 100%;
325320
opacity: 0;
@@ -338,12 +333,12 @@
338333
z-index: 10;
339334
white-space: nowrap;
340335
opacity: 0;
341-
transition: all .3s;
336+
transition: all 0.3s;
342337

343338
.@{iconfont-css-prefix}-eye-o,
344339
.@{iconfont-css-prefix}-delete {
345340
z-index: 10;
346-
transition: all .3s;
341+
transition: all 0.3s;
347342
cursor: pointer;
348343
font-size: 16px;
349344
width: 16px;
@@ -415,7 +410,7 @@
415410
.@{upload-prefix-cls}-animate-leave,
416411
.@{upload-prefix-cls}-animate-inline-enter,
417412
.@{upload-prefix-cls}-animate-inline-leave {
418-
animation-duration: .3s;
413+
animation-duration: 0.3s;
419414
animation-fill-mode: @ease-in-out-circ;
420415
}
421416

@@ -472,4 +467,4 @@
472467
padding: 0;
473468
opacity: 0;
474469
}
475-
}
470+
}

0 commit comments

Comments
 (0)