Implement Setting Dialog - Work in Progress
This commit is contained in:
Jas Singh
17
widget/settings/pages/config/general/index.ts
Normal file
17
widget/settings/pages/config/general/index.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import { Option } from "widget/settings/shared/Option";
|
||||
import { Header } from "widget/settings/shared/Header";
|
||||
|
||||
import options from "options";
|
||||
|
||||
export const BarGeneral = () => {
|
||||
return Widget.Box({
|
||||
class_name: "bar-theme-page",
|
||||
vertical: true,
|
||||
children: [
|
||||
Header('General Settings'),
|
||||
Option({ opt: options.theme.font.name, title: 'Font', type: 'string' }),
|
||||
Option({ opt: options.theme.font.size, title: 'Font Size', type: 'string' }),
|
||||
Option({ opt: options.theme.font.weight, title: 'Font Weight', subtitle: "100, 200, 300, etc.", type: 'number' }),
|
||||
]
|
||||
})
|
||||
}
|
||||
91
widget/settings/pages/theme/bar/index.ts
Normal file
91
widget/settings/pages/theme/bar/index.ts
Normal file
@@ -0,0 +1,91 @@
|
||||
import { Option } from "widget/settings/shared/Option";
|
||||
import { Header } from "widget/settings/shared/Header";
|
||||
|
||||
import options from "options";
|
||||
|
||||
export const BarTheme = () => {
|
||||
return Widget.Scrollable({
|
||||
vscroll: "automatic",
|
||||
hscroll: "never",
|
||||
class_name: "bar-theme-page",
|
||||
vexpand: true,
|
||||
child: Widget.Box({
|
||||
vertical: true,
|
||||
children: [
|
||||
Header('General'),
|
||||
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.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' }),
|
||||
Option({ opt: options.theme.bar.buttons.text, title: 'Button Text', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.icon, title: 'Button Icon', type: 'color' }),
|
||||
|
||||
Header('Dashboard Button'),
|
||||
Option({ opt: options.theme.bar.buttons.dashboard.background, title: 'Background', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.dashboard.hover, title: 'Hover', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.dashboard.icon, title: 'Icon', type: 'color' }),
|
||||
|
||||
Header('Workspaces'),
|
||||
Option({ opt: options.theme.bar.buttons.workspaces.background, title: 'Background', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.workspaces.hover, title: 'Hover', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.workspaces.available, title: 'Workspace Available Color', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.workspaces.occupied, title: 'Workspace Occupied Color', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.workspaces.active, title: 'Workspace Active Color', type: 'color' }),
|
||||
|
||||
Header('Window Title'),
|
||||
Option({ opt: options.theme.bar.buttons.windowtitle.background, title: 'Background', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.windowtitle.hover, title: 'Hover', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.windowtitle.text, title: 'Text', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.windowtitle.icon, title: 'Icon', type: 'color' }),
|
||||
|
||||
Header('Media'),
|
||||
Option({ opt: options.theme.bar.buttons.media.background, title: 'Background', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.media.hover, title: 'Hover', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.media.text, title: 'Text', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.media.icon, title: 'Icon', type: 'color' }),
|
||||
|
||||
Header('Volume'),
|
||||
Option({ opt: options.theme.bar.buttons.volume.background, title: 'Background', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.volume.hover, title: 'Hover', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.volume.text, title: 'Text', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.volume.icon, title: 'Icon', type: 'color' }),
|
||||
|
||||
Header('Network'),
|
||||
Option({ opt: options.theme.bar.buttons.network.background, title: 'Background', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.network.hover, title: 'Hover', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.network.text, title: 'Text', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.network.icon, title: 'Icon', type: 'color' }),
|
||||
|
||||
Header('Bluetooth'),
|
||||
Option({ opt: options.theme.bar.buttons.bluetooth.background, title: 'Background', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.bluetooth.hover, title: 'Hover', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.bluetooth.text, title: 'Text', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.bluetooth.icon, title: 'Icon', type: 'color' }),
|
||||
|
||||
Header('System Tray'),
|
||||
Option({ opt: options.theme.bar.buttons.systray.background, title: 'Background', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.systray.hover, title: 'Hover', type: 'color' }),
|
||||
|
||||
Header('Battery'),
|
||||
Option({ opt: options.theme.bar.buttons.battery.background, title: 'Background', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.battery.hover, title: 'Hover', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.battery.text, title: 'Text', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.battery.icon, title: 'Icon', type: 'color' }),
|
||||
|
||||
Header('Clock'),
|
||||
Option({ opt: options.theme.bar.buttons.clock.background, title: 'Background', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.clock.hover, title: 'Hover', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.clock.text, title: 'Text', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.clock.icon, title: 'Icon', type: 'color' }),
|
||||
|
||||
Header('Notifications'),
|
||||
Option({ opt: options.theme.bar.buttons.notifications.background, title: 'Background', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.notifications.hover, title: 'Hover', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.notifications.total, title: 'Notification Count', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.notifications.icon, title: 'Icon', type: 'color' }),
|
||||
]
|
||||
})
|
||||
})
|
||||
}
|
||||
32
widget/settings/pages/theme/menus/index.ts
Normal file
32
widget/settings/pages/theme/menus/index.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import { Option } from "widget/settings/shared/Option";
|
||||
import { Header } from "widget/settings/shared/Header";
|
||||
|
||||
import options from "options";
|
||||
|
||||
export const MenuTheme = () => {
|
||||
return Widget.Scrollable({
|
||||
vscroll: "automatic",
|
||||
hscroll: "never",
|
||||
class_name: "menu-theme-page",
|
||||
vexpand: true,
|
||||
child: Widget.Box({
|
||||
vertical: true,
|
||||
children: [
|
||||
Header('General'),
|
||||
Option({ opt: options.theme.bar.menus.monochrome, title: 'Use Global Colors', type: 'boolean' }),
|
||||
Option({ opt: options.theme.bar.menus.background, title: 'Background Color', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.menus.cards, title: 'Cards', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.menus.card_radius, title: 'Card Radius', type: 'string' }),
|
||||
Option({ opt: options.theme.bar.menus.text, title: 'Primary Text', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.menus.dimtext, title: 'Dim Text', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.menus.feinttext, title: 'Feint Text', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.menus.label, title: 'Label Color', type: 'color' }),
|
||||
|
||||
Header('Border'),
|
||||
Option({ opt: options.theme.bar.menus.border.size, title: 'Border Width', type: 'string' }),
|
||||
Option({ opt: options.theme.bar.menus.border.radius, title: 'Border Radius', type: 'string' }),
|
||||
Option({ opt: options.theme.bar.menus.border.color, title: 'Border Color', type: 'color' }),
|
||||
]
|
||||
})
|
||||
})
|
||||
}
|
||||
29
widget/settings/pages/theme/notifications/index.ts
Normal file
29
widget/settings/pages/theme/notifications/index.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
import { Option } from "widget/settings/shared/Option";
|
||||
import { Header } from "widget/settings/shared/Header";
|
||||
|
||||
import options from "options";
|
||||
|
||||
export const NotificationsTheme = () => {
|
||||
return Widget.Scrollable({
|
||||
vscroll: "automatic",
|
||||
hscroll: "never",
|
||||
class_name: "notifications-theme-page",
|
||||
vexpand: true,
|
||||
child: Widget.Box({
|
||||
vertical: true,
|
||||
children: [
|
||||
Header('Notifications Theme Settings'),
|
||||
Option({ opt: options.theme.notification.background, title: 'Notification Background', type: 'color' }),
|
||||
Option({ opt: options.theme.notification.actions.background, title: 'Action Button Background', subtitle: 'Buttons that perform actions within a notification', type: 'color' }),
|
||||
Option({ opt: options.theme.notification.actions.text, title: 'Action Button Text Color', type: 'color' }),
|
||||
Option({ opt: options.theme.notification.label, title: 'Label', type: 'color' }),
|
||||
Option({ opt: options.theme.notification.border, title: 'Border', type: 'color' }),
|
||||
Option({ opt: options.theme.notification.time, title: 'Time Stamp', type: 'color' }),
|
||||
Option({ opt: options.theme.notification.text, title: 'Body Text', type: 'color' }),
|
||||
Option({ opt: options.theme.notification.labelicon, title: 'Label Icon', subtitle: 'Icon that accompanies the label. Doesn\'t apply if icon is an app icon.', type: 'color' }),
|
||||
Option({ opt: options.theme.notification.close_button.background, title: 'Dismiss Button', type: 'color' }),
|
||||
Option({ opt: options.theme.notification.close_button.label, title: 'Dismiss Button Text', type: 'color' }),
|
||||
]
|
||||
})
|
||||
})
|
||||
}
|
||||
Reference in New Issue
Block a user