feat: add global toggle to Preferences screen

ipfs · Jun 19, 2018 · a7851d2 · a7851d2
1 parent 8b2197b
commit a7851d2
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 2 deletions.
diff --git a/add-on/_locales/en/messages.json b/add-on/_locales/en/messages.json
@@ -8,7 +8,7 @@
     "description": "Label for IPFS icon (panel_headerIpfsNodeIconLabel)"
   },
   "panel_headerActiveToggleTitle": {
-    "message": "Toggle to activate or suspend gateway redirect and all active API integrations",
+    "message": "Global toggle: activate or suspend all IPFS integrations",
     "description": "Label for an embedded IPFS node (panel_headerActiveToggleTitle)"
   },
   "panel_statusOffline": {

diff --git a/add-on/src/options/forms/global-toggle-form.js b/add-on/src/options/forms/global-toggle-form.js
@@ -0,0 +1,19 @@
+'use strict'
+/* eslint-env browser, webextensions */
+
+const browser = require('webextension-polyfill')
+const html = require('choo/html')
+
+function globalToggleForm ({ active, onOptionChange }) {
+  const toggle = onOptionChange('active')
+  return html`
+    <form class="dib mb3">
+      <label for="active" class="dib pa3 pointer ${!active ? 'bg-aqua-muted br2' : ''}">
+        <input class="mr2 pointer" id="active" type="checkbox" onchange=${toggle} checked=${active} />
+        ${browser.i18n.getMessage('panel_headerActiveToggleTitle')}
+      </label>
+    </form>
+  `
+}
+
+module.exports = globalToggleForm
diff --git a/add-on/src/options/options.css b/add-on/src/options/options.css
@@ -1,4 +1,6 @@
-html.is-chrome {
+@import url('/ui-kit/tachyons.css');
+@import url('/ui-kit/ipfs.css');
+html {
   overflow: hidden;
 }
 .is-chrome body {

diff --git a/add-on/src/options/page.js b/add-on/src/options/page.js
@@ -2,6 +2,7 @@
 /* eslint-env browser, webextensions */
 
 const html = require('choo/html')
+const globalToggleForm = require('./forms/global-toggle-form')
 const ipfsNodeForm = require('./forms/ipfs-node-form')
 const gatewaysForm = require('./forms/gateways-form')
 const apiForm = require('./forms/api-form')
@@ -28,8 +29,24 @@ module.exports = function optionsPage (state, emit) {
     emit('optionsReset')
   }
 
+  if (!state.options.active) {
+    // we don't want to confuse users by showing "active" checkboxes
+    // when global toggle is in "suspended" state
+    return html`
+    <div>
+      ${globalToggleForm({
+        active: state.options.active,
+        onOptionChange
+      })}
+    </div>
+    `
+  }
   return html`
     <div>
+      ${globalToggleForm({
+        active: state.options.active,
+        onOptionChange
+      })}
       ${ipfsNodeForm({
         ipfsNodeType: state.options.ipfsNodeType,
         ipfsNodeConfig: state.options.ipfsNodeConfig,