mentos1386/send
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

fixed double file open on chrome

Browse source
This commit is contained in:
Danny Coates 2018-11-08 16:24:32 -08:00
parent e9aa9d60af
commit 1d09a2e694
No known key found for this signature in database
GPG key ID: 4C442633C62E00CB
1 changed files with 132 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

108
app/ui/archiveTile.js
View file

@ -27,7 +27,8 @@ function password(state) {
type="checkbox" type="checkbox"
${state.password ? 'checked' : ''} ${state.password ? 'checked' : ''}
autocomplete="off" autocomplete="off"
onchange=${togglePasswordInput}/> onchange="${togglePasswordInput}"
/>
<label for="add-password"> <label for="add-password">
${state.translate('addPasswordMessage')} ${state.translate('addPasswordMessage')}
</label> </label>
@ -40,16 +41,18 @@ function password(state) {
autocomplete="off" autocomplete="off"
maxlength="${MAX_LENGTH}" maxlength="${MAX_LENGTH}"
type="password" type="password"
oninput=${inputChanged} oninput="${inputChanged}"
onfocus=${focused} onfocus="${focused}"
placeholder="${state.translate('unlockInputPlaceholder')}" placeholder="${state.translate('unlockInputPlaceholder')}"
value="${state.password || ''}" value="${state.password || ''}"
> />
<label <label
id="password-msg" id="password-msg"
for="password-input" for="password-input"
class="block text-xs text-grey-darker mt-1"></label> class="block text-xs text-grey-darker mt-1"
</div>`; ></label>
</div>
`;
function togglePasswordInput(event) { function togglePasswordInput(event) {
event.stopPropagation(); event.stopPropagation();
@ -109,14 +112,26 @@ function fileInfo(file, action) {
function archiveDetails(translate, archive) { function archiveDetails(translate, archive) {
if (archive.manifest.files.length > 1) { if (archive.manifest.files.length > 1) {
return html` return html`
<details class="w-full pb-1 overflow-y-scroll" ${ <details
archive.open ? 'open' : '' class="w-full pb-1 overflow-y-scroll"
} ontoggle=${toggled}> ${archive.open ? 'open' : ''}
<summary>${translate('fileCount', { ontoggle="${toggled}"
>
<summary
>${
translate('fileCount', {
num: archive.manifest.files.length num: archive.manifest.files.length
})}</summary> })
${list(archive.manifest.files.map(f => fileInfo(f)), 'list-reset h-full')} }</summary
</details>`; >
${
list(
archive.manifest.files.map(f => fileInfo(f)),
'list-reset h-full'
)
}
</details>
`;
} }
function toggled(event) { function toggled(event) {
event.stopPropagation(); event.stopPropagation();
@ -175,38 +190,44 @@ module.exports = function(state, emit, archive) {
module.exports.wip = function(state, emit) { module.exports.wip = function(state, emit) {
return html` return html`
<article class="h-full flex flex-col bg-white z-20" id="wip"> <article class="h-full flex flex-col bg-white z-20" id="wip">
${list( ${
list(
Array.from(state.archive.files) Array.from(state.archive.files)
.reverse() .reverse()
.map(f => fileInfo(f, remove(f))), .map(f => fileInfo(f, remove(f))),
'list-reset h-full overflow-y-scroll px-4 bg-blue-lightest md:max-h-half-screen', 'list-reset h-full overflow-y-scroll px-4 bg-blue-lightest md:max-h-half-screen',
'bg-white px-2 mt-3 border border-grey-light rounded' 'bg-white px-2 mt-3 border border-grey-light rounded'
)} )
}
<div class="flex-grow p-4 bg-blue-lightest mb-6 font-medium"> <div class="flex-grow p-4 bg-blue-lightest mb-6 font-medium">
<input <input
id="file-upload" id="file-upload"
class="hidden" class="hidden"
type="file" type="file"
multiple multiple
onchange=${add} /> onchange="${add}"
/>
<label <label
for="file-upload" for="file-upload"
class="flex flex-row items-center w-full h-full p-2 cursor-pointer" class="flex flex-row items-center w-full h-full p-2 cursor-pointer"
title="${state.translate('addFilesButton')}"> title="${state.translate('addFilesButton')}"
<img src="${assets.get('addfiles.svg')}" class="w-6 h-6 mr-2"/> >
${state.translate('addFilesButton')} <img src="${assets.get('addfiles.svg')}" class="w-6 h-6 mr-2" /> ${
state.translate('addFilesButton')
}
</label> </label>
</div> </div>
${expiryOptions(state, emit)} ${expiryOptions(state, emit)} ${password(state, emit)}
${password(state, emit)}
<button <button
id="upload-btn" id="upload-btn"
class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 flex flex-no-shrink items-center justify-center font-semibold" class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 flex flex-no-shrink items-center justify-center font-semibold"
title="${state.translate('uploadSuccessConfirmHeader')}" title="${state.translate('uploadSuccessConfirmHeader')}"
onclick=${upload}> onclick="${upload}"
>
${state.translate('uploadSuccessConfirmHeader')} ${state.translate('uploadSuccessConfirmHeader')}
</button> </button>
</article>`; </article>
`;
function upload(event) { function upload(event) {
window.scrollTo(0, 0); window.scrollTo(0, 0);
@ -240,7 +261,9 @@ module.exports.wip = function(state, emit) {
class="self-center text-white ml-4" class="self-center text-white ml-4"
alt="Delete" alt="Delete"
src="${assets.get('close-16.svg')}" src="${assets.get('close-16.svg')}"
onclick=${del}/>`; onclick="${del}"
/>
`;
function del(event) { function del(event) {
event.stopPropagation(); event.stopPropagation();
emit('removeUpload', file); emit('removeUpload', file);
@ -288,29 +311,42 @@ module.exports.uploading = function(state, emit) {
module.exports.empty = function(state, emit) { module.exports.empty = function(state, emit) {
return html` return html`
<article class="flex flex-col items-center justify-center border-2 border-dashed border-blue-light px-6 py-16 h-full" <article
onclick=${() => document.getElementById('file-upload').click()}> class="flex flex-col items-center justify-center border-2 border-dashed border-blue-light px-6 py-16 h-full"
onclick="${
e => {
if (e.target.tagName !== 'LABEL') {
document.getElementById('file-upload').click();
}
}
}"
>
<img src="${assets.get('addfiles.svg')}" width="48" height="48" /> <img src="${assets.get('addfiles.svg')}" width="48" height="48" />
<div class="pt-6 pb-2 text-center text-lg font-bold uppercase tracking-wide">${state.translate( <div
'uploadDropDragMessage' class="pt-6 pb-2 text-center text-lg font-bold uppercase tracking-wide"
)}</div> >
<div class="pb-6 text-center text-base italic">${state.translate( ${state.translate('uploadDropDragMessage')}
'uploadDropClickMessage' </div>
)}</div> <div class="pb-6 text-center text-base italic">
${state.translate('uploadDropClickMessage')}
</div>
<input <input
id="file-upload" id="file-upload"
class="hidden" class="hidden"
type="file" type="file"
multiple multiple
onchange=${add} onchange="${add}"
onclick=${e => e.stopPropagation()} /> onclick="${e => e.stopPropagation()}"
/>
<label <label
for="file-upload" for="file-upload"
class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 mt-4 flex flex-no-shrink items-center justify-center font-semibold" class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 mt-4 flex flex-no-shrink items-center justify-center font-semibold"
title="${state.translate('addFilesButton')}"> title="${state.translate('addFilesButton')}"
>
${state.translate('addFilesButton')} ${state.translate('addFilesButton')}
</label> </label>
</article>`; </article>
`;
function add(event) { function add(event) {
event.preventDefault(); event.preventDefault();