feat(ags): make my own popup widget and switch windows to it

config/ags/config.js

@@ -20,6 +20,13 @@ exec(`bash -c "$AGS_PATH/startup.sh"`);
 export default {
   style: css,
   notificationPopupTimeout: 5000,
+  cacheNotificationActions: true,
+  closeWindowDelay: {
+    'quick-settings': 500,
+    'notification-center': 500,
+    'calendar': 500,
+    'powermenu': 500,
+  },
   windows: [
     Powermenu,
     Bar,

config/ags/js/bar/clock.js

@@ -1,5 +1,5 @@
 const { Box, Label } = ags.Widget;
-const { toggleWindow, openWindow } = ags.App;
+const { toggleWindow } = ags.App;
 const { DateTime } = imports.gi.GLib;
 
 import { EventBox } from '../misc/cursorbox.js';
@@ -24,13 +24,7 @@ export const Clock = EventBox({
   connections: [
     [ags.App, (box, windowName, visible) => {
       if (windowName == 'calendar') {
-        if (visible) {
+        box.toggleClassName('toggle-on', visible);
-          Clock.toggleClassName('toggle-on', true);
-          openWindow('closer');
-        }
-        else {
-          Clock.toggleClassName('toggle-on', false);
-        }
       }
     }],
   ],

config/ags/js/bar/notif-button.js

@@ -1,5 +1,5 @@
 const { Box, Label, Icon } = ags.Widget;
-const { toggleWindow, openWindow } = ags.App;
+const { toggleWindow } = ags.App;
 const { Notifications } = ags.Service;
 
 import { Separator } from '../misc/separator.js';
@@ -11,13 +11,7 @@ export const NotifButton = EventBox({
   connections: [
     [ags.App, (box, windowName, visible) => {
       if (windowName == 'notification-center') {
-        if (visible) {
+        box.toggleClassName('toggle-on', visible);
-          NotifButton.toggleClassName('toggle-on', true);
-          openWindow('closer');
-        }
-        else {
-          NotifButton.toggleClassName('toggle-on', false);
-        }
       }
     }],
   ],

config/ags/js/bar/quick-settings.js

@@ -1,5 +1,5 @@
 const { Box, Label } = ags.Widget;
-const { toggleWindow, openWindow } = ags.App;
+const { toggleWindow } = ags.App;
 
 import { EventBox } from '../misc/cursorbox.js';
 
@@ -9,13 +9,7 @@ export const QsToggle = EventBox({
   connections: [
     [ags.App, (box, windowName, visible) => {
       if (windowName == 'quick-settings') {
-        if (visible) {
+        box.toggleClassName('toggle-on', visible);
-          QsToggle.toggleClassName('toggle-on', true);
-          openWindow('closer');
-        }
-        else {
-          QsToggle.toggleClassName('toggle-on', false);
-        }
       }
     }],
   ],

config/ags/js/date.js

@@ -2,6 +2,8 @@ const { Box, Label, Window } = ags.Widget;
 const { Gtk } = imports.gi;
 const { DateTime } = imports.gi.GLib;
 
+import { PopUp } from './misc/popup.js';
+
 const Divider = () => Box({
   className: 'divider',
   vertical: true,
@@ -68,16 +70,18 @@ const CalendarWidget = () => Box({
 
 export const Calendar = Window({
   name: 'calendar',
-  popup: true,
   layer: 'overlay',
   anchor: 'top right',
   margin: [ 8, 182, 0, 0],
-  child: Box({
+  child: PopUp({
-    className: 'date',
+    name: 'calendar',
-    vertical: true,
+    child: Box({
-    children: [
+      className: 'date',
-      Time(),
+      vertical: true,
-      CalendarWidget(),
+      children: [
-    ],
+        Time(),
+        CalendarWidget(),
+      ],
+    }),
   }),
 });

config/ags/js/misc/popup.js

@@ -0,0 +1,19 @@
+const { Revealer } = ags.Widget;
+const { closeWindow, openWindow } = ags.App;
+
+export const PopUp = ({name, child, transition = 'slide_down', ...params}) => Revealer({
+  ...params,
+  // FIXME: popups don't work with revealers
+  setup: () => setTimeout(() => closeWindow(name), 100),
+  transition,
+  transitionDuration: 500,
+  connections: [[ags.App, (revealer, currentName, visible) => {
+    if (currentName === name) {
+      revealer.reveal_child = visible;
+
+      if (visible)
+        openWindow('closer');
+    }
+  }]],
+  child: child,
+});

config/ags/js/notifications/center.js

@@ -4,7 +4,8 @@ const { timeout } = ags.Utils;
 const { getWindow } = ags.App;
 
 import Notification from './base.js';
-import { EventBox } from '../misc/cursorbox.js'
+import { EventBox } from '../misc/cursorbox.js';
+import { PopUp } from '../misc/popup.js';
 
 const ClearButton = () => EventBox({
   child: Button({
@@ -21,7 +22,7 @@ const ClearButton = () => EventBox({
     properties: [['notifList'], ['popups']],
     connections: [[Notifications, button => {
       if (!button._notifList)
-        button._notifList = getWindow('notification-center').child.children[1].children[0].child.child.children[0];
+        button._notifList = NotificationList;
 
       if (!button._popups)
         button._popups = getWindow('notifications').child.children[0].child;
@@ -50,7 +51,7 @@ const Header = () => Box({
   ],
 });
 
-const NotificationList = () => Box({
+const NotificationList = Box({
   vertical: true,
   vexpand: true,
   connections: [
@@ -107,33 +108,37 @@ const Placeholder = () => Revealer({
   }),
 });
 
+const NotificationCenterWidget = Box({
+  className: 'notification-center',
+  vertical: true,
+  children: [
+    Header(),
+    Box({
+      className: 'notification-wallpaper-box',
+      children: [Scrollable({
+        className: 'notification-list-box',
+        hscroll: 'never',
+        vscroll: 'automatic',
+        child: Box({
+          className: 'notification-list',
+          vertical: true,
+          children: [
+            NotificationList,
+            Placeholder(),
+          ],
+        }),
+      })],
+    }),
+  ],
+});
+
 export const NotificationCenter = Window({
   name: 'notification-center',
-  popup: true,
   layer: 'overlay',
   anchor: 'top right',
   margin: [ 8, 60, 0, 0 ],
-  child: Box({
+  child: PopUp({
-    className: 'notification-center',
+    name: 'notification-center',
-    vertical: true,
+    child: NotificationCenterWidget,
-    children: [
-      Header(),
-      Box({
-        className: 'notification-wallpaper-box',
-        children: [Scrollable({
-          className: 'notification-list-box',
-          hscroll: 'never',
-          vscroll: 'automatic',
-          child: Box({
-            className: 'notification-list',
-            vertical: true,
-            children: [
-              NotificationList(),
-              Placeholder(),
-            ],
-          }),
-        })],
-      }),
-    ],
   }),
 });

config/ags/js/powermenu.js

@@ -1,37 +1,46 @@
-export const Powermenu = ags.Widget.Window({
+const { Window, CenterBox, Label } = ags.Widget;
-  name: 'powermenu',
-  popup: true,
-  layer: 'overlay',
 
-  child: ags.Widget.CenterBox({
+import { PopUp } from './misc/popup.js';
-    className: 'powermenu',
+import { Button } from './misc/cursorbox.js'
-    vertical: false,
 
-    startWidget: ags.Widget.Button({
+const PowermenuWidget = CenterBox({
-      className: 'shutdown',
+  className: 'powermenu',
-      onPrimaryClickRelease: 'systemctl poweroff',
+  vertical: false,
 
-      child: ags.Widget.Label({
+  startWidget: Button({
-        label: '襤',
+    className: 'shutdown',
-      }),
+    onPrimaryClickRelease: 'systemctl poweroff',
+
+    child: Label({
+      label: '襤',
     }),
+  }),
 
-    centerWidget: ags.Widget.Button({
+  centerWidget: Button({
-      className: 'reboot',
+    className: 'reboot',
-      onPrimaryClickRelease: 'systemctl reboot',
+    onPrimaryClickRelease: 'systemctl reboot',
 
-      child: ags.Widget.Label({
+    child: Label({
-        label: '勒',
+      label: '勒',
-      }),
     }),
+  }),
 
-    endWidget: ags.Widget.Button({
+  endWidget: Button({
-      className: 'logout',
+    className: 'logout',
-      onPrimaryClickRelease: 'hyprctl dispatch exit',
+    onPrimaryClickRelease: 'hyprctl dispatch exit',
 
-      child: ags.Widget.Label({
+    child: Label({
-        label: '',
+      label: '',
-      }),
     }),
   }),
 });
+
+export const Powermenu = Window({
+  name: 'powermenu',
+  layer: 'overlay',
+  child: PopUp({
+    name: 'powermenu',
+    transition: 'crossfade',
+    child: PowermenuWidget,
+  }),
+});

config/ags/js/quick-settings/main.js

@@ -1,67 +1,73 @@
 const { Window, CenterBox, Box, Label, Revealer, Icon } = ags.Widget;
+const { closeWindow } = ags.App;
 const { ToggleButton } = imports.gi.Gtk;
 
 import { ButtonGrid } from './button-grid.js';
 import { SliderBox } from './slider-box.js';
 import Player from '../media-player/player.js';
 import { EventBox } from '../misc/cursorbox.js';
+import { PopUp } from '../misc/popup.js';
+
+const QuickSettingsWidget = Box({
+  className: 'qs-container',
+  vertical: true,
+  children: [
+
+    Box({
+      className: 'quick-settings',
+      vertical: true,
+      children: [
+
+        Label({
+          label: 'Control Center',
+          className: 'title',
+          halign: 'start',
+          style: 'margin-left: 20px'
+        }),
+
+        ButtonGrid,
+
+        SliderBox,
+
+        EventBox({
+          child: ags.Widget({
+            type: ToggleButton,
+            connections: [['toggled', button => {
+              if (button.get_active()) {
+                button.child.setStyle("-gtk-icon-transform: rotate(0deg);");
+                button.get_parent().get_parent().get_parent().children[1].revealChild = true;
+              }
+              else {
+                button.child.setStyle('-gtk-icon-transform: rotate(180deg);');
+                button.get_parent().get_parent().get_parent().children[1].revealChild = false;
+              }
+            }]],
+            child: Icon({
+              icon: 'folder-download-symbolic',
+              className: 'arrow',
+              style: `-gtk-icon-transform: rotate(180deg);`,
+            }),
+          }),
+        }),
+
+      ],
+    }),
+
+    Revealer({
+      transition: 'slide_down',
+      child: Player(),
+    })
+
+  ],
+});
 
 export const QuickSettings = Window({
   name: 'quick-settings',
   layer: 'overlay',
-  popup: true,
   anchor: 'top right',
-  margin: [ 8, 5, 0,  ],
+  margin: [ 8, 5, 0, ],
-  child: Box({
+  child: PopUp({
-    className: 'qs-container',
+    name: 'quick-settings',
-    vertical: true,
+    child: QuickSettingsWidget,
-    children: [
-      
-      Box({
-        className: 'quick-settings',
-        vertical: true,
-        children: [
-
-          Label({
-            label: 'Control Center',
-            className: 'title',
-            halign: 'start',
-            style: 'margin-left: 20px'
-          }),
-
-          ButtonGrid,
-
-          SliderBox,
-
-          EventBox({
-            child: ags.Widget({
-              type: ToggleButton,
-              connections: [['toggled', button => {
-                if (button.get_active()) {
-                  button.child.setStyle("-gtk-icon-transform: rotate(0deg);");
-                  button.get_parent().get_parent().get_parent().children[1].revealChild = true;
-                }
-                else {
-                  button.child.setStyle('-gtk-icon-transform: rotate(180deg);');
-                  button.get_parent().get_parent().get_parent().children[1].revealChild = false;
-                }
-              }]],
-              child: Icon({
-                icon: 'folder-download-symbolic',
-                className: 'arrow',
-                style: `-gtk-icon-transform: rotate(180deg);`,
-              }),
-            }),
-          }),
-
-        ],
-      }),
-
-      Revealer({
-        transition: 'slide_down',
-        child: Player(),
-      })
-
-    ],
   }),
 });

config/hypr/main.conf

@@ -170,7 +170,7 @@ bind = $mainMod, T, togglespecialworkspace, thunder
 bind = $mainMod, C, killactive, 
 
 bind = $mainMod, L, exec, $LOCK_PATH/lock.sh
-bind = $mainMod SHIFT, E, exec, ags run-js 'ags.App.openWindow("closer")'; ags run-js 'ags.App.openWindow("powermenu")'
+bind = $mainMod SHIFT, E, exec, ags run-js 'ags.App.openWindow("powermenu")'
 bindn =, Escape, exec, ags run-js 'ags.App.closeAll()'
 bind = $mainMod SHIFT, SPACE, togglefloating, 
 bind = $mainMod, D, exec, wofi --show drun