fix: save vertical space by moving on/off toggle

#500 (comment)
ipfs · Jun 18, 2018 · 8b2197b · 8b2197b
1 parent 8bc5b7a
commit 8b2197b
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 35 deletions.
diff --git a/add-on/_locales/en/messages.json b/add-on/_locales/en/messages.json
@@ -7,21 +7,9 @@
     "message": "IPFS Companion",
     "description": "Label for IPFS icon (panel_headerIpfsNodeIconLabel)"
   },
-  "panel_headerOnLabel": {
-    "message": "On",
-    "description": "Label for global on-off switch (panel_headerOnLabel)"
-  },
-  "panel_headerOnLabelTitle": {
-    "message": "Enabled gateway redirect and all active API integrations",
-    "description": "Label for an embedded IPFS node (panel_headerOnLabelTitle)"
-  },
-  "panel_headerOffLabel": {
-    "message": "Off",
-    "description": "Label for an external IPFS node (panel_headerOffLabel)"
-  },
-  "panel_headerOffLabelTitle": {
-    "message": "Disabled gateway redirect and all active API integrations",
-    "description": "Label for an external IPFS node (panel_headerOffLabelTitle)"
+  "panel_headerActiveToggleTitle": {
+    "message": "Toggle to activate or suspend gateway redirect and all active API integrations",
+    "description": "Label for an embedded IPFS node (panel_headerActiveToggleTitle)"
   },
   "panel_statusOffline": {
     "message": "offline",

diff --git a/add-on/src/popup/browser-action/gateway-status.js b/add-on/src/popup/browser-action/gateway-status.js
@@ -5,6 +5,8 @@ const browser = require('webextension-polyfill')
 const html = require('choo/html')
 
 module.exports = function gatewayStatus ({
+  active,
+  onToggleActive,
   ipfsApiUrl,
   gatewayAddress,
   gatewayVersion,

diff --git a/add-on/src/popup/browser-action/header.js b/add-on/src/popup/browser-action/header.js
@@ -10,8 +10,16 @@ module.exports = function header (props) {
   const { ipfsNodeType, active, onToggleActive, 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="pointer no-user-select ${active ? 'fade-in' : 'o-60'}" onclick=${onToggleActive}>
-      <div class="tc mb2 transition-all" style="${!active ? 'filter: blur( .15em )' : ''}" title="${isIpfsOnline ? '' : browser.i18n.getMessage('panel_statusOffline')}">
+      <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>
+      </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',
@@ -23,21 +31,7 @@ module.exports = function header (props) {
         ${browser.i18n.getMessage('panel_headerIpfsNodeIconLabel')}
       </h1>
     </div>
-      <div class="pt1  ${active ? '' : 'o-60'}">
-        <div class="flex flex-row justify-center mb2">
-          <label for="activeToggle" class="mdc-switch-label w-40 tr f7 white no-user-select" style="cursor: help" title="${browser.i18n.getMessage('panel_headerOnLabelTitle')}">
-            ${browser.i18n.getMessage('panel_headerOnLabel')}
-          </label>
-          <div class="mdc-switch mh3">
-            <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>
-          <label for="activeToggle" class="mdc-switch-label w-40 f7 white no-user-select" style="cursor: help" title="${browser.i18n.getMessage('panel_headerOffLabelTitle')}">
-            ${browser.i18n.getMessage('panel_headerOffLabel')}
-          </label>
-        </div>
+      <div class="pt1  ${active ? '' : 'o-40'}">
         ${gatewayStatus(props)}
       </div>
     </div>

diff --git a/add-on/src/popup/browser-action/mdc.switch.css b/add-on/src/popup/browser-action/mdc.switch.css
@@ -38,6 +38,8 @@
  * context (e.g. when active or disabled).
  */
 .mdc-switch {
+  z-index: 1;
+  transform: rotate(180deg) scale(0.7);
   display: inline-block;
   position: relative; }
   .mdc-switch .mdc-switch__native-control:enabled:not(:checked) ~ .mdc-switch__background::before {

diff --git a/add-on/src/popup/browser-action/nav-item.js b/add-on/src/popup/browser-action/nav-item.js
@@ -4,12 +4,12 @@
 const html = require('choo/html')
 
 function navItem ({ icon, text, bold, disabled, onClick }) {
-  let className = 'button-reset db w-100 bg-white b--none outline-0--focus pv2 ph3 f5 tl'
+  let className = 'black button-reset db w-100 bg-white b--none outline-0--focus pv2 ph3 f5 tl'
   if (bold) className += ' b'
   if (disabled) {
-    className += ' silver'
+    className += ' o-40'
   } else {
-    className += ' pointer black bg-near-white--hover'
+    className += ' pointer bg-near-white--hover'
   }
 
   return html`