fix: Upload thumbnail icon broken styles
tangjinzhou
parent
81e8495941
commit
f1e130bdc0
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<!---->
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue