Mirrors/uppy
1
0
Fork 0
mirror of https://github.com/transloadit/uppy.git synced 2026-07-28 20:40:06 +00:00
Code Issues Projects Releases Wiki Activity

hide inner content of the FileCard when its inactive

Browse source
This commit is contained in:
Artur Paikin 2017-11-12 11:34:07 -05:00
parent 22174816f7
commit da7ef3ba72
1 changed files with 30 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

57
src/plugins/Dashboard/FileCard.js
View file

@ -31,38 +31,41 @@ module.exports = function fileCard (props) {
}
return html`<div class="UppyDashboardFileCard" aria-hidden="${!props.fileCardFor}">
<div class="UppyDashboardContent-bar">
<h2 class="UppyDashboardContent-title">Editing <span class="UppyDashboardContent-titleFile">${file.meta ? file.meta.name : file.name}</span></h2>
<button class="UppyDashboardContent-back" type="button" title="Finish editing file"
onclick=${() => props.done(meta, file.id)}>Done</button>
</div>
${props.fileCardFor
? html`<div class="UppyDashboardFileCard-inner">
<div class="UppyDashboardFileCard-preview" style="background-color: ${getFileTypeIcon(file.type).color}">
${file.preview
? html`<img alt="${file.name}" src="${file.preview}">`
: html`<div class="UppyDashboardItem-previewIconWrap">
<span class="UppyDashboardItem-previewIcon" style="color: ${getFileTypeIcon(file.type).color}">${getFileTypeIcon(file.type).icon}</span>
<svg class="UppyDashboardItem-previewIconBg" width="72" height="93" viewBox="0 0 72 93"><g><path d="M24.08 5h38.922A2.997 2.997 0 0 1 66 8.003v74.994A2.997 2.997 0 0 1 63.004 86H8.996A2.998 2.998 0 0 1 6 83.01V22.234L24.08 5z" fill="#FFF"/><path d="M24 5L6 22.248h15.007A2.995 2.995 0 0 0 24 19.244V5z" fill="#E4E4E4"/></g></svg>
</div>`
}
? html`
<div style="width: 100%; height: 100%;">
<div class="UppyDashboardContent-bar">
<h2 class="UppyDashboardContent-title">Editing <span class="UppyDashboardContent-titleFile">${file.meta ? file.meta.name : file.name}</span></h2>
<button class="UppyDashboardContent-back" type="button" title="Finish editing file"
onclick=${() => props.done(meta, file.id)}>Done</button>
</div>
<div class="UppyDashboardFileCard-info">
<fieldset class="UppyDashboardFileCard-fieldset">
<label class="UppyDashboardFileCard-label">Name</label>
<input class="UppyDashboardFileCard-input" data-name="name" type="text" value="${file.meta.name}"
onkeyup=${tempStoreMetaOrSubmit} />
</fieldset>
${renderMetaFields(file)}
<div class="UppyDashboardFileCard-inner">
<div class="UppyDashboardFileCard-preview" style="background-color: ${getFileTypeIcon(file.type).color}">
${file.preview
? html`<img alt="${file.name}" src="${file.preview}">`
: html`<div class="UppyDashboardItem-previewIconWrap">
<span class="UppyDashboardItem-previewIcon" style="color: ${getFileTypeIcon(file.type).color}">${getFileTypeIcon(file.type).icon}</span>
<svg class="UppyDashboardItem-previewIconBg" width="72" height="93" viewBox="0 0 72 93"><g><path d="M24.08 5h38.922A2.997 2.997 0 0 1 66 8.003v74.994A2.997 2.997 0 0 1 63.004 86H8.996A2.998 2.998 0 0 1 6 83.01V22.234L24.08 5z" fill="#FFF"/><path d="M24 5L6 22.248h15.007A2.995 2.995 0 0 0 24 19.244V5z" fill="#E4E4E4"/></g></svg>
</div>`
}
</div>
<div class="UppyDashboardFileCard-info">
<fieldset class="UppyDashboardFileCard-fieldset">
<label class="UppyDashboardFileCard-label">Name</label>
<input class="UppyDashboardFileCard-input" data-name="name" type="text" value="${file.meta.name}"
onkeyup=${tempStoreMetaOrSubmit} />
</fieldset>
${renderMetaFields(file)}
</div>
</div>
<div class="UppyDashboard-actions">
<button class="UppyButton--circular UppyButton--blue UppyDashboardFileCard-done"
type="button"
title="Finish editing file"
onclick=${() => props.done(meta, file.id)}>${checkIcon()}</button>
</div>
</div>`
: null
}
<div class="UppyDashboard-actions">
<button class="UppyButton--circular UppyButton--blue UppyDashboardFileCard-done"
type="button"
title="Finish editing file"
onclick=${() => props.done(meta, file.id)}>${checkIcon()}</button>
</div>
</div>`
}