From 495b8bf37481fbb2ec8998d62a243b78c4f579d3 Mon Sep 17 00:00:00 2001 From: Marcin Rataj Date: Wed, 6 Mar 2019 12:27:06 +0100 Subject: [PATCH 1/2] style: change toggle colors Makes on state less agressive and improves contrast of disabled state. --- add-on/src/popup/browser-action/browser-action.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/add-on/src/popup/browser-action/browser-action.css b/add-on/src/popup/browser-action/browser-action.css index f8be8309d..cc9f4aeb8 100644 --- a/add-on/src/popup/browser-action/browser-action.css +++ b/add-on/src/popup/browser-action/browser-action.css @@ -45,5 +45,10 @@ } .mdc-switch { - --mdc-theme-secondary: #244e66 /* navy-muted */ + --mdc-theme-secondary: #3e9096 /* teal */ +} + +.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb { + background-color: #34373f; /* charcoal */ + border-color: #34373f; } From 5a3cb17e827cedea6b61c5ad95098032b62377f3 Mon Sep 17 00:00:00 2001 From: Marcin Rataj Date: Wed, 6 Mar 2019 15:04:13 +0100 Subject: [PATCH 2/2] feat: toggle switch in Preferences - fixed CSS for checked/disabled - updated colors based on feedback in #689 - enabled on Preferences screen --- add-on/src/options/forms/api-form.js | 7 ++-- add-on/src/options/forms/experiments-form.js | 17 +++++----- add-on/src/options/forms/gateways-form.js | 9 ++--- .../src/options/forms/global-toggle-form.js | 7 ++-- add-on/src/options/options.css | 34 ++++++++++++++----- add-on/src/pages/components/switch-toggle.css | 11 ++++++ .../components}/switch-toggle.js | 6 ++-- .../popup/browser-action/browser-action.css | 11 +----- add-on/src/popup/browser-action/nav-item.js | 2 +- 9 files changed, 59 insertions(+), 45 deletions(-) create mode 100644 add-on/src/pages/components/switch-toggle.css rename add-on/src/{popup/browser-action => pages/components}/switch-toggle.js (66%) diff --git a/add-on/src/options/forms/api-form.js b/add-on/src/options/forms/api-form.js index 17b0e194b..780ad2862 100644 --- 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 })
${browser.i18n.getMessage('option_automaticMode_description')}
- +
${switchToggle({ id: 'automaticMode', checked: automaticMode, onchange: onAutomaticModeChange })}
diff --git a/add-on/src/options/forms/experiments-form.js b/add-on/src/options/forms/experiments-form.js index 51b3fffdd..4bb3d012d 100644 --- 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 ({
${browser.i18n.getMessage('option_displayNotifications_description')}
- +
${switchToggle({ id: 'displayNotifications', checked: displayNotifications, onchange: onDisplayNotificationsChange })}
- +
${switchToggle({ id: 'preloadAtPublicGateway', checked: preloadAtPublicGateway, onchange: onPreloadAtPublicGatewayChange })}
- +
${switchToggle({ id: 'catchUnhandledProtocols', checked: catchUnhandledProtocols, onchange: onCatchUnhandledProtocolsChange })}
- +
${switchToggle({ id: 'linkify', checked: linkify, onchange: onLinkifyChange })}
- +
${switchToggle({ id: 'detectIpfsPathHeader', checked: detectIpfsPathHeader, onchange: onDetectIpfsPathHeaderChange })}
-
- +
diff --git a/add-on/src/options/forms/gateways-form.js b/add-on/src/options/forms/gateways-form.js index df993b9cd..b16f0e763 100644 --- 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 ({
${browser.i18n.getMessage('option_useCustomGateway_description')}
- +
${switchToggle({ id: 'useCustomGateway', checked: useCustomGateway, onchange: onUseCustomGatewayChange })}
` : null} ${supportRedirectToCustomGateway ? html` @@ -96,7 +93,7 @@ function gatewaysForm ({ id="noRedirectHostnames" spellcheck="false" onchange=${onNoRedirectHostnamesChange} - rows="4" + rows="4" >${hostArrayToText(noRedirectHostnames)} ` : null} diff --git a/add-on/src/options/forms/global-toggle-form.js b/add-on/src/options/forms/global-toggle-form.js index f1f9d1487..68c7bffde 100644 --- 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`
-