Skip to content

Commit f4c5d1d

Browse files
lidellidel
committed
refactor: toggle switch tweaks
- fixed CSS for checked/disabled - updated colors based on feedback in #689 - enabled on Preferences screen
1 parent 495b8bf commit f4c5d1d

File tree

9 files changed

+59
-45
lines changed

9 files changed

+59
-45
lines changed

‎add-on/src/options/forms/api-form.js

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
const browser = require('webextension-polyfill')
55
const html = require('choo/html')
66
const { normalizeGatewayURL } = require('../../lib/options')
7+
const switchToggle = require('../../pages/components/switch-toggle')
78

89
function apiForm ({ ipfsApiUrl, ipfsApiPollMs, automaticMode, onOptionChange }) {
910
const onIpfsApiUrlChange = onOptionChange('ipfsApiUrl', normalizeGatewayURL)
@@ -57,11 +58,7 @@ function apiForm ({ ipfsApiUrl, ipfsApiPollMs, automaticMode, onOptionChange })
5758
<dd>${browser.i18n.getMessage('option_automaticMode_description')}</dd>
5859
</dl>
5960
</label>
60-
<input
61-
id="automaticMode"
62-
type="checkbox"
63-
onchange=${onAutomaticModeChange}
64-
checked=${automaticMode} />
61+
<div>${switchToggle({ id: 'automaticMode', checked: automaticMode, onchange: onAutomaticModeChange })}</div>
6562
</div>
6663
</fieldset>
6764
</form>

‎add-on/src/options/forms/experiments-form.js

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33

44
const browser = require('webextension-polyfill')
55
const html = require('choo/html')
6+
const switchToggle = require('../../pages/components/switch-toggle')
67

78
function experimentsForm ({
89
displayNotifications,
@@ -35,7 +36,7 @@ function experimentsForm ({
3536
<dd>${browser.i18n.getMessage('option_displayNotifications_description')}</dd>
3637
</dl>
3738
</label>
38-
<input id="displayNotifications" type="checkbox" onchange=${onDisplayNotificationsChange} checked=${displayNotifications} />
39+
<div>${switchToggle({ id: 'displayNotifications', checked: displayNotifications, onchange: onDisplayNotificationsChange })}</div>
3940
</div>
4041
<div>
4142
<label for="preloadAtPublicGateway">
@@ -44,7 +45,7 @@ function experimentsForm ({
4445
<dd>${browser.i18n.getMessage('option_preloadAtPublicGateway_description')}</dd>
4546
</dl>
4647
</label>
47-
<input type="checkbox" id="preloadAtPublicGateway" onchange=${onPreloadAtPublicGatewayChange} checked=${preloadAtPublicGateway} />
48+
<div>${switchToggle({ id: 'preloadAtPublicGateway', checked: preloadAtPublicGateway, onchange: onPreloadAtPublicGatewayChange })}</div>
4849
</div>
4950
<div>
5051
<label for="catchUnhandledProtocols">
@@ -53,7 +54,7 @@ function experimentsForm ({
5354
<dd>${browser.i18n.getMessage('option_catchUnhandledProtocols_description')}</dd>
5455
</dl>
5556
</label>
56-
<input type="checkbox" id="catchUnhandledProtocols" onchange=${onCatchUnhandledProtocolsChange} checked=${catchUnhandledProtocols} />
57+
<div>${switchToggle({ id: 'catchUnhandledProtocols', checked: catchUnhandledProtocols, onchange: onCatchUnhandledProtocolsChange })}</div>
5758
</div>
5859
<div>
5960
<label for="linkify">
@@ -62,7 +63,7 @@ function experimentsForm ({
6263
<dd>${browser.i18n.getMessage('option_linkify_description')}</dd>
6364
</dl>
6465
</label>
65-
<input type="checkbox" id="linkify" onchange=${onLinkifyChange} checked=${linkify} />
66+
<div>${switchToggle({ id: 'linkify', checked: linkify, onchange: onLinkifyChange })}</div>
6667
</div>
6768
<div>
6869
<label for="dnslinkPolicy">
@@ -105,10 +106,10 @@ function experimentsForm ({
105106
</dd>
106107
</dl>
107108
</label>
108-
<input type="checkbox" id="detectIpfsPathHeader" onchange=${onDetectIpfsPathHeaderChange} checked=${detectIpfsPathHeader} />
109+
<div>${switchToggle({ id: 'detectIpfsPathHeader', checked: detectIpfsPathHeader, onchange: onDetectIpfsPathHeaderChange })}</div>
109110
</div>
110111
<div>
111-
<label for="ipfs-proxy">
112+
<label for="ipfsProxy">
112113
<dl>
113114
<dt>${browser.i18n.getMessage('option_ipfsProxy_title')}</dt>
114115
<dd>
@@ -124,7 +125,7 @@ function experimentsForm ({
124125
</dd>
125126
</dl>
126127
</label>
127-
<input type="checkbox" id="ipfs-proxy" onchange=${onIpfsProxyChange} checked=${ipfsProxy} />
128+
<div>${switchToggle({ id: 'ipfsProxy', checked: ipfsProxy, onchange: onIpfsProxyChange })}</div>
128129
</div>
129130
<div>
130131
<label for="resetAllOptions">
@@ -133,7 +134,7 @@ function experimentsForm ({
133134
<dd>${browser.i18n.getMessage('option_resetAllOptions_description')}</dd>
134135
</dl>
135136
</label>
136-
<span id="resetAllOptions"><button onclick=${onOptionsReset}>${browser.i18n.getMessage('option_resetAllOptions_title')}</button></span>
137+
<div><button id="resetAllOptions" onclick=${onOptionsReset}>${browser.i18n.getMessage('option_resetAllOptions_title')}</button></div>
137138
</div>
138139
</fieldset>
139140
</form>

‎add-on/src/options/forms/gateways-form.js

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33

44
const browser = require('webextension-polyfill')
55
const html = require('choo/html')
6+
const switchToggle = require('../../pages/components/switch-toggle')
67
const { normalizeGatewayURL, hostTextToArray, hostArrayToText } = require('../../lib/options')
78

89
// Warn about mixed content issues when changing the gateway
@@ -77,11 +78,7 @@ function gatewaysForm ({
7778
<dd>${browser.i18n.getMessage('option_useCustomGateway_description')}</dd>
7879
</dl>
7980
</label>
80-
<input
81-
id="useCustomGateway"
82-
type="checkbox"
83-
onchange=${onUseCustomGatewayChange}
84-
checked=${useCustomGateway} />
81+
<div>${switchToggle({ id: 'useCustomGateway', checked: useCustomGateway, onchange: onUseCustomGatewayChange })}</div>
8582
</div>
8683
` : null}
8784
${supportRedirectToCustomGateway ? html`
@@ -96,7 +93,7 @@ function gatewaysForm ({
9693
id="noRedirectHostnames"
9794
spellcheck="false"
9895
onchange=${onNoRedirectHostnamesChange}
99-
rows="4"
96+
rows="4"
10097
>${hostArrayToText(noRedirectHostnames)}</textarea>
10198
</div>
10299
` : null}

‎add-on/src/options/forms/global-toggle-form.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,14 @@
33

44
const browser = require('webextension-polyfill')
55
const html = require('choo/html')
6+
const switchToggle = require('../../pages/components/switch-toggle')
67

78
function globalToggleForm ({ active, onOptionChange }) {
8-
const toggle = onOptionChange('active', checked => !checked)
9+
const toggle = onOptionChange('active')
910
return html`
1011
<form class="dib mb3">
11-
<label for="active" class="dib pa3 pointer ${!active ? 'charcoal bg-gray-muted br2' : ''}">
12-
<input class="mr2 pointer" id="active" type="checkbox" onchange=${toggle} checked=${!active} />
12+
<label for="active" class="dib pa3 flex items-center pointer ${!active ? 'charcoal bg-gray-muted br2' : ''}">
13+
${switchToggle({ id: 'active', checked: active, onchange: toggle, style: 'mr3' })}
1314
${browser.i18n.getMessage('panel_headerActiveToggleTitle')}
1415
</label>
1516
</form>

‎add-on/src/options/options.css

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
@import url('/ui-kit/tachyons.css');
22
@import url('/ui-kit/ipfs.css');
3+
@import url('../pages/components/switch-toggle.css');
4+
35
html {
46
overflow: hidden;
57
}
@@ -51,7 +53,6 @@ fieldset > div > * {
5153
label {
5254
flex: 1;
5355
}
54-
input[type=checkbox]:hover,
5556
select:hover,
5657
button:hover,
5758
label:hover {
@@ -84,6 +85,7 @@ input, textarea, select {
8485
padding: .5em;
8586
font-family: monospace;
8687
}
88+
fieldset > div > div,
8789
#resetAllOptions {
8890
flex: 1;
8991
text-align: center;
@@ -95,12 +97,10 @@ textarea,
9597
select {
9698
-webkit-transition: all 0.30s ease-in-out;
9799
-moz-transition: all 0.30s ease-in-out;
98-
border: 1px solid #ccc;
99-
}
100-
input[type=checkbox]:focus,
101-
input[type=checkbox]::-moz-focus-inner {
102-
border: 0;
103-
outline: none;
100+
box-shadow: 0 1px 4px rgba(0,0,0,.04);
101+
border-radius: 3px;
102+
border: 1px solid #9ad4db;
103+
background-color: white;
104104
}
105105
input[type=text]:focus,
106106
input[type=url]:focus,
@@ -111,10 +111,26 @@ select:focus {
111111
border: 1px solid #3E9398;
112112
box-shadow: 0 0 5px #5FCBCF;
113113
}
114+
115+
button#resetAllOptions:hover,
114116
input:invalid {
115-
border: 1px solid red !important;
117+
border: 1px solid red;
116118
background-color: #FFF0F0;
117-
box-shadow: 0 0 5px red !important;
119+
box-shadow: 0 0 5px red;
118120
color: red;
119121
transition: box-shadow 0.3s;
120122
}
123+
button#resetAllOptions {
124+
box-shadow: 0 1px 4px rgba(0,0,0,.04);
125+
border-radius: 3px;
126+
border: 1px solid #f36149;
127+
background-color: #f7f8fa;
128+
color: #f36149;
129+
padding: .5em;
130+
}
131+
button#resetAllOptions:active {
132+
border: 1px solid #3E9398 !important;
133+
box-shadow: 0 0 5px #5FCBCF !important;
134+
color: #3E9398;
135+
background-color: white;
136+
}

‎add-on/src/pages/components/switch-toggle.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@import url('/ui-kit/mdc.switch.min.css');
2+
3+
.mdc-switch {
4+
--mdc-theme-secondary: #3e9096 /* teal */
5+
}
6+
7+
.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb,
8+
.mdc-switch:not(.mdc-switch--checked) .mdc-switch__track {
9+
background-color: #7f8491; /* charcoal-muted */
10+
border-color: #7f8491;
11+
}

‎add-on/src/popup/browser-action/switch-toggle.js renamed to ‎add-on/src/pages/components/switch-toggle.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@
33

44
const html = require('choo/html')
55

6-
function switchToggle ({ checked, disabled, style }) {
6+
function switchToggle ({ id, onchange, checked, disabled, style }) {
77
if (typeof checked === 'undefined') return
88
return html`
9-
<div class="mdc-switch ${style || ''} ${checked ? 'mdc-switch--checked' : 'mdc-switch--disabled'}">
9+
<div class="mdc-switch ${style || ''} ${checked ? 'mdc-switch--checked' : ''} ${disabled ? 'mdc-switch--disabled' : ''}">
1010
<div class="mdc-switch__track"></div>
1111
<div class="mdc-switch__thumb-underlay">
1212
<div class="mdc-switch__thumb">
13-
<input type="checkbox" id="another-basic-switch" class="mdc-switch__native-control" role="switch"
13+
<input type="checkbox" id="${id}" onchange=${onchange} class="mdc-switch__native-control" role="switch"
1414
${checked ? 'checked' : ''} ${disabled ? 'disabled' : ''}>
1515
</div>
1616
</div>

‎add-on/src/popup/browser-action/browser-action.css

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import url('/ui-kit/tachyons.css');
22
@import url('/ui-kit/ipfs.css');
3-
@import url('/ui-kit/mdc.switch.min.css');
43
@import url('../heartbeat.css');
4+
@import url('../../pages/components/switch-toggle.css');
55

66
.bg-near-white--hover:hover {
77
background-color: #F4F4F4;
@@ -43,12 +43,3 @@
4343
from { opacity: 0; }
4444
to { opacity: 1; }
4545
}
46-
47-
.mdc-switch {
48-
--mdc-theme-secondary: #3e9096 /* teal */
49-
}
50-
51-
.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb {
52-
background-color: #34373f; /* charcoal */
53-
border-color: #34373f;
54-
}

‎add-on/src/popup/browser-action/nav-item.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
/* eslint-env browser, webextensions */
33

44
const html = require('choo/html')
5-
const switchToggle = require('./switch-toggle')
5+
const switchToggle = require('../../pages/components/switch-toggle')
66

77
function navItem ({ icon, text, title, disabled, style, onClick, switchValue }) {
88
let buttonStyle = 'black button-reset db w-100 bg-white b--none outline-0--focus pv2 ph3 f5 tl'

0 commit comments

Comments
 (0)