From 9133834b858ed7079a83e80c881db41d9380af57 Mon Sep 17 00:00:00 2001 From: Jas Singh Date: Fri, 8 Nov 2024 00:44:33 -0800 Subject: [PATCH] Organize settings dialog code for extensability and add menu transitions to dialog. (#455) --- widget/settings/SettingsDialog.ts | 25 +++--- widget/settings/helpers.ts | 3 + widget/settings/pages/config/general/index.ts | 4 +- widget/settings/pages/config/helpers.ts | 27 +++++++ widget/settings/pages/config/index.ts | 61 +++----------- widget/settings/pages/theme/helpers.ts | 37 +++++++++ widget/settings/pages/theme/index.ts | 81 +++---------------- widget/settings/settingsPages.ts | 9 +++ 8 files changed, 109 insertions(+), 138 deletions(-) create mode 100644 widget/settings/helpers.ts create mode 100644 widget/settings/pages/config/helpers.ts create mode 100644 widget/settings/pages/theme/helpers.ts create mode 100644 widget/settings/settingsPages.ts diff --git a/widget/settings/SettingsDialog.ts b/widget/settings/SettingsDialog.ts index 83c337b..d2bd0ab 100644 --- a/widget/settings/SettingsDialog.ts +++ b/widget/settings/SettingsDialog.ts @@ -1,17 +1,16 @@ import RegularWindow from 'widget/RegularWindow'; import icons from 'lib/icons'; import options from 'options'; -import { ThemesMenu } from './pages/theme/index'; -import { SettingsMenu } from './pages/config/index'; import './side_effects'; import { GBox, GCenterBox } from 'lib/types/widget'; import Gtk from 'types/@girs/gtk-3.0/gtk-3.0'; +import { pageList } from 'widget/settings/helpers'; +import { SettingsPage, settingsPages } from './settingsPages'; -type Page = 'Configuration' | 'Theming'; +const { transition, transitionTime } = options.menus; -const CurrentPage = Variable('Configuration'); - -const pagerMap: Page[] = ['Configuration', 'Theming']; +const CurrentPage = Variable('Configuration'); +const LastPage = Variable('Configuration'); const Header = (): GCenterBox => Widget.CenterBox({ @@ -44,7 +43,7 @@ const PageContainer = (): GBox => { class_name: 'option-pages-container', hpack: 'center', hexpand: true, - children: pagerMap.map((page) => { + children: pageList(settingsPages).map((page) => { return Widget.Button({ xalign: 0, hpack: 'center', @@ -52,17 +51,19 @@ const PageContainer = (): GBox => { (v) => `pager-button ${v === page ? 'active' : ''} category`, ), label: page, - on_primary_click: () => (CurrentPage.value = page), + on_primary_click: () => { + LastPage.value = CurrentPage.value; + CurrentPage.value = page; + }, }); }), }), Widget.Stack({ vexpand: false, + transition: transition.bind('value'), + transitionDuration: transitionTime.bind('value'), class_name: 'themes-menu-stack', - children: { - Configuration: SettingsMenu(), - Theming: ThemesMenu(), - }, + children: settingsPages, shown: CurrentPage.bind('value'), }), ], diff --git a/widget/settings/helpers.ts b/widget/settings/helpers.ts new file mode 100644 index 0000000..10213be --- /dev/null +++ b/widget/settings/helpers.ts @@ -0,0 +1,3 @@ +export const pageList = (obj: T): Array => { + return Object.keys(obj) as Array; +}; diff --git a/widget/settings/pages/config/general/index.ts b/widget/settings/pages/config/general/index.ts index 1cea913..704dcf7 100644 --- a/widget/settings/pages/config/general/index.ts +++ b/widget/settings/pages/config/general/index.ts @@ -72,9 +72,9 @@ export const BarGeneral = (): Scrollable => { opt: options.menus.transitionTime, title: 'Menu Transition Duration', type: 'number', - min: 100, + min: 0, max: 10000, - increment: 100, + increment: 25, }), Header('Scaling'), diff --git a/widget/settings/pages/config/helpers.ts b/widget/settings/pages/config/helpers.ts new file mode 100644 index 0000000..d6f888d --- /dev/null +++ b/widget/settings/pages/config/helpers.ts @@ -0,0 +1,27 @@ +import { BarGeneral } from './general/index'; +import { BarSettings } from './bar/index'; +import { ClockMenuSettings } from './menus/clock'; +import { DashboardMenuSettings } from './menus/dashboard'; +import { NotificationSettings } from './notifications/index'; +import { OSDSettings } from './osd/index'; +import { CustomModuleSettings } from 'customModules/config'; +import { PowerMenuSettings } from './menus/power'; +import { MediaMenuSettings } from './menus/media'; +import { BluetoothMenuSettings } from './menus/bluetooth'; +import { VolumeMenuSettings } from './menus/volume'; + +export const configPages = { + General: BarGeneral(), + Bar: BarSettings(), + 'Media Menu': MediaMenuSettings(), + Notifications: NotificationSettings(), + OSD: OSDSettings(), + Volume: VolumeMenuSettings(), + 'Clock Menu': ClockMenuSettings(), + 'Dashboard Menu': DashboardMenuSettings(), + 'Custom Modules': CustomModuleSettings(), + 'Bluetooth Menu': BluetoothMenuSettings(), + 'Power Menu': PowerMenuSettings(), +} as const; + +export type ConfigPage = keyof typeof configPages; diff --git a/widget/settings/pages/config/index.ts b/widget/settings/pages/config/index.ts index eb9892c..f24c130 100644 --- a/widget/settings/pages/config/index.ts +++ b/widget/settings/pages/config/index.ts @@ -1,44 +1,11 @@ -import { BarGeneral } from './general/index'; -import { BarSettings } from './bar/index'; -import { ClockMenuSettings } from './menus/clock'; -import { DashboardMenuSettings } from './menus/dashboard'; -import { NotificationSettings } from './notifications/index'; -import { OSDSettings } from './osd/index'; -import { CustomModuleSettings } from 'customModules/config'; -import { PowerMenuSettings } from './menus/power'; +import options from 'options'; import { GBox } from 'lib/types/widget'; -import { MediaMenuSettings } from './menus/media'; -import { BluetoothMenuSettings } from './menus/bluetooth'; -import { VolumeMenuSettings } from './menus/volume'; +import { ConfigPage, configPages } from './helpers'; +import { pageList } from 'widget/settings/helpers'; -type Page = - | 'General' - | 'Bar' - | 'Clock Menu' - | 'Dashboard Menu' - | 'Media Menu' - | 'Power Menu' - | 'Bluetooth Menu' - | 'Volume' - | 'Notifications' - | 'OSD' - | 'Custom Modules'; +const { transition, transitionTime } = options.menus; -const CurrentPage = Variable('General'); - -const pagerMap: Page[] = [ - 'General', - 'Bar', - 'Notifications', - 'OSD', - 'Media Menu', - 'Power Menu', - 'Bluetooth Menu', - 'Volume', - 'Clock Menu', - 'Dashboard Menu', - 'Custom Modules', -]; +const CurrentPage = Variable('General'); export const SettingsMenu = (): GBox => { return Widget.Box({ @@ -48,7 +15,7 @@ export const SettingsMenu = (): GBox => { class_name: 'option-pages-container', hpack: 'center', hexpand: true, - children: pagerMap.map((page) => { + children: pageList(configPages).map((page) => { return Widget.Button({ hpack: 'center', class_name: CurrentPage.bind('value').as((v) => `pager-button ${v === page ? 'active' : ''}`), @@ -59,20 +26,10 @@ export const SettingsMenu = (): GBox => { }), Widget.Stack({ vexpand: true, + transition: transition.bind('value'), + transitionDuration: transitionTime.bind('value'), class_name: 'themes-menu-stack', - children: { - General: BarGeneral(), - Bar: BarSettings(), - 'Media Menu': MediaMenuSettings(), - Notifications: NotificationSettings(), - OSD: OSDSettings(), - Volume: VolumeMenuSettings(), - 'Clock Menu': ClockMenuSettings(), - 'Dashboard Menu': DashboardMenuSettings(), - 'Custom Modules': CustomModuleSettings(), - 'Bluetooth Menu': BluetoothMenuSettings(), - 'Power Menu': PowerMenuSettings(), - }, + children: configPages, shown: CurrentPage.bind('value'), }), ], diff --git a/widget/settings/pages/theme/helpers.ts b/widget/settings/pages/theme/helpers.ts new file mode 100644 index 0000000..746b302 --- /dev/null +++ b/widget/settings/pages/theme/helpers.ts @@ -0,0 +1,37 @@ +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'; +import { OsdTheme } from './osd/index'; +import { Matugen } from './menus/matugen'; +import { CustomModuleTheme } from 'customModules/theme'; +import { PowerMenuTheme } from './menus/power'; + +export const themePages = { + 'General Settings': MenuTheme(), + 'Matugen Settings': Matugen(), + Bar: BarTheme(), + Notifications: NotificationsTheme(), + OSD: OsdTheme(), + '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(), + 'Power Menu': PowerMenuTheme(), + 'Custom Modules': CustomModuleTheme(), +} as const; + +export type ThemePage = keyof typeof themePages; diff --git a/widget/settings/pages/theme/index.ts b/widget/settings/pages/theme/index.ts index 280419c..b33f1b3 100644 --- a/widget/settings/pages/theme/index.ts +++ b/widget/settings/pages/theme/index.ts @@ -1,59 +1,11 @@ -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'; -import { OsdTheme } from './osd/index'; -import { Matugen } from './menus/matugen'; -import { CustomModuleTheme } from 'customModules/theme'; -import { PowerMenuTheme } from './menus/power'; +import options from 'options'; import { GBox } from 'lib/types/widget'; +import { ThemePage, themePages } from './helpers'; +import { pageList } from 'widget/settings/helpers'; -type Page = - | 'General Settings' - | 'Matugen Settings' - | 'Bar' - | 'Notifications' - | 'OSD' - | 'Battery Menu' - | 'Bluetooth Menu' - | 'Clock Menu' - | 'Dashboard Menu' - | 'Media Menu' - | 'Network Menu' - | 'Notifications Menu' - | 'System Tray' - | 'Volume Menu' - | 'Power Menu' - | 'Custom Modules'; +const { transition, transitionTime } = options.menus; -const CurrentPage = Variable('General Settings'); - -const pagerMap: Page[] = [ - 'General Settings', - 'Matugen Settings', - 'Bar', - 'Notifications', - 'OSD', - 'Battery Menu', - 'Bluetooth Menu', - 'Clock Menu', - 'Dashboard Menu', - 'Media Menu', - 'Network Menu', - 'Notifications Menu', - 'System Tray', - 'Volume Menu', - 'Power Menu', - 'Custom Modules', -]; +const CurrentPage = Variable('General Settings'); export const ThemesMenu = (): GBox => { return Widget.Box({ @@ -66,7 +18,7 @@ export const ThemesMenu = (): GBox => { vertical: true, children: [0, 1, 2].map((section) => { return Widget.Box({ - children: pagerMap.map((page, index) => { + children: pageList(themePages).map((page, index) => { if (index >= section * 6 && index < section * 6 + 6) { return Widget.Button({ hpack: 'center', @@ -85,25 +37,10 @@ export const ThemesMenu = (): GBox => { }), Widget.Stack({ vexpand: true, + transition: transition.bind('value'), + transitionDuration: transitionTime.bind('value'), class_name: 'themes-menu-stack', - children: { - 'General Settings': MenuTheme(), - 'Matugen Settings': Matugen(), - Bar: BarTheme(), - Notifications: NotificationsTheme(), - OSD: OsdTheme(), - '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(), - 'Power Menu': PowerMenuTheme(), - 'Custom Modules': CustomModuleTheme(), - }, + children: themePages, shown: CurrentPage.bind('value'), }), ], diff --git a/widget/settings/settingsPages.ts b/widget/settings/settingsPages.ts new file mode 100644 index 0000000..63cac3c --- /dev/null +++ b/widget/settings/settingsPages.ts @@ -0,0 +1,9 @@ +import { SettingsMenu } from './pages/config/index'; +import { ThemesMenu } from './pages/theme/index'; + +export const settingsPages = { + Configuration: SettingsMenu(), + Theming: ThemesMenu(), +} as const; + +export type SettingsPage = keyof typeof settingsPages;