updated tiles styles
This commit is contained in:
Danny Coates
parent
4a40c75173
commit
7c540b8903
1 changed files with 92 additions and 86 deletions
|
|
@ -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>`;
|
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue