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

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