update ui
This commit is contained in:
Mark Liang
parent
5ebe869c26
commit
cacb3a898d
21 changed files with 298 additions and 212 deletions
|
|
@ -21,7 +21,7 @@ function password(state) {
|
|||
|
||||
return html`
|
||||
<div class="my-2">
|
||||
<div class="checkbox">
|
||||
<div class="checkbox inline-block mr-3">
|
||||
<input
|
||||
id="add-password"
|
||||
type="checkbox"
|
||||
|
|
@ -36,7 +36,7 @@ function password(state) {
|
|||
id="password-input"
|
||||
class="${
|
||||
state.password ? '' : 'invisible'
|
||||
} border rounded-sm focus:border-blue leading-normal mt-2"
|
||||
} border rounded-sm focus:border-blue leading-normal mt-2 py-1 px-2 h-8"
|
||||
autocomplete="off"
|
||||
maxlength="${MAX_LENGTH}"
|
||||
type="password"
|
||||
|
|
@ -93,11 +93,13 @@ function password(state) {
|
|||
|
||||
function fileInfo(file, action) {
|
||||
return html`
|
||||
<article class="flex flex-row items-start p-3">
|
||||
<article class="flex flex-row items-center p-3">
|
||||
<img class="" src="${assets.get('blue_file.svg')}"/>
|
||||
<p class="ml-3 w-full">
|
||||
<h1 class="text-base font-semibold">${file.name}</h1>
|
||||
<div class="text-sm font-light">${bytes(file.size)}</div>
|
||||
<p class="ml-4 w-full">
|
||||
<h1 class="text-sm font-medium">${file.name}</h1>
|
||||
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
|
||||
file.size
|
||||
)}</div>
|
||||
<div class="hidden">${file.type}</div>
|
||||
</p>
|
||||
${action}
|
||||
|
|
@ -129,7 +131,7 @@ module.exports = function(state, emit, archive) {
|
|||
return html`
|
||||
<article
|
||||
id="${archive.id}"
|
||||
class="flex flex-col items-start border border-grey-light bg-white p-3">
|
||||
class="flex flex-col items-start border border-grey-light bg-white p-4">
|
||||
<p class="w-full">
|
||||
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
|
||||
<input
|
||||
|
|
@ -138,18 +140,20 @@ module.exports = function(state, emit, archive) {
|
|||
alt="Delete"
|
||||
src="${assets.get('close-16.svg')}"
|
||||
onclick=${del}/>
|
||||
<h1 class="text-base font-semibold">${archive.name}</h1>
|
||||
<div class="text-sm font-light">${bytes(archive.size)}</div>
|
||||
<h1 class="text-sm font-medium">${archive.name}</h1>
|
||||
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
|
||||
archive.size
|
||||
)}</div>
|
||||
</p>
|
||||
<div class="text-xs text-grey-dark w-full mt-2 mb-2">
|
||||
${expiryInfo(state.translate, archive)}
|
||||
</div>
|
||||
${archiveDetails(state.translate, archive)}
|
||||
<hr class="w-full border-t">
|
||||
<hr class="w-full border-t my-4">
|
||||
<button
|
||||
class="text-blue self-end"
|
||||
class="text-blue self-end font-medium flex items-center"
|
||||
onclick=${copy}>
|
||||
<img src="${assets.get('copy-16.svg')}" class="mr-1"/>
|
||||
<img src="${assets.get('copy-16.svg')}" class="mr-2"/>
|
||||
${state.translate('copyUrlHover')}
|
||||
</button>
|
||||
</article>`;
|
||||
|
|
@ -173,12 +177,13 @@ module.exports = function(state, emit, archive) {
|
|||
|
||||
module.exports.wip = function(state, emit) {
|
||||
return html`
|
||||
<article class="h-full flex flex-col bg-white border border-grey-light p-2 z-20">
|
||||
<article class="h-full flex flex-col bg-white z-20">
|
||||
${list(
|
||||
state.archive.files.map(f => fileInfo(f, remove(f))),
|
||||
'list-reset h-full overflow-y-scroll'
|
||||
'list-reset h-full overflow-y-scroll p-4 bg-blue-lightest max-h-half',
|
||||
'bg-white px-2 mb-3 border border-grey-light rounded'
|
||||
)}
|
||||
<div class="flex-grow border border-dashed border-blue-light mb-2">
|
||||
<div class="flex-grow p-4 bg-blue-lightest mb-6 font-medium">
|
||||
<input
|
||||
id="file-upload"
|
||||
class="hidden"
|
||||
|
|
@ -187,9 +192,9 @@ module.exports.wip = function(state, emit) {
|
|||
onchange=${add} />
|
||||
<label
|
||||
for="file-upload"
|
||||
class="flex flex-row items-center w-full h-full text-blue p-2"
|
||||
class="flex flex-row items-center w-full h-full p-2 cursor-pointer"
|
||||
title="${state.translate('addFilesButton')}">
|
||||
<img src="${assets.get('addfile.svg')}" class="w-6 h-6 mr-2"/>
|
||||
<img src="${assets.get('addfiles.svg')}" class="w-6 h-6 mr-2"/>
|
||||
${state.translate('addFilesButton')}
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -197,10 +202,10 @@ module.exports.wip = function(state, emit) {
|
|||
${password(state, emit)}
|
||||
<button
|
||||
id="upload-btn"
|
||||
class="flex-none border rounded bg-blue text-white mt-2 py-2 px-6"
|
||||
title="${state.translate('uploadFilesButton')}"
|
||||
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('uploadSuccessConfirmHeader')}"
|
||||
onclick=${upload}>
|
||||
${state.translate('uploadFilesButton')}
|
||||
${state.translate('uploadSuccessConfirmHeader')}
|
||||
</button>
|
||||
</article>`;
|
||||
|
||||
|
|
@ -227,7 +232,7 @@ module.exports.wip = function(state, emit) {
|
|||
return html`
|
||||
<input
|
||||
type="image"
|
||||
class="self-center text-white"
|
||||
class="self-center text-white ml-4"
|
||||
alt="Delete"
|
||||
src="${assets.get('close-16.svg')}"
|
||||
onclick=${del}/>`;
|
||||
|
|
@ -245,11 +250,13 @@ module.exports.uploading = function(state, emit) {
|
|||
return html`
|
||||
<article
|
||||
id="${archive.id}"
|
||||
class="z-20 flex flex-col items-start border border-grey-light bg-white p-3">
|
||||
class="z-20 flex flex-col items-start border border-grey-light bg-white p-4">
|
||||
<p class="w-full">
|
||||
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
|
||||
<h1 class="text-base font-semibold">${archive.name}</h1>
|
||||
<div class="text-sm font-light">${bytes(archive.size)}</div>
|
||||
<h1 class="text-sm font-medium">${archive.name}</h1>
|
||||
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
|
||||
archive.size
|
||||
)}</div>
|
||||
</p>
|
||||
<div class="text-xs text-grey-dark w-full mt-2 mb-2">
|
||||
${expiryInfo(state.translate, {
|
||||
|
|
@ -258,10 +265,10 @@ module.exports.uploading = function(state, emit) {
|
|||
expiresAt: Date.now() + 500 + state.timeLimit * 1000
|
||||
})}
|
||||
</div>
|
||||
<div class="text-blue text-sm font-medium">${progressPercent}</div>
|
||||
<progress class="mb-1" value="${progress}">${progressPercent}</progress>
|
||||
<div class="text-blue text-sm font-medium mt-2">${progressPercent}</div>
|
||||
<progress class="my-3" value="${progress}">${progressPercent}</progress>
|
||||
<button
|
||||
class="text-blue self-end"
|
||||
class="text-blue self-end font-medium"
|
||||
onclick=${cancel}>
|
||||
${state.translate('uploadingPageCancel')}
|
||||
</button>
|
||||
|
|
@ -276,8 +283,14 @@ module.exports.uploading = function(state, emit) {
|
|||
|
||||
module.exports.empty = function(state, emit) {
|
||||
return html`
|
||||
<article class="flex flex-col items-center justify-center border border-dashed border-blue-light p-16 h-full">
|
||||
<div class="p-1">${state.translate('uploadDropDragMessage')}</div>
|
||||
<article class="flex flex-col items-center justify-center border border-dashed border-blue-light px-6 py-16 h-full">
|
||||
<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(
|
||||
'uploadDropDragMessage'
|
||||
)}</div>
|
||||
<div class="pb-6 text-center text-base italic">${state.translate(
|
||||
'uploadDropClickMessage'
|
||||
)}</div>
|
||||
<input
|
||||
id="file-upload"
|
||||
class="hidden"
|
||||
|
|
@ -286,7 +299,7 @@ module.exports.empty = function(state, emit) {
|
|||
onchange=${add} />
|
||||
<label
|
||||
for="file-upload"
|
||||
class="border rounded bg-blue text-white py-2 px-6"
|
||||
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')}
|
||||
</label>
|
||||
|
|
@ -306,17 +319,18 @@ module.exports.preview = function(state, emit) {
|
|||
archive.open = true;
|
||||
}
|
||||
return html`
|
||||
<article class="flex flex-col max-h-full bg-white border border-grey-light p-2 z-20">
|
||||
<p class="flex-none w-full mb-4">
|
||||
<article class="flex flex-col bg-white border border-grey-light p-4 z-20">
|
||||
<p class="w-full mb-4">
|
||||
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
|
||||
<h1 class="text-base font-semibold">${archive.name}</h1>
|
||||
<div class="text-sm font-light">${bytes(archive.size)}</div>
|
||||
<h1 class="text-sm font-medium">${archive.name}</h1>
|
||||
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
|
||||
archive.size
|
||||
)}</div>
|
||||
</p>
|
||||
${archiveDetails(state.translate, archive)}
|
||||
<hr class="w-full border-t">
|
||||
<button
|
||||
id="download-btn"
|
||||
class="flex-none border rounded bg-blue text-white mt-2 py-2 px-6"
|
||||
class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white mt-4 py-2 px-6 h-12 w-full flex flex-no-shrink items-center justify-center font-semibold"
|
||||
title="${state.translate('downloadButtonLabel')}"
|
||||
onclick=${download}>
|
||||
${state.translate('downloadButtonLabel')}
|
||||
|
|
@ -335,16 +349,18 @@ module.exports.downloading = function(state, emit) {
|
|||
const progress = state.transfer.progressRatio;
|
||||
const progressPercent = percent(progress);
|
||||
return html`
|
||||
<article class="flex flex-col bg-white border border-grey-light p-2 z-20">
|
||||
<article class="flex flex-col bg-white border border-grey-light p-4 z-20">
|
||||
<p class="w-full mb-4">
|
||||
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
|
||||
<h1 class="text-base font-semibold">${archive.name}</h1>
|
||||
<div class="text-sm font-light">${bytes(archive.size)}</div>
|
||||
<h1 class="text-sm font-medium">${archive.name}</h1>
|
||||
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
|
||||
archive.size
|
||||
)}</div>
|
||||
</p>
|
||||
<div class="text-blue text-sm font-medium">${progressPercent}</div>
|
||||
<progress class="" value="${progress}">${progressPercent}</progress>
|
||||
<div class="text-blue text-sm font-medium mt-2">${progressPercent}</div>
|
||||
<progress class="my-3" value="${progress}">${progressPercent}</progress>
|
||||
<button
|
||||
class="border rounded bg-grey-dark text-white mt-2 py-2 px-6"
|
||||
class="border rounded bg-grey-dark text-white mt-2 text-center py-2 px-6 h-12 w-full flex flex-no-shrink items-center justify-center font-semibold"
|
||||
title="${state.translate('downloadCancel')}"
|
||||
onclick=${cancel}>
|
||||
${state.translate('downloadCancel')}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue