Restyled notifications and added a close button.

This commit is contained in:
Jas Singh
2024-06-20 02:32:44 -07:00
parent 6670829bfc
commit d89c3a9ef9
5 changed files with 272 additions and 215 deletions

View File

@@ -1,22 +1,23 @@
const notifs = await Service.import("notifications");
import icons from "../icons/index.js";
export default () => {
notifs.popupTimeout = 7000;
notifs.popupTimeout = 5000;
return Widget.Window({
name: "notifications-window",
class_name: "notifications-window",
layer: "overlay",
anchor: ["top","right"],
layer: "top",
anchor: ["top", "right"],
monitor: 2,
exclusivity: "ignore",
child: Widget.Box({
vertical: true,
class_name: "notification-card-container",
vertical: true,
setup: (self) => {
self.hook(notifs, () => {
if (notifs.dnd) {
return;
return [];
}
const imageContainer = (notif) => {
@@ -70,55 +71,104 @@ export default () => {
return [];
};
const NotificationIcon = ({ app_entry, app_icon, app_name }) => {
let icon = icons.fallback.notification;
if (
Utils.lookUpIcon(app_name) ||
Utils.lookUpIcon(app_name.toLowerCase() || "")
)
icon = Utils.lookUpIcon(app_name)
? app_name
: Utils.lookUpIcon(app_name.toLowerCase())
? app_name.toLowerCase()
: "";
if (Utils.lookUpIcon(app_icon) && icon === "") icon = app_icon;
if (Utils.lookUpIcon(app_entry || "") && icon === "")
icon = app_entry || "";
return Widget.Box({
css: `
min-width: 2rem;
min-height: 2rem;
`,
child: Widget.Icon({
class_name: "notification-icon",
icon,
}),
});
};
return (self.children = notifs.popups.map((notif, index) => {
// FIX: Bottom part of notification gets cut of... need to find and fix culprit
return Widget.Box({
class_name: "notification-card",
vpack: "start",
children: [
...imageContainer(notif),
Widget.Box({
vpack: "start",
vertical: true,
class_name: "notification-card-content",
children: [
Widget.Box({
class_name: "notification-card-header",
vertical: false,
children: [
Widget.Label({
class_name: "notification-card-header-label",
truncate: "end",
wrap: true,
label: notif["summary"],
Widget.Box({
class_name: "notification-card-header",
vpack: "start",
children: [
Widget.Label({
class_name: "notification-card-header-label",
vexpand: true,
max_width_chars: 21,
truncate: "end",
wrap: true,
label: notif["summary"],
}),
],
}),
Widget.Box({
class_name: "notification-card-header",
hexpand: true,
hpack: "end",
children: [NotificationIcon(notif)],
}),
],
}),
Widget.Box({
vpack: "start",
class_name: "notification-card-body",
children: [
Widget.Label({
class_name: "notification-card-body-label",
useMarkup: true,
lines: 2,
wrap: true,
maxWidthChars: 30,
hexpand: true,
use_markup: true,
xalign: 0,
justification: "left",
truncate: "end",
lines: 2,
max_width_chars: 25,
wrap: true,
class_name: "notification-card-body-label",
label: notif["body"],
}),
],
}),
...actionsContainer(notif),
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(),
}),
],
}),
],
}),
Widget.Button({
class_name: "close-notification-button",
on_primary_click: () => {
notifs.CloseNotification(notif.id);
},
child: Widget.Label({
label: "󰅜",
hpack: "center",
}),
}),
],
});
}));