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

228
app/ui/archiveTile.js
View file

@ -20,36 +20,39 @@ function password(state) {
const MAX_LENGTH = 32; const MAX_LENGTH = 32;
return html` return html`
<div class="my-2"> <div class="my-2">
<div class="checkbox inline-block mr-3"> <div class="checkbox inline-block mr-3">
<input
id="add-password"
type="checkbox"
${state.password ? 'checked' : ''}
autocomplete="off"
onchange="${togglePasswordInput}"
/>
<label for="add-password">
${state.translate('addPasswordMessage')}
</label>
</div>
<input <input
id="add-password" id="password-input"
type="checkbox" class="${
${state.password ? 'checked' : ''} state.password ? '' : 'invisible'
} border rounded-sm focus:border-blue leading-normal my-2 py-1 px-2 h-8"
autocomplete="off" autocomplete="off"
onchange=${togglePasswordInput}/> maxlength="${MAX_LENGTH}"
<label for="add-password"> type="password"
${state.translate('addPasswordMessage')} oninput="${inputChanged}"
</label> onfocus="${focused}"
placeholder="${state.translate('unlockInputPlaceholder')}"
value="${state.password || ''}"
/>
<label
id="password-msg"
for="password-input"
class="block text-xs text-grey-darker mt-1"
></label>
</div> </div>
<input `;
id="password-input"
class="${
state.password ? '' : 'invisible'
} border rounded-sm focus:border-blue leading-normal my-2 py-1 px-2 h-8"
autocomplete="off"
maxlength="${MAX_LENGTH}"
type="password"
oninput=${inputChanged}
onfocus=${focused}
placeholder="${state.translate('unlockInputPlaceholder')}"
value="${state.password || ''}"
>
<label
id="password-msg"
for="password-input"
class="block text-xs text-grey-darker mt-1"></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}"
num: archive.manifest.files.length >
})}</summary> <summary
${list(archive.manifest.files.map(f => fileInfo(f)), 'list-reset h-full')} >${
</details>`; translate('fileCount', {
num: archive.manifest.files.length
})
}</summary
>
${
list(
archive.manifest.files.map(f => fileInfo(f)),
'list-reset h-full'
)
}
</details>
`;
} }
function toggled(event) { function toggled(event) {
event.stopPropagation(); event.stopPropagation();
@ -174,39 +189,45 @@ 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( ${
Array.from(state.archive.files) list(
.reverse() Array.from(state.archive.files)
.map(f => fileInfo(f, remove(f))), .reverse()
'list-reset h-full overflow-y-scroll px-4 bg-blue-lightest md:max-h-half-screen', .map(f => fileInfo(f, remove(f))),
'bg-white px-2 mt-3 border border-grey-light rounded' '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'
<div class="flex-grow p-4 bg-blue-lightest mb-6 font-medium"> )
<input }
id="file-upload" <div class="flex-grow p-4 bg-blue-lightest mb-6 font-medium">
class="hidden" <input
type="file" id="file-upload"
multiple class="hidden"
onchange=${add} /> type="file"
<label multiple
for="file-upload" onchange="${add}"
class="flex flex-row items-center w-full h-full p-2 cursor-pointer" />
title="${state.translate('addFilesButton')}"> <label
<img src="${assets.get('addfiles.svg')}" class="w-6 h-6 mr-2"/> for="file-upload"
${state.translate('addFilesButton')} class="flex flex-row items-center w-full h-full p-2 cursor-pointer"
</label> title="${state.translate('addFilesButton')}"
</div> >
${expiryOptions(state, emit)} <img src="${assets.get('addfiles.svg')}" class="w-6 h-6 mr-2" /> ${
${password(state, emit)} state.translate('addFilesButton')
<button }
id="upload-btn" </label>
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" </div>
title="${state.translate('uploadSuccessConfirmHeader')}" ${expiryOptions(state, emit)} ${password(state, emit)}
onclick=${upload}> <button
${state.translate('uploadSuccessConfirmHeader')} id="upload-btn"
</button> 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"
</article>`; title="${state.translate('uploadSuccessConfirmHeader')}"
onclick="${upload}"
>
${state.translate('uploadSuccessConfirmHeader')}
</button>
</article>
`;
function upload(event) { function upload(event) {
window.scrollTo(0, 0); window.scrollTo(0, 0);
@ -235,12 +256,14 @@ module.exports.wip = function(state, emit) {
function remove(file) { function remove(file) {
return html` return html`
<input <input
type="image" type="image"
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"
<img src="${assets.get('addfiles.svg')}" width="48" height="48"/> onclick="${
<div class="pt-6 pb-2 text-center text-lg font-bold uppercase tracking-wide">${state.translate( e => {
'uploadDropDragMessage' if (e.target.tagName !== 'LABEL') {
)}</div> document.getElementById('file-upload').click();
<div class="pb-6 text-center text-base italic">${state.translate( }
'uploadDropClickMessage' }
)}</div> }"
<input >
id="file-upload" <img src="${assets.get('addfiles.svg')}" width="48" height="48" />
class="hidden" <div
type="file" class="pt-6 pb-2 text-center text-lg font-bold uppercase tracking-wide"
multiple >
onchange=${add} ${state.translate('uploadDropDragMessage')}
onclick=${e => e.stopPropagation()} /> </div>
<label <div class="pb-6 text-center text-base italic">
for="file-upload" ${state.translate('uploadDropClickMessage')}
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" </div>
title="${state.translate('addFilesButton')}"> <input
id="file-upload"
class="hidden"
type="file"
multiple
onchange="${add}"
onclick="${e => e.stopPropagation()}"
/>
<label
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"
title="${state.translate('addFilesButton')}"
>
${state.translate('addFilesButton')} ${state.translate('addFilesButton')}
</label> </label>
</article>`; </article>
`;
function add(event) { function add(event) {
event.preventDefault(); event.preventDefault();