✨ ags: new window management system, adjustments, use adwaita sans

2025-04-01 10:47:40 -03:00
parent a555e89dc0
commit 53929db052
27 changed files with 505 additions and 344 deletions
@@ -4,108 +4,114 @@ import { cleanExec, getAstalApps } from "../scripts/apps";
 import AstalApps from "gi://AstalApps";

 const { TOP, LEFT, RIGHT, BOTTOM } = Astal.WindowAnchor;
-const searchString = new Variable<string>("");
-let searchSubscription: () => void;

-export const AppsWindow = new Widget.Window({
-    namespace: "apps-window",
-    layer: Astal.Layer.OVERLAY,
-    exclusivity: Astal.Exclusivity.IGNORE,
-    anchor: TOP | LEFT | RIGHT | BOTTOM,
-    visible: false,
-    keymode: Astal.Keymode.EXCLUSIVE,
-    onDestroy: () => searchSubscription(),
-    setup: (window) => {
-        const flowbox = new Gtk.FlowBox({
-            rowSpacing: 6,
-            homogeneous: true,
-            columnSpacing: 6,
-            expand: false,
-            orientation: Gtk.Orientation.HORIZONTAL,
-            visible: true
-        } as Gtk.FlowBox.ConstructorProps);
+export const AppsWindow = (mon: number): (Widget.Window) => {
+    const searchString = new Variable<string>("");
+    let searchSubscription: () => void;

-        const entry = new Widget.Entry({
-            className: "entry",
-            halign: Gtk.Align.CENTER,
-            primary_icon_name: "system-search",
-            onChanged: (entry) => {
-                searchString.set(entry.text);
-            }
-        } as Widget.EntryProps);
+    return 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,
+        onDestroy: () => {
+            searchString.set("");
+            searchSubscription()
+        },
+        setup: (window) => {
+            const flowbox = new Gtk.FlowBox({
+                rowSpacing: 6,
+                homogeneous: true,
+                columnSpacing: 6,
+                expand: false,
+                orientation: Gtk.Orientation.HORIZONTAL,
+                visible: true
+            } as Gtk.FlowBox.ConstructorProps);

-        searchSubscription = searchString.subscribe((str: string) => {
-            const results: Array<AstalApps.Application> = getAstalApps().fuzzy_query(str);
+            const entry = new Widget.Entry({
+                className: "entry",
+                halign: Gtk.Align.CENTER,
+                primary_icon_name: "system-search",
+                onChanged: (entry) => {
+                    searchString.set(entry.text);
+                }
+            } as Widget.EntryProps);

-            // Destroy is handled by GnomeJS
-            flowbox.get_children().map(flowboxChild => flowbox.remove(flowboxChild));
+            searchSubscription = searchString.subscribe((str: string) => {
+                const results: Array<AstalApps.Application> = getAstalApps().fuzzy_query(str);

-            results.map(app => {
-                flowbox.insert(new Widget.Button({
-                    onClick: (_button, event: Astal.ClickEvent) => {
-                        if(event.button === Astal.MouseButton.PRIMARY) {
-                            searchString.set("");
-                            entry.text = "";
-                            window.hide();
-                            cleanExec(app);
+                // Destroy is handled by GnomeJS
+                flowbox.get_children().map(flowboxChild => flowbox.remove(flowboxChild));

-                            return;
-                        }
+                results.map(app => {
+                    flowbox.insert(new Widget.Button({
+                        onClick: (_button, event: Astal.ClickEvent) => {
+                            if(event.button === Astal.MouseButton.PRIMARY) {
+                                searchString.set("");
+                                entry.text = "";
+                                window.close();
+                                cleanExec(app);

-                        // select app launch options TODO
-                    },
-                    child: new Widget.Box({
-                        orientation: Gtk.Orientation.VERTICAL,
-                        children: [
-                            new Widget.Icon({
-                                className: "icon",
-                                expand: true,
-                                icon: app.get_icon_name()
-                            } as Widget.IconProps),
-                            new Widget.Label({
-                                className: "name",
-                                truncate: true,
-                                label: app.get_name()
-                            } as Widget.LabelProps)
-                        ]
-                    } as Widget.BoxProps)
-                } as Widget.ButtonProps), -1);
+                                return;
+                            }

-                const flowboxchild = flowbox.get_children()[flowbox.get_children().length-1];
-                flowboxchild.set_valign(Gtk.Align.START);
+                            // select app launch options TODO
+                        },
+                        child: new Widget.Box({
+                            orientation: Gtk.Orientation.VERTICAL,
+                            children: [
+                                new Widget.Icon({
+                                    className: "icon",
+                                    expand: true,
+                                    icon: app.get_icon_name()
+                                } as Widget.IconProps),
+                                new Widget.Label({
+                                    className: "name",
+                                    truncate: true,
+                                    label: app.get_name()
+                                } as Widget.LabelProps)
+                            ]
+                        } as Widget.BoxProps)
+                    } as Widget.ButtonProps), -1);
+
+                    const flowboxchild = flowbox.get_children()[flowbox.get_children().length-1];
+                    flowboxchild.set_valign(Gtk.Align.START);
+                });
+
+                const firstChild = flowbox.get_child_at_index(0);
+                firstChild && flowbox.select_child(firstChild);
            });

-            const firstChild = flowbox.get_child_at_index(0);
-            firstChild && flowbox.select_child(firstChild);
-        });
-
-        window.add(new Widget.EventBox({
-            onClick: () => {
-                searchString.set("");
-                entry.text = "";
-                window.hide();
-            },
-            onKeyPressEvent: (_, event: Gdk.Event) => {
-                if(event.get_keyval()[1] === Gdk.KEY_Escape) {
+            window.add(new Widget.EventBox({
+                onClick: () => {
                    searchString.set("");
                    entry.text = "";
-                    window.hide();
-                }
-            },
-            child: new Widget.Box({
-                className: "apps-window-container",
-                expand: true,
-                orientation: Gtk.Orientation.VERTICAL,
-                children: [
-                    entry,
-                    new Widget.Scrollable({
-                        vscroll: Gtk.PolicyType.AUTOMATIC,
-                        hscroll: Gtk.PolicyType.NEVER,
-                        expand: true,
-                        child: flowbox
-                    } as Widget.ScrollableProps)
-                ]
-            } as Widget.BoxProps)
-        } as Widget.EventBoxProps));
-    }
-} as Widget.WindowProps);
+                    window.close();
+                },
+                onKeyPressEvent: (_, event: Gdk.Event) => {
+                    if(event.get_keyval()[1] === Gdk.KEY_Escape) {
+                        searchString.set("");
+                        entry.text = "";
+                        window.close();
+                    }
+                },
+                child: new Widget.Box({
+                    className: "apps-window-container",
+                    expand: true,
+                    orientation: Gtk.Orientation.VERTICAL,
+                    children: [
+                        entry,
+                        new Widget.Scrollable({
+                            vscroll: Gtk.PolicyType.AUTOMATIC,
+                            hscroll: Gtk.PolicyType.NEVER,
+                            expand: true,
+                            child: flowbox
+                        } as Widget.ScrollableProps)
+                    ]
+                } as Widget.BoxProps)
+            } as Widget.EventBoxProps));
+        }
+    });
+}
@@ -1,22 +1,22 @@
 import { Astal, Gtk, Widget } from "astal/gtk3";

-import { Clock } from "../widget/bar/Clock";
 import { Tray } from "../widget/bar/Tray";
 import { Workspaces } from "../widget/bar/Workspaces";
 import { FocusedClient } from "../widget/bar/FocusedClient";
 import { Media } from "../widget/bar/Media";
-import { Status } from "../widget/bar/Status";
 import { Apps } from "../widget/bar/Apps";
+import { Clock } from "../widget/bar/Clock";
+import { Status } from "../widget/bar/Status";

-export const Bar: Widget.Window = new Widget.Window({
-    monitor: 0,
+export const Bar = (mon: number) => new Widget.Window({
    namespace: "top-bar",
    anchor: Astal.WindowAnchor.TOP | Astal.WindowAnchor.LEFT | Astal.WindowAnchor.RIGHT,
    layer: Astal.Layer.TOP,
    exclusivity: Astal.Exclusivity.EXCLUSIVE,
    heightRequest: 46,
-    canFocus: false,
+    monitor: mon,
    visible: true,
+    canFocus: false,
    child: new Widget.Box({
        className: "bar-container",
        child: new Widget.CenterBox({
@@ -1,73 +1,66 @@
 import { Gtk, Widget } from "astal/gtk3";
-import { bind, GLib } from "astal";
+import { GLib } from "astal";

 import { getDateTime } from "../scripts/time";
-import { BigMedia } from "../widget/center-window/BigMedia";
 import { Separator, SeparatorProps } from "../widget/Separator";
 import { PopupWindow, PopupWindowProps } from "../widget/PopupWindow";
+import { BigMedia } from "../widget/center-window/BigMedia";

-const BigMediaWidget = BigMedia();
-
-export const CenterWindow: Widget.Window = PopupWindow({
-    className: "center-window",
+export const CenterWindow = (mon: number) => PopupWindow({
+    className: "center-window-container",
    namespace: "center-window",
-    monitor: 0,
-    visible: false,
    marginTop: 10,
    valign: Gtk.Align.START,
    halign: Gtk.Align.CENTER,
-    child: new Widget.Box({
-        className: "center-window-container",
-        children: [
-            new Widget.Box({
-                className: "vertical left",
-                orientation: Gtk.Orientation.VERTICAL,
-                children: [
-                    new Widget.Box({
-                        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,
-                            show_heading: true,
-                            show_day_names: true,
-                            show_week_numbers: false
-                        } as Gtk.Calendar.ConstructorProps)
-                    } as Widget.BoxProps)
-                ]
-            } as Widget.BoxProps),
-            Separator({
-                visible: bind(BigMediaWidget, "visible"),
-                orientation: Gtk.Orientation.HORIZONTAL,
-                alpha: .5,
-                cssColor: "gray",
-                size: 1
-            } as SeparatorProps),
-            new Widget.Box({
-                className: "vertical right",
-                orientation: Gtk.Orientation.VERTICAL,
-                children: [
-                    BigMediaWidget
-                ]
-            } as Widget.BoxProps)
-        ]
-    } as Widget.BoxProps)
+    monitor: mon,
+    children: [
+        new Widget.Box({
+            className: "vertical left",
+            orientation: Gtk.Orientation.VERTICAL,
+            children: [
+                new Widget.Box({
+                    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),
+        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 PopupWindowProps);
@@ -4,11 +4,11 @@ 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";

-const connections: Array<number> = [];
 const { TOP, LEFT, BOTTOM, RIGHT } = Astal.WindowAnchor;

-export const ControlCenter = new Widget.Window({
+export const ControlCenter = (mon: number) => new Widget.Window({
    namespace: "control-center",
    className: "control-center",
    anchor: TOP | BOTTOM | LEFT | RIGHT,
@@ -16,22 +16,23 @@ export const ControlCenter = new Widget.Window({
    keymode: Astal.Keymode.EXCLUSIVE,
    layer: Astal.Layer.OVERLAY,
    focusOnMap: true,
-    visible: false,
-    monitor: 0,
-    onDestroy: (_) => connections.map(id => _.disconnect(id)),
+    monitor: mon,
+    onDestroy: (_) => {
+        hidePages();
+    },
    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))) {
-            _.hide();
+            Windows.close("control-center");
            hidePages();
        }
    },
    onKeyPressEvent: (_, event: Gdk.Event) => {
        if(event.get_keyval()[1] === Gdk.KEY_Escape) {
-            _.hide();
+            Windows.close("control-center");
            hidePages();
        }
    },
@@ -54,17 +55,13 @@ export const ControlCenter = new Widget.Window({
                widthRequest: 400,
                vexpand: false,
                children: [
-                    QuickActions, 
-                    Sliders,
-                    Tiles,
-                    PagesWidget
+                    QuickActions(), 
+                    Sliders(),
+                    Tiles(),
+                    PagesWidget()
                ]
            } as Widget.BoxProps),
-            NotifHistory
+            NotifHistory()
        ]
    } as Widget.BoxProps)
 } as Widget.WindowProps);
-
-connections.push(ControlCenter.connect("hide", (_) => {
-    hidePages();
-}));
@@ -1,42 +1,23 @@
 import { Astal, Gtk, Widget } from "astal/gtk3";
-import AstalNotifd from "gi://AstalNotifd";
 import { bind } from "astal/binding";
 import { Notifications } from "../scripts/notifications";
 import { NotificationWidget } from "../widget/Notification";

-const connections: Array<number> = [];

-export const FloatingNotifications: Widget.Window = new Widget.Window({
+export const FloatingNotifications = (mon: number) => new Widget.Window({
    namespace: "floating-notifications",
    canFocus: false,
    anchor: Astal.WindowAnchor.TOP | Astal.WindowAnchor.RIGHT,
-    monitor: 0,
+    monitor: mon,
    layer: Astal.Layer.OVERLAY,
-    visible: false,
    widthRequest: 450,
    exclusivity: Astal.Exclusivity.NORMAL,
-    setup: (window) => {
-        connections.push(
-            Notifications.getDefault().connect("notification-added", (_, _notif: AstalNotifd.Notification) => {
-                !window.is_visible() && window.show();
-            }),
-            Notifications.getDefault().connect("notification-removed", (_: Notifications, _id: number) => {
-                window.is_visible() && _.notifications.length === 0 && window.hide()
-                window.isFocus = false;
-            })
-        );
-    },
-    onDestroy: () => connections.map(id => Notifications.getDefault().disconnect(id)),
    child: new Widget.Box({
        className: "floating-notifications-container",
        orientation: Gtk.Orientation.VERTICAL,
        homogeneous: false,
        visible: bind(Notifications.getDefault(), "notifications").as(notifs => notifs.length > 0),
        children: bind(Notifications.getDefault(), "notifications").as((notifs) => 
-            notifs.map((item) => 
-                NotificationWidget(item, 
-                    () => Notifications.getDefault().removeNotification(item))
-            )
-        ),
+            notifs.map((item) => NotificationWidget(item, () => Notifications.getDefault().removeNotification(item)))),
    } as Widget.BoxProps)
 } as Widget.WindowProps);
@@ -6,14 +6,13 @@ import { AskPopup } from "../widget/AskPopup";

 const { TOP, LEFT, RIGHT, BOTTOM } = Astal.WindowAnchor;

-export const LogoutMenu: Widget.Window = new Widget.Window({
+export const LogoutMenu = (mon: number) => new Widget.Window({
    namespace: "logout-menu",
    anchor: TOP | LEFT | RIGHT | BOTTOM,
    layer: Astal.Layer.OVERLAY,
    exclusivity: Astal.Exclusivity.IGNORE,
    keymode: Astal.Keymode.EXCLUSIVE,
-    monitor: 0,
-    visible: false,
+    monitor: mon,
    onKeyPressEvent: (_, event: Gdk.Event) => {
        event.get_keyval()[1] === Gdk.KEY_Escape &&
            _.hide();
@@ -57,8 +56,6 @@ export const LogoutMenu: Widget.Window = new Widget.Window({
                            onClick: () => AskPopup({
                                title: "Power Off",
                                text: "Are you sure you want to power off? Unsaved work will be lost.",
-                                cancelText: "No! Let me go back",
-                                acceptText: "Yes, shutdown",
                                onAccept: () => execAsync("systemctl poweroff")
                            })
                        } as Widget.ButtonProps),
@@ -68,8 +65,6 @@ export const LogoutMenu: Widget.Window = new Widget.Window({
                            onClick: () => AskPopup({
                                title: "Reboot",
                                text: "Are you sure you want to Reboot? Unsaved work will be lost.",
-                                cancelText: "No! Let me go back",
-                                acceptText: "Yes, reboot",
                                onAccept: () => execAsync("systemctl reboot")
                            })
                        } as Widget.ButtonProps),
@@ -79,8 +74,6 @@ export const LogoutMenu: Widget.Window = new Widget.Window({
                            onClick: () => AskPopup({
                                title: "Suspend",
                                text: "Are you sure you want to Suspend?",
-                                cancelText: "No! Let me go back",
-                                acceptText: "Yes, suspend",
                                onAccept: () => execAsync("systemctl suspend")
                            })
                        } as Widget.ButtonProps),
@@ -90,8 +83,6 @@ export const LogoutMenu: Widget.Window = new Widget.Window({
                            onClick: () => AskPopup({
                                title: "Log out",
                                text: "Are you sure you want to log out? Your session will be ended.",
-                                cancelText: "No! Let me go back",
-                                acceptText: "Yes, please log out",
                                onAccept: () => execAsync(`sh -c "loginctl terminate-user ${GLib.getenv("USER") || "$USER"}"`)
                            })
                        } as Widget.ButtonProps),
@@ -20,15 +20,15 @@ export function setOSDMode(newMode: OSDModes): void {
    osdMode.set(newMode);
 }

-export const OSD: Widget.Window = new Widget.Window({
+export const OSD = (mon: number) => new Widget.Window({
    namespace: "osd",
    layer: Astal.Layer.OVERLAY,
    anchor: Astal.WindowAnchor.BOTTOM,
    canFocus: false,
-    margin_bottom: 80,
-    monitor: 0,
-    visible: false,
+    marginBottom: 80,
    focusOnClick: false,
+    clickThrough: true,
+    monitor: mon,
    child: new Widget.Box({
        className: "osd",
        children: [