Extract logo component and use on quick upload

add-on/_locales/en/messages.json

@@ -36,7 +36,7 @@
     "description": "A label in Node status section of Browser Action pop-up"
   },
   "panel_quickUpload": {
-    "message": "Quick Upload",
+    "message": "Share files via IPFS",
     "description": "A menu item in Browser Action pop-up"
   },
   "panel_openWebui": {

add-on/src/lib/ipfs-companion.js

@@ -278,7 +278,7 @@ async function addFromURL (info) {
 // TODO: feature detect and push to client type specific modules.
 function getIpfsPathAndLocalAddress (hash) {
   const path = `/ipfs/${hash}`
-  if (state.ipfsNodeType === 'embedded' && chrome.protocol.registerStringProtocol) {
+  if (state.ipfsNodeType === 'embedded' && chrome && chrome.protocol && chrome.protocol.registerStringProtocol) {
     return {path, localAddress: `ipfs://${hash}`}
   } else {
     const url = new URL(path, state.gwURLString).toString()

add-on/src/popup/browser-action/header.js

@@ -3,18 +3,18 @@
 
 const browser = require('webextension-polyfill')
 const html = require('choo/html')
+const logo = require('../logo')
 
 module.exports = function header ({ ipfsNodeType, onToggleNodeType, isIpfsOnline }) {
-  const logoTypePrefix = ipfsNodeType === 'embedded' ? 'js-' : ''
-  const logoFileName = `${logoTypePrefix}ipfs-logo-${isIpfsOnline ? 'on' : 'off'}.svg`
   return html`
     <div class="pv3 br2 br--top ba bw1 b--white" style="background: linear-gradient(to bottom, #041727 0%,#043b55 100%)">
       <div class="tc mb2" title="${isIpfsOnline ? '' : 'offline'}">
-        <img
-          src="../../../icons/${logoFileName}"
-          class="${isIpfsOnline ? 'online' : ''}"
-          id="ipfs-logo"
-          style="width: 52px" />
+        ${logo({
+          size: 52,
+          path: '../../../icons',
+          ipfsNodeType,
+          isIpfsOnline
+        })}
       </div>
       <h1 class="f5 mt2 mb2 tc white normal">IPFS node</h1>
       <div class="pt1">

add-on/src/popup/browser-action/page.css

@@ -8,33 +8,3 @@
 .outline-0--focus:focus {
   outline: 0;
 }
-
-@keyframes heart-beat {
-  0% {
-    transform: scale(1);
-  }
-  5% {
-    transform: scale(1.05);
-    filter: drop-shadow(0 0 1.05em rgba(95, 203, 207, 0.5));
-  }
-  10% {
-    transform: scale(1.025);
-    filter: drop-shadow(0 0 1.025em rgba(95, 203, 207, 0.25));
-  }
-  15% {
-    transform: scale(1.075);
-    filter: drop-shadow(0 0 1.075em rgba(95, 203, 207, 0.5));
-  }
-  50% {
-    transform: scale(1);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-
-#ipfs-logo.online {
-  animation-name: heart-beat;
-  animation-iteration-count: infinite;
-  animation-duration: 2.5s;
-}

add-on/src/popup/heartbeat.css

@@ -0,0 +1,29 @@
+@keyframes heartbeat {
+  0% {
+    transform: scale(1);
+  }
+  5% {
+    transform: scale(1.05);
+    filter: drop-shadow(0 0 1.05em rgba(95, 203, 207, 0.5));
+  }
+  10% {
+    transform: scale(1.025);
+    filter: drop-shadow(0 0 1.025em rgba(95, 203, 207, 0.25));
+  }
+  15% {
+    transform: scale(1.075);
+    filter: drop-shadow(0 0 1.075em rgba(95, 203, 207, 0.5));
+  }
+  50% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.heartbeat {
+  animation-name: heartbeat;
+  animation-iteration-count: infinite;
+  animation-duration: 2.5s;
+}

add-on/src/popup/logo.js

@@ -0,0 +1,20 @@
+'use strict'
+/* eslint-env browser, webextensions */
+
+const html = require('choo/html')
+require('./heartbeat.css')
+
+function logo ({ path, size = 52, ipfsNodeType = 'external', isIpfsOnline = true, heartbeat = true }) {
+  const logoTypePrefix = ipfsNodeType === 'embedded' ? 'js-' : ''
+  const logoFileName = `${logoTypePrefix}ipfs-logo-${isIpfsOnline ? 'on' : 'off'}.svg`
+  return html`
+    <img
+      alt="IPFS"
+      title='IPFS'
+      src="${path}/${logoFileName}"
+      class="${isIpfsOnline && heartbeat ? 'heartbeat' : ''}"
+      style="width:${size}px; height:${size}px" />
+  `
+}
+
+module.exports = logo

add-on/src/popup/quick-upload.css

@@ -0,0 +1,5 @@
+@import url('node_modules/tachyons/css/tachyons.css');
+
+html, body, #root {
+  height: 100%;
+}

add-on/src/popup/quick-upload.html

@@ -5,21 +5,6 @@
   <title>IPFS Upload</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width" />
-  <style type="text/css">
-  #icon {
-      width: 6rem;
-      height: 6rem;
-      padding: 0.25rem;
-      margin-right: 1rem;
-      display: block;
-      float: left;
-  }
-  #form {
-    font-family: sans-serif;
-    display: block;
-    padding-top: 1.5rem;
-  }
-  </style>
 </head>
 
 <body>

add-on/src/popup/quick-upload.js

@@ -2,10 +2,11 @@
 /* eslint-env browser, webextensions */
 
 const browser = require('webextension-polyfill')
-const IpfsApi = require('ipfs-api')
-const Buffer = IpfsApi().Buffer
 const choo = require('choo')
 const html = require('choo/html')
+const logo = require('./logo')
+
+require('./quick-upload.css')
 
 const app = choo()
 
@@ -14,7 +15,9 @@ app.route('*', quickUploadPage)
 app.mount('#root')
 
 function quickUploadStore (state, emitter) {
-  state.message = browser.i18n.getMessage('panel_quickUpload')
+  state.message = ''
+  state.peerCount = 8
+  state.ipfsNodeType = 'embedded'
 
   emitter.on('fileInputChange', async (event) => {
     const file = event.target.files[0]
@@ -49,12 +52,22 @@ function quickUploadPage (state, emit) {
   const onFileInputChange = (e) => emit('fileInputChange', e)
 
   return html`
-    <div>
-      <img src="../../icons/ipfs-logo-on.svg" id="icon"/>
-      <p id="form">
-        <span id="quickUploadMessage">${state.message}</span><br>
-        <input type="file" id="quickUploadInput" onchange=${onFileInputChange} />
-      </p>
+    <div class="helvetica white pt3" style="background: linear-gradient(to bottom, #041727 0%,#043b55 100%); height:100%;">
+      <div class="measure-wide center pa3 tc">
+        ${logo({
+          size: 100,
+          path: '../../icons',
+          heartbeat: false
+        })}
+        <h1 id="quickUploadMessage" class='mb1'>
+          ${browser.i18n.getMessage('panel_quickUpload')}
+        </h1>
+        <p id="form">
+          <input type="file" id="quickUploadInput" onchange=${onFileInputChange} />
+          <br>
+          ${state.message}
+        </p>
+      </div>
     </div>
   `
 }