From dece0969c220934ef2e83bb1631d20826f0bd9a3 Mon Sep 17 00:00:00 2001 From: Danny Coates <dannycoates@gmail.com> Date: Wed, 23 Jan 2019 15:10:09 -0800 Subject: [PATCH] added download link to tile --- app/ui/archiveTile.js | 82 +++++++++++++++++++++++-------------------- app/ui/header.js | 4 +-- app/utils.js | 11 +++++- 3 files changed, 56 insertions(+), 41 deletions(-) diff --git a/app/ui/archiveTile.js b/app/ui/archiveTile.js index 5d0202d1..22461970 100644 --- a/app/ui/archiveTile.js +++ b/app/ui/archiveTile.js @@ -4,11 +4,11 @@ const html = require('choo/html'); const raw = require('choo/html/raw'); const assets = require('../../common/assets'); const { - browserName, bytes, copyToClipboard, list, percent, + platform, timeLeft } = require('../utils'); const expiryOptions = require('./expiryOptions'); @@ -44,9 +44,9 @@ function password(state) { </div> <input id="password-input" - class="${ - state.password ? '' : 'invisible' - } border rounded-sm focus:border-blue leading-normal my-2 py-1 px-2 h-8" + class="${state.password + ? '' + : 'invisible'} border rounded-sm focus:border-blue leading-normal my-2 py-1 px-2 h-8" autocomplete="off" maxlength="${MAX_LENGTH}" type="password" @@ -127,18 +127,14 @@ function archiveDetails(translate, archive) { ontoggle="${toggled}" > <summary - >${ - translate('fileCount', { - num: archive.manifest.files.length - }) - }</summary + >${translate('fileCount', { + num: archive.manifest.files.length + })}</summary > - ${ - list( - archive.manifest.files.map(f => fileInfo(f)), - 'list-reset h-full' - ) - } + ${list( + archive.manifest.files.map(f => fileInfo(f)), + 'list-reset h-full' + )} </details> `; } @@ -150,15 +146,14 @@ function archiveDetails(translate, archive) { module.exports = function(state, emit, archive) { const copyOrShare = - browserName() !== 'android-app' + platform() !== 'android' ? html` <button class="text-blue hover:text-blue-dark focus:text-blue-darker self-end font-medium flex items-center" onclick=${copy} > - <img src="${assets.get('copy-16.svg')}" class="mr-2" /> ${ - state.translate('copyUrlHover') - } + <img src="${assets.get('copy-16.svg')}" class="mr-2" /> + ${state.translate('copyUrlHover')} </button> ` : html` @@ -169,6 +164,19 @@ module.exports = function(state, emit, archive) { <img src="${assets.get('share-24.svg')}" class="mr-2" /> Share </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` <send-archive id="archive-${archive.id}" @@ -191,7 +199,10 @@ module.exports = function(state, emit, archive) { </div> ${archiveDetails(state.translate, archive)} <hr class="w-full border-t my-4"> - ${copyOrShare} + <div class="flex justify-between w-full"> + ${dl} + ${copyOrShare} + </div> </send-archive>`; function copy(event) { @@ -219,15 +230,13 @@ module.exports = function(state, emit, archive) { module.exports.wip = function(state, emit) { return html` <send-upload-area class="flex flex-col bg-white md:h-full w-full" id="wip"> - ${ - list( - Array.from(state.archive.files) - .reverse() - .map(f => fileInfo(f, remove(f))), - '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' - ) - } + ${list( + Array.from(state.archive.files) + .reverse() + .map(f => fileInfo(f, remove(f))), + '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' + )} <div class="flex-grow p-4 bg-blue-lightest mb-6 font-medium"> <input id="file-upload" @@ -242,9 +251,8 @@ module.exports.wip = function(state, emit) { title="${state.translate('addFilesButton')}" > <div class="flex items-center"> - <img src="${assets.get('addfiles.svg')}" class="w-6 h-6 mr-2" /> ${ - state.translate('addFilesButton') - } + <img src="${assets.get('addfiles.svg')}" class="w-6 h-6 mr-2" /> + ${state.translate('addFilesButton')} </div> <div class="font-normal text-sm text-grey-darker"> ${state.translate('totalSize', { size: bytes(state.archive.size) })} @@ -347,13 +355,11 @@ module.exports.empty = function(state, emit) { return html` <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" - onclick="${ - e => { - if (e.target.tagName !== 'LABEL') { - document.getElementById('file-upload').click(); - } + onclick="${e => { + if (e.target.tagName !== 'LABEL') { + document.getElementById('file-upload').click(); } - }" + }}" > <img src="${assets.get('addfiles.svg')}" width="48" height="48" /> <div diff --git a/app/ui/header.js b/app/ui/header.js index b7c4ad1c..36eeacba 100644 --- a/app/ui/header.js +++ b/app/ui/header.js @@ -1,7 +1,7 @@ const html = require('choo/html'); const Component = require('choo/component'); const Account = require('./account'); -const { browserName } = require('../utils'); +const { platform } = require('../utils'); class Header extends Component { constructor(name, state, emit) { @@ -18,7 +18,7 @@ class Header extends Component { createElement() { const title = - browserName() === 'android-app' + platform() === 'android' ? html` <a class="header-logo"> <h1 class="text-2xl text-white md:text-black font-normal"> diff --git a/app/utils.js b/app/utils.js index 58ac64e9..4933a808 100644 --- a/app/utils.js +++ b/app/utils.js @@ -1,3 +1,4 @@ +/* global Android */ const html = require('choo/html'); const b64 = require('base64-js'); @@ -240,6 +241,13 @@ function timeLeft(milliseconds) { return null; } +function platform() { + if (typeof Android === 'object') { + return 'android'; + } + return 'web'; +} + module.exports = { fadeOut, delay, @@ -257,5 +265,6 @@ module.exports = { streamToArrayBuffer, list, secondsToL10nId, - timeLeft + timeLeft, + platform };