Finished notification popup implementation.
This commit is contained in:
@@ -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(),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
});
|
||||
}));
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user