Organize settings dialog code for extensability and add menu transitions to dialog. (#455)

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<Page>('Configuration');
-
-const pagerMap: Page[] = ['Configuration', 'Theming'];
+const CurrentPage = Variable<SettingsPage>('Configuration');
+const LastPage = Variable<SettingsPage>('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'),
             }),
         ],

widget/settings/helpers.ts

@@ -0,0 +1,3 @@
+export const pageList = <T extends object>(obj: T): Array<keyof T> => {
+    return Object.keys(obj) as Array<keyof T>;
+};

widget/settings/pages/config/general/index.ts

@@ -72,9 +72,9 @@ export const BarGeneral = (): Scrollable<Child, Attribute> => {
                     opt: options.menus.transitionTime,
                     title: 'Menu Transition Duration',
                     type: 'number',
-                    min: 100,
+                    min: 0,
                     max: 10000,
-                    increment: 100,
+                    increment: 25,
                 }),
 
                 Header('Scaling'),

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;

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<Page>('General');
-
-const pagerMap: Page[] = [
-    'General',
-    'Bar',
-    'Notifications',
-    'OSD',
-    'Media Menu',
-    'Power Menu',
-    'Bluetooth Menu',
-    'Volume',
-    'Clock Menu',
-    'Dashboard Menu',
-    'Custom Modules',
-];
+const CurrentPage = Variable<ConfigPage>('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'),
             }),
         ],

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;

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<Page>('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<ThemePage>('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'),
             }),
         ],

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;