Merge pull request #319 from tableflip/ui-updates

adds popup header and adds browserify-css and tachyons, closes #273
ipfs · Nov 28, 2017 · 287b357 · 287b357
2 parents 7814ab1 + 5c1976a
commit 287b357
Show file tree

Hide file tree

Showing 18 changed files with 589 additions and 291 deletions.
diff --git a/add-on/_locales/de_DE/messages.json b/add-on/_locales/de_DE/messages.json
@@ -3,6 +3,14 @@
     "message": "IPFS Begleiter",
     "description": "A pop-up title when user hovers on Browser Action button"
   },
+  "panel_headerIpfsNodeEmbedded": {
+    "message": "Embedded",
+    "description": "Label for an embedded IPFS node"
+  },
+  "panel_headerIpfsNodeExternal": {
+    "message": "External",
+    "description": "Label for an external IPFS node"
+  },
   "panel_statusGatewayRedirect": {
     "message": "Weiterleitung",
     "description": "A label in Node status section of Browser Action pop-up"
@@ -264,4 +272,4 @@
     "message": "Browser-Erweiterung, die den Zugriff auf IPFS-Ressourcen vereinfacht",
     "description": "Extension description in the Manifest file"
   }
-}
+}
diff --git a/add-on/_locales/en/messages.json b/add-on/_locales/en/messages.json
@@ -3,6 +3,14 @@
     "message": "IPFS Companion",
     "description": "A pop-up title when user hovers on Browser Action button"
   },
+  "panel_headerIpfsNodeEmbedded": {
+    "message": "Embedded",
+    "description": "Label for an embedded IPFS node"
+  },
+  "panel_headerIpfsNodeExternal": {
+    "message": "External",
+    "description": "Label for an external IPFS node"
+  },
   "panel_statusGatewayRedirect": {
     "message": "redirect",
     "description": "A label in Node status section of Browser Action pop-up"
@@ -16,7 +24,7 @@
     "description": "Redirect state in Node status section of Browser Action pop-up"
   },
   "panel_statusGatewayAddress": {
-    "message": "gateway",
+    "message": "HTTP Gateway",
     "description": "A label in Node status section of Browser Action pop-up"
   },
   "panel_statusGatewayVersion": {

diff --git a/add-on/_locales/fr_FR/messages.json b/add-on/_locales/fr_FR/messages.json
@@ -3,6 +3,14 @@
     "message": "Compagnon IPFS",
     "description": "A pop-up title when user hovers on Browser Action button"
   },
+  "panel_headerIpfsNodeEmbedded": {
+    "message": "Embedded",
+    "description": "Label for an embedded IPFS node"
+  },
+  "panel_headerIpfsNodeExternal": {
+    "message": "External",
+    "description": "Label for an external IPFS node"
+  },
   "panel_statusGatewayRedirect": {
     "message": "rediréger",
     "description": "A label in Node status section of Browser Action pop-up"
@@ -264,4 +272,4 @@
     "message": "Extension de navigateur qui simplifie l’accès aux ressources de IPFS",
     "description": "Extension description in the Manifest file"
   }
-}
+}
diff --git a/add-on/_locales/it_IT/messages.json b/add-on/_locales/it_IT/messages.json
@@ -3,6 +3,14 @@
     "message": "IPFS Companion",
     "description": "A pop-up title when user hovers on Browser Action button"
   },
+  "panel_headerIpfsNodeEmbedded": {
+    "message": "Embedded",
+    "description": "Label for an embedded IPFS node"
+  },
+  "panel_headerIpfsNodeExternal": {
+    "message": "External",
+    "description": "Label for an external IPFS node"
+  },
   "panel_statusGatewayRedirect": {
     "message": "reindirizza",
     "description": "A label in Node status section of Browser Action pop-up"
@@ -264,4 +272,4 @@
     "message": "Estensione per il browser che semplifica l'accesso alle risorse IPFS",
     "description": "Extension description in the Manifest file"
   }
-}
+}
diff --git a/add-on/_locales/pl_PL/messages.json b/add-on/_locales/pl_PL/messages.json
@@ -3,6 +3,14 @@
     "message": "Asystent IPFS",
     "description": "A pop-up title when user hovers on Browser Action button"
   },
+  "panel_headerIpfsNodeEmbedded": {
+    "message": "Embedded",
+    "description": "Label for an embedded IPFS node"
+  },
+  "panel_headerIpfsNodeExternal": {
+    "message": "External",
+    "description": "Label for an external IPFS node"
+  },
   "panel_statusGatewayRedirect": {
     "message": "przekierowanie",
     "description": "A label in Node status section of Browser Action pop-up"
@@ -264,4 +272,4 @@
     "message": "Rozszerzenie przeglądarki ułatwiające dostęp do zasobów IPFS",
     "description": "Extension description in the Manifest file"
   }
-}
+}
diff --git a/add-on/_locales/ro_RO/messages.json b/add-on/_locales/ro_RO/messages.json
@@ -3,6 +3,14 @@
     "message": "Companionul IPFS",
     "description": "A pop-up title when user hovers on Browser Action button"
   },
+  "panel_headerIpfsNodeEmbedded": {
+    "message": "Embedded",
+    "description": "Label for an embedded IPFS node"
+  },
+  "panel_headerIpfsNodeExternal": {
+    "message": "External",
+    "description": "Label for an external IPFS node"
+  },
   "panel_statusGatewayRedirect": {
     "message": "redirecționat",
     "description": "A label in Node status section of Browser Action pop-up"
@@ -264,4 +272,4 @@
     "message": "Extensie a browserului care simplifică accesul la resursele IPFS",
     "description": "Extension description in the Manifest file"
   }
-}
+}
diff --git a/add-on/_locales/zh_CN/messages.json b/add-on/_locales/zh_CN/messages.json
@@ -3,6 +3,14 @@
     "message": "IPFS 伙伴",
     "description": "A pop-up title when user hovers on Browser Action button"
   },
+  "panel_headerIpfsNodeEmbedded": {
+    "message": "Embedded",
+    "description": "Label for an embedded IPFS node"
+  },
+  "panel_headerIpfsNodeExternal": {
+    "message": "External",
+    "description": "Label for an external IPFS node"
+  },
   "panel_statusGatewayRedirect": {
     "message": "重定向",
     "description": "A label in Node status section of Browser Action pop-up"
@@ -264,4 +272,4 @@
     "message": "简化IPFS资源访问的浏览器扩展",
     "description": "Extension description in the Manifest file"
   }
-}
+}
diff --git a/add-on/src/popup/browser-action/context-actions.js b/add-on/src/popup/browser-action/context-actions.js
@@ -3,6 +3,7 @@
 
 const browser = require('webextension-polyfill')
 const html = require('choo/html')
+const navItem = require('./nav-item')
 
 module.exports = function contextActions ({
   isIpfsContext,
@@ -18,32 +19,29 @@ module.exports = function contextActions ({
   if (!isIpfsContext) return null
 
   return html`
-    <div class="panel-section panel-section-list">
-      <div class="panel-list-item" onclick=${onCopyIpfsAddr}>
-        <div class="icon"></div>
-        <div class="text">${browser.i18n.getMessage('panelCopy_currentIpfsAddress')}</div>
-        <div class="text-shortcut"></div>
-      </div>
-      <div class="panel-list-item" onclick=${onCopyPublicGwAddr}>
-        <div class="icon"></div>
-        <div class="text">${browser.i18n.getMessage('panel_copyCurrentPublicGwUrl')}</div>
-        <div class="text-shortcut"></div>
-      </div>
-      ${isIpfsOnline && isPinned ? null : html`
-        <div class="panel-list-item ${isPinning ? 'disabled' : ''}" onclick=${onPin}>
-          <div class="icon"></div>
-          <div class="text">${browser.i18n.getMessage('panel_pinCurrentIpfsAddress')}</div>
-          <div class="text-shortcut"></div>
-        </div>
-      `}
-      ${isIpfsOnline && isPinned ? html`
-        <div class="panel-list-item ${isUnPinning ? 'disabled' : ''}" onclick=${onUnPin}>
-          <div class="icon"></div>
-          <div class="text">${browser.i18n.getMessage('panel_unpinCurrentIpfsAddress')}</div>
-          <div class="text-shortcut"></div>
-        </div>
-      ` : null}
-      <div class="panel-section-separator"></div>
+    <div class="bb b--black-20 mv2 pb2">
+      ${navItem({
+        text: browser.i18n.getMessage('panelCopy_currentIpfsAddress'),
+        onClick: onCopyIpfsAddr
+      })}
+      ${navItem({
+        text: browser.i18n.getMessage('panel_copyCurrentPublicGwUrl'),
+        onClick: onCopyPublicGwAddr
+      })}
+      ${isIpfsOnline && isPinned ? null : (
+        navItem({
+          text: browser.i18n.getMessage('panel_pinCurrentIpfsAddress'),
+          disabled: isPinning,
+          onClick: onPin
+        })
+      )}
+      ${isIpfsOnline && isPinned ? (
+        navItem({
+          text: browser.i18n.getMessage('panel_unpinCurrentIpfsAddress'),
+          disabled: isUnPinning,
+          onClick: onUnPin
+        })
+      ) : null}
     </div>
   `
 }
diff --git a/add-on/src/popup/browser-action/gateway-status.js b/add-on/src/popup/browser-action/gateway-status.js
@@ -12,35 +12,29 @@ module.exports = function gatewayStatus ({
   redirectEnabled
 }) {
   return html`
-    <div class="panel-section" id="gateway-status">
-      <img
-        id="icon"
-        src="../../../icons/ipfs-logo-${isIpfsOnline ? 'on' : 'off'}.svg"
-        class="${isIpfsOnline ? 'online' : ''}"/>
-      <ul>
-        <li>
-          <span>${browser.i18n.getMessage('panel_statusGatewayAddress')}</span>
-          <span>${gatewayAddress == null ? 'unknown' : gatewayAddress}</span>
-        </li>
-        <li>
-          <span>${browser.i18n.getMessage('panel_statusGatewayVersion')}</span>
-          <span>${gatewayVersion == null ? 'offline' : gatewayVersion}</span>
-        </li>
-        <li>
-          <span>${browser.i18n.getMessage('panel_statusSwarmPeers')}</span>
-          <span>${swarmPeers == null ? 'offline' : swarmPeers}</span>
-        </li>
-        <li>
-          <span>${browser.i18n.getMessage('panel_statusGatewayRedirect')}</span>
-          <span>
-            ${browser.i18n.getMessage(
-              redirectEnabled
-                ? 'panel_statusGatewayRedirectEnabled'
-                : 'panel_statusGatewayRedirectDisabled'
-            )}
-          </span>
-        </li>
-      </ul>
-    </div>
+    <ul class="list mv3 ph3">
+      <li class="flex mb1">
+        <span class="w-50 f6 ttu">${browser.i18n.getMessage('panel_statusGatewayAddress')}</span>
+        <span class="w-50 f6 ttu tr">${gatewayAddress == null ? 'unknown' : gatewayAddress}</span>
+      </li>
+      <li class="flex mb1">
+        <span class="w-50 f6 ttu">${browser.i18n.getMessage('panel_statusGatewayVersion')}</span>
+        <span class="w-50 f6 ttu tr">${gatewayVersion == null ? 'offline' : gatewayVersion}</span>
+      </li>
+      <li class="flex mb1">
+        <span class="w-50 f6 ttu">${browser.i18n.getMessage('panel_statusSwarmPeers')}</span>
+        <span class="w-50 f6 ttu tr">${swarmPeers == null ? 'offline' : swarmPeers}</span>
+      </li>
+      <li class="flex">
+        <span class="w-50 f6 ttu">${browser.i18n.getMessage('panel_statusGatewayRedirect')}</span>
+        <span class="w-50 f6 ttu tr">
+          ${browser.i18n.getMessage(
+            redirectEnabled
+              ? 'panel_statusGatewayRedirectEnabled'
+              : 'panel_statusGatewayRedirectDisabled'
+          )}
+        </span>
+      </li>
+    </ul>
   `
 }
diff --git a/add-on/src/popup/browser-action/header.js b/add-on/src/popup/browser-action/header.js
@@ -0,0 +1,36 @@
+'use strict'
+/* eslint-env browser, webextensions */
+
+const browser = require('webextension-polyfill')
+const html = require('choo/html')
+
+module.exports = function header ({ isIpfsOnline }) {
+  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/ipfs-logo-${isIpfsOnline ? 'on' : 'off'}.svg"
+          class="${isIpfsOnline ? 'online' : ''}"
+          id="ipfs-logo"
+          style="width: 52px" />
+      </div>
+      <h1 class="f5 mt2 mb2 tc white normal">IPFS node</h1>
+      <div class="pt1 dn">
+        <div class="flex flex-row justify-center mb2">
+          <label for="node" class="mdc-switch-label w-40 tr f7 white">
+            ${browser.i18n.getMessage('panel_headerIpfsNodeEmbedded')}
+          </label>
+          <div class="mdc-switch mh3">
+            <input type="checkbox" id="node" class="mdc-switch__native-control" />
+            <div class="mdc-switch__background">
+              <div class="mdc-switch__knob"></div>
+            </div>
+          </div>
+          <label for="node" class="mdc-switch-label w-40 f7 white">
+            ${browser.i18n.getMessage('panel_headerIpfsNodeExternal')}
+          </label>
+        </div>
+      </div>
+    </div>
+  `
+}