added download link to tile

This commit is contained in:
Danny Coates 2019-01-23 15:10:09 -08:00
parent 7bf8bab864
commit dece0969c2
No known key found for this signature in database
GPG Key ID: 4C442633C62E00CB
3 changed files with 56 additions and 41 deletions

View File

@ -4,11 +4,11 @@ const html = require('choo/html');
const raw = require('choo/html/raw'); const raw = require('choo/html/raw');
const assets = require('../../common/assets'); const assets = require('../../common/assets');
const { const {
browserName,
bytes, bytes,
copyToClipboard, copyToClipboard,
list, list,
percent, percent,
platform,
timeLeft timeLeft
} = require('../utils'); } = require('../utils');
const expiryOptions = require('./expiryOptions'); const expiryOptions = require('./expiryOptions');
@ -44,9 +44,9 @@ function password(state) {
</div> </div>
<input <input
id="password-input" id="password-input"
class="${ class="${state.password
state.password ? '' : 'invisible' ? ''
} border rounded-sm focus:border-blue leading-normal my-2 py-1 px-2 h-8" : 'invisible'} border rounded-sm focus:border-blue leading-normal my-2 py-1 px-2 h-8"
autocomplete="off" autocomplete="off"
maxlength="${MAX_LENGTH}" maxlength="${MAX_LENGTH}"
type="password" type="password"
@ -127,18 +127,14 @@ function archiveDetails(translate, archive) {
ontoggle="${toggled}" ontoggle="${toggled}"
> >
<summary <summary
>${ >${translate('fileCount', {
translate('fileCount', {
num: archive.manifest.files.length num: archive.manifest.files.length
}) })}</summary
}</summary
> >
${ ${list(
list(
archive.manifest.files.map(f => fileInfo(f)), archive.manifest.files.map(f => fileInfo(f)),
'list-reset h-full' 'list-reset h-full'
) )}
}
</details> </details>
`; `;
} }
@ -150,15 +146,14 @@ function archiveDetails(translate, archive) {
module.exports = function(state, emit, archive) { module.exports = function(state, emit, archive) {
const copyOrShare = const copyOrShare =
browserName() !== 'android-app' platform() !== 'android'
? html` ? html`
<button <button
class="text-blue hover:text-blue-dark focus:text-blue-darker self-end font-medium flex items-center" class="text-blue hover:text-blue-dark focus:text-blue-darker self-end font-medium flex items-center"
onclick=${copy} onclick=${copy}
> >
<img src="${assets.get('copy-16.svg')}" class="mr-2" /> ${ <img src="${assets.get('copy-16.svg')}" class="mr-2" />
state.translate('copyUrlHover') ${state.translate('copyUrlHover')}
}
</button> </button>
` `
: html` : html`
@ -169,6 +164,19 @@ module.exports = function(state, emit, archive) {
<img src="${assets.get('share-24.svg')}" class="mr-2" /> Share <img src="${assets.get('share-24.svg')}" class="mr-2" /> Share
</button> </button>
`; `;
const dl =
platform() === 'web'
? html`
<a
class="text-blue hover:text-blue-dark focus:text-blue-darker font-medium"
href="${archive.url}"
>
${state.translate('downloadButtonLabel')}
</a>
`
: html`
<div></div>
`;
return html` return html`
<send-archive <send-archive
id="archive-${archive.id}" id="archive-${archive.id}"
@ -191,7 +199,10 @@ module.exports = function(state, emit, 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">
${dl}
${copyOrShare} ${copyOrShare}
</div>
</send-archive>`; </send-archive>`;
function copy(event) { function copy(event) {
@ -219,15 +230,13 @@ module.exports = function(state, emit, archive) {
module.exports.wip = function(state, emit) { module.exports.wip = function(state, emit) {
return html` return html`
<send-upload-area class="flex flex-col bg-white md:h-full w-full" id="wip"> <send-upload-area class="flex flex-col bg-white md:h-full w-full" id="wip">
${ ${list(
list(
Array.from(state.archive.files) Array.from(state.archive.files)
.reverse() .reverse()
.map(f => fileInfo(f, remove(f))), .map(f => fileInfo(f, remove(f))),
'list-reset overflow-y-scroll px-4 bg-blue-lightest md:h-full md:max-h-half-screen', 'list-reset overflow-y-scroll px-4 bg-blue-lightest md:h-full md:max-h-half-screen',
'bg-white px-2 mt-3 border border-grey-light rounded' 'bg-white px-2 mt-3 border border-grey-light rounded'
) )}
}
<div class="flex-grow p-4 bg-blue-lightest mb-6 font-medium"> <div class="flex-grow p-4 bg-blue-lightest mb-6 font-medium">
<input <input
id="file-upload" id="file-upload"
@ -242,9 +251,8 @@ module.exports.wip = function(state, emit) {
title="${state.translate('addFilesButton')}" title="${state.translate('addFilesButton')}"
> >
<div class="flex items-center"> <div class="flex items-center">
<img src="${assets.get('addfiles.svg')}" class="w-6 h-6 mr-2" /> ${ <img src="${assets.get('addfiles.svg')}" class="w-6 h-6 mr-2" />
state.translate('addFilesButton') ${state.translate('addFilesButton')}
}
</div> </div>
<div class="font-normal text-sm text-grey-darker"> <div class="font-normal text-sm text-grey-darker">
${state.translate('totalSize', { size: bytes(state.archive.size) })} ${state.translate('totalSize', { size: bytes(state.archive.size) })}
@ -347,13 +355,11 @@ module.exports.empty = function(state, emit) {
return html` return html`
<send-upload-area <send-upload-area
class="flex flex-col items-center justify-center border-2 border-dashed border-blue-light px-6 py-16 h-full w-full" class="flex flex-col items-center justify-center border-2 border-dashed border-blue-light px-6 py-16 h-full w-full"
onclick="${ onclick="${e => {
e => {
if (e.target.tagName !== 'LABEL') { if (e.target.tagName !== 'LABEL') {
document.getElementById('file-upload').click(); document.getElementById('file-upload').click();
} }
} }}"
}"
> >
<img src="${assets.get('addfiles.svg')}" width="48" height="48" /> <img src="${assets.get('addfiles.svg')}" width="48" height="48" />
<div <div

View File

@ -1,7 +1,7 @@
const html = require('choo/html'); const html = require('choo/html');
const Component = require('choo/component'); const Component = require('choo/component');
const Account = require('./account'); const Account = require('./account');
const { browserName } = require('../utils'); const { platform } = require('../utils');
class Header extends Component { class Header extends Component {
constructor(name, state, emit) { constructor(name, state, emit) {
@ -18,7 +18,7 @@ class Header extends Component {
createElement() { createElement() {
const title = const title =
browserName() === 'android-app' platform() === 'android'
? html` ? html`
<a class="header-logo"> <a class="header-logo">
<h1 class="text-2xl text-white md:text-black font-normal"> <h1 class="text-2xl text-white md:text-black font-normal">

View File

@ -1,3 +1,4 @@
/* global Android */
const html = require('choo/html'); const html = require('choo/html');
const b64 = require('base64-js'); const b64 = require('base64-js');
@ -240,6 +241,13 @@ function timeLeft(milliseconds) {
return null; return null;
} }
function platform() {
if (typeof Android === 'object') {
return 'android';
}
return 'web';
}
module.exports = { module.exports = {
fadeOut, fadeOut,
delay, delay,
@ -257,5 +265,6 @@ module.exports = {
streamToArrayBuffer, streamToArrayBuffer,
list, list,
secondsToL10nId, secondsToL10nId,
timeLeft timeLeft,
platform
}; };