Skip to content

Commit 81bb860

Browse files
jessicaschillingjessicaschilling
authored
feat: responsive prefs page (#883)
1 parent ab66418 commit 81bb860

11 files changed

+83
-82
lines changed

‎add-on/_locales/en/messages.json

+4
Original file line numberDiff line numberDiff line change
@@ -207,6 +207,10 @@
207207
"message": "Failed to stop IPFS node",
208208
"description": "System notification title displayed when stopping an IPFS node fails (notify_stopIpfsNodeErrorTitle)"
209209
},
210+
"option_page_header" : {
211+
"message": "Companion Preferences",
212+
"description": "Main header on the Preferences screen (option_page_header)"
213+
},
210214
"option_legend_readMore" : {
211215
"message": "Read more",
212216
"description": "A generic link in option description on the Preferences screen (option_legend_readMore)"

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

+8-8
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,17 @@ function apiForm ({ ipfsApiUrl, ipfsApiPollMs, automaticMode, onOptionChange })
1313

1414
return html`
1515
<form>
16-
<fieldset class="mb3 pa4 bg-snow-muted charcoal">
17-
<h2 class="ttu tracked f6 fw4 teal mt0 mb3">${browser.i18n.getMessage('option_header_api')}</h2>
18-
<div>
16+
<fieldset class="mb3 pa1 pa4-ns pa3 bg-snow-muted charcoal">
17+
<h2 class="ttu tracked f6 fw4 teal mt0-ns mb3-ns mb1 mt2 ">${browser.i18n.getMessage('option_header_api')}</h2>
18+
<div class="flex-row-ns pb0-ns">
1919
<label for="ipfsApiUrl">
2020
<dl>
2121
<dt>${browser.i18n.getMessage('option_ipfsApiUrl_title')}</dt>
2222
<dd>${browser.i18n.getMessage('option_ipfsApiUrl_description')}</dd>
2323
</dl>
2424
</label>
2525
<input
26-
class="bg-white navy"
26+
class="bg-white navy self-center-ns"
2727
id="ipfsApiUrl"
2828
type="url"
2929
inputmode="url"
@@ -34,15 +34,15 @@ function apiForm ({ ipfsApiUrl, ipfsApiPollMs, automaticMode, onOptionChange })
3434
onchange=${onIpfsApiUrlChange}
3535
value=${ipfsApiUrl} />
3636
</div>
37-
<div>
37+
<div class="flex-row-ns pb0-ns">
3838
<label for="ipfsApiPollMs">
3939
<dl>
4040
<dt>${browser.i18n.getMessage('option_ipfsApiPollMs_title')}</dt>
4141
<dd>${browser.i18n.getMessage('option_ipfsApiPollMs_description')}</dd>
4242
</dl>
4343
</label>
4444
<input
45-
class="bg-white navy"
45+
class="bg-white navy self-center-ns"
4646
id="ipfsApiPollMs"
4747
type="number"
4848
inputmode="numeric"
@@ -53,14 +53,14 @@ function apiForm ({ ipfsApiUrl, ipfsApiPollMs, automaticMode, onOptionChange })
5353
onchange=${onIpfsApiPollMsChange}
5454
value=${ipfsApiPollMs} />
5555
</div>
56-
<div>
56+
<div class="flex-row-ns pb0-ns">
5757
<label for="automaticMode">
5858
<dl>
5959
<dt>${browser.i18n.getMessage('option_automaticMode_title')}</dt>
6060
<dd>${browser.i18n.getMessage('option_automaticMode_description')}</dd>
6161
</dl>
6262
</label>
63-
<div>${switchToggle({ id: 'automaticMode', checked: automaticMode, onchange: onAutomaticModeChange })}</div>
63+
<div class="self-center-ns">${switchToggle({ id: 'automaticMode', checked: automaticMode, onchange: onAutomaticModeChange })}</div>
6464
</div>
6565
</fieldset>
6666
</form>

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

+8-8
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ function dnslinkForm ({
1717

1818
return html`
1919
<form>
20-
<fieldset class="mb3 pa4 bg-snow-muted charcoal">
21-
<h2 class="ttu tracked f6 fw4 teal mt0 mb3">${browser.i18n.getMessage('option_header_dnslink')}</h2>
22-
<div>
20+
<fieldset class="mb3 pa1 pa4-ns pa3 bg-snow-muted charcoal">
21+
<h2 class="ttu tracked f6 fw4 teal mt0-ns mb3-ns mb1 mt2 ">${browser.i18n.getMessage('option_header_dnslink')}</h2>
22+
<div class="flex-row-ns pb0-ns">
2323
<label for="dnslinkPolicy">
2424
<dl>
2525
<dt>${browser.i18n.getMessage('option_dnslinkPolicy_title')}</dt>
@@ -31,7 +31,7 @@ function dnslinkForm ({
3131
</dd>
3232
</dl>
3333
</label>
34-
<select id="dnslinkPolicy" name='dnslinkPolicy' onchange=${onDnslinkPolicyChange}>
34+
<select id="dnslinkPolicy" name='dnslinkPolicy' class="self-center-ns bg-white" onchange=${onDnslinkPolicyChange}>
3535
<option
3636
value='false'
3737
selected=${String(dnslinkPolicy) === 'false'}>
@@ -49,16 +49,16 @@ function dnslinkForm ({
4949
</option>
5050
</select>
5151
</div>
52-
<div>
52+
<div class="flex-row-ns pb0-ns">
5353
<label for="dnslinkDataPreload">
5454
<dl>
5555
<dt>${browser.i18n.getMessage('option_dnslinkDataPreload_title')}</dt>
5656
<dd>${browser.i18n.getMessage('option_dnslinkDataPreload_description')}</dd>
5757
</dl>
5858
</label>
59-
<div>${switchToggle({ id: 'dnslinkDataPreload', checked: dnslinkDataPreload, disabled: dnslinkRedirect, onchange: onDnslinkDataPreloadChange })}</div>
59+
<div class="self-center-ns">${switchToggle({ id: 'dnslinkDataPreload', checked: dnslinkDataPreload, disabled: dnslinkRedirect, onchange: onDnslinkDataPreloadChange })}</div>
6060
</div>
61-
<div>
61+
<div class="flex-row-ns pb0-ns">
6262
<label for="dnslinkRedirect">
6363
<dl>
6464
<dt>${browser.i18n.getMessage('option_dnslinkRedirect_title')}</dt>
@@ -71,7 +71,7 @@ function dnslinkForm ({
7171
</dd>
7272
</dl>
7373
</label>
74-
<div>${switchToggle({ id: 'dnslinkRedirect', checked: dnslinkRedirect, onchange: onDnslinkRedirectChange })}</div>
74+
<div class="self-center-ns">${switchToggle({ id: 'dnslinkRedirect', checked: dnslinkRedirect, onchange: onDnslinkRedirectChange })}</div>
7575
</div>
7676
</fieldset>
7777
</form>

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

+18-18
Original file line numberDiff line numberDiff line change
@@ -25,46 +25,46 @@ function experimentsForm ({
2525

2626
return html`
2727
<form>
28-
<fieldset class="mb3 pa4 bg-snow-muted charcoal">
29-
<h2 class="ttu tracked f6 fw4 teal mt0 mb3">${browser.i18n.getMessage('option_header_experiments')}</h2>
28+
<fieldset class="mb3 pa1 pa4-ns pa3 bg-snow-muted charcoal">
29+
<h2 class="ttu tracked f6 fw4 teal mt0-ns mb3-ns mb1 mt2 ">${browser.i18n.getMessage('option_header_experiments')}</h2>
3030
<div class="mb2">${browser.i18n.getMessage('option_experiments_warning')}</div>
31-
<div>
31+
<div class="flex-row-ns pb0-ns">
3232
<label for="displayNotifications">
3333
<dl>
3434
<dt>${browser.i18n.getMessage('option_displayNotifications_title')}</dt>
3535
<dd>${browser.i18n.getMessage('option_displayNotifications_description')}</dd>
3636
</dl>
3737
</label>
38-
<div>${switchToggle({ id: 'displayNotifications', checked: displayNotifications, onchange: onDisplayNotificationsChange })}</div>
38+
<div class="self-center-ns">${switchToggle({ id: 'displayNotifications', checked: displayNotifications, onchange: onDisplayNotificationsChange })}</div>
3939
</div>
40-
<div>
40+
<div class="flex-row-ns pb0-ns">
4141
<label for="catchUnhandledProtocols">
4242
<dl>
4343
<dt>${browser.i18n.getMessage('option_catchUnhandledProtocols_title')}</dt>
4444
<dd>${browser.i18n.getMessage('option_catchUnhandledProtocols_description')}</dd>
4545
</dl>
4646
</label>
47-
<div>${switchToggle({ id: 'catchUnhandledProtocols', checked: catchUnhandledProtocols, onchange: onCatchUnhandledProtocolsChange })}</div>
47+
<div class="self-center-ns">${switchToggle({ id: 'catchUnhandledProtocols', checked: catchUnhandledProtocols, onchange: onCatchUnhandledProtocolsChange })}</div>
4848
</div>
49-
<div>
49+
<div class="flex-row-ns pb0-ns">
5050
<label for="recoverFailedHttpRequests">
5151
<dl>
5252
<dt>${browser.i18n.getMessage('option_recoverFailedHttpRequests_title')}</dt>
5353
<dd>${browser.i18n.getMessage('option_recoverFailedHttpRequests_description')}</dd>
5454
</dl>
5555
</label>
56-
<div>${switchToggle({ id: 'recoverFailedHttpRequests', checked: recoverFailedHttpRequests, onchange: onrecoverFailedHttpRequestsChange })}</div>
56+
<div class="self-center-ns">${switchToggle({ id: 'recoverFailedHttpRequests', checked: recoverFailedHttpRequests, onchange: onrecoverFailedHttpRequestsChange })}</div>
5757
</div>
58-
<div>
58+
<div class="flex-row-ns pb0-ns">
5959
<label for="linkify">
6060
<dl>
6161
<dt>${browser.i18n.getMessage('option_linkify_title')}</dt>
6262
<dd>${browser.i18n.getMessage('option_linkify_description')}</dd>
6363
</dl>
6464
</label>
65-
<div>${switchToggle({ id: 'linkify', checked: linkify, onchange: onLinkifyChange })}</div>
65+
<div class="self-center-ns">${switchToggle({ id: 'linkify', checked: linkify, onchange: onLinkifyChange })}</div>
6666
</div>
67-
<div>
67+
<div class="flex-row-ns pb0-ns">
6868
<label for="detectIpfsPathHeader">
6969
<dl>
7070
<dt>${browser.i18n.getMessage('option_detectIpfsPathHeader_title')}</dt>
@@ -75,9 +75,9 @@ function experimentsForm ({
7575
</dd>
7676
</dl>
7777
</label>
78-
<div>${switchToggle({ id: 'detectIpfsPathHeader', checked: detectIpfsPathHeader, onchange: onDetectIpfsPathHeaderChange })}</div>
78+
<div class="self-center-ns">${switchToggle({ id: 'detectIpfsPathHeader', checked: detectIpfsPathHeader, onchange: onDetectIpfsPathHeaderChange })}</div>
7979
</div>
80-
<div class="o-50">
80+
<div class="flex-row-ns pb0-ns o-50">
8181
<label for="ipfsProxy">
8282
<dl>
8383
<dt>${browser.i18n.getMessage('option_ipfsProxy_title')}</dt>
@@ -97,31 +97,31 @@ function experimentsForm ({
9797
</dd>
9898
</dl>
9999
</label>
100-
<div>${switchToggle({ id: 'ipfsProxy', checked: ipfsProxy, disabled: true, onchange: onIpfsProxyChange })}</div>
100+
<div class="self-center-ns">${switchToggle({ id: 'ipfsProxy', checked: ipfsProxy, disabled: true, onchange: onIpfsProxyChange })}</div>
101101
</div>
102-
<div>
102+
<div class="flex-row-ns pb0-ns">
103103
<label for="logNamespaces">
104104
<dl>
105105
<dt>${browser.i18n.getMessage('option_logNamespaces_title')}</dt>
106106
<dd>${browser.i18n.getMessage('option_logNamespaces_description')}</dd>
107107
</dl>
108108
</label>
109109
<input
110-
class="bg-white navy"
110+
class="bg-white navy self-center-ns"
111111
id="logNamespaces"
112112
type="text"
113113
required
114114
onchange=${onOptionChange('logNamespaces')}
115115
value=${logNamespaces} />
116116
</div>
117-
<div>
117+
<div class="flex-row-ns pb0-ns">
118118
<label for="resetAllOptions">
119119
<dl>
120120
<dt>${browser.i18n.getMessage('option_resetAllOptions_title')}</dt>
121121
<dd>${browser.i18n.getMessage('option_resetAllOptions_description')}</dd>
122122
</dl>
123123
</label>
124-
<div><button id="resetAllOptions" class="Button transition-all sans-serif v-mid fw5 nowrap lh-copy bn br1 pa2 pointer focus-outline white bg-red white" onclick=${onOptionsReset}>${browser.i18n.getMessage('option_resetAllOptions_title')}</button></div>
124+
<div class="self-center-ns"><button id="resetAllOptions" class="Button transition-all sans-serif v-mid fw5 nowrap lh-copy bn br1 pa2 pointer focus-outline white bg-red white" onclick=${onOptionsReset}>${browser.i18n.getMessage('option_resetAllOptions_title')}</button></div>
125125
</div>
126126
</fieldset>
127127
</form>

‎add-on/src/options/forms/file-import-form.js

+8-8
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ function fileImportForm ({ importDir, openViaWebUI, preloadAtPublicGateway, onOp
1111
const onPreloadAtPublicGatewayChange = onOptionChange('preloadAtPublicGateway')
1212
return html`
1313
<form>
14-
<fieldset class="mb3 pa4 bg-snow-muted charcoal">
15-
<h2 class="ttu tracked f6 fw4 teal mt0 mb3">${browser.i18n.getMessage('option_header_fileImport')}</h2>
16-
<div>
14+
<fieldset class="mb3 pa1 pa4-ns pa3 bg-snow-muted charcoal">
15+
<h2 class="ttu tracked f6 fw4 teal mt0-ns mb3-ns mb1 mt2 ">${browser.i18n.getMessage('option_header_fileImport')}</h2>
16+
<div class="flex-row-ns pb0-ns">
1717
<label for="importDir">
1818
<dl>
1919
<dt>${browser.i18n.getMessage('option_importDir_title')}</dt>
@@ -26,31 +26,31 @@ function fileImportForm ({ importDir, openViaWebUI, preloadAtPublicGateway, onOp
2626
</dl>
2727
</label>
2828
<input
29-
class="bg-white navy"
29+
class="bg-white navy self-center-ns"
3030
id="importDir"
3131
type="text"
3232
pattern="^\/(.*)"
3333
required
3434
onchange=${onImportDirChange}
3535
value=${importDir} />
3636
</div>
37-
<div>
37+
<div class="flex-row-ns pb0-ns">
3838
<label for="openViaWebUI">
3939
<dl>
4040
<dt>${browser.i18n.getMessage('option_openViaWebUI_title')}</dt>
4141
<dd>${browser.i18n.getMessage('option_openViaWebUI_description')}</dd>
4242
</dl>
4343
</label>
44-
<div>${switchToggle({ id: 'openViaWebUI', checked: openViaWebUI, onchange: onOpenViaWebUIChange })}</div>
44+
<div class="self-center-ns">${switchToggle({ id: 'openViaWebUI', checked: openViaWebUI, onchange: onOpenViaWebUIChange })}</div>
4545
</div>
46-
<div>
46+
<div class="flex-row-ns pb0-ns">
4747
<label for="preloadAtPublicGateway">
4848
<dl>
4949
<dt>${browser.i18n.getMessage('option_preloadAtPublicGateway_title')}</dt>
5050
<dd>${browser.i18n.getMessage('option_preloadAtPublicGateway_description')}</dd>
5151
</dl>
5252
</label>
53-
<div>${switchToggle({ id: 'preloadAtPublicGateway', checked: preloadAtPublicGateway, onchange: onPreloadAtPublicGatewayChange })}</div>
53+
<div class="self-center-ns">${switchToggle({ id: 'preloadAtPublicGateway', checked: preloadAtPublicGateway, onchange: onPreloadAtPublicGatewayChange })}</div>
5454
</div>
5555
</fieldset>
5656
</form>

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

+15-15
Original file line numberDiff line numberDiff line change
@@ -33,17 +33,17 @@ function gatewaysForm ({
3333

3434
return html`
3535
<form>
36-
<fieldset class="mb3 pa4 bg-snow-muted charcoal">
37-
<h2 class="ttu tracked f6 fw4 teal mt0 mb3">${browser.i18n.getMessage('option_header_gateways')}</h2>
38-
<div>
36+
<fieldset class="mb3 pa1 pa4-ns pa3 bg-snow-muted charcoal">
37+
<h2 class="ttu tracked f6 fw4 teal mt0-ns mb3-ns mb1 mt2 ">${browser.i18n.getMessage('option_header_gateways')}</h2>
38+
<div class="flex-row-ns pb0-ns">
3939
<label for="publicGatewayUrl">
4040
<dl>
4141
<dt>${browser.i18n.getMessage('option_publicGatewayUrl_title')}</dt>
4242
<dd>${browser.i18n.getMessage('option_publicGatewayUrl_description')}</dd>
4343
</dl>
4444
</label>
4545
<input
46-
class="bg-white navy"
46+
class="bg-white navy self-center-ns"
4747
id="publicGatewayUrl"
4848
type="url"
4949
inputmode="url"
@@ -54,7 +54,7 @@ function gatewaysForm ({
5454
onchange=${onPublicGatewayUrlChange}
5555
value=${publicGatewayUrl} />
5656
</div>
57-
<div>
57+
<div class="flex-row-ns pb0-ns">
5858
<label for="publicSubdomainGatewayUrl">
5959
<dl>
6060
<dt>${browser.i18n.getMessage('option_publicSubdomainGatewayUrl_title')}</dt>
@@ -67,7 +67,7 @@ function gatewaysForm ({
6767
</dl>
6868
</label>
6969
<input
70-
class="bg-white navy"
70+
class="bg-white navy self-center-ns"
7171
id="publicSubdomainGatewayUrl"
7272
type="url"
7373
inputmode="url"
@@ -79,7 +79,7 @@ function gatewaysForm ({
7979
value=${publicSubdomainGatewayUrl} />
8080
</div>
8181
${supportRedirectToCustomGateway && allowChangeOfCustomGateway ? html`
82-
<div>
82+
<div class="flex-row-ns pb0-ns">
8383
<label for="customGatewayUrl">
8484
<dl>
8585
<dt>${browser.i18n.getMessage('option_customGatewayUrl_title')}</dt>
@@ -89,7 +89,7 @@ function gatewaysForm ({
8989
</dl>
9090
</label>
9191
<input
92-
class="bg-white navy"
92+
class="bg-white navy self-center-ns"
9393
id="customGatewayUrl"
9494
type="url"
9595
inputmode="url"
@@ -104,18 +104,18 @@ function gatewaysForm ({
104104
</div>
105105
` : null}
106106
${supportRedirectToCustomGateway ? html`
107-
<div>
107+
<div class="flex-row-ns pb0-ns">
108108
<label for="useCustomGateway">
109109
<dl>
110110
<dt>${browser.i18n.getMessage('option_useCustomGateway_title')}</dt>
111111
<dd>${browser.i18n.getMessage('option_useCustomGateway_description')}</dd>
112112
</dl>
113113
</label>
114-
<div>${switchToggle({ id: 'useCustomGateway', checked: useCustomGateway, onchange: onUseCustomGatewayChange })}</div>
114+
<div class="self-center-ns">${switchToggle({ id: 'useCustomGateway', checked: useCustomGateway, onchange: onUseCustomGatewayChange })}</div>
115115
</div>
116116
` : null}
117117
${supportRedirectToCustomGateway ? html`
118-
<div>
118+
<div class="flex-row-ns pb0-ns">
119119
<label for="useSubdomains">
120120
<dl>
121121
<dt>${browser.i18n.getMessage('option_useSubdomains_title')}</dt>
@@ -127,23 +127,23 @@ function gatewaysForm ({
127127
</dd>
128128
</dl>
129129
</label>
130-
<div>${switchToggle({ id: 'useSubdomains', checked: useSubdomains, onchange: onUseSubdomainProxyChange })}</div>
130+
<div class="self-center-ns">${switchToggle({ id: 'useSubdomains', checked: useSubdomains, onchange: onUseSubdomainProxyChange })}</div>
131131
</div>
132132
` : null}
133133
${supportRedirectToCustomGateway ? html`
134-
<div>
134+
<div class="flex-row-ns pb0-ns">
135135
<label for="noIntegrationsHostnames">
136136
<dl>
137137
<dt>${browser.i18n.getMessage('option_noIntegrationsHostnames_title')}</dt>
138138
<dd>${browser.i18n.getMessage('option_noIntegrationsHostnames_description')}</dd>
139139
</dl>
140140
</label>
141141
<textarea
142-
class="bg-white navy"
142+
class="bg-white navy self-center-ns"
143143
id="noIntegrationsHostnames"
144144
spellcheck="false"
145145
onchange=${onNoIntegrationsHostnamesChange}
146-
rows="4"
146+
rows="1"
147147
>${hostArrayToText(noIntegrationsHostnames)}</textarea>
148148
</div>
149149
` : null}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const switchToggle = require('../../pages/components/switch-toggle')
88
function globalToggleForm ({ active, onOptionChange }) {
99
const toggle = onOptionChange('active')
1010
return html`
11-
<form class="db mb3 bg-aqua-muted charcoal">
11+
<form class="db b mb3 bg-aqua-muted charcoal">
1212
<label for="active" class="dib pa3 flex items-center pointer ${!active ? 'charcoal bg-gray-muted br2' : ''}">
1313
${switchToggle({ id: 'active', checked: active, onchange: toggle, style: 'mr3' })}
1414
${browser.i18n.getMessage('panel_headerActiveToggleTitle')}

0 commit comments

Comments
 (0)