Merge pull request #1125 from mozilla/dlink

added download link to tile

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="${
+        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"
         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" /> ${
+            <img src="${assets.get('copy-16.svg')}" class="mr-2" />
-              state.translate('copyUrlHover')
+            ${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" /> ${
+            <img src="${assets.get('addfiles.svg')}" class="w-6 h-6 mr-2" />
-              state.translate('addFilesButton')
+            ${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="${
+      onclick="${e => {
-        e => {
         if (e.target.tagName !== 'LABEL') {
           document.getElementById('file-upload').click();
         }
-        }
+      }}"
-      }"
     >
       <img src="${assets.get('addfiles.svg')}" width="48" height="48" />
       <div

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

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