fix(ags notifs): refactor and make notifs work with latest ags

devices/wim/config/ags/config.js

@@ -4,8 +4,8 @@ import { exec } from 'resource:///com/github/Aylur/ags/utils.js';
 import Setup         from './js/setup.js';
 import Powermenu     from './js/powermenu.js';
 import * as Bar      from './js/bar/main.js';
-//import NotifCenter   from './js/notifications/center.js';
+import NotifCenter   from './js/notifications/center.js';
-//import NotifPopups   from './js/notifications/popup.js';
+import NotifPopups   from './js/notifications/popup.js';
 import Calendar      from './js/date.js';
 import QuickSettings from './js/quick-settings/main.js';
 //import Overview      from './js/overview/main.js';
@@ -18,7 +18,6 @@ exec(`sassc ${scss} ${css}`);
 Setup();
 
 
-// FIXME: notification and overview stuff are bugged as of this ags commit
 export default {
     style: css,
     notificationPopupTimeout: 5000,
@@ -34,7 +33,7 @@ export default {
     windows: [
         AppLauncher(),
         Calendar(),
-        //NotifCenter(),
+        NotifCenter(),
         //Overview(),
         Powermenu(),
         QuickSettings(),
@@ -43,6 +42,6 @@ export default {
         Bar.BgGradient(),
         Corners.Bottomleft(),
         Corners.Bottomright(),
-        //NotifPopups(),
+        NotifPopups(),
     ],
 };

devices/wim/config/ags/js/notifications/base.js

@@ -2,7 +2,7 @@ import Applications from 'resource:///com/github/Aylur/ags/service/applications.
 import Notifications from 'resource:///com/github/Aylur/ags/service/notifications.js';
 import Variable     from 'resource:///com/github/Aylur/ags/variable.js';
 import { Box, Icon, Label, Button } from 'resource:///com/github/Aylur/ags/widget.js';
-import { lookUpIcon, execAsync, timeout } from 'resource:///com/github/Aylur/ags/utils.js';
+import { lookUpIcon, execAsync } from 'resource:///com/github/Aylur/ags/utils.js';
 
 import GLib from 'gi://GLib';
 
@@ -48,15 +48,17 @@ const NotificationIcon = notif => {
         return EventBox({
             onPrimaryClickRelease: iconCmd,
             child: Box({
-                valign: 'start',
+                vpack: 'start',
                 hexpand: false,
                 className: 'icon img',
-                style: `background-image: url("${notif.image}");
+                css: `
+                    background-image: url("${notif.image}");
                     background-size: contain;
                     background-repeat: no-repeat;
                     background-position: center;
                     min-width: 78px;
-                        min-height: 78px;`,
+                    min-height: 78px;
+                `,
             }),
         });
     }
@@ -73,16 +75,16 @@ const NotificationIcon = notif => {
     return EventBox({
         onPrimaryClickRelease: iconCmd,
         child: Box({
-            valign: 'start',
+            vpack: 'start',
             hexpand: false,
             className: 'icon',
-            style: `min-width: 78px;
+            css: `min-width: 78px;
                   min-height: 78px;`,
             children: [Icon({
                 icon, size: 58,
-                halign: 'center',
+                hpack: 'center',
                 hexpand: true,
-                valign: 'center',
+                vpack: 'center',
                 vexpand: true,
             })],
         }),
@@ -114,37 +116,11 @@ export const Notification = ({
 
     // Init notif
     const notifWidget = Gesture({
-        maxOffset: 200,
+        command,
-        command: () => command(),
         slideIn,
-        properties: [
+        id: notif.id,
-            ['hovered', false],
-            ['id', notif.id],
-        ],
-        onHover: w => {
-            if (!w._hovered)
-                w._hovered = true;
-        },
-        onHoverLost: w => {
-            if (w._hovered)
-                w._hovered = false;
-        },
     });
 
-    // Notif methods
-    notifWidget.slideAway = side => {
-        notifWidget.child.setStyle(notifWidget.child[`_slide${side}`]);
-        notifWidget.sensitive = false;
-        timeout(400, () => {
-            notifWidget.child.setStyle(notifWidget.child[`_squeeze${side}`]);
-            timeout(500, () => {
-                HasNotifs.value = Notifications.notifications.length > 0;
-                notifWidget.get_parent().remove(notifWidget);
-                notifWidget.destroy();
-            });
-        });
-    };
-
     // Add body to notif
     notifWidget.child.add(Box({
         className: `notification ${notif.urgency}`,
@@ -177,14 +153,14 @@ export const Notification = ({
                                         }),
                                         Label({
                                             className: 'time',
-                                            valign: 'start',
+                                            vpack: 'start',
                                             label: setTime(notif.time),
                                         }),
                                         EventBox({
                                             reset: false,
                                             child: Button({
                                                 className: 'close-button',
-                                                valign: 'start',
+                                                vpack: 'start',
                                                 onClicked: () => notif.close(),
                                                 child: Icon('window-close-symbolic'),
                                             }),

devices/wim/config/ags/js/notifications/center.js

@@ -6,6 +6,52 @@ import PopupWindow  from '../misc/popup.js';
 import EventBox    from '../misc/cursorbox.js';
 
 
+const addNotif = (box, notif) => {
+    if (!notif)
+        return;
+
+    const NewNotif = Notification({
+        notif,
+        slideIn: 'Right',
+        command: () => notif.close(),
+    });
+
+    if (NewNotif) {
+        box.pack_end(NewNotif, false, false, 0);
+        box.show_all();
+    }
+};
+
+const NotificationList = () => Box({
+    vertical: true,
+    vexpand: true,
+    vpack: 'start',
+    binds: [['visible', HasNotifs]],
+    setup: box => {
+        // Get cached notifications
+        const id = Notifications.connect('changed', () => {
+            Notifications.notifications.forEach(notif => {
+                addNotif(box, notif);
+            });
+            Notifications.disconnect(id);
+        });
+    },
+    connections: [
+        [Notifications, (box, id) => {
+            if (!id)
+                return;
+
+            addNotif(box, Notifications.getNotification(id));
+        }, 'notified'],
+
+        [Notifications, (box, id) => {
+            const notif = box.children.find(ch => ch._id === id);
+            if (notif?.sensitive)
+                notif.slideAway('Right');
+        }, 'closed'],
+    ],
+});
+
 // Needs to be wrapped to still have onHover when disabled
 const ClearButton = () => EventBox({
     child: Button({
@@ -37,65 +83,14 @@ const Header = () => Box({
     ],
 });
 
-const NotificationList = () => Box({
-    vertical: true,
-    vexpand: true,
-    valign: 'start',
-    binds: [['visible', HasNotifs]],
-    connections: [
-        [Notifications, (box, id) => {
-            if (box.children.length == 0) {
-                for (const notif of Notifications.notifications) {
-                    if (!notif)
-                        return;
-
-                    const NewNotif = Notification({
-                        notif,
-                        slideIn: 'Right',
-                        command: () => notif.close(),
-                    });
-
-                    if (NewNotif) {
-                        box.pack_end(NewNotif, false, false, 0);
-                        box.show_all();
-                    }
-                }
-            }
-            else if (id) {
-                const notif = Notifications.getNotification(id);
-
-                const NewNotif = Notification({
-                    notif,
-                    slideIn: 'Right',
-                    command: () => notif.close(),
-                });
-
-                if (NewNotif) {
-                    box.pack_end(NewNotif, false, false, 0);
-                    box.show_all();
-                }
-            }
-        }, 'notified'],
-
-        [Notifications, (box, id) => {
-            for (const ch of box.children) {
-                if (ch._id == id) {
-                    ch.slideAway('Right');
-                    return;
-                }
-            }
-        }, 'closed'],
-    ],
-});
-
 const Placeholder = () => Revealer({
     transition: 'crossfade',
     binds: [['revealChild', HasNotifs, 'value', value => !value]],
     child: Box({
         className: 'placeholder',
         vertical: true,
-        valign: 'center',
+        vpack: 'center',
-        halign: 'center',
+        hpack: 'center',
         vexpand: true,
         hexpand: true,
         children: [
@@ -133,6 +128,6 @@ const NotificationCenterWidget = () => Box({
 export default () => PopupWindow({
     name: 'notification-center',
     anchor: ['top', 'right'],
-    margin: [6, 60, 0, 0],
+    margins: [6, 60, 0, 0],
     child: NotificationCenterWidget(),
 });

devices/wim/config/ags/js/notifications/gesture.js

@@ -1,40 +1,43 @@
+import Notifications from 'resource:///com/github/Aylur/ags/service/notifications.js';
 import { Box, EventBox } from 'resource:///com/github/Aylur/ags/widget.js';
 import { timeout } from 'resource:///com/github/Aylur/ags/utils.js';
 
+import { HasNotifs } from './base.js';
+
 import Gtk from 'gi://Gtk';
 import Gdk from 'gi://Gdk';
 const display = Gdk.Display.get_default();
 
 
 export default ({
+    id,
     slideIn = 'Left',
-    maxOffset = 150,
+    maxOffset = 200,
     startMargin = 0,
     endMargin = 300,
     command = () => {},
-    onHover = () => {},
-    onHoverLost = () => {},
-    child = '',
-    children = [],
-    properties = [[]],
     ...props
 }) => {
     const widget = EventBox({
         ...props,
-        properties: [
-            ['dragging', false],
-            ...properties,
-        ],
         onHover: self => {
             self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grab'));
-            onHover(self);
+            if (!self._hovered)
+                self._hovered = true;
         },
         onHoverLost: self => {
             self.window.set_cursor(null);
-            onHoverLost(self);
+            if (self._hovered)
+                self._hovered = false;
         },
     });
 
+    // Properties
+    widget._dragging = false;
+    widget._hovered = false;
+    widget._id = id;
+    widget.ready = false;
+
     const gesture = Gtk.GestureDrag.new(widget);
 
     const TRANSITION = 'transition: margin 0.5s ease, opacity 0.5s ease;';
@@ -48,32 +51,45 @@ export default ({
         margin-right: -${Number(maxOffset + endMargin)}px;
     `;
 
-    const slideLeft    = `${TRANSITION} ${MAX_LEFT} opacity: 0;`;
+    const slideLeft    = `${TRANSITION} ${MAX_LEFT} margin-top: 0px; margin-bottom: 0px; opacity: 0;`;
     const squeezeLeft  = `${TRANSITION} ${MAX_LEFT} ${SQUEEZED} opacity: 0;`;
-    const slideRight   = `${TRANSITION} ${MAX_RIGHT} opacity: 0;`;
+    const slideRight   = `${TRANSITION} ${MAX_RIGHT} margin-top: 0px; margin-bottom: 0px; opacity: 0;`;
     const squeezeRight = `${TRANSITION} ${MAX_RIGHT} ${SQUEEZED} opacity: 0;`;
+    const defaultStyle = `${TRANSITION} margin: unset; opacity: 1;`;
+
+    // Notif methods
+    widget.slideAway = side => {
+        // Slide away
+        widget.child.setCss(side === 'Left' ? slideLeft : slideRight);
+
+        // Makie it uninteractable
+        widget.sensitive = false;
+
+        timeout(400, () => {
+            // Reduce height after sliding away
+            widget.child?.setCss(side === 'Left' ? squeezeLeft : squeezeRight);
+
+            timeout(500, () => {
+                // Kill notif and update HasNotifs after anim is done
+                command();
+                HasNotifs.value = Notifications.notifications.length > 0;
+                widget.get_parent()?.remove(widget);
+            });
+        });
+    };
 
     widget.add(Box({
-        properties: [
+        css: squeezeLeft,
-            ['slideLeft',    slideLeft],
-            ['squeezeLeft',  squeezeLeft],
-            ['slideRight',   slideRight],
-            ['squeezeRight', squeezeRight],
-            ['ready', false],
-        ],
-        children: [
-            ...children,
-            child,
-        ],
-        style: squeezeLeft,
         connections: [
 
+            // When dragging
             [gesture, self => {
                 var offset = gesture.get_offset()[1];
 
                 // Slide right
                 if (offset >= 0) {
-                    self.setStyle(`
+                    self.setCss(`
+                        margin-top: 0px; margin-bottom: 0px; opacity: 1; transition: none;
                         margin-left:   ${Number(offset + startMargin)}px;
                         margin-right: -${Number(offset + startMargin)}px;
                     `);
@@ -82,26 +98,31 @@ export default ({
                 // Slide left
                 else {
                     offset = Math.abs(offset);
-                    self.setStyle(`
+                    self.setCss(`
+                        margin-top: 0px; margin-bottom: 0px; opacity: 1; transition: none;
                         margin-right: ${Number(offset + startMargin)}px;
                         margin-left: -${Number(offset + startMargin)}px;
                     `);
                 }
 
                 // Put a threshold on if a click is actually dragging
-                self.get_parent()._dragging = Math.abs(offset) > 10;
+                widget._dragging = Math.abs(offset) > 10;
-
+                widget.window?.set_cursor(Gdk.Cursor.new_from_name(display, 'grabbing'));
-                if (widget.window)
-                    widget.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grabbing'));
             }, 'drag-update'],
 
+
+            // On drag end
             [gesture, self => {
                 // Make it slide in on init
-                if (!self._ready) {
+                if (!widget.ready) {
-                    self.setStyle(slideIn === 'Left' ? slideLeft : slideRight);
+                    // Reverse of slideAway, so it started at squeeze, then we go to slide
+                    self.setCss(slideIn === 'Left' ? slideLeft : slideRight);
 
-                    timeout(500, () => self.setStyle(`${TRANSITION} margin: unset; opacity: 1;`));
+                    timeout(500, () => {
-                    timeout(1000, () => self._ready = true);
+                        // Then we got to center
+                        self.setCss(defaultStyle);
+                        timeout(500, () => widget.ready = true);
+                    });
                     return;
                 }
 
@@ -109,35 +130,16 @@ export default ({
 
                 // If crosses threshold after letting go, slide away
                 if (Math.abs(offset) > maxOffset) {
-                    // Slide away right
+                    if (offset > 0)
-                    if (offset > 0) {
+                        widget.slideAway('Right');
-                        // Disable inputs during animation
+                    else
-                        widget.sensitive = false;
+                        widget.slideAway('Left');
-
-                        self.setStyle(slideRight);
-                        timeout(500, () => self.setStyle(squeezeRight));
-                    }
-
-                    // Slide away left
-                    else {
-                        // Disable inputs during animation
-                        widget.sensitive = false;
-
-                        self.setStyle(slideLeft);
-                        timeout(500, () => self.setStyle(squeezeLeft));
-                    }
-
-                    timeout(1000, () => {
-                        command();
-                        self.destroy();
-                    });
                 }
                 else {
-                    self.setStyle(`${TRANSITION} margin: unset; opacity: 1;`);
+                    self.setCss(defaultStyle);
-                    if (widget.window)
+                    widget.window?.set_cursor(Gdk.Cursor.new_from_name(display, 'grab'));
-                        widget.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grab'));
 
-                    self.get_parent()._dragging = false;
+                    widget._dragging = false;
                 }
             }, 'drag-end'],
 

devices/wim/config/ags/js/notifications/popup.js

@@ -1,17 +1,17 @@
 import Notifications from 'resource:///com/github/Aylur/ags/service/notifications.js';
-import { Box, Window } from 'resource:///com/github/Aylur/ags/widget.js';
+import { Box } from 'resource:///com/github/Aylur/ags/widget.js';
 import { interval } from 'resource:///com/github/Aylur/ags/utils.js';
 
 import GLib from 'gi://GLib';
 
 import { Notification } from './base.js';
+import PopupWindow  from '../misc/popup.js';
 
 
-const Popups = () => Box({
+const addPopup = (box, id) => {
-    vertical: true,
+    if (!id)
-    properties: [
+        return;
-        ['notify', (box, id) => {
+
-            if (id) {
     const notif = Notifications.getNotification(id);
 
     const NewNotif = Notification({
@@ -24,48 +24,45 @@ const Popups = () => Box({
         box.pack_end(NewNotif, false, false, 0);
         box.show_all();
     }
-            }
+};
-        }],
+
+const handleDismiss = (box, id, force = false) => {
+    const notif = box.children.find(ch => ch._id === id);
+    if (!notif)
+        return;
 
-        ['dismiss', (box, id, force = false) => {
-            for (const ch of box.children) {
-                if (ch._id == id) {
     // If notif isn't hovered or was closed, slide away
-                    if (!ch._hovered || force) {
+    if (!notif._hovered || force) {
-                        ch.slideAway('Left');
+        notif.slideAway('Left');
         return;
     }
 
     // If notif is hovered, delay close
-                    else if (ch._hovered) {
+    else if (notif._hovered) {
-                        ch.interval = interval(2000, () => {
+        notif.interval = interval(2000, () => {
-                            if (!ch._hovered && ch.interval) {
+            if (!notif._hovered && notif.interval) {
-                                ch.slideAway('Left');
+                notif.slideAway('Left');
 
-                                GLib.source_remove(ch.interval);
+                GLib.source_remove(notif.interval);
-                                ch.interval = undefined;
+                notif.interval = undefined;
                 return;
             }
         });
     }
-                }
+};
-            }
-        }],
-    ],
-    connections: [
-        [Notifications, (box, id) => box._notify(box, id), 'notified'],
-        [Notifications, (box, id) => box._dismiss(box, id), 'dismissed'],
-        [Notifications, (box, id) => box._dismiss(box, id, true), 'closed'],
-    ],
-});
 
-export default () => Window({
+export default () => PopupWindow({
     name: 'notifications',
     anchor: ['top', 'left'],
+    visible: true,
+    transition: 'none',
+    closeOnUnfocus: 'none',
     child: Box({
-        style: `min-height:1px;
+        vertical: true,
-                min-width:1px;
+        connections: [
-                padding: 1px;`,
+            [Notifications, (box, id) => addPopup(box, id), 'notified'],
-        children: [Popups()],
+            [Notifications, (box, id) => handleDismiss(box, id), 'dismissed'],
+            [Notifications, (box, id) => handleDismiss(box, id, true), 'closed'],
+        ],
     }),
 });