Add notification history container

modules/menus/PopupWindow.js

@@ -15,7 +15,7 @@ const PopupRevealer = (
     Widget.Revealer({
         transition,
         child: Widget.Box({
-            class_name: "window-content",
+            class_name: `window-content ${name}`,
             child,
         }),
         transitionDuration: 200,

modules/menus/notifications/index.js

@@ -1,205 +1,212 @@
+import PopupWindow from "../PopupWindow.js";
 const notifs = await Service.import("notifications");
 import icons from "../../icons/index.js";
 
 export default () => {
   notifs.popupTimeout = 5000;
 
-  return Widget.Window({
+  return PopupWindow({
     name: "notificationsmenu",
-    class_name: "notifications-menu",
-    layer: "top",
-    anchor: ["top", "right"],
-    monitor: 2,
-    keymode: "on-demand",
-    exclusivity: "ignore",
-    setup: (w) =>
-      w.keybind("Escape", () => App.closeWindow("notificationsmenu")),
     visible: false,
+    transition: "crossfade",
+    layout: "top-right",
     child: Widget.Box({
       class_name: "notification-menu-content",
       css: "padding: 1px; margin: -1px;",
-      child: Widget.Revealer({
+      vexpand: false,
-        transitionDuration: 350,
+      children: [
-        reveal_child: false,
+        Widget.Box({
-        transition: "crossfade",
-        setup: (self) =>
-          self.hook(App, (_, wname, visible) => {
-            if (wname === "notificationsmenu") self.reveal_child = visible;
-          }),
-        child: Widget.Box({
           class_name: "notification-card-container menu",
+          spacing: 0,
           vertical: true,
           hexpand: true,
-          setup: (self) => {
+          vexpand: false,
-            self.hook(notifs, () => {
+          child: Widget.Box({
-              const imageContainer = (notif) => {
+            vexpand: false,
-                if (notif.image !== undefined) {
+            spacing: 0,
-                  return [
+            vertical: true,
-                    Widget.Box({
+            setup: (self) => {
-                      class_name: "notification-card-image-container",
+              self.hook(notifs, () => {
-                      hpack: "center",
+                const imageContainer = (notif) => {
-                      vpack: "center",
+                  if (notif.image !== undefined) {
-                      vexpand: false,
+                    return [
-                      child: Widget.Box({
+                      Widget.Box({
+                        class_name: "notification-card-image-container menu",
                         hpack: "center",
+                        vpack: "center",
                         vexpand: false,
-                        class_name: "notification-card-image",
+                        child: Widget.Box({
-                        css: `background-image: url("${notif.image}")`,
+                          hpack: "center",
+                          vexpand: false,
+                          class_name: "notification-card-image menu",
+                          css: `background-image: url("${notif.image}")`,
+                        }),
                       }),
-                    }),
+                    ];
-                  ];
+                  }
-                }
 
-                return [];
+                  return [];
-              };
+                };
 
-              const actionsContainer = (notif) => {
+                const actionsContainer = (notif) => {
-                if (notif.actions !== undefined && notif.actions.length > 0) {
+                  if (notif.actions !== undefined && notif.actions.length > 0) {
-                  return [
+                    return [
-                    Widget.Box({
+                      Widget.Box({
-                      class_name: "notification-card-actions",
+                        class_name: "notification-card-actions menu",
-                      hexpand: true,
+                        hexpand: true,
-                      vpack: "end",
+                        vpack: "end",
-                      children: notif.actions.map((action) => {
+                        children: notif.actions.map((action) => {
-                        return Widget.Button({
+                          return Widget.Button({
-                          hexpand: true,
-                          class_name: "notification-action-buttons",
-                          on_primary_click: () => {
-                            notif.invoke(action.id);
-                          },
-                          child: Widget.Box({
-                            hpack: "center",
                             hexpand: true,
-                            children: [
+                            class_name: "notification-action-buttons menu",
-                              Widget.Label({
+                            on_primary_click: () => {
-                                class_name: "notification-action-buttons-label",
+                              notif.invoke(action.id);
-                                hexpand: true,
+                            },
-                                label: action.label,
+                            child: Widget.Box({
-                              }),
+                              hpack: "center",
-                            ],
-                          }),
-                        });
-                      }),
-                    }),
-                  ];
-                }
-
-                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.notifications.map((notif) => {
-                return Widget.Box({
-                  class_name: "notification-card",
-                  vpack: "start",
-                  hexpand: true,
-                  children: [
-                    ...imageContainer(notif),
-                    Widget.Box({
-                      vpack: "start",
-                      vertical: true,
-                      hexpand: true,
-                      class_name: `notification-card-content ${notif.image === undefined ? "noimg" : ""}`,
-                      children: [
-                        Widget.Box({
-                          vertical: false,
-                          hexpand: true,
-                          children: [
-                            Widget.Box({
-                              class_name: "notification-card-header",
                               hexpand: true,
-                              vpack: "start",
                               children: [
                                 Widget.Label({
-                                  class_name: "notification-card-header-label",
+                                  class_name:
-                                  hpack: "start",
+                                    "notification-action-buttons-label menu",
                                   hexpand: true,
-                                  vexpand: true,
+                                  label: action.label,
-                                  max_width_chars:
-                                    notif.image === undefined ? 27 : 20,
-                                  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",
-                          hexpand: true,
-                          class_name: "notification-card-body",
-                          children: [
-                            Widget.Label({
-                              hexpand: true,
-                              use_markup: true,
-                              xalign: 0,
-                              justification: "left",
-                              truncate: "end",
-                              lines: 2,
-                              max_width_chars:
-                                notif.image === undefined ? 35 : 28,
-                              wrap: true,
-                              class_name: "notification-card-body-label",
-                              label: notif["body"],
-                            }),
-                          ],
-                        }),
-                        ...actionsContainer(notif),
-                      ],
-                    }),
-                    Widget.Button({
-                      class_name: "close-notification-button",
-                      on_primary_click: () => {
-                        notifs.CloseNotification(notif.id);
-                      },
-                      child: Widget.Label({
-                        label: "󰅜",
-                        hpack: "center",
                       }),
+                    ];
+                  }
+
+                  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 menu",
+                      icon,
                     }),
-                  ],
+                  });
-                });
+                };
-              }));
+
-            });
+                const sortedNotifications = notifs.notifications.sort(
-          },
+                  (a, b) => b.time - a.time,
+                );
+
+                return (self.children = sortedNotifications.map((notif) => {
+                  return Widget.Box({
+                    class_name: "notification-card menu",
+                    vpack: "start",
+                    hexpand: true,
+                    children: [
+                      ...imageContainer(notif),
+                      Widget.Box({
+                        vpack: "start",
+                        vertical: true,
+                        hexpand: true,
+                        class_name: `notification-card-content ${notif.image === undefined ? "noimg" : " menu"}`,
+                        children: [
+                          Widget.Box({
+                            vertical: false,
+                            hexpand: true,
+                            children: [
+                              Widget.Box({
+                                class_name: "notification-card-header menu",
+                                hexpand: true,
+                                vpack: "start",
+                                children: [
+                                  Widget.Label({
+                                    class_name:
+                                      "notification-card-header-label menu",
+                                    hpack: "start",
+                                    hexpand: true,
+                                    vexpand: true,
+                                    max_width_chars:
+                                      notif.image === undefined ? 27 : 20,
+                                    truncate: "end",
+                                    wrap: true,
+                                    label: notif["summary"],
+                                  }),
+                                ],
+                              }),
+                              Widget.Box({
+                                class_name: "notification-card-header menu",
+                                hexpand: true,
+                                hpack: "end",
+                                children: [NotificationIcon(notif)],
+                              }),
+                            ],
+                          }),
+                          Widget.Box({
+                            vpack: "start",
+                            hexpand: true,
+                            class_name: "notification-card-body menu",
+                            children: [
+                              Widget.Label({
+                                hexpand: true,
+                                use_markup: true,
+                                xalign: 0,
+                                justification: "left",
+                                truncate: "end",
+                                lines: 2,
+                                max_width_chars:
+                                  notif.image === undefined ? 35 : 28,
+                                wrap: true,
+                                class_name: "notification-card-body-label menu",
+                                label: notif["body"],
+                              }),
+                            ],
+                          }),
+                          ...actionsContainer(notif),
+                        ],
+                      }),
+                      Widget.Button({
+                        class_name: "close-notification-button menu",
+                        on_primary_click: () => {
+                          notifs.CloseNotification(notif.id);
+                        },
+                        child: Widget.Label({
+                          label: "󰅜",
+                          hpack: "center",
+                        }),
+                      }),
+                    ],
+                  });
+                }));
+              });
+            },
+          }),
         }),
-      }),
+      ],
     }),
   });
 };

scss/menus/notifications.scss

@@ -1,13 +1,36 @@
 @import "../colors";
 
 .notification-card-container.menu {
-    min-width: 30rem;
+  min-width: 28em;
-    min-height: 50rem;
+  min-height: 15em;
-    background: $mantle;
+  background: $base;
-    border: 0.25rem solid $surface0; 
+  border: 0.2em solid $surface0; 
-    border-radius: 0.4rem;
+  border-radius: 0.4em;
+}
+.notification-card-container-scroll.menu {
+  // background-color: $pink;
 }
 
-.notification-menu-content {
+.window-content.notificationsmenu {
-    margin: 40rem;
+  margin-top: -0.4em;
+  margin-right: 0.6em;
+}
+
+.notification-card.menu {
+  border: 0em;
+  border-bottom: 0.25em solid $surface0;
+  border-radius: 0em;
+  margin: 0rem;
+
+  &:first-child {
+    border-top: 0rem;
+  }
+
+  &:last-child {
+    border-bottom: 0rem;
+  }
+
+  &:not(:first-child) {
+    margin: 0rem;
+  }
 }

scss/notifications/popups.scss

@@ -7,7 +7,8 @@
   color: $text;
   background: $mantle;
   margin-right: 0.4rem;
-  border: 0.15rem solid $surface0; min-width: 28rem;
+  border: 0.15rem solid $surface0;
+  min-width: 28rem;
   min-height: 6rem;
   border-radius: 0.4rem;
 

style.css

@@ -1038,15 +1038,32 @@ image {
   box-shadow: none;
 }
 .notification-card-container.menu {
-  min-width: 30rem;
+  min-width: 28em;
-  min-height: 50rem;
+  min-height: 15em;
-  background: #181825;
+  background: #1e1e2e;
-  border: 0.25rem solid #313244;
+  border: 0.2em solid #313244;
-  border-radius: 0.4rem;
+  border-radius: 0.4em;
 }
 
-.notification-menu-content {
+.window-content.notificationsmenu {
-  margin: 40rem;
+  margin-top: -0.4em;
+  margin-right: 0.6em;
+}
+
+.notification-card.menu {
+  border: 0em;
+  border-bottom: 0.25em solid #313244;
+  border-radius: 0em;
+  margin: 0rem;
+}
+.notification-card.menu:first-child {
+  border-top: 0rem;
+}
+.notification-card.menu:last-child {
+  border-bottom: 0rem;
+}
+.notification-card.menu:not(:first-child) {
+  margin: 0rem;
 }
 
 .notification-card-container {