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) {
-          Clock.toggleClassName('toggle-on', true);
-          openWindow('closer');
-        }
-        else {
-          Clock.toggleClassName('toggle-on', false);
-        }
+        box.toggleClassName('toggle-on', visible);
       }
     }],
   ],

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) {
-          NotifButton.toggleClassName('toggle-on', true);
-          openWindow('closer');
-        }
-        else {
-          NotifButton.toggleClassName('toggle-on', false);
-        }
+        box.toggleClassName('toggle-on', visible);
       }
     }],
   ],

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) {
-          QsToggle.toggleClassName('toggle-on', true);
-          openWindow('closer');
-        }
-        else {
-          QsToggle.toggleClassName('toggle-on', false);
-        }
+        box.toggleClassName('toggle-on', visible);
       }
     }],
   ],

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,10 +70,11 @@ const CalendarWidget = () => Box({
 
 export const Calendar = Window({
   name: 'calendar',
-  popup: true,
   layer: 'overlay',
   anchor: 'top right',
   margin: [ 8, 182, 0, 0],
+  child: PopUp({
+    name: 'calendar',
     child: Box({
       className: 'date',
       vertical: true,
@@ -80,4 +83,5 @@ export const Calendar = Window({
         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,13 +108,7 @@ const Placeholder = () => Revealer({
   }),
 });
 
-export const NotificationCenter = Window({
-  name: 'notification-center',
-  popup: true,
-  layer: 'overlay',
-  anchor: 'top right',
-  margin: [ 8, 60, 0, 0 ],
-  child: Box({
+const NotificationCenterWidget = Box({
   className: 'notification-center',
   vertical: true,
   children: [
@@ -128,12 +123,22 @@ export const NotificationCenter = Window({
           className: 'notification-list',
           vertical: true,
           children: [
-              NotificationList(),
+            NotificationList,
             Placeholder(),
           ],
         }),
       })],
     }),
   ],
+});
+
+export const NotificationCenter = Window({
+  name: 'notification-center',
+  layer: 'overlay',
+  anchor: 'top right',
+  margin: [ 8, 60, 0, 0 ],
+  child: PopUp({
+    name: 'notification-center',
+    child: NotificationCenterWidget,
   }),
 });

config/ags/js/powermenu.js

@@ -1,37 +1,46 @@
-export const Powermenu = ags.Widget.Window({
-  name: 'powermenu',
-  popup: true,
-  layer: 'overlay',
+const { Window, CenterBox, Label } = ags.Widget;
 
-  child: ags.Widget.CenterBox({
+import { PopUp } from './misc/popup.js';
+import { Button } from './misc/cursorbox.js'
+
+const PowermenuWidget = CenterBox({
   className: 'powermenu',
   vertical: false,
 
-    startWidget: ags.Widget.Button({
+  startWidget: Button({
     className: 'shutdown',
     onPrimaryClickRelease: 'systemctl poweroff',
 
-      child: ags.Widget.Label({
+    child: Label({
       label: '襤',
     }),
   }),
 
-    centerWidget: ags.Widget.Button({
+  centerWidget: Button({
     className: 'reboot',
     onPrimaryClickRelease: 'systemctl reboot',
 
-      child: ags.Widget.Label({
+    child: Label({
       label: '勒',
     }),
   }),
 
-    endWidget: ags.Widget.Button({
+  endWidget: Button({
     className: 'logout',
     onPrimaryClickRelease: 'hyprctl dispatch exit',
 
-      child: ags.Widget.Label({
+    child: 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,18 +1,14 @@
 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';
 
-export const QuickSettings = Window({
-  name: 'quick-settings',
-  layer: 'overlay',
-  popup: true,
-  anchor: 'top right',
-  margin: [ 8, 5, 0,  ],
-  child: Box({
+const QuickSettingsWidget = Box({
   className: 'qs-container',
   vertical: true,
   children: [
@@ -63,5 +59,15 @@ export const QuickSettings = Window({
     })
 
   ],
+});
+
+export const QuickSettings = Window({
+  name: 'quick-settings',
+  layer: 'overlay',
+  anchor: 'top right',
+  margin: [ 8, 5, 0, ],
+  child: PopUp({
+    name: 'quick-settings',
+    child: QuickSettingsWidget,
   }),
 });

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