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

@@ -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(),
}),
],
}),
],
}),
],
}),
});
}));
});