Implement layout options

This commit is contained in:
Jas Singh
2024-07-24 09:46:38 -07:00
parent e90fd7cd29
commit 21393c122a
37 changed files with 1288 additions and 644 deletions

View File

@@ -5,10 +5,9 @@ import options from "options";
export const BarTheme = () => {
return Widget.Scrollable({
vscroll: "automatic",
vscroll: "always",
hscroll: "never",
class_name: "bar-theme-page",
vexpand: true,
class_name: "bar-theme-page paged-container",
child: Widget.Box({
vertical: true,
children: [
@@ -16,6 +15,7 @@ export const BarTheme = () => {
Option({ opt: options.theme.bar.transparent, title: 'Transparent', type: 'boolean' }),
Option({ opt: options.theme.bar.background, title: 'Background Color', type: 'color' }),
Option({ opt: options.theme.bar.buttons.monochrome, title: 'Use Global Colors', type: 'boolean' }),
Option({ opt: options.theme.bar.buttons.spacing, title: 'Button Spacing', type: 'string' }),
Option({ opt: options.theme.bar.buttons.radius, title: 'Button Radius', type: 'string' }),
Option({ opt: options.theme.bar.buttons.background, title: 'Button Background', type: 'color' }),
Option({ opt: options.theme.bar.buttons.hover, title: 'Button Hover', type: 'color' }),

View File

@@ -0,0 +1,92 @@
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";
type Page = "General Settings"
| "Bar"
| "Notifications"
| "Battery Menu"
| "Bluetooth Menu"
| "Clock Menu"
| "Dashboard Menu"
| "Media Menu"
| "Network Menu"
| "Notifications Menu"
| "System Tray"
| "Volume Menu";
const CurrentPage = Variable<Page>("General Settings");
const pagerMap: Page[] = [
"General Settings",
"Bar",
"Notifications",
"Battery Menu",
"Bluetooth Menu",
"Clock Menu",
"Dashboard Menu",
"Media Menu", "Network Menu",
"Notifications Menu",
"System Tray",
"Volume Menu",
]
export const ThemesMenu = () => {
return Widget.Box({
vertical: true,
children: CurrentPage.bind("value").as(v => {
return [
Widget.Box({
class_name: "option-pages-container",
hpack: "center",
hexpand: true,
vertical: true,
children: [0, 1, 2].map(section => {
return Widget.Box({
children: pagerMap.map((page, index) => {
if (index >= section * 5 && index < section * 5 + 5) {
return Widget.Button({
hpack: "center",
xalign: 0,
class_name: `pager-button ${v === page ? 'active' : ''}`,
label: page,
on_primary_click: () => CurrentPage.value = page
})
}
return Widget.Box();
})
})
})
}),
Widget.Stack({
vexpand: true,
class_name: "themes-menu-stack",
children: {
"General Settings": MenuTheme(),
"Bar": BarTheme(),
"Notifications": NotificationsTheme(),
"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(),
},
shown: CurrentPage.bind("value"),
})
]
})
})
}

View File

@@ -7,7 +7,7 @@ export const BatteryMenuTheme = () => {
return Widget.Scrollable({
vscroll: "automatic",
hscroll: "never",
class_name: "menu-theme-page battery",
class_name: "menu-theme-page battery paged-container",
vexpand: true,
child: Widget.Box({
vertical: true,

View File

@@ -7,7 +7,7 @@ export const BluetoothMenuTheme = () => {
return Widget.Scrollable({
vscroll: "automatic",
hscroll: "never",
class_name: "menu-theme-page bluetooth",
class_name: "menu-theme-page bluetooth paged-container",
vexpand: true,
child: Widget.Box({
vertical: true,

View File

@@ -7,7 +7,7 @@ export const ClockMenuTheme = () => {
return Widget.Scrollable({
vscroll: "automatic",
hscroll: "never",
class_name: "menu-theme-page clock",
class_name: "menu-theme-page clock paged-container",
vexpand: true,
child: Widget.Box({
vertical: true,

View File

@@ -5,15 +5,13 @@ import options from "options";
export const DashboardMenuTheme = () => {
return Widget.Scrollable({
vscroll: "automatic",
vscroll: "always",
hscroll: "never",
class_name: "menu-theme-page dashboard",
class_name: "menu-theme-page dashboard paged-container",
vexpand: true,
child: Widget.Box({
vertical: true,
children: [
Header('Dashboard Menu Theme Settings'),
Header('Card'),
Option({ opt: options.theme.bar.menus.menu.dashboard.card.color, title: 'Card', type: 'color' }),
@@ -38,6 +36,7 @@ export const DashboardMenuTheme = () => {
Option({ opt: options.theme.bar.menus.menu.dashboard.powermenu.confirmation.body, title: 'Confirmation Dialog Description', type: 'color' }),
Option({ opt: options.theme.bar.menus.menu.dashboard.powermenu.confirmation.confirm, title: 'Confirmation Dialog Confirm Button', type: 'color' }),
Option({ opt: options.theme.bar.menus.menu.dashboard.powermenu.confirmation.deny, title: 'Confirmation Dialog Cancel Button', type: 'color' }),
Option({ opt: options.theme.bar.menus.menu.dashboard.powermenu.confirmation.button_text, title: 'Confirmation Dialog Button Text', type: 'color' }),
Header('Shortcuts'),
Option({ opt: options.theme.bar.menus.menu.dashboard.shortcuts.background, title: 'Primary', type: 'color' }),
@@ -58,12 +57,12 @@ export const DashboardMenuTheme = () => {
Option({ opt: options.theme.bar.menus.menu.dashboard.controls.input.text, title: 'Input Button Text', type: 'color' }),
Header('Directories'),
Option({ opt: options.theme.bar.menus.menu.dashboard.directories.left.top, title: 'Directory: Left - Top', type: 'color' }),
Option({ opt: options.theme.bar.menus.menu.dashboard.directories.left.middle, title: 'Directory: Left - Middle', type: 'color' }),
Option({ opt: options.theme.bar.menus.menu.dashboard.directories.left.bottom, title: 'Directory: Left - Bottom', type: 'color' }),
Option({ opt: options.theme.bar.menus.menu.dashboard.directories.right.top, title: 'Directory: Right - Top', type: 'color' }),
Option({ opt: options.theme.bar.menus.menu.dashboard.directories.right.middle, title: 'Directory: Right - Middle', type: 'color' }),
Option({ opt: options.theme.bar.menus.menu.dashboard.directories.right.bottom, title: 'Directory: Right - Bottom', type: 'color' }),
Option({ opt: options.theme.bar.menus.menu.dashboard.directories.left.top.color, title: 'Directory: Left - Top', type: 'color' }),
Option({ opt: options.theme.bar.menus.menu.dashboard.directories.left.middle.color, title: 'Directory: Left - Middle', type: 'color' }),
Option({ opt: options.theme.bar.menus.menu.dashboard.directories.left.bottom.color, title: 'Directory: Left - Bottom', type: 'color' }),
Option({ opt: options.theme.bar.menus.menu.dashboard.directories.right.top.color, title: 'Directory: Right - Top', type: 'color' }),
Option({ opt: options.theme.bar.menus.menu.dashboard.directories.right.middle.color, title: 'Directory: Right - Middle', type: 'color' }),
Option({ opt: options.theme.bar.menus.menu.dashboard.directories.right.bottom.color, title: 'Directory: Right - Bottom', type: 'color' }),
Header('System Stats'),
Option({ opt: options.theme.bar.menus.menu.dashboard.monitors.bar_background, title: 'Bar Background', type: 'color' }),

View File

@@ -7,7 +7,7 @@ export const MenuTheme = () => {
return Widget.Scrollable({
vscroll: "automatic",
hscroll: "never",
class_name: "menu-theme-page",
class_name: "menu-theme-page paged-container",
vexpand: true,
child: Widget.Box({
vertical: true,

View File

@@ -7,7 +7,7 @@ export const MediaMenuTheme = () => {
return Widget.Scrollable({
vscroll: "automatic",
hscroll: "never",
class_name: "menu-theme-page media",
class_name: "menu-theme-page media paged-container",
vexpand: true,
child: Widget.Box({
vertical: true,

View File

@@ -7,7 +7,7 @@ export const NetworkMenuTheme = () => {
return Widget.Scrollable({
vscroll: "automatic",
hscroll: "never",
class_name: "menu-theme-page network",
class_name: "menu-theme-page network paged-container",
vexpand: true,
child: Widget.Box({
vertical: true,

View File

@@ -7,7 +7,7 @@ export const NotificationsMenuTheme = () => {
return Widget.Scrollable({
vscroll: "automatic",
hscroll: "never",
class_name: "menu-theme-page notifications",
class_name: "menu-theme-page notifications paged-container",
vexpand: true,
child: Widget.Box({
vertical: true,

View File

@@ -7,7 +7,7 @@ export const SystrayMenuTheme = () => {
return Widget.Scrollable({
vscroll: "automatic",
hscroll: "never",
class_name: "menu-theme-page systray",
class_name: "menu-theme-page systray paged-container",
vexpand: true,
child: Widget.Box({
vertical: true,

View File

@@ -7,7 +7,7 @@ export const VolumeMenuTheme = () => {
return Widget.Scrollable({
vscroll: "automatic",
hscroll: "never",
class_name: "menu-theme-page volume",
class_name: "menu-theme-page volume paged-container",
vexpand: true,
child: Widget.Box({
vertical: true,

View File

@@ -7,7 +7,7 @@ export const NotificationsTheme = () => {
return Widget.Scrollable({
vscroll: "automatic",
hscroll: "never",
class_name: "notifications-theme-page",
class_name: "notifications-theme-page paged-container",
vexpand: true,
child: Widget.Box({
vertical: true,