Implement layout options

2024-07-24 09:46:38 -07:00
parent e90fd7cd29
commit 21393c122a
37 changed files with 1288 additions and 644 deletions
--- a/widget/settings/pages/theme/index.ts
+++ b/widget/settings/pages/theme/index.ts
@@ -0,0 +1,92 @@
+import { BarTheme } from "./bar/index";
+import { NotificationsTheme } from "./notifications/index";
+import { BatteryMenuTheme } from "./menus/battery";
+import { BluetoothMenuTheme } from "./menus/bluetooth";
+import { ClockMenuTheme } from "./menus/clock";
+import { DashboardMenuTheme } from "./menus/dashboard";
+import { MenuTheme } from "./menus/index";
+import { MediaMenuTheme } from "./menus/media";
+import { NetworkMenuTheme } from "./menus/network";
+import { NotificationsMenuTheme } from "./menus/notifications";
+import { SystrayMenuTheme } from "./menus/systray";
+import { VolumeMenuTheme } from "./menus/volume";
+
+type Page = "General Settings"
+    | "Bar"
+    | "Notifications"
+    | "Battery Menu"
+    | "Bluetooth Menu"
+    | "Clock Menu"
+    | "Dashboard Menu"
+    | "Media Menu"
+    | "Network Menu"
+    | "Notifications Menu"
+    | "System Tray"
+    | "Volume Menu";
+
+const CurrentPage = Variable<Page>("General Settings");
+
+const pagerMap: Page[] = [
+    "General Settings",
+    "Bar",
+    "Notifications",
+    "Battery Menu",
+    "Bluetooth Menu",
+    "Clock Menu",
+    "Dashboard Menu",
+    "Media Menu", "Network Menu",
+    "Notifications Menu",
+    "System Tray",
+    "Volume Menu",
+]
+
+export const ThemesMenu = () => {
+    return Widget.Box({
+        vertical: true,
+        children: CurrentPage.bind("value").as(v => {
+            return [
+                Widget.Box({
+                    class_name: "option-pages-container",
+                    hpack: "center",
+                    hexpand: true,
+                    vertical: true,
+                    children: [0, 1, 2].map(section => {
+                        return Widget.Box({
+                            children: pagerMap.map((page, index) => {
+                                if (index >= section * 5 && index < section * 5 + 5) {
+                                    return Widget.Button({
+                                        hpack: "center",
+                                        xalign: 0,
+                                        class_name: `pager-button ${v === page ? 'active' : ''}`,
+                                        label: page,
+                                        on_primary_click: () => CurrentPage.value = page
+                                    })
+                                }
+                                return Widget.Box();
+                            })
+                        })
+                    })
+                }),
+                Widget.Stack({
+                    vexpand: true,
+                    class_name: "themes-menu-stack",
+                    children: {
+                        "General Settings": MenuTheme(),
+                        "Bar": BarTheme(),
+                        "Notifications": NotificationsTheme(),
+                        "Battery Menu": BatteryMenuTheme(),
+                        "Bluetooth Menu": BluetoothMenuTheme(),
+                        "Clock Menu": ClockMenuTheme(),
+                        "Dashboard Menu": DashboardMenuTheme(),
+                        "Media Menu": MediaMenuTheme(),
+                        "Network Menu": NetworkMenuTheme(),
+                        "Notifications Menu": NotificationsMenuTheme(),
+                        "System Tray": SystrayMenuTheme(),
+                        "Volume Menu": VolumeMenuTheme(),
+                    },
+                    shown: CurrentPage.bind("value"),
+                })
+            ]
+        })
+    })
+}