Merge pull request #1125 from mozilla/dlink

added download link to tile
This commit is contained in:
Danny Coates 2019-01-24 12:20:30 -08:00 committed by GitHub
commit 8227b1420c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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 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', {
>${translate('fileCount', {
num: archive.manifest.files.length
})
}</summary
})}</summary
>
${
list(
${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">
<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(
${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 => {
onclick="${e => {
if (e.target.tagName !== 'LABEL') {
document.getElementById('file-upload').click();
}
}
}"
}}"
>
<img src="${assets.get('addfiles.svg')}" width="48" height="48" />
<div

View File

@ -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">

View File

@ -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
};