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

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