rowan/multi-account-containers
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update options page to latest UX

Browse source
This commit is contained in:
Lesley Norton 2021-12-06 22:15:31 -06:00
parent 2fbb3e0087
commit 567a284196
No known key found for this signature in database
GPG key ID: E98FBAEE3F13956E
4 changed files with 44 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
src/css/options.css
View file

@ -60,30 +60,53 @@ button {
}
.moz-vpn-proxy-permissions {
border-radius: 1rem;
padding-inline: 4rem;
padding-block: 2rem 1rem;
margin-block: 0 2rem;
border: 1px solid var(--grey10);
padding-block-end: 1rem;
border-block-end: 1px solid var(--grey10);
display: flex;
flex-direction: column;
}
h3.moz-vpn-proxy-permissions-title {
margin-block: 0 1rem;
margin-inline: 0;
margin-block-start: 0;
position: relative;
display: flex;
align-items: center;
}
.moz-vpn-proxy-permissions-title.show-warning::before {
.warning-icon {
display: flex;
align-items: center;
}
.warning-icon.show-warning::before {
background-image: url("/img/warning.svg");
background-size: 24px;
background-repeat: no-repeat;
background-position: center;
position: absolute;
inset-inline-start: -2.5rem;
content: "";
display: block;
block-size: 24px;
inline-size: 24px;
margin-inline-end: 0.5rem;
}
.moz-vpn-proxy-permissions-title::before,
.moz-vpn-proxy-permissions-title::after {
background-color: var(--grey10);
content: "";
height: 1px;
flex: 1 1 0%;
}
h3.moz-vpn-proxy-permissions-title::before {
margin-inline-end: 2rem;
margin-inline-start: -50%;
}
h3.moz-vpn-proxy-permissions-title::after {
margin-inline-start: 2rem;
margin-inline-end: -50%;
}
@media (prefers-color-scheme: dark) {
@ -92,11 +115,6 @@ h3.moz-vpn-proxy-permissions-title {
color: #fff;
}
.moz-vpn-proxy-permissions {
border-color: transparent;
background-color: rgba(255, 255, 255, 0.05);
}
p {
color: rgb(177, 177, 179);
}

16
src/img/warning.svg
View file

@ -1,17 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_773_14374)">
<path d="M19.7573 12.6702L14.0576 1.2724C13.8664 0.890072 13.5726 0.568517 13.209 0.343779C12.8454 0.119041 12.4263 0 11.9989 0C11.5714 0 11.1523 0.119041 10.7887 0.343779C10.4251 0.568517 10.1313 0.890072 9.94015 1.2724L4.24044 12.6748C4.06617 13.0254 3.98427 13.4148 4.00249 13.8059C4.02072 14.1971 4.13847 14.5771 4.3446 14.91C4.55073 15.243 4.83842 15.5178 5.18045 15.7085C5.52247 15.8993 5.90752 15.9996 6.29915 16H17.6974C18.0898 16.0002 18.4757 15.9001 18.8184 15.7092C19.1612 15.5183 19.4495 15.2429 19.6558 14.9093C19.8622 14.5757 19.9799 14.1948 19.9976 13.8029C20.0154 13.411 19.9327 13.0211 19.7573 12.6702V12.6702ZM10.8481 4.49406C10.8481 4.18891 10.9693 3.89625 11.1851 3.68047C11.401 3.46469 11.6937 3.34347 11.9989 3.34347C12.3041 3.34347 12.5968 3.46469 12.8126 3.68047C13.0284 3.89625 13.1496 4.18891 13.1496 4.49406V9.09644C13.1496 9.40159 13.0284 9.69425 12.8126 9.91003C12.5968 10.1258 12.3041 10.247 11.9989 10.247C11.6937 10.247 11.401 10.1258 11.1851 9.91003C10.9693 9.69425 10.8481 9.40159 10.8481 9.09644V4.49406ZM11.9989 13.9865C11.7144 13.9865 11.4362 13.9021 11.1997 13.7441C10.9631 13.586 10.7788 13.3614 10.6699 13.0986C10.561 12.8358 10.5325 12.5466 10.588 12.2676C10.6435 11.9886 10.7805 11.7324 10.9817 11.5312C11.1829 11.3301 11.4392 11.1931 11.7182 11.1376C11.9973 11.0821 12.2865 11.1106 12.5493 11.2195C12.8122 11.3283 13.0368 11.5127 13.1949 11.7492C13.3529 11.9857 13.4373 12.2638 13.4373 12.5482C13.4373 12.9297 13.2858 13.2955 13.016 13.5652C12.7462 13.8349 12.3804 13.9865 11.9989 13.9865V13.9865Z" fill="#FF4F5E"/>
</g>
<defs>
<filter id="filter0_d_773_14374" x="0" y="0" width="24" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_773_14374"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_773_14374" result="shape"/>
</filter>
</defs>
<path d="M18.6929 16.0119L13.7399 6.10586C13.5739 5.77358 13.3185 5.49411 13.0025 5.29878C12.6866 5.10346 12.3224 5 11.9509 5C11.5795 5 11.2153 5.10346 10.8993 5.29878C10.5834 5.49411 10.328 5.77358 10.1619 6.10586L5.20894 16.0159C5.0575 16.3206 4.98633 16.659 5.00217 16.999C5.01801 17.3389 5.12033 17.6692 5.29946 17.9586C5.47858 18.2479 5.72858 18.4868 6.0258 18.6526C6.32302 18.8183 6.65762 18.9055 6.99794 18.9059H16.9029C17.2439 18.906 17.5792 18.819 17.8771 18.6531C18.1749 18.4872 18.4255 18.2479 18.6048 17.9579C18.7842 17.668 18.8864 17.337 18.9018 16.9964C18.9172 16.6557 18.8453 16.3169 18.6929 16.0119V16.0119ZM10.9509 8.90586C10.9509 8.64065 11.0563 8.38629 11.2438 8.19876C11.4314 8.01122 11.6857 7.90586 11.9509 7.90586C12.2162 7.90586 12.4705 8.01122 12.658 8.19876C12.8456 8.38629 12.9509 8.64065 12.9509 8.90586V12.9059C12.9509 13.1711 12.8456 13.4254 12.658 13.613C12.4705 13.8005 12.2162 13.9059 11.9509 13.9059C11.6857 13.9059 11.4314 13.8005 11.2438 13.613C11.0563 13.4254 10.9509 13.1711 10.9509 12.9059V8.90586ZM11.9509 17.1559C11.7037 17.1559 11.462 17.0826 11.2565 16.9452C11.0509 16.8078 10.8907 16.6126 10.7961 16.3842C10.7015 16.1558 10.6767 15.9045 10.725 15.662C10.7732 15.4195 10.8922 15.1968 11.0671 15.022C11.2419 14.8472 11.4646 14.7281 11.7071 14.6799C11.9496 14.6317 12.2009 14.6564 12.4293 14.751C12.6577 14.8456 12.8529 15.0058 12.9903 15.2114C13.1276 15.417 13.2009 15.6586 13.2009 15.9059C13.2009 16.2374 13.0692 16.5553 12.8348 16.7897C12.6004 17.0242 12.2825 17.1559 11.9509 17.1559V17.1559Z" fill="#FF4F5E" />
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

2
src/js/options.js
View file

@ -20,7 +20,7 @@ document.querySelectorAll("[data-permission-id]").forEach( async(el) => {
async function maybeShowPermissionsWarningIcon() {
const bothMozillaVpnPermissionsEnabled = await MozillaVPN.bothPermissionsEnabled();
if (!bothMozillaVpnPermissionsEnabled) {
const permissionsWarningEl = document.querySelector(".moz-vpn-proxy-permissions-title");
const permissionsWarningEl = document.querySelector(".warning-icon");
if (permissionsWarningEl) {
permissionsWarningEl.classList.add("show-warning");
}

19
src/options.html
View file

@ -12,9 +12,17 @@
<body>
<form>
<h3 data-i18n-message-id="optionalPermissions"></h3>
<div class="settings-group">
<label class="permission">
<input type="checkbox" data-permission-id="bookmarks" id="bookmarksPermissions">
<span class="bold" data-i18n-message-id="enableBookMarkMenus"></span>
</label>
<p><em data-i18n-message-id="enableBookMarkMenusDescription"></em></p>
</div>
<div id="moz-vpn-proxy-permissions" class="moz-vpn-proxy-permissions">
<h3 class="moz-vpn-proxy-permissions-title" data-i18n-message-id="mozillaVpnAndProxyPermissionsTitle"></h3>
<h3 class="moz-vpn-proxy-permissions-title">
<span data-i18n-message-id="mozillaVpnAndProxyPermissionsTitle" class="warning-icon"></span>
</h3>
<div class="moz-vpn-proxy-permissions-content">
<div class="settings-group">
<label class="permission">
@ -32,13 +40,6 @@
</div>
</div>
</div>
<div class="settings-group">
<label class="permission">
<input type="checkbox" data-permission-id="bookmarks" id="bookmarksPermissions">
<span class="bold" data-i18n-message-id="enableBookMarkMenus"></span>
</label>
<p><em data-i18n-message-id="enableBookMarkMenusDescription"></em></p>
</div>
<h3 data-i18n-message-id="firefoxAccountsSync"></h3>
<div class="settings-group">
<label>