Implement layout options
This commit is contained in:
Jas Singh
52
widget/settings/pages/config/bar/index.ts
Normal file
52
widget/settings/pages/config/bar/index.ts
Normal file
@@ -0,0 +1,52 @@
|
||||
import { Option } from "widget/settings/shared/Option";
|
||||
import { Header } from "widget/settings/shared/Header";
|
||||
|
||||
import options from "options";
|
||||
|
||||
export const BarSettings = () => {
|
||||
return Widget.Scrollable({
|
||||
vscroll: "always",
|
||||
hscroll: "never",
|
||||
class_name: "menu-theme-page paged-container",
|
||||
child: Widget.Box({
|
||||
vertical: true,
|
||||
children: [
|
||||
Header('Layouts'),
|
||||
Option({ opt: options.bar.layouts, title: 'Bar Layouts for Monitors', subtitle: 'Please refer to the github README for instructions: https://github.com/Jas-SinghFSU/HyprPanel', type: 'object' }, 'bar-layout-input'),
|
||||
|
||||
Header('Dashboard'),
|
||||
Option({ opt: options.bar.launcher.icon, title: 'Dashboard Menu Icon', type: 'string' }),
|
||||
|
||||
Header('Workspaces'),
|
||||
Option({ opt: options.bar.workspaces.show_icons, title: 'Show Workspace Icons', type: 'boolean' }),
|
||||
Option({ opt: options.bar.workspaces.icons.available, title: 'Workspace Available', type: 'string' }),
|
||||
Option({ opt: options.bar.workspaces.icons.active, title: 'Workspace Active', type: 'string' }),
|
||||
Option({ opt: options.bar.workspaces.icons.occupied, title: 'Workspace Occupied', type: 'string' }),
|
||||
Option({ opt: options.bar.workspaces.workspaces, title: 'Total Workspaces', type: 'number' }),
|
||||
Option({ opt: options.bar.workspaces.monitorSpecific, title: 'Monitor Specific', subtitle: 'Only workspaces applicable to the monitor will be displayed', type: 'boolean' }),
|
||||
|
||||
Header('Volume'),
|
||||
Option({ opt: options.bar.volume.label, title: 'Show Volume Percentage', type: 'boolean' }),
|
||||
|
||||
Header('Network'),
|
||||
Option({ opt: options.bar.network.label, title: 'Show Network Name', type: 'boolean' }),
|
||||
|
||||
Header('Bluetooth'),
|
||||
Option({ opt: options.bar.bluetooth.label, title: 'Show Bluetooth Label', type: 'boolean' }),
|
||||
|
||||
Header('Battery'),
|
||||
Option({ opt: options.bar.battery.label, title: 'Show Battery Percentage', type: 'boolean' }),
|
||||
|
||||
Header('System Tray'),
|
||||
// TODO: Figure out how to hand arrays
|
||||
// Option({ opt: options.bar.systray.ignore, title: 'Ignore', subtitle: 'Comma separated string of apps to ignore in the tray', type: 'string' }),
|
||||
|
||||
Header('Clock'),
|
||||
Option({ opt: options.bar.clock.format, title: 'Clock Format', type: 'string' }),
|
||||
|
||||
Header('Notifications'),
|
||||
Option({ opt: options.bar.notifications.show_total, title: 'Show Total # of notifications', type: 'boolean' }),
|
||||
]
|
||||
})
|
||||
})
|
||||
}
|
||||
@@ -5,11 +5,11 @@ import options from "options";
|
||||
|
||||
export const BarGeneral = () => {
|
||||
return Widget.Box({
|
||||
class_name: "bar-theme-page",
|
||||
class_name: "bar-theme-page paged-container",
|
||||
vertical: true,
|
||||
children: [
|
||||
Header('General Settings'),
|
||||
Option({ opt: options.theme.font.name, title: 'Font', type: 'string' }),
|
||||
Option({ opt: options.theme.font.name, title: 'Font', type: 'font' }),
|
||||
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' }),
|
||||
]
|
||||
|
||||
48
widget/settings/pages/config/index.ts
Normal file
48
widget/settings/pages/config/index.ts
Normal file
@@ -0,0 +1,48 @@
|
||||
import { BarGeneral } from "./general/index";
|
||||
import { BarSettings } from "./bar/index";
|
||||
import { ClockMenuSettings } from "./menus/clock";
|
||||
import { DashboardMenuSettings } from "./menus/dashboard";
|
||||
|
||||
type Page = "General" | "Bar" | "Clock Menu" | "Dashboard Menu"
|
||||
const CurrentPage = Variable<Page>("General");
|
||||
|
||||
const pagerMap: Page[] = [
|
||||
"General",
|
||||
"Bar",
|
||||
"Clock Menu",
|
||||
"Dashboard Menu",
|
||||
]
|
||||
|
||||
export const SettingsMenu = () => {
|
||||
return Widget.Box({
|
||||
vertical: true,
|
||||
children: CurrentPage.bind("value").as(v => {
|
||||
return [
|
||||
Widget.Box({
|
||||
class_name: "option-pages-container",
|
||||
hpack: "center",
|
||||
hexpand: true,
|
||||
children: pagerMap.map((page) => {
|
||||
return Widget.Button({
|
||||
hpack: "center",
|
||||
class_name: `pager-button ${v === page ? 'active' : ''}`,
|
||||
label: page,
|
||||
on_primary_click: () => CurrentPage.value = page
|
||||
})
|
||||
})
|
||||
}),
|
||||
Widget.Stack({
|
||||
vexpand: true,
|
||||
class_name: "themes-menu-stack",
|
||||
children: {
|
||||
"General": BarGeneral(),
|
||||
"Bar": BarSettings(),
|
||||
"Clock Menu": ClockMenuSettings(),
|
||||
"Dashboard Menu": DashboardMenuSettings(),
|
||||
},
|
||||
shown: CurrentPage.bind("value")
|
||||
})
|
||||
]
|
||||
})
|
||||
})
|
||||
}
|
||||
20
widget/settings/pages/config/menus/clock.ts
Normal file
20
widget/settings/pages/config/menus/clock.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
import { Option } from "widget/settings/shared/Option";
|
||||
import { Header } from "widget/settings/shared/Header";
|
||||
|
||||
import options from "options";
|
||||
|
||||
export const ClockMenuSettings = () => {
|
||||
return Widget.Box({
|
||||
class_name: "bar-theme-page paged-container",
|
||||
vertical: true,
|
||||
children: [
|
||||
Header('Time'),
|
||||
Option({ opt: options.menus.clock.time.military, title: 'Use 24hr time', type: 'boolean' }),
|
||||
|
||||
Header('Weather'),
|
||||
Option({ opt: options.menus.clock.weather.interval, title: 'Weather Fetching Interval (ms)', subtitle: 'May require AGS restart.', type: 'number' }),
|
||||
Option({ opt: options.menus.clock.weather.unit, title: 'Units', type: 'enum', enums: ['imperial', 'metric'] }),
|
||||
Option({ opt: options.menus.clock.weather.key, title: 'Weather API Key', subtitle: 'May require AGS restart. https://weatherapi.com/', type: 'string' }),
|
||||
]
|
||||
})
|
||||
}
|
||||
61
widget/settings/pages/config/menus/dashboard.ts
Normal file
61
widget/settings/pages/config/menus/dashboard.ts
Normal file
@@ -0,0 +1,61 @@
|
||||
import { Option } from "widget/settings/shared/Option";
|
||||
import { Header } from "widget/settings/shared/Header";
|
||||
|
||||
import options from "options";
|
||||
|
||||
export const DashboardMenuSettings = () => {
|
||||
return Widget.Scrollable({
|
||||
class_name: "bar-theme-page paged-container",
|
||||
vscroll: "always",
|
||||
hscroll: "never",
|
||||
vexpand: true,
|
||||
overlayScrolling: true,
|
||||
child: Widget.Box({
|
||||
vertical: true,
|
||||
children: [
|
||||
Header('Power Menu'),
|
||||
Option({ opt: options.menus.dashboard.powermenu.avatar.image, title: 'Profile Image', type: 'img' }),
|
||||
Option({ opt: options.menus.dashboard.powermenu.avatar.name, title: 'Profile Name', subtitle: 'Use \'system\' to automatically set system name', type: 'string' }),
|
||||
|
||||
Option({ opt: options.menus.dashboard.powermenu.shutdown, title: 'Shutdown Command', type: 'string' }),
|
||||
Option({ opt: options.menus.dashboard.powermenu.reboot, title: 'Reboot Command', type: 'string' }),
|
||||
Option({ opt: options.menus.dashboard.powermenu.logout, title: 'Logout Command', type: 'string' }),
|
||||
Option({ opt: options.menus.dashboard.powermenu.sleep, title: 'Sleep Command', type: 'string' }),
|
||||
|
||||
Header('Shortcuts'),
|
||||
Option({ opt: options.menus.dashboard.shortcuts.left.shortcut1.icon, title: 'Left - Shortcut 1 (Icon)', type: 'string' }),
|
||||
Option({ opt: options.menus.dashboard.shortcuts.left.shortcut1.command, title: 'Left - Shortcut 1 (Command)', type: 'string' }),
|
||||
Option({ opt: options.menus.dashboard.shortcuts.left.shortcut1.tooltip, title: 'Left - Shortcut 1 (Tooltip)', type: 'string' }),
|
||||
Option({ opt: options.menus.dashboard.shortcuts.left.shortcut2.icon, title: 'Left - Shortcut 2 (Icon)', type: 'string' }),
|
||||
Option({ opt: options.menus.dashboard.shortcuts.left.shortcut2.command, title: 'Left - Shortcut 2 (Command)', type: 'string' }),
|
||||
Option({ opt: options.menus.dashboard.shortcuts.left.shortcut2.tooltip, title: 'Left - Shortcut 2 (Tooltip)', type: 'string' }),
|
||||
Option({ opt: options.menus.dashboard.shortcuts.left.shortcut3.icon, title: 'Left - Shortcut 3 (Icon)', type: 'string' }),
|
||||
Option({ opt: options.menus.dashboard.shortcuts.left.shortcut3.command, title: 'Left - Shortcut 3 (Command)', type: 'string' }),
|
||||
Option({ opt: options.menus.dashboard.shortcuts.left.shortcut3.tooltip, title: 'Left - Shortcut 3 (Tooltip)', type: 'string' }),
|
||||
Option({ opt: options.menus.dashboard.shortcuts.left.shortcut4.icon, title: 'Left - Shortcut 4 (Icon)', type: 'string' }),
|
||||
Option({ opt: options.menus.dashboard.shortcuts.left.shortcut4.command, title: 'Left - Shortcut 4 (Command)', type: 'string' }),
|
||||
Option({ opt: options.menus.dashboard.shortcuts.left.shortcut4.tooltip, title: 'Left - Shortcut 4 (Tooltip)', type: 'string' }),
|
||||
Option({ opt: options.menus.dashboard.shortcuts.right.shortcut1.icon, title: 'Right - Shortcut 1 (Icon)', type: 'string' }),
|
||||
Option({ opt: options.menus.dashboard.shortcuts.right.shortcut1.command, title: 'Right - Shortcut 1 (Command)', type: 'string' }),
|
||||
Option({ opt: options.menus.dashboard.shortcuts.right.shortcut1.tooltip, title: 'Right - Shortcut 1 (Tooltip)', type: 'string' }),
|
||||
Option({ opt: options.menus.dashboard.shortcuts.right.shortcut3.icon, title: 'Right - Shortcut 3 (Icon)', type: 'string' }),
|
||||
Option({ opt: options.menus.dashboard.shortcuts.right.shortcut3.command, title: 'Right - Shortcut 3 (Command)', type: 'string' }),
|
||||
Option({ opt: options.menus.dashboard.shortcuts.right.shortcut3.tooltip, title: 'Right - Shortcut 3 (Tooltip)', type: 'string' }),
|
||||
|
||||
Header('Directories'),
|
||||
Option({ opt: options.menus.dashboard.directories.left.directory1.label, title: 'Left - Directory 1 (Label)', type: 'string' }),
|
||||
Option({ opt: options.menus.dashboard.directories.left.directory1.command, title: 'Left - Directory 1 (Command)', type: 'string' }),
|
||||
Option({ opt: options.menus.dashboard.directories.left.directory2.label, title: 'Left - Directory 2 (Label)', type: 'string' }),
|
||||
Option({ opt: options.menus.dashboard.directories.left.directory2.command, title: 'Left - Directory 2 (Command)', type: 'string' }),
|
||||
Option({ opt: options.menus.dashboard.directories.left.directory3.label, title: 'Left - Directory 3 (Label)', type: 'string' }),
|
||||
Option({ opt: options.menus.dashboard.directories.left.directory3.command, title: 'Left - Directory 3 (Command)', type: 'string' }),
|
||||
Option({ opt: options.menus.dashboard.directories.right.directory1.label, title: 'Right - Directory 1 (Label)', type: 'string' }),
|
||||
Option({ opt: options.menus.dashboard.directories.right.directory1.command, title: 'Right - Directory 1 (Command)', type: 'string' }),
|
||||
Option({ opt: options.menus.dashboard.directories.right.directory2.label, title: 'Right - Directory 2 (Label)', type: 'string' }),
|
||||
Option({ opt: options.menus.dashboard.directories.right.directory2.command, title: 'Right - Directory 2 (Command)', type: 'string' }),
|
||||
Option({ opt: options.menus.dashboard.directories.right.directory3.label, title: 'Right - Directory 3 (Label)', type: 'string' }),
|
||||
Option({ opt: options.menus.dashboard.directories.right.directory3.command, title: 'Right - Directory 3 (Command)', type: 'string' }),
|
||||
]
|
||||
})
|
||||
})
|
||||
}
|
||||
15
widget/settings/pages/config/notifications/index.ts
Normal file
15
widget/settings/pages/config/notifications/index.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import { Option } from "widget/settings/shared/Option";
|
||||
import { Header } from "widget/settings/shared/Header";
|
||||
|
||||
import options from "options";
|
||||
|
||||
export const NotificationSettings = () => {
|
||||
return Widget.Box({
|
||||
class_name: "bar-theme-page paged-container",
|
||||
vertical: true,
|
||||
children: [
|
||||
Header('Notification Settings'),
|
||||
Option({ opt: options.notifications.position, title: 'Notification Location', type: 'enum', enums: ['top left', 'top', 'top right', 'bottom right', 'bottom', 'bottom left'] }),
|
||||
]
|
||||
})
|
||||
}
|
||||
Reference in New Issue
Block a user