Chapril/drop.chapril.org-firefoxsend
Chapril/drop.chapril.org-firefoxsend
24
1
Fork 0
Code Issues Releases Activity

updated tiles styles

Browse Source
This commit is contained in:
Danny Coates 2019-02-26 17:22:45 -08:00
parent 4a40c75173
commit 7c540b8903
No known key found for this signature in database
GPG Key ID: 4C442633C62E00CB
1 changed files with 92 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
app/ui/archiveTile.js
View File

@ -112,12 +112,25 @@ function fileInfo(file, action) {
<div class="text-sm font-normal opacity-75 pt-1">${bytes( <div class="text-sm font-normal opacity-75 pt-1">${bytes(
file.size file.size
)}</div> )}</div>
<div class="hidden">${file.type}</div>
</p> </p>
${action} ${action}
</send-file>`; </send-file>`;
} }
function archiveInfo(archive, action) {
return html`
<p class="w-full flex items-center">
<img class="mr-3" src="${assets.get('blue_file.svg')}"/>
<p class="flex-grow">
<h1 class="text-base font-medium word-break-all">${archive.name}</h1>
<div class="text-sm font-normal opacity-75 pt-1">${bytes(
archive.size
)}</div>
</p>
${action}
</p>`;
}
function archiveDetails(translate, archive) { function archiveDetails(translate, archive) {
if (archive.manifest.files.length > 1) { if (archive.manifest.files.length > 1) {
return html` return html`
@ -191,33 +204,33 @@ module.exports = function(state, emit, archive) {
<div></div> <div></div>
`; `;
return html` return html`
<send-archive <send-archive
id="archive-${archive.id}" id="archive-${archive.id}"
class="flex flex-col items-start rounded shadow-light bg-white p-4 w-full"> class="flex flex-col items-start rounded shadow-light bg-white p-4 w-full"
<p class="w-full"> >
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/> ${archiveInfo(
<input archive,
type="image" html`
class="float-right self-center text-white hover:opacity-75 focus:outline" <input
alt="${state.translate('deleteButtonHover')}" type="image"
title="${state.translate('deleteButtonHover')}" class="self-start text-white hover:opacity-75 focus:outline"
src="${assets.get('close-16.svg')}" alt="${state.translate('deleteButtonHover')}"
onclick=${del}/> title="${state.translate('deleteButtonHover')}"
<h1 class="text-base font-medium word-break-all">${archive.name}</h1> src="${assets.get('close-16.svg')}"
<div class="text-sm font-normal opacity-75 pt-1">${bytes( onclick=${del}
archive.size />
)}</div> `
</p> )}
<div class="text-sm opacity-75 w-full mt-2 mb-2"> <div class="text-sm opacity-75 w-full mt-2 mb-2">
${expiryInfo(state.translate, archive)} ${expiryInfo(state.translate, archive)}
</div> </div>
${archiveDetails(state.translate, archive)} ${archiveDetails(state.translate, archive)}
<hr class="w-full border-t my-4"> <hr class="w-full border-t my-4" />
<div class="flex justify-between w-full"> <div class="flex justify-between w-full">
${dl} ${dl} ${copyOrShare}
${copyOrShare} </div>
</div> </send-archive>
</send-archive>`; `;
function copy(event) { function copy(event) {
event.stopPropagation(); event.stopPropagation();
@ -258,7 +271,7 @@ module.exports.wip = function(state, emit) {
> >
<input <input
id="file-upload" id="file-upload"
class="opacity-0 w-0 h-0 appearance-none" class="opacity-0 w-0 h-0 appearance-none absolute"
type="file" type="file"
multiple multiple
onfocus="${focus}" onfocus="${focus}"
@ -350,32 +363,31 @@ module.exports.uploading = function(state, emit) {
const progressPercent = percent(progress); const progressPercent = percent(progress);
const archive = state.archive; const archive = state.archive;
return html` return html`
<send-upload-area <send-upload-area
id="${archive.id}" id="${archive.id}"
class="flex flex-col items-start rounded shadow-light bg-white p-4 w-full"> class="flex flex-col items-start rounded shadow-light bg-white p-4 w-full"
<p class="w-full"> >
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/> ${archiveInfo(archive)}
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1> <div class="text-xs text-grey-dark w-full mt-2 mb-2">
<div class="text-xs font-normal opacity-75 pt-1">${bytes( ${expiryInfo(state.translate, {
archive.size dlimit: state.archive.dlimit,
)}</div> dtotal: 0,
</p> expiresAt: Date.now() + 500 + state.archive.timeLimit * 1000
<div class="text-xs text-grey-dark w-full mt-2 mb-2"> })}
${expiryInfo(state.translate, { </div>
dlimit: state.archive.dlimit, <div class="text-blue-dark text-sm font-medium mt-2">
dtotal: 0, ${progressPercent}
expiresAt: Date.now() + 500 + state.archive.timeLimit * 1000 </div>
})} <progress class="my-3" value="${progress}">${progressPercent}</progress>
</div> <button
<div class="text-blue-dark text-sm font-medium mt-2">${progressPercent}</div> class="text-blue-dark hover:text-blue-darker focus:text-blue-darker self-end font-medium"
<progress class="my-3" value="${progress}">${progressPercent}</progress> onclick=${cancel}
<button title="${state.translate('uploadingPageCancelShort')}"
class="text-blue-dark hover:text-blue-darker focus:text-blue-darker self-end font-medium" >
onclick=${cancel} ${state.translate('uploadingPageCancelShort')}
title="${state.translate('uploadingPageCancelShort')}"> </button>
${state.translate('uploadingPageCancelShort')} </send-upload-area>
</button> `;
</send-upload-area>`;
function cancel(event) { function cancel(event) {
event.stopPropagation(); event.stopPropagation();
@ -420,7 +432,7 @@ module.exports.empty = function(state, emit) {
</div> </div>
<input <input
id="file-upload" id="file-upload"
class="opacity-0 w-0 h-0 appearance-none" class="opacity-0 w-0 h-0 appearance-none absolute"
type="file" type="file"
multiple multiple
onfocus="${focus}" onfocus="${focus}"
@ -477,25 +489,20 @@ module.exports.preview = function(state, emit) {
</div> </div>
`; `;
return html` return html`
<send-archive class="flex flex-col max-h-full bg-white p-4 w-full md:w-128"> <send-archive class="flex flex-col max-h-full bg-white p-4 w-full md:w-128">
<div class="border rounded py-3 px-6"> <div class="border rounded py-3 px-6">
<p class="w-full"> ${archiveInfo(archive)} ${details}
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/> </div>
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1> <button
<div class="text-xs font-normal opacity-75 pt-1">${bytes( id="download-btn"
archive.size class="btn rounded-lg mt-4 w-full flex-no-shrink focus:outline"
)}</div> title="${state.translate('downloadButtonLabel')}"
</p> onclick=${download}
${details} >
</div> ${state.translate('downloadButtonLabel')}
<button </button>
id="download-btn" </send-archive>
class="btn rounded-lg mt-4 w-full flex-no-shrink focus:outline" `;
title="${state.translate('downloadButtonLabel')}"
onclick=${download}>
${state.translate('downloadButtonLabel')}
</button>
</send-archive>`;
function download(event) { function download(event) {
event.preventDefault(); event.preventDefault();
@ -509,15 +516,14 @@ module.exports.downloading = function(state) {
const progress = state.transfer.progressRatio; const progress = state.transfer.progressRatio;
const progressPercent = percent(progress); const progressPercent = percent(progress);
return html` return html`
<send-archive class="flex flex-col bg-white rounded shadow-light p-4 w-full max-w-sm md:w-128"> <send-archive
<p class="w-full mb-4"> class="flex flex-col bg-white rounded shadow-light p-4 w-full max-w-sm md:w-128"
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/> >
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1> ${archiveInfo(archive)}
<div class="text-xs font-normal opacity-75 pt-1">${bytes( <div class="text-blue-dark text-sm font-medium mt-2">
archive.size ${progressPercent}
)}</div> </div>
</p> <progress class="my-3" value="${progress}">${progressPercent}</progress>
<div class="text-blue-dark text-sm font-medium mt-2">${progressPercent}</div> </send-archive>
<progress class="my-3" value="${progress}">${progressPercent}</progress> `;
</send-archive>`;
}; };