From a7851d21b5ddb923e1e7e1cdaada0666d377300a Mon Sep 17 00:00:00 2001
From: Marcin Rataj <lidel@lidel.org>
Date: Tue, 19 Jun 2018 11:30:06 +0200
Subject: [PATCH] feat: add global toggle to Preferences screen

---
 add-on/_locales/en/messages.json              |  2 +-
 .../src/options/forms/global-toggle-form.js   | 19 +++++++++++++++++++
 add-on/src/options/options.css                |  4 +++-
 add-on/src/options/page.js                    | 17 +++++++++++++++++
 4 files changed, 40 insertions(+), 2 deletions(-)
 create mode 100644 add-on/src/options/forms/global-toggle-form.js

diff --git a/add-on/_locales/en/messages.json b/add-on/_locales/en/messages.json
index d26ad1d10..2f8c6589a 100644
--- 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
new file mode 100644
index 000000000..a55a1aa40
--- /dev/null
+++ 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
index 4008fd0f3..6104b5381 100644
--- 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
index b570bd51f..c7474638c 100644
--- 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,