✨ ags(apps-window, control-center, center-window): port to new PopupWindow function

ags/window/AppsWindow.ts

@@ -2,7 +2,7 @@ import { GObject, Variable } from "astal";
 import { Astal, Gdk, Gtk, Widget } from "astal/gtk3";
 import { cleanExec, getAppIcon, getApps, getAstalApps } from "../scripts/apps";
 import AstalApps from "gi://AstalApps";
-import { BackgroundWindow } from "../widget/BackgroundWindow";
+import { PopupWindow } from "../widget/PopupWindow";
 
 const { TOP, LEFT, RIGHT, BOTTOM } = Astal.WindowAnchor;
 
@@ -106,18 +106,15 @@ export const AppsWindow = (mon: number): (Widget.Window) => {
         return button;
     }
 
-    const bgWindow = BackgroundWindow(null, () => window.close(), () => window.close());
+    const window = PopupWindow({
-
-    const window = new Widget.Window({
         namespace: "apps-window",
         layer: Astal.Layer.OVERLAY,
         exclusivity: Astal.Exclusivity.IGNORE,
         anchor: TOP | LEFT | RIGHT | BOTTOM,
-        keymode: Astal.Keymode.EXCLUSIVE,
         monitor: mon,
+        cssBackgroundWindow: "background: rgba(0, 0, 0, .2)",
         marginTop: 64,
         onDestroy: () => {
-            bgWindow.close();
             searchSubscription?.();
             flowboxConnections.map(id => flowbox.disconnect(id));
         },

ags/window/CenterWindow.ts

@@ -1,4 +1,4 @@
-import { Gtk, Widget } from "astal/gtk3";
+import { Astal, Gtk, Widget } from "astal/gtk3";
 import { bind, GLib } from "astal";
 
 import { getDateTime } from "../scripts/time";
@@ -8,70 +8,71 @@ import { BigMedia } from "../widget/center-window/BigMedia";
 import AstalMpris from "gi://AstalMpris?version=0.1";
 
 export const CenterWindow = (mon: number) => PopupWindow({
-    className: "center-window-container",
     namespace: "center-window",
     marginTop: 10,
-    valign: Gtk.Align.START,
+    anchor: Astal.WindowAnchor.TOP,
-    halign: Gtk.Align.CENTER,
     monitor: mon,
-    children: [
+    child: new Widget.Box({
-        new Widget.Box({
+        className: "center-window-container",
-            className: "vertical left",
+        children: [
-            orientation: Gtk.Orientation.VERTICAL,
+            new Widget.Box({
-            children: [
+                className: "vertical left",
-                new Widget.Box({
+                orientation: Gtk.Orientation.VERTICAL,
-                    className: "top",
-                    orientation: Gtk.Orientation.VERTICAL,
-                    valign: Gtk.Align.START,
-                    children: [
-                        new Widget.Label({
-                            className: "time",
-                            label: getDateTime().as((dateTime: GLib.DateTime) =>
-                                dateTime.format("%H:%M"))
-                        } as Widget.LabelProps),
-                        new Widget.Label({
-                            className: "date",
-                            label: getDateTime().as((dateTime: GLib.DateTime) =>
-                                dateTime.format("%A, %B %d"))
-                        } as Widget.LabelProps)
-                    ]
-                } as Widget.BoxProps),
-                new Widget.Box({
-                    className: "calendar-box",
-                    vexpand: false,
-                    hexpand: true,
-                    valign: Gtk.Align.START,
-                    child: new Gtk.Calendar({
-                        visible: true,
-                        showHeading: true,
-                        showDayNames: true,
-                        showWeekNumbers: false
-                    } as Gtk.Calendar.ConstructorProps)
-                } as Widget.BoxProps)
-            ]
-        } as Widget.BoxProps),
-        new Widget.Revealer({
-            revealChild: bind(AstalMpris.get_default(), "players").as(players => 
-                players.filter(player => player.available).length > 0),
-            transitionDuration: 220,
-            transitionType: Gtk.RevealerTransitionType.SLIDE_RIGHT,
-            child: new Widget.Box({
                 children: [
-                    Separator({
-                        orientation: Gtk.Orientation.HORIZONTAL,
-                        alpha: .5,
-                        cssColor: "gray",
-                        size: 1
-                    } as SeparatorProps),
                     new Widget.Box({
-                        className: "vertical right",
+                        className: "top",
                         orientation: Gtk.Orientation.VERTICAL,
+                        valign: Gtk.Align.START,
                         children: [
-                            BigMedia()
+                            new Widget.Label({
+                                className: "time",
+                                label: getDateTime().as((dateTime: GLib.DateTime) =>
+                                    dateTime.format("%H:%M"))
+                            } as Widget.LabelProps),
+                            new Widget.Label({
+                                className: "date",
+                                label: getDateTime().as((dateTime: GLib.DateTime) =>
+                                    dateTime.format("%A, %B %d"))
+                            } as Widget.LabelProps)
                         ]
+                    } as Widget.BoxProps),
+                    new Widget.Box({
+                        className: "calendar-box",
+                        vexpand: false,
+                        hexpand: true,
+                        valign: Gtk.Align.START,
+                        child: new Gtk.Calendar({
+                            visible: true,
+                            showHeading: true,
+                            showDayNames: true,
+                            showWeekNumbers: false
+                        } as Gtk.Calendar.ConstructorProps)
                     } as Widget.BoxProps)
                 ]
-            } as Widget.BoxProps)
+            } as Widget.BoxProps),
-        } as Widget.RevealerProps)
+            new Widget.Revealer({
-    ]
+                revealChild: bind(AstalMpris.get_default(), "players").as(players => 
+                    players.filter(player => player.available).length > 0),
+                transitionDuration: 220,
+                transitionType: Gtk.RevealerTransitionType.SLIDE_RIGHT,
+                child: new Widget.Box({
+                    children: [
+                        Separator({
+                            orientation: Gtk.Orientation.HORIZONTAL,
+                            alpha: .5,
+                            cssColor: "gray",
+                            size: 1
+                        } as SeparatorProps),
+                        new Widget.Box({
+                            className: "vertical right",
+                            orientation: Gtk.Orientation.VERTICAL,
+                            children: [
+                                BigMedia()
+                            ]
+                        } as Widget.BoxProps)
+                    ]
+                } as Widget.BoxProps)
+            } as Widget.RevealerProps)
+        ]
+    } as Widget.BoxProps)
 } as PopupWindowProps);

ags/window/ControlCenter.ts

@@ -1,55 +1,33 @@
-import { Astal, Gdk, Gtk, Widget } from "astal/gtk3";
+import { Astal, Gtk, Widget } from "astal/gtk3";
 import { QuickActions } from "../widget/control-center/QuickActions";
 import { Tiles } from "../widget/control-center/Tiles";
 import { Sliders } from "../widget/control-center/Sliders";
 import { hidePages, PagesWidget } from "../widget/control-center/Pages";
 import { NotifHistory } from "../widget/control-center/NotifHistory";
-import { Windows } from "../windows";
+import { PopupWindow } from "../widget/PopupWindow";
 
-const { TOP, LEFT, BOTTOM, RIGHT } = Astal.WindowAnchor;
 
-export const ControlCenter = (mon: number) => new Widget.Window({
+export const ControlCenter = (mon: number) => PopupWindow({
     namespace: "control-center",
     className: "control-center",
-    anchor: TOP | BOTTOM | LEFT | RIGHT,
     exclusivity: Astal.Exclusivity.NORMAL,
-    keymode: Astal.Keymode.EXCLUSIVE,
+    anchor: Astal.WindowAnchor.TOP | Astal.WindowAnchor.RIGHT | Astal.WindowAnchor.BOTTOM,
     layer: Astal.Layer.OVERLAY,
     focusOnMap: true,
+    marginTop: 10,
+    marginRight: 10,
     monitor: mon,
-    onDestroy: () => {
+    onDestroy: () => hidePages(),
-        hidePages();
+    widthRequest: 420,
-    },
-    onButtonPressEvent: (_, event: Gdk.Event) => {
-        const [, posX, posY] = event.get_coords();
-        const childAllocation = _.get_child()!.get_allocation();
-
-        if((posX < childAllocation.x || posX > (childAllocation.x + childAllocation.width)) || 
-           (posY < childAllocation.y || posY > (childAllocation.y + childAllocation.height))) {
-            Windows.close("control-center");
-            hidePages();
-        }
-    },
-    onKeyPressEvent: (_, event: Gdk.Event) => {
-        if(event.get_keyval()[1] === Gdk.KEY_Escape) {
-            Windows.close("control-center");
-            hidePages();
-        }
-    },
     child: new Widget.Box({
         className: "popup",
         halign: Gtk.Align.END,
-        css: `margin-top: 10px;
-              margin-right: 10px;
-              margin-bottom: 10px;`,
-        widthRequest: 420,
         onButtonPressEvent: () => true,
         orientation: Gtk.Orientation.VERTICAL,
         children: [
             new Widget.Box({
                 className: "control-center-container",
                 orientation: Gtk.Orientation.VERTICAL,
-                widthRequest: 400,
                 vexpand: false,
                 children: [
                     QuickActions(),