github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

fix: Upload thumbnail icon broken styles

pull/329/head
tangjinzhou 6 years ago
parent
81e8495941
commit
f1e130bdc0
3 changed files with 26 additions and 34 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      components/upload/UploadList.jsx
  2. 6
      components/upload/__tests__/__snapshots__/uploadlist.test.js.snap
  3. 47
      components/upload/style/index.less

7
components/upload/UploadList.jsx
Unescape View File

@ -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

6
components/upload/__tests__/__snapshots__/uploadlist.test.js.snap
Unescape View File

@ -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>
<!---->

47
components/upload/style/index.less
Unescape View File

@ -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;
}
}
}
Write Preview
Loading…
Cancel
Save