Chapril/drop.chapril.org-firefoxsend
Chapril/drop.chapril.org-firefoxsend
25
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

102
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(
file.size
)}</div>
<div class="hidden">${file.type}</div>
</p>
${action}
</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) {
if (archive.manifest.files.length > 1) {
return html`
@ -193,31 +206,31 @@ module.exports = function(state, emit, archive) {
return html`
<send-archive
id="archive-${archive.id}"
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')}"/>
class="flex flex-col items-start rounded shadow-light bg-white p-4 w-full"
>
${archiveInfo(
archive,
html`
<input
type="image"
class="float-right self-center text-white hover:opacity-75 focus:outline"
class="self-start text-white hover:opacity-75 focus:outline"
alt="${state.translate('deleteButtonHover')}"
title="${state.translate('deleteButtonHover')}"
src="${assets.get('close-16.svg')}"
onclick=${del}/>
<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>
onclick=${del}
/>
`
)}
<div class="text-sm opacity-75 w-full mt-2 mb-2">
${expiryInfo(state.translate, archive)}
</div>
${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">
${dl}
${copyOrShare}
${dl} ${copyOrShare}
</div>
</send-archive>`;
</send-archive>
`;
function copy(event) {
event.stopPropagation();
@ -258,7 +271,7 @@ module.exports.wip = function(state, emit) {
>
<input
id="file-upload"
class="opacity-0 w-0 h-0 appearance-none"
class="opacity-0 w-0 h-0 appearance-none absolute"
type="file"
multiple
onfocus="${focus}"
@ -352,14 +365,9 @@ module.exports.uploading = function(state, emit) {
return html`
<send-upload-area
id="${archive.id}"
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')}"/>
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
archive.size
)}</div>
</p>
class="flex flex-col items-start rounded shadow-light bg-white p-4 w-full"
>
${archiveInfo(archive)}
<div class="text-xs text-grey-dark w-full mt-2 mb-2">
${expiryInfo(state.translate, {
dlimit: state.archive.dlimit,
@ -367,15 +375,19 @@ module.exports.uploading = function(state, emit) {
expiresAt: Date.now() + 500 + state.archive.timeLimit * 1000
})}
</div>
<div class="text-blue-dark text-sm font-medium mt-2">${progressPercent}</div>
<div class="text-blue-dark text-sm font-medium mt-2">
${progressPercent}
</div>
<progress class="my-3" value="${progress}">${progressPercent}</progress>
<button
class="text-blue-dark hover:text-blue-darker focus:text-blue-darker self-end font-medium"
onclick=${cancel}
title="${state.translate('uploadingPageCancelShort')}">
title="${state.translate('uploadingPageCancelShort')}"
>
${state.translate('uploadingPageCancelShort')}
</button>
</send-upload-area>`;
</send-upload-area>
`;
function cancel(event) {
event.stopPropagation();
@ -420,7 +432,7 @@ module.exports.empty = function(state, emit) {
</div>
<input
id="file-upload"
class="opacity-0 w-0 h-0 appearance-none"
class="opacity-0 w-0 h-0 appearance-none absolute"
type="file"
multiple
onfocus="${focus}"
@ -479,23 +491,18 @@ module.exports.preview = function(state, emit) {
return html`
<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">
<p class="w-full">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
archive.size
)}</div>
</p>
${details}
${archiveInfo(archive)} ${details}
</div>
<button
id="download-btn"
class="btn rounded-lg mt-4 w-full flex-no-shrink focus:outline"
title="${state.translate('downloadButtonLabel')}"
onclick=${download}>
onclick=${download}
>
${state.translate('downloadButtonLabel')}
</button>
</send-archive>`;
</send-archive>
`;
function download(event) {
event.preventDefault();
@ -509,15 +516,14 @@ module.exports.downloading = function(state) {
const progress = state.transfer.progressRatio;
const progressPercent = percent(progress);
return html`
<send-archive class="flex flex-col bg-white rounded shadow-light p-4 w-full max-w-sm md:w-128">
<p class="w-full mb-4">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
archive.size
)}</div>
</p>
<div class="text-blue-dark text-sm font-medium mt-2">${progressPercent}</div>
<send-archive
class="flex flex-col bg-white rounded shadow-light p-4 w-full max-w-sm md:w-128"
>
${archiveInfo(archive)}
<div class="text-blue-dark text-sm font-medium mt-2">
${progressPercent}
</div>
<progress class="my-3" value="${progress}">${progressPercent}</progress>
</send-archive>`;
</send-archive>
`;
};