Finished notification popup implementation.

This commit is contained in:
Jas Singh
2024-06-17 22:43:04 -07:00
parent 296fbde42a
commit 77811a75a2
9 changed files with 135 additions and 105 deletions

View File

@@ -17,7 +17,7 @@ const BatteryLabel = () => {
class_name: "battery",
visible: battery.bind("available"),
children: [
Widget.Icon({ icon }),
// Widget.Icon({ icon }),
Widget.LevelBar({
widthRequest: 20,
vpack: "center",

View File

@@ -9,7 +9,7 @@ export const Padding = (name) =>
setup: (w) => w.on("button-press-event", () => App.toggleWindow(name)),
});
const moveBoxToCursor = (self, minWidth, minHeight, child) => {
const moveBoxToCursor = (self, minWidth, minHeight) => {
globalMousePos.connect("changed", ({ value }) => {
let monWidth = hyprland.monitors[hyprland.active.monitor.id].width;
let monHeight = hyprland.monitors[hyprland.active.monitor.id].height;
@@ -56,7 +56,7 @@ export default ({
keymode: "on-demand",
exclusivity,
layer: "top",
anchor: ["top", "bottom", "right", "left"],
anchor: ["top"],
child: Widget.EventBox({
on_primary_click: () => App.closeWindow(name),
on_secondary_click: () => App.closeWindow(name),
@@ -68,12 +68,24 @@ export default ({
return true;
},
setup: (self) => {
moveBoxToCursor(self, minWidth, minHeight, child);
moveBoxToCursor(self, minWidth, minHeight);
},
child: Widget.Box({
class_name: "dropdown-menu-container",
can_focus: true,
children: [Padding(name), child],
css: "padding: 1px;",
child: Widget.Revealer({
revealChild: false,
setup: (self) =>
self.hook(App, (_, wname, visible) => {
if (wname === name) self.reveal_child = visible;
}),
transition: "crossfade",
transitionDuration: 500,
child: Widget.Box({
class_name: "dropdown-menu-container",
can_focus: true,
children: [Padding(name), child],
}),
}),
}),
}),
}),

View File

@@ -288,7 +288,6 @@ export default () => {
child: Widget.Button({
class_name: "menu-icon-button",
on_primary_click: () => {
Utils.notify("Yoyo");
Utils.execAsync([
"bash",
"-c",

View File

@@ -8,6 +8,8 @@ export default () => {
class_name: "notifications-window",
layer: "top",
anchor: ["top", "right"],
monitor: 2,
exclusivity: "ignore",
child: Widget.Box({
vertical: true,
class_name: "notification-card-container",
@@ -17,62 +19,83 @@ export default () => {
return;
}
return (self.children = notifs.popups.map((notif) => {
return Widget.Box({
class_name: "notification-card",
children: [
const imageContainer = (notif) => {
if (notif.image !== undefined) {
return [
Widget.Box({
class_name: "notification-card-image-container",
hpack: "start",
hpack: "center",
vexpand: true,
child: Widget.Box({
hpack: "center",
vexpand: true,
class_name: "notification-card-image",
css: `background-image: url("${notif.image}")`,
}),
}),
Widget.Box({
vertical: true,
hpack: "end",
class_name: "notification-card-content",
children: [
Widget.Box({
class_name: "notification-card-header",
children: [
Widget.Label({
class_name: "notification-card-header-label",
truncate: "end",
wrap: true,
label: notif["summary"],
}),
],
}),
Widget.Box({
class_name: "notification-card-body",
vexpand: true,
children: [
Widget.Label({
class_name: "notification-card-body-label",
useMarkup: true,
lines: 3,
wrap: true,
truncate: "end",
label: notif["body"],
}),
],
}),
Widget.Box({
class_name: "notification-card-appname",
children: [
Widget.Label({
class_name: "notification-card-appname-label",
truncate: "end",
wrap: true,
label: notif["app-name"].toUpperCase(),
}),
],
}),
],
}),
],
];
}
return [];
};
return (self.children = notifs.popups.map((notif, index) => {
return Widget.Button({
on_primary_click: () => {
notifs.CloseNotification(notif.id);
},
on_secondary_click: () => {
notifs.CloseNotification(notif.id);
},
child: Widget.Box({
class_name: "notification-card",
children: [
...imageContainer(notif),
Widget.Box({
vertical: true,
hpack: "end",
class_name: "notification-card-content",
children: [
Widget.Box({
class_name: "notification-card-header",
children: [
Widget.Label({
class_name: "notification-card-header-label",
truncate: "end",
wrap: true,
label: notif["summary"],
}),
],
}),
Widget.Box({
class_name: "notification-card-body",
vexpand: true,
children: [
Widget.Label({
class_name: "notification-card-body-label",
useMarkup: true,
lines: 2,
wrap: true,
truncate: "end",
label: notif["body"],
}),
],
}),
Widget.Box({
class_name: "notification-card-appname",
children: [
Widget.Label({
class_name: "notification-card-appname-label",
truncate: "end",
wrap: true,
label: notif["app-name"].toUpperCase(),
}),
],
}),
],
}),
],
}),
});
}));
});