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

This commit is contained in:
Jas Singh
2024-11-08 00:44:33 -08:00
committed by GitHub
parent d5f112e418
commit 9133834b85
8 changed files with 109 additions and 138 deletions

View File

@@ -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'),

View File

@@ -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;

View File

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