changes

fusion_theme_switcher/static/src/js/theme_toggle_systray.js

@@ -0,0 +1,81 @@
+/** @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,
+});
+