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

fix: Upload thumbnail icon broken styles

pull/329/head
tangjinzhou 2018-12-19 21:43:09 +08:00
parent 81e8495941
commit f1e130bdc0
3 changed files with 26 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/upload/UploadList.jsx
View File

@ -105,15 +105,12 @@ export default {
if (listType === 'picture-card' && file.status === 'uploading') { if (listType === 'picture-card' && file.status === 'uploading') {
icon = <div class={`${prefixCls}-list-item-uploading-text`}>{locale.uploading}</div> icon = <div class={`${prefixCls}-list-item-uploading-text`}>{locale.uploading}</div>
} else if (!file.thumbUrl && !file.url) { } 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 { } else {
const thumbnail = isImageUrl(file) ? ( const thumbnail = isImageUrl(file) ? (
<img src={file.thumbUrl || file.url} alt={file.name} /> <img src={file.thumbUrl || file.url} alt={file.name} />
) : ( ) : (
<Icon <Icon type="file" class={`${prefixCls}-list-item-icon`} theme="twoTone" />
type='file'
style={{ fontSize: '48px', color: 'rgba(0,0,0,0.5)' }}
/>
) )
icon = ( icon = (
<a <a

6
components/upload/__tests__/__snapshots__/uploadlist.test.js.snap
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 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`] = ` 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> <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> </svg></i>
<!----> <!---->
@ -53,13 +53,13 @@ exports[`Upload List should non-image format file preview 1`] = `
<!----> <!---->
</div> </div>
<div class="ant-upload-list-item ant-upload-list-item-done"> <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> <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> </svg></i>
<!----> <!---->
</div> </div>
<div class="ant-upload-list-item ant-upload-list-item-done"> <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> <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> </svg></i>
<!----> <!---->

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

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