const notifications = await Service.import("notifications") /** @param {import('resource:///com/github/Aylur/ags/service/notifications.js').Notification} n */ function NotificationIcon({ app_entry, app_icon, image }) { if (image) { return Widget.Box({ css: `background-image: url("${image}");` + "background-size: contain;" + "background-repeat: no-repeat;" + "background-position: center;", }) } let icon = "dialog-information-symbolic" if (Utils.lookUpIcon(app_icon)) icon = app_icon if (app_entry && Utils.lookUpIcon(app_entry)) icon = app_entry return Widget.Box({ child: Widget.Icon(icon), }) } /** @param {import('resource:///com/github/Aylur/ags/service/notifications.js').Notification} n */ function Notification(n) { const icon = Widget.Box({ vpack: "start", class_name: "icon", child: NotificationIcon(n), }) const title = Widget.Label({ class_name: "title", xalign: 0, justification: "left", hexpand: true, max_width_chars: 24, truncate: "end", wrap: true, label: n.summary, use_markup: true, }) const body = Widget.Label({ class_name: "body", hexpand: true, use_markup: true, xalign: 0, justification: "left", label: n.body, wrap: true, }) const actions = Widget.Box({ class_name: "actions", children: n.actions.map(({ id, label }) => Widget.Button({ class_name: "action-button", on_clicked: () => { n.invoke(id) n.dismiss() }, hexpand: true, child: Widget.Label(label), })), }) return Widget.EventBox( { attribute: { id: n.id }, on_primary_click: n.dismiss, }, Widget.Box( { class_name: `notification ${n.urgency}`, vertical: true, }, Widget.Box([ icon, Widget.Box( { vertical: true }, title, body, ), ]), actions, ), ) } export function NotificationPopups(monitor = 0) { const list = Widget.Box({ vertical: true, children: notifications.popups.map(Notification), }) function onNotified(_, /** @type {number} */ id) { const n = notifications.getNotification(id) if (n) list.children = [Notification(n), ...list.children] } function onDismissed(_, /** @type {number} */ id) { list.children.find(n => n.attribute.id === id)?.destroy() } list.hook(notifications, onNotified, "notified") .hook(notifications, onDismissed, "dismissed") return Widget.Window({ monitor, name: `notifications${monitor}`, class_name: "notification-popups", anchor: ["top", "right"], child: Widget.Box({ css: "min-width: 2px; min-height: 2px;", class_name: "notifications", vertical: true, child: list, /** this is a simple one liner that could be used instead of hooking into the 'notified' and 'dismissed' signals. but its not very optimized becuase it will recreate the whole list everytime a notification is added or dismissed */ // children: notifications.bind('popups') // .as(popups => popups.map(Notification)) }), }) }