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

81
README.md
View File

@@ -1,4 +1,7 @@
Requirements:
# HyprPanel
A panel built for Hyprland with (Aylur's Gnome Shell)[https://github.com/Aylur/ags]
## Requirements
Bun (may require sudo)
```sh
@@ -33,3 +36,79 @@ python
python-gpustat
```
## Instructions
The HyprPanel comes with a configuration menu which is available by opening the Dashboard menu (click the button in the bar with your Distro's logo) and then clicking the Gear icon;
### Specifying bar layouts per monitor
To specify layouts for each monitor you can create a JSON object such as:
```JSON
{
"0": {
"left": [
"dashboard",
"workspaces",
"windowtitle"
],
"middle": [
"media"
],
"right": [
"volume",
"clock",
"notifications"
]
},
"1": {
"left": [
"dashboard",
"workspaces",
"windowtitle"
],
"middle": [
"media"
],
"right": [
"volume",
"clock",
"notifications"
]
},
"2": {
"left": [
"dashboard",
"workspaces",
"windowtitle"
],
"middle": [
"media"
],
"right": [
"volume",
"network",
"bluetooth",
"systray",
"clock",
"notifications"
]
}
}
```
Where each monitor is defined by its index (0, 1, 2 in this case) and each section (left, middle, right) contains one or more of the following modules:
```js
"battery"
"dashboard"
"workspaces"
"windowtitle"
"media"
"notifications"
"volume"
"network"
"bluetooth"
"clock"
"systray"
```
Since the text-box in the options dialog isn't sufficient, it is recommended that you create this JSON configuration in a text editor elsewhere and paste it into the layout text-box under Configuration > Bar > "Bar Layouts for Monitors".

24
main.ts
View File

@@ -8,16 +8,16 @@ import Notifications from "./modules/notifications/index.js";
import { forMonitors } from "lib/utils"
App.config({
onConfigParsed: () => Utils.execAsync(`python3 ${App.configDir}/services/bluetooth.py`),
windows: [
...MenuWindows,
Notifications(),
SettingsDialog(),
...forMonitors(Bar),
],
closeWindowDelay: {
sideright: 350,
launcher: 350,
bar0: 350,
},
onConfigParsed: () => Utils.execAsync(`python3 ${App.configDir}/services/bluetooth.py`),
windows: [
...MenuWindows,
Notifications(),
SettingsDialog(),
...forMonitors(Bar),
],
closeWindowDelay: {
sideright: 350,
launcher: 350,
bar0: 350,
},
})

163
modules/bar/Bar.ts
View File

@@ -9,71 +9,122 @@ import { Bluetooth } from "./bluetooth/index.js";
import { BatteryLabel } from "./battery/index.js";
import { Clock } from "./clock/index.js";
import { SysTray } from "./systray/index.js";
const hyprland = await Service.import("hyprland");
import { BarItemBox as WidgetContainer } from "../shared/barItemBox.js";
import options from "options";
const { start, center, end } = options.bar.layout;
const { layouts } = options.bar;
export type BarWidget = keyof typeof widget;
type Section = "battery"
| "dashboard"
| "workspaces"
| "windowtitle"
| "media"
| "notifications"
| "volume"
| "network"
| "bluetooth"
| "clock"
| "systray";
type Layout = {
left: Section[],
middle: Section[],
right: Section[],
}
type BarLayout = {
[key: string]: Layout
}
const getModulesForMonitor = (monitor: number, curLayouts: BarLayout) => {
const foundMonitor = Object.keys(curLayouts).find(mon => mon === monitor.toString());
const defaultSetup: Layout = {
left: [
"dashboard",
"workspaces",
"windowtitle"
],
middle: [
"media"
],
right: [
"volume",
"network",
"bluetooth",
"battery",
"systray",
"clock",
"notifications"
]
}
if (foundMonitor === undefined) {
return defaultSetup;
}
return curLayouts[foundMonitor];
}
const widget = {
battery: () => WidgetContainer(BatteryLabel()),
dashboard: () => WidgetContainer(Menu()),
workspaces: (monitor) => WidgetContainer(Workspaces(monitor, 10)),
windowtitle: () => WidgetContainer(ClientTitle()),
media: () => WidgetContainer(Media()),
notifications: () => WidgetContainer(Notifications()),
volume: () => WidgetContainer(Volume()),
network: () => WidgetContainer(Network()),
bluetooth: () => WidgetContainer(Bluetooth()),
clock: () => WidgetContainer(Clock()),
systray: () => WidgetContainer(SysTray()),
battery: () => WidgetContainer(BatteryLabel()),
dashboard: () => WidgetContainer(Menu()),
workspaces: (monitor: number) => WidgetContainer(Workspaces(monitor, 10)),
windowtitle: () => WidgetContainer(ClientTitle()),
media: () => WidgetContainer(Media()),
notifications: () => WidgetContainer(Notifications()),
volume: () => WidgetContainer(Volume()),
network: () => WidgetContainer(Network()),
bluetooth: () => WidgetContainer(Bluetooth()),
clock: () => WidgetContainer(Clock()),
systray: () => WidgetContainer(SysTray()),
};
export const Bar = (monitor: number) => {
return Widget.Window({
name: `bar-${monitor}`,
class_name: "bar",
monitor,
visible: true,
anchor: ["top", "left", "right"],
exclusivity: "exclusive",
child: Widget.CenterBox({
visible: true,
startWidget: Widget.Box({
class_name: "box-left",
spacing: 5,
hexpand: true,
setup: self => {
self.children = start.value.map(w => widget[w](monitor));
self.hook(start, (self) => {
self.children = start.value.map(w => widget[w](monitor));
})
},
}),
centerWidget: Widget.Box({
class_name: "box-center",
hpack: "center",
spacing: 5,
setup: self => {
self.children = center.value.map(w => widget[w](monitor));
self.hook(center, (self) => {
self.children = center.value.map(w => widget[w](monitor));
})
},
}),
endWidget: Widget.Box({
class_name: "box-right",
hpack: "end",
spacing: 5,
setup: self => {
self.children = end.value.map(w => widget[w](monitor));
self.hook(end, (self) => {
self.children = end.value.map(w => widget[w](monitor));
})
},
}),
})
});
return Widget.Window({
name: `bar-${monitor}`,
class_name: "bar",
monitor,
visible: true,
anchor: ["top", "left", "right"],
exclusivity: "exclusive",
child: Widget.CenterBox({
css: 'padding: 1px',
startWidget: Widget.Box({
class_name: "box-left",
hexpand: true,
setup: self => {
self.hook(layouts, (self) => {
const foundLayout = getModulesForMonitor(monitor, layouts.value as BarLayout)
self.children = foundLayout.left.filter(mod => Object.keys(widget).includes(mod)).map(w => widget[w](monitor));
})
},
}),
centerWidget: Widget.Box({
class_name: "box-center",
hpack: "center",
setup: self => {
self.hook(layouts, (self) => {
const foundLayout = getModulesForMonitor(monitor, layouts.value as BarLayout)
self.children = foundLayout.middle.filter(mod => Object.keys(widget).includes(mod)).map(w => widget[w](monitor));
})
},
}),
endWidget: Widget.Box({
class_name: "box-right",
hpack: "end",
setup: self => {
self.hook(layouts, (self) => {
const foundLayout = getModulesForMonitor(monitor, layouts.value as BarLayout)
self.children = foundLayout.right.filter(mod => Object.keys(widget).includes(mod)).map(w => widget[w](monitor));
})
},
}),
})
});
};

2
modules/bar/battery/index.js
View File

@@ -2,7 +2,7 @@ const battery = await Service.import("battery");
import { openMenu } from "../utils.js";
import options from "options";
const { show_label } = options.bar.battery;
const { label: show_label } = options.bar.battery;
const BatteryLabel = () => {
const isVis = Variable(battery.available);

418
modules/menus/dashboard/shortcuts/index.js
View File

@@ -4,222 +4,222 @@ import options from "options";
const { left, right } = options.menus.dashboard.shortcuts;
const Shortcuts = () => {
const isRecording = Variable(false, {
poll: [
1000,
`${App.configDir}/services/screen_record.sh status`,
(out) => {
if (out === "recording") {
return true;
}
return false;
},
],
});
const handleClick = (action, resolver, tOut = 250) => {
App.closeWindow("dashboardmenu");
App.toggleWindow("settings-dialog");
setTimeout(() => {
Utils.execAsync(action)
.then((res) => {
if (typeof resolver === "function") {
return resolver(res);
}
return res;
})
.catch((err) => err);
}, tOut);
};
const recordingDropdown = Widget.Menu({
class_name: "dropdown recording",
hpack: "fill",
hexpand: true,
setup: (self) => {
self.hook(hyprland, () => {
const displays = hyprland.monitors.map((mon) => {
return Widget.MenuItem({
label: `Display ${mon.name}`,
on_activate: () => {
App.closeWindow("dashboardmenu");
Utils.execAsync(
`${App.configDir}/services/screen_record.sh start ${mon.name}`,
).catch((err) => console.error(err));
const isRecording = Variable(false, {
poll: [
1000,
`${App.configDir}/services/screen_record.sh status`,
(out) => {
if (out === "recording") {
return true;
}
return false;
},
});
});
],
});
const handleClick = (action, resolver, tOut = 250) => {
App.closeWindow("dashboardmenu");
const apps = hyprland.clients.map((clt) => {
return Widget.MenuItem({
label: `${clt.class.charAt(0).toUpperCase() + clt.class.slice(1)} (Workspace ${clt.workspace.name})`,
on_activate: () => {
App.closeWindow("dashboardmenu");
Utils.execAsync(
`${App.configDir}/services/screen_record.sh start ${clt.focusHistoryID}`,
).catch((err) => console.error(err));
},
});
});
setTimeout(() => {
Utils.execAsync(action)
.then((res) => {
if (typeof resolver === "function") {
return resolver(res);
}
return (self.children = [
...displays,
// Disabled since window recording isn't available on wayland
// ...apps
]);
});
},
});
return res;
})
.catch((err) => err);
}, tOut);
};
return Widget.Box({
class_name: "shortcuts-container",
hpack: "fill",
hexpand: true,
children: [
Widget.Box({
class_name: "container most-used dashboard-card",
const recordingDropdown = Widget.Menu({
class_name: "dropdown recording",
hpack: "fill",
hexpand: true,
setup: (self) => {
self.hook(hyprland, () => {
const displays = hyprland.monitors.map((mon) => {
return Widget.MenuItem({
label: `Display ${mon.name}`,
on_activate: () => {
App.closeWindow("dashboardmenu");
Utils.execAsync(
`${App.configDir}/services/screen_record.sh start ${mon.name}`,
).catch((err) => console.error(err));
},
});
});
const apps = hyprland.clients.map((clt) => {
return Widget.MenuItem({
label: `${clt.class.charAt(0).toUpperCase() + clt.class.slice(1)} (Workspace ${clt.workspace.name})`,
on_activate: () => {
App.closeWindow("dashboardmenu");
Utils.execAsync(
`${App.configDir}/services/screen_record.sh start ${clt.focusHistoryID}`,
).catch((err) => console.error(err));
},
});
});
return (self.children = [
...displays,
// Disabled since window recording isn't available on wayland
// ...apps
]);
});
},
});
return Widget.Box({
class_name: "shortcuts-container",
hpack: "fill",
hexpand: true,
children: [
Widget.Box({
class_name: "card-button-left-section",
vertical: true,
hexpand: true,
children: [
Widget.Button({
tooltip_text: left.shortcut1.tooltip.bind("value"),
class_name: "dashboard-button top-button",
on_primary_click: left.shortcut1.command
.bind("value")
.as((cmd) => () => handleClick(cmd)),
child: Widget.Label({
class_name: "button-label",
label: left.shortcut1.icon.bind("value"),
}),
}),
Widget.Button({
tooltip_text: left.shortcut2.tooltip.bind("value"),
class_name: "dashboard-button",
on_primary_click: left.shortcut2.command
.bind("value")
.as((cmd) => () => handleClick(cmd)),
child: Widget.Label({
class_name: "button-label",
label: left.shortcut2.icon.bind("value"),
}),
}),
],
}),
Widget.Box({
vertical: true,
hexpand: true,
children: [
Widget.Button({
tooltip_text: left.shortcut3.tooltip.bind("value"),
class_name: "dashboard-button top-button",
on_primary_click: left.shortcut3.command
.bind("value")
.as((cmd) => () => handleClick(cmd)),
child: Widget.Label({
hpack: "center",
class_name: "button-label",
label: left.shortcut3.icon.bind("value"),
}),
}),
Widget.Button({
tooltip_text: left.shortcut4.tooltip.bind("value"),
class_name: "dashboard-button",
on_primary_click: left.shortcut4.command
.bind("value")
.as((cmd) => () => handleClick(cmd)),
child: Widget.Label({
class_name: "button-label",
label: left.shortcut4.icon.bind("value"),
}),
}),
],
}),
Widget.Box({
class_name: "container most-used dashboard-card",
hexpand: true,
children: [
Widget.Box({
class_name: "card-button-left-section",
vertical: true,
hexpand: true,
children: [
Widget.Button({
tooltip_text: left.shortcut1.tooltip.bind("value"),
class_name: "dashboard-button top-button",
on_primary_click: left.shortcut1.command
.bind("value")
.as((cmd) => () => handleClick(cmd)),
child: Widget.Label({
class_name: "button-label",
label: left.shortcut1.icon.bind("value"),
}),
}),
Widget.Button({
tooltip_text: left.shortcut2.tooltip.bind("value"),
class_name: "dashboard-button",
on_primary_click: left.shortcut2.command
.bind("value")
.as((cmd) => () => handleClick(cmd)),
child: Widget.Label({
class_name: "button-label",
label: left.shortcut2.icon.bind("value"),
}),
}),
],
}),
Widget.Box({
vertical: true,
hexpand: true,
children: [
Widget.Button({
tooltip_text: left.shortcut3.tooltip.bind("value"),
class_name: "dashboard-button top-button",
on_primary_click: left.shortcut3.command
.bind("value")
.as((cmd) => () => handleClick(cmd)),
child: Widget.Label({
hpack: "center",
class_name: "button-label",
label: left.shortcut3.icon.bind("value"),
}),
}),
Widget.Button({
tooltip_text: left.shortcut4.tooltip.bind("value"),
class_name: "dashboard-button",
on_primary_click: left.shortcut4.command
.bind("value")
.as((cmd) => () => handleClick(cmd)),
child: Widget.Label({
class_name: "button-label",
label: left.shortcut4.icon.bind("value"),
}),
}),
],
}),
],
}),
Widget.Box({
class_name: "container utilities dashboard-card",
hexpand: true,
children: [
Widget.Box({
class_name: "card-button-left-section",
vertical: true,
hexpand: true,
children: [
Widget.Button({
tooltip_text: right.shortcut1.tooltip.bind("value"),
class_name: "dashboard-button top-button",
on_primary_click: right.shortcut1.command
.bind("value")
.as((cmd) => () => handleClick(cmd)),
child: Widget.Label({
class_name: "button-label",
label: right.shortcut1.icon.bind("value"),
}),
}),
Widget.Button({
tooltip_text: "HyprPanel Configuration",
class_name: "dashboard-button",
on_primary_click: () => {
App.closeWindow("dashboardmenu");
App.toggleWindow("settings-dialog");
},
child: Widget.Label({
class_name: "button-label",
label: "󰒓",
}),
}),
],
}),
Widget.Box({
vertical: true,
hexpand: true,
children: [
Widget.Button({
tooltip_text: right.shortcut3.tooltip.bind("value"),
class_name: "dashboard-button top-button",
on_primary_click: right.shortcut3.command
.bind("value")
.as((cmd) => () => handleClick(cmd)),
child: Widget.Label({
class_name: "button-label",
label: right.shortcut3.icon.bind("value"),
}),
}),
Widget.Button({
tooltip_text: "Record Screen",
class_name: isRecording
.bind("value")
.as((v) => `dashboard-button record ${v ? "active" : ""}`),
setup: (self) => {
self.hook(isRecording, () => {
self.toggleClassName("hover", true);
self.on_primary_click = (_, event) => {
if (isRecording.value === true) {
App.closeWindow("dashboardmenu");
return Utils.execAsync(
`${App.configDir}/services/screen_record.sh stop`,
).catch((err) => console.error(err));
} else {
recordingDropdown.popup_at_pointer(event);
}
};
});
},
child: Widget.Label({
class_name: "button-label",
label: "󰑊",
}),
}),
],
}),
],
}),
],
}),
Widget.Box({
class_name: "container utilities dashboard-card",
hexpand: true,
children: [
Widget.Box({
class_name: "card-button-left-section",
vertical: true,
hexpand: true,
children: [
Widget.Button({
tooltip_text: right.shortcut1.tooltip.bind("value"),
class_name: "dashboard-button top-button",
on_primary_click: right.shortcut1.command
.bind("value")
.as((cmd) => () => handleClick(cmd)),
child: Widget.Label({
class_name: "button-label",
label: right.shortcut1.icon.bind("value"),
}),
}),
Widget.Button({
tooltip_text: right.shortcut2.tooltip.bind("value"),
class_name: "dashboard-button",
on_primary_click: right.shortcut2.command
.bind("value")
.as((cmd) => () => handleClick(cmd)),
child: Widget.Label({
class_name: "button-label",
label: right.shortcut2.icon.bind("value"),
}),
}),
],
}),
Widget.Box({
vertical: true,
hexpand: true,
children: [
Widget.Button({
tooltip_text: right.shortcut3.tooltip.bind("value"),
class_name: "dashboard-button top-button",
on_primary_click: right.shortcut3.command
.bind("value")
.as((cmd) => () => handleClick(cmd)),
child: Widget.Label({
class_name: "button-label",
label: right.shortcut3.icon.bind("value"),
}),
}),
Widget.Button({
tooltip_text: "Record Screen",
class_name: isRecording
.bind("value")
.as((v) => `dashboard-button record ${v ? "active" : ""}`),
setup: (self) => {
self.hook(isRecording, () => {
self.toggleClassName("hover", true);
self.on_primary_click = (_, event) => {
if (isRecording.value === true) {
App.closeWindow("dashboardmenu");
return Utils.execAsync(
`${App.configDir}/services/screen_record.sh stop`,
).catch((err) => console.error(err));
} else {
recordingDropdown.popup_at_pointer(event);
}
};
});
},
child: Widget.Label({
class_name: "button-label",
label: "󰑊",
}),
}),
],
}),
],
}),
],
});
});
};
export { Shortcuts };

5
modules/notifications/index.js
View File

@@ -11,13 +11,16 @@ const { position } = options.notifications;
export default () => {
notifs.popupTimeout = 7000;
const getPosition = (pos) => {
return pos.split(" ");
}
return Widget.Window({
name: "notifications-window",
class_name: "notifications-window",
monitor: 2,
layer: "top",
anchor: position.bind("value"),
anchor: position.bind("value").as(v => getPosition(v)),
exclusivity: "ignore",
child: Widget.Box({
class_name: "notification-card-container",

90
options.ts
View File

@@ -58,6 +58,7 @@ const options = mkOptions(OPTIONS, {
background: opt(colors.crust),
buttons: {
monochrome: opt(false),
spacing: opt("0.25em"),
radius: opt("0.3em"),
background: opt(colors.base2),
hover: opt(colors.surface1),
@@ -129,7 +130,7 @@ const options = mkOptions(OPTIONS, {
},
},
menus: {
monochrome: opt(true),
monochrome: opt(false),
background: opt(colors.crust),
cards: opt(colors.base),
card_radius: opt("0.4em"),
@@ -163,7 +164,7 @@ const options = mkOptions(OPTIONS, {
},
iconbuttons: {
passive: opt(colors.text),
active: opt(colors.lavender)
active: opt(colors.pink)
},
progressbar: {
foreground: opt(colors.lavender),
@@ -411,10 +412,11 @@ const options = mkOptions(OPTIONS, {
card: opt(colors.base),
background: opt(colors.crust),
border: opt(colors.surface0),
label: opt(colors.green),
label: opt(colors.lavender),
body: opt(colors.text),
confirm: opt(colors.green),
deny: opt(colors.red),
button_text: opt(colors.crust),
}
},
shortcuts: {
@@ -513,25 +515,56 @@ const options = mkOptions(OPTIONS, {
},
bar: {
layout: {
start: opt<Array<import("modules/bar/Bar").BarWidget>>([
"dashboard",
"workspaces",
"windowtitle"
]),
center: opt<Array<import("modules/bar/Bar").BarWidget>>([
"media"
]),
end: opt<Array<import("modules/bar/Bar").BarWidget>>([
"volume",
"network",
"bluetooth",
"battery",
"systray",
"clock",
"notifications"
]),
},
layouts: opt({
"0": {
left: [
"dashboard",
"workspaces",
"windowtitle"
],
middle: [
"media"
],
right: [
"volume",
"clock",
"notifications"
]
},
"1": {
left: [
"dashboard",
"workspaces",
"windowtitle"
],
middle: [
"media"
],
right: [
"volume",
"clock",
"notifications"
]
},
"2": {
left: [
"dashboard",
"workspaces",
"windowtitle"
],
middle: [
"media"
],
right: [
"volume",
"network",
"bluetooth",
"systray",
"clock",
"notifications"
]
}
}),
launcher: {
icon: opt("󰣇"),
},
@@ -555,7 +588,7 @@ const options = mkOptions(OPTIONS, {
label: opt(true),
},
battery: {
show_label: opt(true),
label: opt(true),
},
systray: {
ignore: opt([
@@ -612,11 +645,6 @@ const options = mkOptions(OPTIONS, {
tooltip: opt("Color Picker"),
command: opt("hyprpicker -a")
},
shortcut2: {
icon: opt("󰒓"),
tooltip: opt("Hyprland Config"),
command: opt("bash -c \"kitty -e nvim $HOME/.config/hypr/hyprland.conf\"")
},
shortcut3: {
icon: opt("󰄀"),
tooltip: opt("Screenshot"),
@@ -660,8 +688,8 @@ const options = mkOptions(OPTIONS, {
military: opt(false),
},
weather: {
interval: opt(60_000),
unit: opt<"metric" | "imperial">("metric"),
interval: opt(60000),
unit: opt<"metric" | "imperial">("imperial"),
key: opt<string>(
JSON.parse(Utils.readFile(`${App.configDir}/.weather.json`) || "{}")?.weather_api_key || "",
),
@@ -686,7 +714,7 @@ const options = mkOptions(OPTIONS, {
},
notifications: {
position: opt<Array<"top" | "bottom" | "left" | "right">>(["top", "right"]),
position: opt<"top" | "top right" | "top left" | "bottom" | "bottom right" | "bottom left">("top right"),
},
})

2
scss/style/bar/bar.scss
View File

@@ -12,7 +12,7 @@
background-color: $bar-buttons-background;
border-radius: $bar-buttons-radius;
padding: 0.2rem 0.9rem;
margin: 0.5rem 0.25rem;
margin: 0.5rem $bar-buttons-spacing;
&:hover {
background: $bar-buttons-hover;

2
scss/style/menus/calendar.scss
View File

@@ -12,7 +12,7 @@
}
.calendar-menu-item-container {
border-radius: 0.4em;
border-radius: $bar-menus-card_radius;
margin-bottom: 1.35em;
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-clock-card-color);
}

5
scss/style/menus/media.scss
View File

@@ -14,7 +14,7 @@
}
.menu-items-section {
border-radius: 0.4em;
border-radius: $bar-menus-card_radius;
padding: 0em;
}
@@ -108,6 +108,9 @@
background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-media-slider-primary);
}
}
slider {
background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-media-slider-puck);
}
&:hover {
trough {

4
scss/style/menus/notifications.scss
View File

@@ -3,7 +3,7 @@
.notification-card-container.menu {
margin: 0em;
min-width: 30.5em;
min-width: 30.6em;
min-height: 48em;
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-notifications-background);
border: 0.13em solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-notifications-border);
@@ -24,7 +24,7 @@
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-notifications-card);
margin: 1em 1em;
margin-bottom: 0.5em;
border-radius: 0.4em;
border-radius: $bar-menus-card_radius;
padding: 0.4em 0.75em;
}

31
scss/style/menus/power.scss
View File

@@ -1,4 +1,5 @@
@import "../colors";
@import '../../variables';
window#powermenu,
window#verification {
@@ -10,14 +11,14 @@ $popover-padding: 0.6rem * 1.6;
window#verification .verification {
@include floating-widget;
background: $crust;
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-dashboard-powermenu-confirmation-background);
padding: 0.35em * 1.6 * 1.5;
min-width: 20em;
min-height: 6em;
font-size: 1.3em;
.verification-content {
background: $base;
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-dashboard-powermenu-confirmation-card);
border-radius: 0.4em;
padding: 1em;
}
@@ -27,12 +28,12 @@ window#verification .verification {
.title {
font-size: 1.5em;
color: $lavender;
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-powermenu-confirmation-label);
margin-bottom: 0.5em;
}
.desc {
color: $text;
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-dashboard-powermenu-confirmation-body);
font-size: 1em;
margin-bottom: 0.55em;
padding: 1em 3em;
@@ -40,7 +41,7 @@ window#verification .verification {
}
.verification-button {
background: $base;
background: $bar-menus-buttons-default;
padding: 0.7em 0em;
margin: 0.4em 1.7em;
border-radius: 0.3em;
@@ -49,40 +50,40 @@ window#verification .verification {
transition: opacity .3s ease-in-out;
&.bar-verification_yes {
background-color: $green;
background-color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-confirmation-confirm);
}
&.bar-verification_no {
background-color: $red;
background-color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-confirmation-deny);
}
&:hover {
&.bar-verification_yes {
background: $lavender;
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-confirmation-confirm), 0.6);
transition: background-color 0.2s ease-in-out;
}
&.bar-verification_no {
background: $lavender;
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-confirmation-deny), 0.6);
transition: background-color 0.2s ease-in-out;
}
}
&:focus {
&.bar-verification_yes{
background: $lavender;
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-confirmation-confirm), 0.6);
transition: background 0.2s ease-in-out;
}
&.bar-verification_no {
background: $lavender;
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-confirmation-deny), 0.6);
transition: background 0.2s ease-in-out;
}
}
&:active {
&.bar-verification_yes {
background: rgb($lavender, 0.4);
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-confirmation-confirm), 0.6);
transition: background 0.2s ease-in-out;
}
&.bar-verification_no {
background: rgb($lavender, 0.4);
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-confirmation-deny), 0.6);
transition: background 0.2s ease-in-out;
}
@@ -97,10 +98,10 @@ window#verification .verification {
}
}
.bar-verification_no label {
color: $mantle;
color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-powermenu-confirmation-button_text);
}
.bar-verification_yes label {
color: $mantle;
color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-powermenu-confirmation-button_text);
}
}

428
scss/style/settings/dialog.scss
View File

@@ -1,172 +1,320 @@
@import '../../variables';
window.settings-dialog {
background-color: $bar-menus-cards;
color: $bar-menus-text;
background-color: $bar-menus-cards;
color: $bar-menus-text;
$padding: 1em;
$primary_bg: $bar-menus-background;
$spacing: 0.4em;
$radius: 0.5em;
$widget-bg: $bar-menus-cards;
$border: none;
$fg: $bar-menus-text;
$padding: 1em;
$primary_bg: $bar-menus-background;
$spacing: 0.4em;
$radius: 0.5em;
$widget-bg: $bar-menus-cards;
$border: none;
$fg: $bar-menus-text;
.header {
.header {
background-color: $bar-menus-background;
padding: $padding;
padding: $padding;
button {
font-weight: bold;
padding: $padding*.5 $padding;
button {
font-weight: bold;
}
button.close {
padding: $padding * .5;
}
button.reset {
padding: $padding*.5;
}
}
.page {
button.close {
color: $bar-menus-iconbuttons-passive;
image {
font-size: 2em;
}
.page-content {
padding: $padding*2;
padding-top: 0;
}
&:hover {
color: $bar-menus-iconbuttons-active;
}
}
.group {
.group-title {
color: $primary-bg;
margin-bottom: $spacing*.5;
}
button.reset {
color: $bar-menus-iconbuttons-passive;
padding: $padding*.5;
image {
font-size: 1.25em;
}
.group-reset {
margin: $spacing * .5;
padding: $padding * .5;
&:hover {
color: $bar-menus-iconbuttons-active;
}
}
}
&:disabled {
color: transparent;
}
}
.page {
&:not(:first-child) {
margin-top: $spacing;
}
.page-content {
padding: $padding*2;
padding-top: 0;
}
}
.group {
.group-title {
color: $primary-bg;
margin-bottom: $spacing*.5;
}
.row {
.group-reset {
margin: $spacing * .5;
padding: $padding * .5;
&:disabled {
color: transparent;
}
}
&:not(:first-child) {
margin-top: $spacing;
}
}
.row {
background-color: $widget-bg;
padding: $padding;
border: $border;
border-top: none;
&:first-child {
border-radius: $radius $radius 0em 0em;
border: $border;
}
&:last-child {
border-radius: 0em 0em $radius $radius;
}
&:first-child:last-child {
border-radius: $radius;
border: $border;
}
button.reset {
margin-left: $spacing;
}
label.id,
label.note {
color: transparentize($fg, .4)
}
entry,
button {
padding: $padding;
}
spinbutton {
entry {
border-radius: $radius 0em 0em $radius;
}
button {
border-radius: 0em;
}
button:last-child {
border-radius: 0em $radius $radius 0em;
}
}
.enum-setter {
label {
background-color: $widget-bg;
padding: $padding;
border: $border;
border-top: none;
padding: 0em $padding;
border-radius: $radius 0em 0em $radius;
}
&:first-child {
border-radius: $radius $radius 0em 0em;
border: $border;
}
button {
border-radius: 0em;
}
&:last-child {
border-radius: 0em 0em $radius $radius;
}
&:first-child:last-child {
border-radius: $radius;
border: $border;
}
button.reset {
margin-left: $spacing;
}
label.id,
label.note {
color: transparentize($fg, .4)
}
entry,
button {
padding: $padding;
}
spinbutton {
entry {
border-radius: $radius 0em 0em $radius;
}
button {
border-radius: 0em;
}
button:last-child {
border-radius: 0em $radius $radius 0em;
}
}
.enum-setter {
label {
background-color: $widget-bg;
border: $border;
padding: 0em $padding;
border-radius: $radius 0em 0em $radius;
}
button {
border-radius: 0em;
}
button:last-child {
border-radius: 0em $radius $radius 0em;
}
}
&.wallpaper {
button {
margin-top: $spacing * .5;
}
.preview {
border-radius: $radius;
}
}
button:last-child {
border-radius: 0em $radius $radius 0em;
}
}
&.wallpaper {
button {
margin-top: $spacing * .5;
}
.preview {
border-radius: $radius;
}
}
}
}
.option-item {
margin: 0em 2em;
margin-bottom: 1em;
margin: 0em 2em;
margin-bottom: 1em;
.reset {
color: $bar-menus-iconbuttons-passive;
}
.options-label {
color: $bar-menus-text;
}
.options-sublabel {
font-size: 0.75em;
margin-top: 0.2em;
color: $bar-menus-dimtext;
}
.inputter-container {
border-radius: $bar-menus-border-radius * 0.5;
:first-child {
border-radius: $bar-menus-border-radius * 0.5;
}
padding: 0.35em 0.35em;
background: $surface1;
margin-right: 1em;
.reset {
color: $bar-menus-iconbuttons-passive;
}
.options-label {
color: $bar-menus-text;
}
.options-sublabel {
font-size: 0.75em;
margin-top: 0.2em;
color: $bar-menus-dimtext;
}
.inputter-container {
border-radius: $bar-menus-border-radius * 0.5;
:first-child {
border-radius: $bar-menus-border-radius * 0.5;
}
padding: 0.35em 0.35em;
background: $surface1;
margin-right: 1em;
}
}
.options-header {
margin: 1em 1em;
.label-name {
color: $bar-menus-label;
font-size: 0.9em;
margin-right: 0.5em;
}
margin: 1em 1em;
.label-name {
color: $bar-menus-label;
font-size: 0.9em;
margin-right: 0.5em;
}
}
.pager-button {
margin: 0.5em 0.75em;
&.category label{
font-size: 1.4em;
}
&:hover {
color: $bar-menus-iconbuttons-active;
}
&.active {
color: $bar-menus-iconbuttons-active;
}
}
.bar-theme-page { min-height: 40em;
}
.settings-menu-stack {
background: $red;
}
.paged-container {
scrollbar {
margin-right: 0.2em;
min-width: 0.6em;
border-radius: $bar-menus-border-radius;
background: $bar-menus-background;
slider {
min-width: 0.6em;
border-radius: $bar-menus-border-radius;
background: $bar-menus-buttons-default;
}
}
selection {
background: $bar-menus-background;
}
switch {
font-size: 10px;
&:checked {
background: $bar-menus-switch-enabled;
}
slider {
background-color: $bar-menus-switch-puck;
}
&:active {
background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-bluetooth-switch-enabled);
}
}
entry {
min-width: 15em;
}
}
dialog {
background: $bar-menus-cards;
headerbar {
border-bottom: 0.075em solid $bar-menus-border-color;
background: $bar-menus-cards;
padding: 0.5em;
font-size: 1.5em;
button {
color: $bar-menus-buttons-text;
min-width: 4.5em;
min-height: 2.5em;
border-radius: $bar-menus-border-radius;
background: $bar-menus-buttons-default;
&:hover {
background: transparentize($bar-menus-buttons-default, 0.5);
}
}
}
viewport {
border-right: .25em solid $bar-menus-border-color;
list {
row {
padding: 0em 1.5em;
&:hover {
background: $bar-menus-buttons-default;
color: $bar-menus-buttons-text;
}
label {
margin: 0.5em 0.5em;
font-size: 0.85em;
}
}
}
}
stack {
.horizontal .path-bar {
button {
background: $bar-menus-iconbuttons-active;
min-width: 3em;
min-height: 2em;
border-radius: $bar-menus-border-radius / 2;
&:disabled {
background: $bar-menus-buttons-disabled;
}
&:hover {
background: transparentize($bar-menus-buttons-active, 0.5);
}
label {
margin: 0em 0.25em;
color: $bar-menus-buttons-text
}
image {
margin: 0em 0.5em;
color: $bar-menus-buttons-text
}
margin: 0.25em;
}
}
}
treeview header button{
padding: 0.25em;
border: .15em solid $bar-menus-border-color;
}
headerbar {
color: $bar-menus-label;
}
}

16
scss/variables.scss
View File

@@ -14,6 +14,7 @@ $notification-close_button-label: #11111b;
$bar-transparent: false;
$bar-background: #11111b;
$bar-buttons-monochrome: false;
$bar-buttons-spacing: 0.25em;
$bar-buttons-radius: 0.3em;
$bar-buttons-background: #242438;
$bar-buttons-hover: #45475a;
@@ -61,7 +62,7 @@ $bar-buttons-notifications-background: #242438;
$bar-buttons-notifications-hover: #45475a;
$bar-buttons-notifications-icon: #b4befe;
$bar-buttons-notifications-total: #b4befe;
$bar-menus-monochrome: true;
$bar-menus-monochrome: false;
$bar-menus-background: #11111b;
$bar-menus-cards: #1e1e2e;
$bar-menus-card_radius: 0.4em;
@@ -84,13 +85,7 @@ $bar-menus-buttons-active: #f5c2e7;
$bar-menus-buttons-disabled: #585b70;
$bar-menus-buttons-text: #11111b;
$bar-menus-iconbuttons-passive: #cdd6f4;
$bar-menus-iconbuttons-active: #b4befe;
$bar-menus-dashboard-background: #242438;
$bar-menus-dashboard-text: #f9e2af;
$bar-menus-workspaces-background: #242438;
$bar-menus-workspaces-available: #89dceb;
$bar-menus-workspaces-occupied: #f2cdcd;
$bar-menus-workspaces-active: #f5c2e7;
$bar-menus-iconbuttons-active: #f5c2e7;
$bar-menus-progressbar-foreground: #b4befe;
$bar-menus-progressbar-background: #45475a;
$bar-menus-slider-primary: #b4befe;
@@ -162,7 +157,6 @@ $bar-menus-menu-bluetooth-icons-passive: #9399b2;
$bar-menus-menu-bluetooth-icons-active: #89dceb;
$bar-menus-menu-bluetooth-iconbutton-passive: #cdd6f4;
$bar-menus-menu-bluetooth-iconbutton-active: #89dceb;
$bar-menus-menu-systray-background-color: #242438;
$bar-menus-menu-systray-dropdownmenu-background: #11111b;
$bar-menus-menu-systray-dropdownmenu-text: #cdd6f4;
$bar-menus-menu-systray-dropdownmenu-divider: #1e1e2e;
@@ -206,7 +200,6 @@ $bar-menus-menu-clock-weather-hourly-temperature: #f5c2e7;
$bar-menus-menu-dashboard-card-color: #1e1e2e;
$bar-menus-menu-dashboard-background-color: #11111b;
$bar-menus-menu-dashboard-border-color: #313244;
$bar-menus-menu-dashboard-profile-card: #1e1e2e;
$bar-menus-menu-dashboard-profile-name: #f5c2e7;
$bar-menus-menu-dashboard-powermenu-shutdown: #f38ba8;
$bar-menus-menu-dashboard-powermenu-restart: #fab387;
@@ -215,10 +208,11 @@ $bar-menus-menu-dashboard-powermenu-sleep: #89dceb;
$bar-menus-menu-dashboard-powermenu-confirmation-card: #1e1e2e;
$bar-menus-menu-dashboard-powermenu-confirmation-background: #11111b;
$bar-menus-menu-dashboard-powermenu-confirmation-border: #313244;
$bar-menus-menu-dashboard-powermenu-confirmation-label: #a6e3a1;
$bar-menus-menu-dashboard-powermenu-confirmation-label: #b4befe;
$bar-menus-menu-dashboard-powermenu-confirmation-body: #cdd6f4;
$bar-menus-menu-dashboard-powermenu-confirmation-confirm: #a6e3a1;
$bar-menus-menu-dashboard-powermenu-confirmation-deny: #f38ba8;
$bar-menus-menu-dashboard-powermenu-confirmation-button_text: #11111b;
$bar-menus-menu-dashboard-shortcuts-background: #b4befe;
$bar-menus-menu-dashboard-shortcuts-text: #11111b;
$bar-menus-menu-dashboard-shortcuts-recording: #a6e3a1;

34
tsconfig.json
View File

@@ -1,19 +1,19 @@
{
"compilerOptions": {
"allowImportingTsExtensions": true,
"target": "ES2022",
"module": "ES2022",
"lib": [
"ES2022"
],
"allowJs": true,
"checkJs": true,
"strict": true,
"noImplicitAny": false,
"baseUrl": ".",
"typeRoots": [
"./types"
],
"skipLibCheck": true
}
"compilerOptions": {
"allowImportingTsExtensions": true,
"target": "ES2022",
"module": "ES2022",
"lib": [
"ES2022"
],
"allowJs": true,
"checkJs": true,
"strict": true,
"noImplicitAny": false,
"baseUrl": ".",
"typeRoots": [
"./types"
],
"skipLibCheck": true
}
}

52
widget/settings/SettingsDialog.ts
View File

@@ -1,7 +1,18 @@
import RegularWindow from "widget/RegularWindow"
import icons from "lib/icons"
import options from "options"
import { BarTheme } from "./pages/theme/bar/index"
import { ThemesMenu } from "./pages/theme/index"
import { SettingsMenu } from "./pages/config/index"
type Page = "Configuration" | "Theming"
const CurrentPage = Variable<Page>("Theming");
const pagerMap: Page[] = [
"Configuration",
"Theming",
]
const Header = () => Widget.CenterBox({
class_name: "header",
start_widget: Widget.Button({
@@ -24,6 +35,41 @@ const Header = () => Widget.CenterBox({
}),
})
const PageContainer = () => {
return Widget.Box({
hpack: "fill",
hexpand: true,
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({
xalign: 0,
hpack: "center",
class_name: `pager-button ${v === page ? 'active' : ''} category`,
label: page,
on_primary_click: () => CurrentPage.value = page
})
})
}),
Widget.Stack({
vexpand: false,
class_name: "themes-menu-stack",
children: {
"Configuration": SettingsMenu(),
"Theming": ThemesMenu(),
},
shown: CurrentPage.bind("value")
})
]
})
})
}
export default () => RegularWindow({
name: "settings-dialog",
class_name: "settings-dialog",
@@ -33,13 +79,13 @@ export default () => RegularWindow({
win.hide()
return true
})
win.set_default_size(500, 600)
win.set_default_size(200, 300)
},
child: Widget.Box({
vertical: true,
children: [
Header(),
BarTheme()
PageContainer()
],
}),
})

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,

198
widget/settings/shared/Inputter.ts
View File

@@ -3,115 +3,119 @@ import Gdk from "gi://Gdk"
import icons from "lib/icons"
export type RowProps<T> = {
opt: Opt<T>
title: string
note?: string
type?:
| "number"
| "color"
| "float"
| "object"
| "string"
| "enum"
| "boolean"
| "img"
| "font"
enums?: string[]
max?: number
min?: number
opt: Opt<T>
title: string
note?: string
type?:
| "number"
| "color"
| "float"
| "object"
| "string"
| "enum"
| "boolean"
| "img"
| "font"
enums?: string[]
max?: number
min?: number
}
const EnumSetter = (opt: Opt<string>, values: string[]) => {
const lbl = Widget.Label({ label: opt.bind().as(v => `${v}`) })
const step = (dir: 1 | -1) => {
const i = values.findIndex(i => i === lbl.label)
opt.setValue(dir > 0
? i + dir > values.length - 1 ? values[0] : values[i + dir]
: i + dir < 0 ? values[values.length - 1] : values[i + dir],
)
}
const next = Widget.Button({
child: Widget.Icon(icons.ui.arrow.right),
on_clicked: () => step(+1),
})
const prev = Widget.Button({
child: Widget.Icon(icons.ui.arrow.left),
on_clicked: () => step(-1),
})
return Widget.Box({
class_name: "enum-setter",
children: [lbl, prev, next],
})
const lbl = Widget.Label({ label: opt.bind().as(v => `${v}`) })
const step = (dir: 1 | -1) => {
const i = values.findIndex(i => i === lbl.label)
opt.setValue(dir > 0
? i + dir > values.length - 1 ? values[0] : values[i + dir]
: i + dir < 0 ? values[values.length - 1] : values[i + dir],
)
}
const next = Widget.Button({
child: Widget.Icon(icons.ui.arrow.right),
on_clicked: () => step(+1),
})
const prev = Widget.Button({
child: Widget.Icon(icons.ui.arrow.left),
on_clicked: () => step(-1),
})
return Widget.Box({
class_name: "enum-setter",
children: [lbl, prev, next],
})
}
export const Inputter = <T>({
opt,
type = typeof opt.value as RowProps<T>["type"],
enums,
max = 1000,
min = 0,
}: RowProps<T>) => {
return Widget.Box({
class_name: "inputter-container",
setup: self => {
opt,
type = typeof opt.value as RowProps<T>["type"],
enums,
max = 1000000,
min = 0,
}: RowProps<T>,
className: string
) => {
return Widget.Box({
class_name: "inputter-container",
setup: self => {
switch (type) {
case "number": return self.child = Widget.SpinButton({
setup(self) {
self.set_range(min, max)
self.set_increments(1, 5)
self.on("value-changed", () => opt.value = self.value as T)
self.hook(opt, () => self.value = opt.value as number)
},
})
switch (type) {
case "number": return self.child = Widget.SpinButton({
setup(self) {
self.set_range(min, max)
self.set_increments(1, 5)
self.on("value-changed", () => opt.value = self.value as T)
self.hook(opt, () => self.value = opt.value as number)
},
})
case "float":
case "object": return self.child = Widget.Entry({
on_accept: self => opt.value = JSON.parse(self.text || ""),
setup: self => self.hook(opt, () => self.text = JSON.stringify(opt.value)),
})
case "float":
case "object": return self.child = Widget.Entry({
class_name: className,
on_accept: self => opt.value = JSON.parse(self.text || ""),
setup: self => self.hook(opt, () => self.text = JSON.stringify(opt.value)),
})
case "string": return self.child = Widget.Entry({
on_accept: self => opt.value = self.text as T,
setup: self => self.hook(opt, () => self.text = opt.value as string),
})
case "string": return self.child = Widget.Entry({
on_accept: self => opt.value = self.text as T,
setup: self => self.hook(opt, () => self.text = opt.value as string),
})
case "enum": return self.child = EnumSetter(opt as unknown as Opt<string>, enums!)
case "boolean": return self.child = Widget.Switch()
.on("notify::active", self => opt.value = self.active as T)
.hook(opt, self => self.active = opt.value as boolean)
case "enum": return self.child = EnumSetter(opt as unknown as Opt<string>, enums!)
case "boolean": return self.child = Widget.Switch()
.on("notify::active", self => opt.value = self.active as T)
.hook(opt, self => self.active = opt.value as boolean)
case "img": return self.child = Widget.FileChooserButton({
on_file_set: ({ uri }) => { opt.value = uri!.replace("file://", "") as T },
})
case "img": return self.child = Widget.FileChooserButton({
class_name: "image-chooser",
on_file_set: ({ uri }) => { opt.value = uri!.replace("file://", "") as T },
})
case "font": return self.child = Widget.FontButton({
show_size: false,
use_size: false,
setup: self => self
.hook(opt, () => self.font = opt.value as string)
.on("font-set", ({ font }) => opt.value = font!
.split(" ").slice(0, -1).join(" ") as T),
})
case "font": return self.child = Widget.FontButton({
show_size: false,
use_size: false,
setup: self => self
.hook(opt, () => self.font = opt.value as string)
.on("font-set", ({ font }) => opt.value = font!
.split(" ").slice(0, -1).join(" ") as T),
})
case "color": return self.child = Widget.ColorButton()
.hook(opt, self => {
const rgba = new Gdk.RGBA()
rgba.parse(opt.value as string)
self.rgba = rgba
})
.on("color-set", ({ rgba: { red, green, blue } }) => {
const hex = (n: number) => {
const c = Math.floor(255 * n).toString(16)
return c.length === 1 ? `0${c}` : c
case "color": return self.child = Widget.ColorButton()
.hook(opt, self => {
const rgba = new Gdk.RGBA()
rgba.parse(opt.value as string)
self.rgba = rgba
})
.on("color-set", ({ rgba: { red, green, blue } }) => {
const hex = (n: number) => {
const c = Math.floor(255 * n).toString(16)
return c.length === 1 ? `0${c}` : c
}
opt.value = `#${hex(red)}${hex(green)}${hex(blue)}` as T
})
default: return self.child = Widget.Label({
label: `no setter with type ${type}`,
})
}
opt.value = `#${hex(red)}${hex(green)}${hex(blue)}` as T
})
default: return self.child = Widget.Label({
label: `no setter with type ${type}`,
})
}
}
})
}
})
}

40
widget/settings/shared/Option.ts
View File

@@ -2,25 +2,25 @@ import { Label } from "./Label";
import { Inputter } from "./Inputter";
import icons from "lib/icons";
export const Option = (props) => {
return Widget.Box({
class_name: "option-item",
hexpand: true,
children: [
Widget.Box({
hpack: "start",
vpack: "center",
export const Option = (props, className = '') => {
return Widget.Box({
class_name: "option-item",
hexpand: true,
child: Label(props.title, props.subtitle || ""),
}),
Inputter(props),
Widget.Button({
vpack: "center",
class_name: "reset",
child: Widget.Icon(icons.ui.refresh),
on_clicked: () => props.opt.reset(),
sensitive: props.opt.bind().as(v => v !== props.opt.initial),
}),
]
})
children: [
Widget.Box({
hpack: "start",
vpack: "center",
hexpand: true,
child: Label(props.title, props.subtitle || ""),
}),
Inputter(props, className),
Widget.Button({
vpack: "center",
class_name: "reset",
child: Widget.Icon(icons.ui.refresh),
on_clicked: () => props.opt.reset(),
sensitive: props.opt.bind().as(v => v !== props.opt.initial),
}),
]
})
}