LESA/custum-hyprpanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement layout options

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

52
widget/settings/pages/config/bar/index.ts Normal file
View 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' }),
]
})
})
}

4
widget/settings/pages/config/general/index.ts
View File

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

6
widget/settings/pages/theme/bar/index.ts
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' }),

92
widget/settings/pages/theme/index.ts Normal file
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"),
})
]
})
})
}

2
widget/settings/pages/theme/menus/battery.ts
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,

2
widget/settings/pages/theme/menus/bluetooth.ts
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,

2
widget/settings/pages/theme/menus/clock.ts
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,

19
widget/settings/pages/theme/menus/dashboard.ts
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' }),

2
widget/settings/pages/theme/menus/index.ts
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,

2
widget/settings/pages/theme/menus/media.ts
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,

2
widget/settings/pages/theme/menus/network.ts
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,

2
widget/settings/pages/theme/menus/notifications.ts
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,

2
widget/settings/pages/theme/menus/systray.ts
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,

2
widget/settings/pages/theme/menus/volume.ts
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,

2
widget/settings/pages/theme/notifications/index.ts
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,