Implement layout options
This commit is contained in:
@@ -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' }),
|
||||
|
||||
92
widget/settings/pages/theme/index.ts
Normal file
92
widget/settings/pages/theme/index.ts
Normal 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"),
|
||||
})
|
||||
]
|
||||
})
|
||||
})
|
||||
}
|
||||
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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' }),
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user