feat: toggle switch in Preferences

- fixed CSS for checked/disabled - updated colors based on feedback in #689 - enabled on Preferences screen
ipfs · Mar 6, 2019 · 5a3cb17 · 5a3cb17
1 parent 495b8bf
commit 5a3cb17
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 45 deletions.
diff --git a/add-on/src/options/forms/api-form.js b/add-on/src/options/forms/api-form.js
@@ -4,6 +4,7 @@
 const browser = require('webextension-polyfill')
 const html = require('choo/html')
 const { normalizeGatewayURL } = require('../../lib/options')
+const switchToggle = require('../../pages/components/switch-toggle')
 
 function apiForm ({ ipfsApiUrl, ipfsApiPollMs, automaticMode, onOptionChange }) {
   const onIpfsApiUrlChange = onOptionChange('ipfsApiUrl', normalizeGatewayURL)
@@ -57,11 +58,7 @@ function apiForm ({ ipfsApiUrl, ipfsApiPollMs, automaticMode, onOptionChange })
               <dd>${browser.i18n.getMessage('option_automaticMode_description')}</dd>
             </dl>
           </label>
-          <input
-            id="automaticMode"
-            type="checkbox"
-            onchange=${onAutomaticModeChange}
-            checked=${automaticMode} />
+          <div>${switchToggle({ id: 'automaticMode', checked: automaticMode, onchange: onAutomaticModeChange })}</div>
         </div>
       </fieldset>
     </form>

diff --git a/add-on/src/options/forms/experiments-form.js b/add-on/src/options/forms/experiments-form.js
@@ -3,6 +3,7 @@
 
 const browser = require('webextension-polyfill')
 const html = require('choo/html')
+const switchToggle = require('../../pages/components/switch-toggle')
 
 function experimentsForm ({
   displayNotifications,
@@ -35,7 +36,7 @@ function experimentsForm ({
               <dd>${browser.i18n.getMessage('option_displayNotifications_description')}</dd>
             </dl>
           </label>
-          <input id="displayNotifications" type="checkbox" onchange=${onDisplayNotificationsChange} checked=${displayNotifications} />
+          <div>${switchToggle({ id: 'displayNotifications', checked: displayNotifications, onchange: onDisplayNotificationsChange })}</div>
         </div>
         <div>
           <label for="preloadAtPublicGateway">
@@ -44,7 +45,7 @@ function experimentsForm ({
               <dd>${browser.i18n.getMessage('option_preloadAtPublicGateway_description')}</dd>
             </dl>
           </label>
-          <input type="checkbox" id="preloadAtPublicGateway" onchange=${onPreloadAtPublicGatewayChange} checked=${preloadAtPublicGateway} />
+          <div>${switchToggle({ id: 'preloadAtPublicGateway', checked: preloadAtPublicGateway, onchange: onPreloadAtPublicGatewayChange })}</div>
         </div>
         <div>
           <label for="catchUnhandledProtocols">
@@ -53,7 +54,7 @@ function experimentsForm ({
               <dd>${browser.i18n.getMessage('option_catchUnhandledProtocols_description')}</dd>
             </dl>
           </label>
-          <input type="checkbox" id="catchUnhandledProtocols" onchange=${onCatchUnhandledProtocolsChange} checked=${catchUnhandledProtocols} />
+          <div>${switchToggle({ id: 'catchUnhandledProtocols', checked: catchUnhandledProtocols, onchange: onCatchUnhandledProtocolsChange })}</div>
         </div>
         <div>
           <label for="linkify">
@@ -62,7 +63,7 @@ function experimentsForm ({
               <dd>${browser.i18n.getMessage('option_linkify_description')}</dd>
             </dl>
           </label>
-          <input type="checkbox" id="linkify" onchange=${onLinkifyChange} checked=${linkify} />
+          <div>${switchToggle({ id: 'linkify', checked: linkify, onchange: onLinkifyChange })}</div>
         </div>
         <div>
           <label for="dnslinkPolicy">
@@ -105,10 +106,10 @@ function experimentsForm ({
               </dd>
             </dl>
           </label>
-          <input type="checkbox" id="detectIpfsPathHeader" onchange=${onDetectIpfsPathHeaderChange} checked=${detectIpfsPathHeader} />
+          <div>${switchToggle({ id: 'detectIpfsPathHeader', checked: detectIpfsPathHeader, onchange: onDetectIpfsPathHeaderChange })}</div>
         </div>
         <div>
-          <label for="ipfs-proxy">
+          <label for="ipfsProxy">
             <dl>
               <dt>${browser.i18n.getMessage('option_ipfsProxy_title')}</dt>
               <dd>
@@ -124,7 +125,7 @@ function experimentsForm ({
               </dd>
             </dl>
           </label>
-          <input type="checkbox" id="ipfs-proxy" onchange=${onIpfsProxyChange} checked=${ipfsProxy} />
+          <div>${switchToggle({ id: 'ipfsProxy', checked: ipfsProxy, onchange: onIpfsProxyChange })}</div>
         </div>
         <div>
           <label for="resetAllOptions">
@@ -133,7 +134,7 @@ function experimentsForm ({
               <dd>${browser.i18n.getMessage('option_resetAllOptions_description')}</dd>
             </dl>
           </label>
-          <span id="resetAllOptions"><button onclick=${onOptionsReset}>${browser.i18n.getMessage('option_resetAllOptions_title')}</button></span>
+          <div><button id="resetAllOptions" onclick=${onOptionsReset}>${browser.i18n.getMessage('option_resetAllOptions_title')}</button></div>
         </div>
       </fieldset>
     </form>

diff --git a/add-on/src/options/forms/gateways-form.js b/add-on/src/options/forms/gateways-form.js
@@ -3,6 +3,7 @@
 
 const browser = require('webextension-polyfill')
 const html = require('choo/html')
+const switchToggle = require('../../pages/components/switch-toggle')
 const { normalizeGatewayURL, hostTextToArray, hostArrayToText } = require('../../lib/options')
 
 // Warn about mixed content issues when changing the gateway
@@ -77,11 +78,7 @@ function gatewaysForm ({
                   <dd>${browser.i18n.getMessage('option_useCustomGateway_description')}</dd>
                 </dl>
               </label>
-              <input
-                id="useCustomGateway"
-                type="checkbox"
-                onchange=${onUseCustomGatewayChange}
-                checked=${useCustomGateway} />
+              <div>${switchToggle({ id: 'useCustomGateway', checked: useCustomGateway, onchange: onUseCustomGatewayChange })}</div>
             </div>
           ` : null}
           ${supportRedirectToCustomGateway ? html`
@@ -96,7 +93,7 @@ function gatewaysForm ({
                 id="noRedirectHostnames"
                 spellcheck="false"
                 onchange=${onNoRedirectHostnamesChange}
-                rows="4" 
+                rows="4"
                 >${hostArrayToText(noRedirectHostnames)}</textarea>
             </div>
           ` : null}

diff --git a/add-on/src/options/forms/global-toggle-form.js b/add-on/src/options/forms/global-toggle-form.js
@@ -3,13 +3,14 @@
 
 const browser = require('webextension-polyfill')
 const html = require('choo/html')
+const switchToggle = require('../../pages/components/switch-toggle')
 
 function globalToggleForm ({ active, onOptionChange }) {
-  const toggle = onOptionChange('active', checked => !checked)
+  const toggle = onOptionChange('active')
   return html`
     <form class="dib mb3">
-      <label for="active" class="dib pa3 pointer ${!active ? 'charcoal bg-gray-muted br2' : ''}">
-        <input class="mr2 pointer" id="active" type="checkbox" onchange=${toggle} checked=${!active} />
+      <label for="active" class="dib pa3 flex items-center pointer ${!active ? 'charcoal bg-gray-muted br2' : ''}">
+        ${switchToggle({ id: 'active', checked: active, onchange: toggle, style: 'mr3' })}
         ${browser.i18n.getMessage('panel_headerActiveToggleTitle')}
       </label>
     </form>

diff --git a/add-on/src/options/options.css b/add-on/src/options/options.css
@@ -1,5 +1,7 @@
 @import url('/ui-kit/tachyons.css');
 @import url('/ui-kit/ipfs.css');
+@import url('../pages/components/switch-toggle.css');
+
 html {
   overflow: hidden;
 }
@@ -51,7 +53,6 @@ fieldset > div > * {
 label {
   flex: 1;
 }
-input[type=checkbox]:hover,
 select:hover,
 button:hover,
 label:hover {
@@ -84,6 +85,7 @@ input, textarea, select {
   padding: .5em;
   font-family: monospace;
 }
+fieldset > div > div,
 #resetAllOptions {
   flex: 1;
   text-align: center;
@@ -95,12 +97,10 @@ textarea,
 select {
   -webkit-transition: all 0.30s ease-in-out;
   -moz-transition: all 0.30s ease-in-out;
-  border: 1px solid #ccc;
-}
-input[type=checkbox]:focus,
-input[type=checkbox]::-moz-focus-inner {
-  border: 0;
-  outline: none;
+  box-shadow: 0 1px 4px rgba(0,0,0,.04);
+  border-radius: 3px;
+  border: 1px solid #9ad4db;
+  background-color: white;
 }
 input[type=text]:focus,
 input[type=url]:focus,
@@ -111,10 +111,26 @@ select:focus {
   border: 1px solid #3E9398;
   box-shadow: 0 0 5px #5FCBCF;
 }
+
+button#resetAllOptions:hover,
 input:invalid {
-  border: 1px solid red !important;
+  border: 1px solid red;
   background-color: #FFF0F0;
-  box-shadow: 0 0 5px red !important;
+  box-shadow: 0 0 5px red;
   color: red;
   transition: box-shadow 0.3s;
 }
+button#resetAllOptions {
+  box-shadow: 0 1px 4px rgba(0,0,0,.04);
+  border-radius: 3px;
+  border: 1px solid #f36149;
+  background-color: #f7f8fa;
+  color: #f36149;
+  padding: .5em;
+}
+button#resetAllOptions:active {
+  border: 1px solid #3E9398 !important;
+  box-shadow: 0 0 5px #5FCBCF !important;
+  color: #3E9398;
+  background-color: white;
+}
diff --git a/add-on/src/pages/components/switch-toggle.css b/add-on/src/pages/components/switch-toggle.css
@@ -0,0 +1,11 @@
+@import url('/ui-kit/mdc.switch.min.css');
+
+.mdc-switch {
+  --mdc-theme-secondary: #3e9096 /* teal */
+}
+
+.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb,
+.mdc-switch:not(.mdc-switch--checked) .mdc-switch__track {
+  background-color: #7f8491; /* charcoal-muted */
+  border-color: #7f8491;
+}
diff --git a/...src/popup/browser-action/switch-toggle.js → add-on/src/pages/components/switch-toggle.js b/...src/popup/browser-action/switch-toggle.js → add-on/src/pages/components/switch-toggle.js
@@ -3,14 +3,14 @@
 
 const html = require('choo/html')
 
-function switchToggle ({ checked, disabled, style }) {
+function switchToggle ({ id, onchange, checked, disabled, style }) {
   if (typeof checked === 'undefined') return
   return html`
-    <div class="mdc-switch ${style || ''} ${checked ? 'mdc-switch--checked' : 'mdc-switch--disabled'}">
+    <div class="mdc-switch ${style || ''} ${checked ? 'mdc-switch--checked' : ''} ${disabled ? 'mdc-switch--disabled' : ''}">
       <div class="mdc-switch__track"></div>
       <div class="mdc-switch__thumb-underlay">
         <div class="mdc-switch__thumb">
-          <input type="checkbox" id="another-basic-switch" class="mdc-switch__native-control" role="switch"
+          <input type="checkbox" id="${id}" onchange=${onchange} class="mdc-switch__native-control" role="switch"
             ${checked ? 'checked' : ''} ${disabled ? 'disabled' : ''}>
         </div>
       </div>

diff --git a/add-on/src/popup/browser-action/browser-action.css b/add-on/src/popup/browser-action/browser-action.css
@@ -1,7 +1,7 @@
 @import url('/ui-kit/tachyons.css');
 @import url('/ui-kit/ipfs.css');
-@import url('/ui-kit/mdc.switch.min.css');
 @import url('../heartbeat.css');
+@import url('../../pages/components/switch-toggle.css');
 
 .bg-near-white--hover:hover {
   background-color: #F4F4F4;
@@ -43,12 +43,3 @@
   from { opacity: 0; }
   to   { opacity: 1; }
 }
-
-.mdc-switch {
-  --mdc-theme-secondary: #3e9096 /* teal */
-}
-
-.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb {
-  background-color: #34373f; /* charcoal */
-  border-color: #34373f;
-}
diff --git a/add-on/src/popup/browser-action/nav-item.js b/add-on/src/popup/browser-action/nav-item.js
@@ -2,7 +2,7 @@
 /* eslint-env browser, webextensions */
 
 const html = require('choo/html')
-const switchToggle = require('./switch-toggle')
+const switchToggle = require('../../pages/components/switch-toggle')
 
 function navItem ({ icon, text, title, disabled, style, onClick, switchValue }) {
   let buttonStyle = 'black button-reset db w-100 bg-white b--none outline-0--focus pv2 ph3 f5 tl'