♻️ ags(ask-popup, entry-popup): port to custom-dialog for cleaner code

ags/widget/AskPopup.ts

@@ -1,9 +1,7 @@
 import { Binding } from "astal";
-import { PopupWindow, PopupWindowProps } from "./PopupWindow";
+import { Widget } from "astal/gtk3";
-import { Astal, Gtk, Widget } from "astal/gtk3";
-import { Separator } from "./Separator";
 import { tr } from "../i18n/intl";
-import { Windows } from "../windows";
+import { CustomDialog, CustomDialogProps } from "./CustomDialog";
 
 
 export type AskPopupProps = {
@@ -25,65 +23,24 @@ export type AskPopupProps = {
 export function AskPopup(props: AskPopupProps): Widget.Window {
     let accepted: boolean = false;
 
-    const buttons = [
+    const window = CustomDialog({
-        new Widget.Button({
-            className: "cancel",
-            hexpand: true,
-            label: props.cancelText ?? tr("cancel"),
-            onClick: () => window.close(),
-        } as Widget.ButtonProps),
-        new Widget.Button({
-            className: "accept",
-            hexpand: true,
-            label: props.acceptText ?? tr("accept"),
-            onClick: () => {
-                window.close();
-                accepted = true;
-                props.onAccept?.();
-            }
-        } as Widget.ButtonProps)
-    ];
-
-    const window = Windows.createWindowForFocusedMonitor((mon: number) => PopupWindow({
         namespace: "ask-popup",
-        className: "ask-popup",
-        monitor: mon,
-        cssBackgroundWindow: "background: rgba(0, 0, 0, .3);",
-        exclusivity: Astal.Exclusivity.IGNORE,
-        layer: Astal.Layer.OVERLAY,
         widthRequest: 400,
-        heightRequest: 220,
+        heightRequest: 250,
-        onDestroy: () => !accepted && props.onCancel?.(),
+        title: props.title ?? tr("ask_popup.title"),
-        child: new Widget.Box({
+        text: props.text,
-            className: "ask-popup-box",
+        onFinish: () => !accepted && props.onCancel?.(),
-            orientation: Gtk.Orientation.VERTICAL,
+        options: [
-            children: [
+            { text: props.cancelText ?? tr("cancel") },
-                new Widget.Label({
+            {
-                    className: "title",
+                text: props.acceptText ?? tr("accept"),
-                    visible: Boolean(props.title),
+                onClick: () => {
-                    label: props.title || tr("ask_popup.title") || "Question"
+                    accepted = true;
-                } as Widget.LabelProps),
+                    props.onAccept?.();
-                Separator({
+                }
-                    alpha: .2,
+            }
-                    orientation: Gtk.Orientation.VERTICAL
+        ]
-                }),
+    } as CustomDialogProps);
-                new Widget.Label({
-                    className: "text",
-                    label: props.text,
-                    yalign: 0,
-                    expand: true
-                } as Widget.LabelProps),
-                new Widget.Box({
-                    className: "buttons",
-                    orientation: Gtk.Orientation.HORIZONTAL,
-                    hexpand: true,
-                    heightRequest: 38,
-                    homogeneous: true,
-                    children: buttons
-                } as Widget.BoxProps)
-            ]
-        } as Widget.BoxProps)
-    } as PopupWindowProps))();
 
     return window;
 }

ags/widget/EntryPopup.ts

@@ -1,21 +1,19 @@
 import { Binding } from "astal";
-import { Astal, Gtk, Widget } from "astal/gtk3";
+import { Widget } from "astal/gtk3";
 import { tr } from "../i18n/intl";
-import { Windows } from "../windows";
+import { CustomDialog, CustomDialogProps } from "./CustomDialog";
-import { PopupWindow, PopupWindowProps } from "./PopupWindow";
-import { Separator } from "./Separator";
 
 export type EntryPopupProps = {
-    title?: string | Binding<string | undefined>;
+    title: string | Binding<string>;
-    text: string | Binding<string | undefined>;
+    text?: string | Binding<string>;
-    cancelText?: string | Binding<string | undefined>;
+    cancelText?: string | Binding<string>;
-    acceptText?: string | Binding<string | undefined>;
+    acceptText?: string | Binding<string>;
     closeOnAccept?: boolean;
-    entryPlaceholder?: string | Binding<string | undefined>;
+    entryPlaceholder?: string | Binding<string>;
     onAccept: (userInput: string) => void;
     onCancel?: () => void;
     onFinish?: () => void;
-    isPassword?: boolean | Binding<string | undefined>;
+    isPassword?: boolean | Binding<string>;
 };
 
 export function EntryPopup(props: EntryPopupProps): Widget.Window {
@@ -38,70 +36,34 @@ export function EntryPopup(props: EntryPopupProps): Widget.Window {
     } as Widget.EntryProps);
 
     let entered: boolean = false;
-    const buttons = [
-        new Widget.Button({
-            className: "cancel",
-            hexpand: true,
-            label: props.cancelText ?? tr("cancel"),
-            onClick: () => props.closeOnAccept && window.close(),
-        } as Widget.ButtonProps),
-        new Widget.Button({
-            className: "accept",
-            hexpand: true,
-            label: props.acceptText ?? tr("accept"),
-            onClick: () => {
-                props.closeOnAccept && window.close();
-                entered = true;
-                props.onAccept(entry.text);
-                entry.text = "";
-            }
-        } as Widget.ButtonProps)
-    ];
 
-    const window = Windows.createWindowForFocusedMonitor((mon: number) => PopupWindow({
+    const window = CustomDialog({
         namespace: "entry-popup",
-        className: "entry-popup",
+        widthRequest: 420,
-        monitor: mon,
-        cssBackgroundWindow: "background: rgba(0, 0, 0, .3);",
-        exclusivity: Astal.Exclusivity.IGNORE,
-        layer: Astal.Layer.OVERLAY,
-        widthRequest: 400,
         heightRequest: 220,
-        onDestroy: () => {
+        title: props.title,
-            props.onFinish?.();
+        text: props.text,
+        child: entry,
+        options: [
+            {
+                text: props.cancelText ?? tr("cancel"),
+                onClick: props.onCancel
+            },
+            {
+                text: props.acceptText ?? tr("accept"),
+                closeOnClick: props.closeOnAccept,
+                onClick: () => {
+                    entered = true;
+                    props.onAccept(entry.text);
+                    entry.text = "";
+                }
+            }
+        ],
+        onFinish: () => {
             !entered && props.onCancel?.()
-        },
+            props.onFinish?.();
-        child: new Widget.Box({
+        }
-            className: "entry-popup-box",
+    } as CustomDialogProps);
-            orientation: Gtk.Orientation.VERTICAL,
-            children: [
-                new Widget.Label({
-                    className: "title",
-                    visible: Boolean(props.title),
-                    label: props.title || tr("ask_popup.title") || "Question"
-                } as Widget.LabelProps),
-                Separator({
-                    alpha: .2,
-                    orientation: Gtk.Orientation.VERTICAL
-                }),
-                new Widget.Label({
-                    className: "text",
-                    label: props.text,
-                    yalign: 0,
-                    expand: true
-                } as Widget.LabelProps),
-                entry,
-                new Widget.Box({
-                    className: "buttons",
-                    orientation: Gtk.Orientation.HORIZONTAL,
-                    hexpand: true,
-                    heightRequest: 38,
-                    homogeneous: true,
-                    children: buttons
-                } as Widget.BoxProps)
-            ]
-        } as Widget.BoxProps)
-    } as PopupWindowProps))();
 
     return window;
 }