82 lines
2.3 KiB
JavaScript
82 lines
2.3 KiB
JavaScript
/** @odoo-module **/
|
|
|
|
import { Component, useState } from "@odoo/owl";
|
|
import { browser } from "@web/core/browser/browser";
|
|
import { cookie } from "@web/core/browser/cookie";
|
|
import { _t } from "@web/core/l10n/translation";
|
|
import { registry } from "@web/core/registry";
|
|
import { user } from "@web/core/user";
|
|
import { useService } from "@web/core/utils/hooks";
|
|
|
|
const VALID_SCHEMES = ["light", "dark"];
|
|
|
|
function currentScheme() {
|
|
const cookieScheme = cookie.get("color_scheme");
|
|
if (VALID_SCHEMES.includes(cookieScheme)) {
|
|
return cookieScheme;
|
|
}
|
|
const userScheme = user.settings?.color_scheme;
|
|
return VALID_SCHEMES.includes(userScheme) ? userScheme : "light";
|
|
}
|
|
|
|
export class FusionThemeToggleSystray extends Component {
|
|
static template = "fusion_theme_switcher.ThemeToggleSystray";
|
|
static props = [];
|
|
|
|
setup() {
|
|
this.notification = useService("notification");
|
|
this.state = useState({
|
|
scheme: currentScheme(),
|
|
loading: false,
|
|
});
|
|
}
|
|
|
|
get isDark() {
|
|
return this.state.scheme === "dark";
|
|
}
|
|
|
|
get nextScheme() {
|
|
return this.isDark ? "light" : "dark";
|
|
}
|
|
|
|
get title() {
|
|
return this.nextScheme === "dark" ? _t("Switch to dark mode") : _t("Switch to light mode");
|
|
}
|
|
|
|
get iconClass() {
|
|
return this.isDark ? "fa fa-sun-o" : "fa fa-moon-o";
|
|
}
|
|
|
|
async onToggleTheme() {
|
|
if (this.state.loading) {
|
|
return;
|
|
}
|
|
|
|
const nextScheme = this.nextScheme;
|
|
this.state.loading = true;
|
|
|
|
try {
|
|
await user.setUserSettings("color_scheme", nextScheme);
|
|
user.updateUserSettings("color_scheme", nextScheme);
|
|
cookie.set("color_scheme", nextScheme);
|
|
this.state.scheme = nextScheme;
|
|
browser.location.reload();
|
|
} catch {
|
|
this.state.loading = false;
|
|
this.notification.add(_t("Theme switch failed. Please try again."), {
|
|
type: "danger",
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
export const fusionThemeToggleSystrayItem = {
|
|
Component: FusionThemeToggleSystray,
|
|
isDisplayed: () => Boolean(user.userId && user.isInternalUser && user.settings?.id),
|
|
};
|
|
|
|
registry.category("systray").add("fusion_theme_switcher.theme_toggle", fusionThemeToggleSystrayItem, {
|
|
sequence: 100,
|
|
});
|
|
|