feat: add icon row with quick actions

- added icons for on/off and preferences
- fading status items to indicate issues with API

More: #500 (comment)

add-on/src/options/page.js

@@ -33,7 +33,7 @@ module.exports = function optionsPage (state, emit) {
     // we don't want to confuse users by showing "active" checkboxes
     // when global toggle is in "suspended" state
     return html`
-    <div>
+    <div class="sans-serif">
       ${globalToggleForm({
         active: state.options.active,
         onOptionChange
@@ -42,7 +42,7 @@ module.exports = function optionsPage (state, emit) {
     `
   }
   return html`
-    <div>
+    <div class="sans-serif">
       ${globalToggleForm({
         active: state.options.active,
         onOptionChange

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

@@ -1,7 +1,6 @@
 @import url('/ui-kit/tachyons.css');
 @import url('/ui-kit/ipfs.css');
 @import url('../heartbeat.css');
-@import url('mdc.switch.css');
 
 .bg-near-white--hover:hover {
   background-color: #F4F4F4;

add-on/src/popup/browser-action/gateway-status.js

@@ -4,6 +4,19 @@
 const browser = require('webextension-polyfill')
 const html = require('choo/html')
 
+function statusEntry ({label, labelLegend, value, check, itemClass = '', valueClass = ''}) {
+  const offline = browser.i18n.getMessage('panel_statusOffline')
+  label = label ? browser.i18n.getMessage(label) : null
+  labelLegend = labelLegend ? browser.i18n.getMessage(labelLegend) : label
+  value = value || value === 0 ? value : offline
+  return html`
+      <li class="flex ${check ? '' : 'o-60'} ${itemClass}" title="${labelLegend}">
+        <span class="w-40 f7 ttu no-user-select">${label}</span>
+        <span class="w-60 f7 tr monospace truncate force-select-all ${valueClass}" title="${value}">${value}</span>
+      </li>
+    `
+}
+
 module.exports = function gatewayStatus ({
   active,
   onToggleActive,
@@ -16,25 +29,33 @@ module.exports = function gatewayStatus ({
   redirectEnabled
 }) {
   const api = ipfsApiUrl && ipfsNodeType === 'embedded' ? 'js-ipfs' : ipfsApiUrl
-  const offline = browser.i18n.getMessage('panel_statusOffline')
   return html`
     <ul class="fade-in list mv0 pv2 ph3 white">
-      <li class="flex mb1">
-        <span class="w-40 f7 ttu no-user-select">${browser.i18n.getMessage('panel_statusGatewayAddress')}</span>
-        <span class="w-60 f7 tr monospace truncate force-select-all" title="${gatewayAddress || offline}">${gatewayAddress || offline}</span>
-      </li>
-      <li class="flex mb1">
-        <span class="w-40 f7 ttu no-user-select">${browser.i18n.getMessage('panel_statusApiAddress')}</span>
-        <span class="w-60 f7 tr monospace truncate force-select-all" title="${api || offline}">${api || offline}</span>
-      </li>
-      <li class="flex mb1">
-        <span class="w-40 f7 ttu no-user-select">${browser.i18n.getMessage('panel_statusGatewayVersion')}</span>
-        <span class="w-60 f7 tr monospace truncate force-select-all">${gatewayVersion || offline}</span>
-      </li>
-      <li class="flex" title="${browser.i18n.getMessage('panel_statusSwarmPeersTitle')}">
-        <span class="w-40 f7 ttu no-user-select">${browser.i18n.getMessage('panel_statusSwarmPeers')}</span>
-        <span class="w-60 f7 tr ${swarmPeers ? 'fw9' : ''} monospace truncate force-select-all">${swarmPeers || offline}</span>
-      </li>
+      ${statusEntry({
+        label: 'panel_statusGatewayAddress',
+        value: gatewayAddress,
+        check: gatewayAddress,
+        itemClass: 'mb1'
+      })}
+      ${statusEntry({
+        label: 'panel_statusApiAddress',
+        value: api,
+        check: gatewayVersion,
+        itemClass: 'mb1'
+      })}
+      ${statusEntry({
+        label: 'panel_statusGatewayVersion',
+        value: gatewayVersion,
+        check: gatewayVersion,
+        itemClass: 'mb1'
+      })}
+      ${statusEntry({
+        label: 'panel_statusSwarmPeers',
+        labelLegend: 'panel_statusSwarmPeersTitle',
+        value: swarmPeers,
+        check: swarmPeers,
+        valueClass: 'fw9'
+      })}
     </ul>
   `
 }

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

@@ -4,34 +4,38 @@
 const browser = require('webextension-polyfill')
 const html = require('choo/html')
 const logo = require('../logo')
+const powerIcon = require('./power-icon')
+const optionsIcon = require('./options-icon')
 const gatewayStatus = require('./gateway-status')
 
 module.exports = function header (props) {
-  const { ipfsNodeType, active, onToggleActive, isIpfsOnline } = props
+  const { ipfsNodeType, active, onToggleActive, onOpenPrefs, isIpfsOnline } = props
   return html`
     <div class="pt3 pb1 br2 br--top ba bw1 b--white" style="background-image: url('../../../images/stars.png'), linear-gradient(to bottom, #041727 0%,#043b55 100%); background-size: 100%; background-repeat: repeat;">
-      <div class="absolute top-1 right-1">
-        <div class="mdc-switch" title="${browser.i18n.getMessage('panel_headerActiveToggleTitle')}">
-          <input type="checkbox" id="activeToggle" class="mdc-switch__native-control" onchange=${onToggleActive} checked=${!active} />
-          <div class="mdc-switch__background">
-            <div class="mdc-switch__knob"></div>
-          </div>
+      <div class="no-user-select ${active ? '' : 'o-40'}">
+        <div class="tc mb2 transition-all" style="${!active ? 'filter: blur( .15em )' : ''}">
+          ${logo({
+            size: 52,
+            path: '../../../icons',
+            ipfsNodeType,
+            isIpfsOnline: (active && isIpfsOnline)
+          })}
+        </div>
+        <h1 class="mb1 montserrat f5 mt2 tc white normal">
+          ${browser.i18n.getMessage('panel_headerIpfsNodeIconLabel')}
+        </h1>
+        <div class="tc ma0 pa0">
+          ${powerIcon({active,
+            title: 'panel_headerActiveToggleTitle',
+            action: onToggleActive
+          })}
+          ${optionsIcon({active,
+            title: 'panel_openPreferences',
+            action: onOpenPrefs
+          })}
         </div>
       </div>
-    <div class="no-user-select ${active ? 'fade-in' : 'o-40'}">
-      <div class="tc mb2 transition-all" style="${!active ? 'filter: blur( .15em )' : ''}" title="${browser.i18n.getMessage('panel_headerOnOffToggleTitle')}">
-        ${logo({
-          size: 52,
-          path: '../../../icons',
-          ipfsNodeType,
-          isIpfsOnline: (active && isIpfsOnline)
-        })}
-      </div>
-      <h1 class="montserrat f5 mt2 mb2 tc white normal">
-        ${browser.i18n.getMessage('panel_headerIpfsNodeIconLabel')}
-      </h1>
-    </div>
-      <div class="pt1  ${active ? '' : 'o-40'}">
+      <div class=" ${active ? '' : 'o-40'}">
         ${gatewayStatus(props)}
       </div>
     </div>

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

@@ -0,0 +1,18 @@
+'use strict'
+/* eslint-env browser, webextensions */
+
+const html = require('choo/html')
+const browser = require('webextension-polyfill')
+
+function icon ({ svg, title, active, action }) {
+  return html`
+    <button class="pa0 ma0 dib bn bg-transparent pointer grow transition-all ${active ? 'fill-aqua hover-fill-snow' : 'fill-gray hover-fill-snow-muted'}"
+      style="outline:none;"
+      title="${browser.i18n.getMessage(title)}"
+      onclick=${action}>
+      ${svg}
+    </button>
+  `
+}
+
+module.exports = icon

add-on/src/popup/browser-action/options-icon.js

@@ -0,0 +1,18 @@
+'use strict'
+/* eslint-env browser, webextensions */
+
+const html = require('choo/html')
+const icon = require('./icon')
+
+function optionsIcon ({active, title, action, size = '2rem'}) {
+  const svg = html`
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"
+        class="fill-current-color"
+        style="width:${size}; height:${size}">
+        <path d="M74.05 50.23c-.07-3.58 1.86-5.85 5.11-7.1-.2-2-2.48-7.45-3.63-8.76-3.11 1.46-6.06 1.23-8.54-1.22s-2.72-5.46-1.26-8.64a29.24 29.24 0 0 0-8.8-3.63c-1.06 3.08-3.12 5-6.35 5.25-3.82.29-6.29-1.69-7.61-5.22a30.11 30.11 0 0 0-8.77 3.67c1.5 3.16 1.3 6.1-1.15 8.6s-5.45 2.76-8.64 1.29a29.33 29.33 0 0 0-3.58 8.79C24 44.43 25.94 46.62 26 50s-1.82 5.84-5.1 7.12a29.21 29.21 0 0 0 3.68 8.71c3.09-1.38 6-1.15 8.42 1.22s2.79 5.33 1.41 8.49a29.72 29.72 0 0 0 8.76 3.57 1.46 1.46 0 0 0 .11-.21 7.19 7.19 0 0 1 13.53-.16c.13.33.28.32.55.25a29.64 29.64 0 0 0 8-3.3 4 4 0 0 0 .37-.25c-1.27-2.86-1.15-5.57.88-7.94 2.44-2.84 5.5-3.26 8.91-1.8a29.23 29.23 0 0 0 3.65-8.7c-3.17-1.22-5.05-3.38-5.12-6.77zM50 59.54a8.57 8.57 0 1 1 8.59-8.31A8.58 8.58 0 0 1 50 59.54z"/>
+      </svg>
+    `
+  return icon({svg, title, active, action})
+}
+
+module.exports = optionsIcon

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

@@ -22,7 +22,7 @@ module.exports = function browserActionPage (state, emit) {
   const onToggleNodeType = () => emit('toggleNodeType')
   const onToggleActive = () => emit('toggleActive')
 
-  const headerProps = Object.assign({ onToggleNodeType, onToggleActive }, state)
+  const headerProps = Object.assign({ onToggleNodeType, onToggleActive, onOpenPrefs }, state)
   const contextActionsProps = Object.assign({ onCopyIpfsAddr, onCopyPublicGwAddr, onPin, onUnPin }, state)
   const opsProps = Object.assign({ onQuickUpload, onOpenWebUi, onOpenPrefs, onToggleRedirect }, state)
 

add-on/src/popup/browser-action/power-icon.js

@@ -0,0 +1,18 @@
+'use strict'
+/* eslint-env browser, webextensions */
+
+const html = require('choo/html')
+const icon = require('./icon')
+
+function powerIcon ({active, title, action, size = '2rem'}) {
+  const svg = html`
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"
+        class="fill-current-color"
+        style="width:${size}; height:${size}">
+        <path d="M50 20.11A29.89 29.89 0 1 0 79.89 50 29.89 29.89 0 0 0 50 20.11zm-3.22 17a3.22 3.22 0 0 1 6.44 0v6.43a3.22 3.22 0 0 1-6.44 0zM50 66.08a16.14 16.14 0 0 1-11.41-27.49 3.28 3.28 0 0 1 1.76-.65 2.48 2.48 0 0 1 2.42 2.41 2.58 2.58 0 0 1-.77 1.77A10.81 10.81 0 0 0 38.59 50a11.25 11.25 0 0 0 22.5 0 10.93 10.93 0 0 0-3.21-7.88 3.37 3.37 0 0 1-.65-1.77 2.48 2.48 0 0 1 2.42-2.41 2.16 2.16 0 0 1 1.76.65A16.14 16.14 0 0 1 50 66.08z"/>
+      </svg>
+    `
+  return icon({svg, title, active, action})
+}
+
+module.exports = powerIcon