💥 ags(popup-window, ask-popup): fix unexpected behaviors, removed onClose() and closeAction() support

ags/widget/AskPopup.ts

@@ -5,6 +5,7 @@ import { Separator } from "./Separator";
 import { tr } from "../i18n/intl";
 import { Windows } from "../windows";
 
+
 export type AskPopupProps = {
     title?: string | Binding<string | undefined>;
     text: string | Binding<string | undefined>;
@@ -15,29 +16,27 @@ export type AskPopupProps = {
 };
 
 /** 
- * A Popup Widget that asks yes or no to a certain question. 
- * Runs onAccept() when user accepts or else onDecline() when
- * user doesn't accept or closes window.
- * This window isn't registered in this shell windowing stuff.
+ * A Popup Widget that asks yes or no to a defined promt. 
+ * Runs onAccept() when user accepts, or else onDecline() when
+ * user doesn't accept / closes window.
+ * This window isn't usually registered in this shell windowing 
+ * system.
  */
-export function AskPopup(props: AskPopupProps): Gtk.Window {
+export function AskPopup(props: AskPopupProps): Widget.Window {
     const buttons = [
         new Widget.Button({
             className: "cancel",
             hexpand: true,
             label: props.cancelText || tr("ask_popup.options.cancel") || "Cancel",
-            onClick: (_) => {
-                window.close();
-                props.onCancel && props.onCancel();
-            }
+            onClick: () => window.close(),
         } as Widget.ButtonProps),
         new Widget.Button({
             className: "accept",
             hexpand: true,
             label: props.acceptText || tr("ask_popup.options.accept") || "Ok",
-            onClick: (_) => {
+            onClick: () => {
                 window.close();
-                props.onAccept && props.onAccept();
+                props.onAccept?.();
             }
         } as Widget.ButtonProps)
     ];
@@ -46,13 +45,12 @@ export function AskPopup(props: AskPopupProps): Gtk.Window {
         namespace: "ask-popup",
         className: "ask-popup",
         monitor: mon,
+        cssBackgroundWindow: "background: rgba(0, 0, 0, .3);",
         exclusivity: Astal.Exclusivity.IGNORE,
-        widthRequest: 350,
-        heightRequest: 200,
-        onClose: (_) => {
-            props.onCancel && props.onCancel();
-            _.destroy();
-        },
+        layer: Astal.Layer.OVERLAY,
+        widthRequest: 400,
+        heightRequest: 220,
+        onDestroy: () => props.onCancel?.(),
         child: new Widget.Box({
             className: "ask-popup-box",
             orientation: Gtk.Orientation.VERTICAL,

ags/widget/BackgroundWindow.ts

@@ -1,13 +1,16 @@
+import { Binding } from "astal";
 import { Astal, Gdk, Widget } from "astal/gtk3";
 
 
 const { TOP, LEFT, RIGHT, BOTTOM } = Astal.WindowAnchor;
 
 export type BackgroundWindowProps = {
+    /** GtkWindow Layer */
+    layer?: Astal.Layer | Binding<Astal.Layer | undefined>;
     /** Monitor number where the window should open */
-    monitor: number;
+    monitor: number | Binding<number | undefined>;
     /** Custom stylesheet used in the window. default: `background: rgba(0, 0, 0, .2)` */
-    css?: string;
+    css?: string | Binding<string | undefined>;
     /** Function that is called when the user clicks on the window (any mouse button) */
     onClick?: (window: Widget.Window) => void;
     /** Function that is called when the user clicks on the window with primary mouse button */
@@ -29,6 +32,7 @@ export function BackgroundWindow(props: BackgroundWindowProps) {
         namespace: "background-window",
         css: props.css ?? "background: rgba(0, 0, 0, .2);",
         monitor: props.monitor,
+        layer: props.layer ?? Astal.Layer.OVERLAY,
         anchor: TOP | LEFT | BOTTOM | RIGHT,
         exclusivity: Astal.Exclusivity.IGNORE,
         onButtonPressEvent: (window, event: Gdk.Event) => {

ags/widget/PopupWindow.ts

@@ -1,17 +1,10 @@
 import { Binding } from "astal";
 import { Astal, Gdk, Widget } from "astal/gtk3";
 import { BackgroundWindow } from "./BackgroundWindow";
-import { Windows } from "../windows";
 
 type PopupWindowSpecificProps = {
     onDestroy?: (self: Widget.Window) => void;
     onKeyPressEvent?: (win: Widget.Window, event: Gdk.Event) => void;
-    /** Do something else instead of closing window on close action(clicking outside conent/pressing Escape) 
-     * Observation: onClose() will still be called after close action, if defined.
-     */
-    closeAction?: (self: Widget.Window) => void;
-    /** Do something when window closes */
-    onClose?: (self: Widget.Window) => void;
     /** Stylesheet for the background of the popup-window */
     cssBackgroundWindow?: string;
 };
@@ -19,14 +12,15 @@ type PopupWindowSpecificProps = {
 export type PopupWindowProps = Omit<Widget.WindowProps, "keymode"> & PopupWindowSpecificProps;
 
 export function PopupWindow(props: PopupWindowProps): Widget.Window {
-    props.closeAction = props.closeAction ?? ((window) => window.close());
+    props.layer = props.layer ?? Astal.Layer.OVERLAY;
 
     const bgWindow = BackgroundWindow({
-        monitor: Windows.getFocusedMonitorId() ?? 0,
+        monitor: props.monitor ?? 0,
+        layer: props.layer!,
         css: props.cssBackgroundWindow ?? "", 
-        onClick: () => {
-            props.closeAction!(window);
-            props.onClose?.(window);
+        onClick: (bgWin) => {
+            bgWin.close();
+            window.close();
         }
     });
 
@@ -36,16 +30,15 @@ export function PopupWindow(props: PopupWindowProps): Widget.Window {
         className: `popup-window ${(props.namespace instanceof Binding ?
             props.namespace.get() : props.namespace) || ""}`,
         keymode: Astal.Keymode.EXCLUSIVE,
+        layer: props.layer!,
         onDestroy: (self) => {
             bgWindow.close();
-            props.closeAction!(self);
-            props.onClose?.(self);
             props.onDestroy?.(self);
         },
         onKeyPressEvent: (self, event: Gdk.Event) => {
             if(event.get_keyval()[1] === Gdk.KEY_Escape) {
-                props.closeAction!(self);
                 bgWindow.close();
+                self.close();
 
                 return;
             }