Merge pull request #1964 from dannycolin/issue-1948
fix #1948 Add option to select a light/dark theme
This commit is contained in:
Danny Colin
GitHub
commit
adeab46229
7 changed files with 593 additions and 439 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -53,11 +53,20 @@ async function enableDisableReplaceTab() {
|
|||
await browser.storage.local.set({replaceTabEnabled: !!checkbox.checked});
|
||||
}
|
||||
|
||||
async function changeTheme(event) {
|
||||
const theme = event.currentTarget;
|
||||
await browser.storage.local.set({currentTheme: theme.value});
|
||||
await browser.storage.local.set({currentThemeId: theme.selectedIndex});
|
||||
}
|
||||
|
||||
async function setupOptions() {
|
||||
const { syncEnabled } = await browser.storage.local.get("syncEnabled");
|
||||
const { replaceTabEnabled } = await browser.storage.local.get("replaceTabEnabled");
|
||||
const { currentThemeId } = await browser.storage.local.get("currentThemeId");
|
||||
|
||||
document.querySelector("#syncCheck").checked = !!syncEnabled;
|
||||
document.querySelector("#replaceTabCheck").checked = !!replaceTabEnabled;
|
||||
document.querySelector("#changeTheme").selectedIndex = currentThemeId;
|
||||
setupContainerShortcutSelects();
|
||||
}
|
||||
|
||||
|
|
@ -114,6 +123,8 @@ browser.permissions.onRemoved.addListener(resetPermissionsUi);
|
|||
document.addEventListener("DOMContentLoaded", setupOptions);
|
||||
document.querySelector("#syncCheck").addEventListener( "change", enableDisableSync);
|
||||
document.querySelector("#replaceTabCheck").addEventListener( "change", enableDisableReplaceTab);
|
||||
document.querySelector("#changeTheme").addEventListener( "change", changeTheme);
|
||||
|
||||
maybeShowPermissionsWarningIcon();
|
||||
for (let i=0; i < NUMBER_OF_KEYBOARD_SHORTCUTS; i++) {
|
||||
document.querySelector("#open_container_"+i)
|
||||
|
|
|
|||
|
|
@ -32,6 +32,9 @@ async function init() {
|
|||
list.appendChild(fragment);
|
||||
|
||||
MozillaVPN.handleContainerList(identities);
|
||||
|
||||
// Set the theme
|
||||
Utils.applyTheme();
|
||||
}
|
||||
|
||||
init();
|
||||
|
|
|
|||
|
|
@ -51,6 +51,7 @@ async function getExtensionInfo() {
|
|||
return extensionInfo;
|
||||
}
|
||||
|
||||
|
||||
// This object controls all the panels, identities and many other things.
|
||||
const Logic = {
|
||||
_identities: [],
|
||||
|
|
@ -65,6 +66,9 @@ const Logic = {
|
|||
method: "MozillaVPN_attemptPort"
|
||||
}),
|
||||
|
||||
// Set the theme
|
||||
Utils.applyTheme();
|
||||
|
||||
// Remove browserAction "upgraded" badge when opening panel
|
||||
this.clearBrowserActionBadge();
|
||||
|
||||
|
|
|
|||
|
|
@ -169,6 +169,26 @@ const Utils = {
|
|||
false
|
||||
);
|
||||
},
|
||||
/* Theme helper
|
||||
*
|
||||
* First, we look if there's a theme already set in the local storage. If
|
||||
* there isn't one, we set the theme based on `prefers-color-scheme`.
|
||||
* */
|
||||
getTheme(currentTheme, window) {
|
||||
if (typeof currentTheme !== "undefined" && currentTheme !== "auto") {
|
||||
return currentTheme;
|
||||
}
|
||||
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
||||
return "dark";
|
||||
}
|
||||
return "light";
|
||||
},
|
||||
async applyTheme() {
|
||||
const { currentTheme } = await browser.storage.local.get("currentTheme");
|
||||
const popup = document.getElementsByTagName("html")[0];
|
||||
const theme = Utils.getTheme(currentTheme, window);
|
||||
popup.setAttribute("data-theme", theme);
|
||||
}
|
||||
};
|
||||
|
||||
window.Utils = Utils;
|
||||
|
|
|
|||
|
|
@ -59,6 +59,24 @@
|
|||
<p><em data-i18n-message-id="replaceTabDescription"></em></p>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
TODO
|
||||
- Add data-i18n
|
||||
-->
|
||||
<h3 data-i18n-message-id="theme"></h3>
|
||||
|
||||
<p><label class="keyboard-shortcut">
|
||||
<span data-i18n-message-id="chooseTheme"></span>
|
||||
<select id="changeTheme" name="changeTheme">
|
||||
<option value="auto" selected data-i18n-message-id="themeAuto">
|
||||
</option>
|
||||
<option value="light" data-i18n-message-id="themeLight">
|
||||
</option>
|
||||
<option value="dark" data-i18n-message-id="themeDark">
|
||||
</option>
|
||||
</select>
|
||||
</label></p>
|
||||
|
||||
<h3 data-i18n-message-id="keyboardShortCuts"></h3>
|
||||
<p><em data-i18n-message-id="editWhichContainer"></em></p>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<html>
|
||||
<html data-theme="auto">
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Multi-Account Containers</title>
|
||||
|
|
@ -251,7 +251,7 @@
|
|||
</table>
|
||||
</div>
|
||||
<v-padding-hack-footer></v-padding-hack-footer>
|
||||
<div class="bottom-btn keyboard-nav hover-highlight" id="manage-container-link" tabindex="0" data-i18n-message-id="manageThisContainer"></div>
|
||||
<div class="bottom-btn keyboard-nav hover-highlight controller" id="manage-container-link" tabindex="0" data-i18n-message-id="manageThisContainer"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -342,10 +342,11 @@
|
|||
</button>
|
||||
</div>
|
||||
</moz-vpn-container-ui>
|
||||
<button id="advanced-proxy-settings-btn" class="proxy-section advanced-proxy-settings-btn controller">
|
||||
<button id="advanced-proxy-settings-btn" class="proxy-section advanced-proxy-settings-btn">
|
||||
<span class="advanced-proxy-settings-btn-label" data-i18n-message-id="advancedProxySettings"></span>
|
||||
<span id="advanced-proxy-address"></span>
|
||||
</button>
|
||||
<hr>
|
||||
<button class="delete-container delete-btn alert-text" id="delete-container-button" data-i18n-message-id="deleteThisContainer"></button>
|
||||
|
||||
<!-- TODO get UX / CONTENT on how to message about unavailable proxies -->
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue