diff --git a/ags/widget/BackgroundWindow.ts b/ags/widget/BackgroundWindow.ts index 62bf184..ba7c4d1 100644 --- a/ags/widget/BackgroundWindow.ts +++ b/ags/widget/BackgroundWindow.ts @@ -1,30 +1,49 @@ import { Astal, Gdk, Widget } from "astal/gtk3"; + const { TOP, LEFT, RIGHT, BOTTOM } = Astal.WindowAnchor; +export type BackgroundWindowProps = { + /** Monitor number where the window should open */ + monitor: number; + /** Custom stylesheet used in the window. default: `background: rgba(0, 0, 0, .2)` */ + css?: string; + /** 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 */ + onClickPrimary?: (window: Widget.Window) => void; + /** Function that is called when the user clicks on the window with secodary mouse button */ + onClickSecondary?: (window: Widget.Window) => void; +}; + /** Creates a fullscreen GtkWindow that is used for making * the user focus on the content after this window(e.g.: AskPopup, - * Authentication Window...) + * Authentication Window(futurely) or any PopupWindow) * - * @param css Custom stylesheet used in the window. defaults to setting `background-color` to rgba(0, 0, 0, .2) - * @param onClick Function that is called when the user clicks on the window - * @returns the generated background window + * @param props Properties for background-window + * + * @returns The generated background window */ -export function BackgroundWindow(css?: (string | null), onClickPrimary?: (((window: Widget.Window) => void) | null), - onClickSecondary?: (((window: Widget.Window) => void) | null)): Widget.Window { +export function BackgroundWindow(props: BackgroundWindowProps) { return new Widget.Window({ namespace: "background-window", - css: css ?? "background: rgba(0, 0, 0, .2);", + css: props.css ?? "background: rgba(0, 0, 0, .2);", + monitor: props.monitor, anchor: TOP | LEFT | BOTTOM | RIGHT, exclusivity: Astal.Exclusivity.IGNORE, onButtonPressEvent: (window, event: Gdk.Event) => { + if(event.get_button()[1]) { + props.onClick?.(window); + return; + } + if(event.get_button()[1] === Gdk.BUTTON_PRIMARY) { - onClickPrimary?.(window); + props.onClickPrimary?.(window); return; } if(event.get_button()[1] === Gdk.BUTTON_SECONDARY) - onClickSecondary?.(window); + props.onClickSecondary?.(window); } } as Widget.WindowProps); } diff --git a/ags/widget/PopupWindow.ts b/ags/widget/PopupWindow.ts index 3c6d078..02e3d58 100644 --- a/ags/widget/PopupWindow.ts +++ b/ags/widget/PopupWindow.ts @@ -1,93 +1,58 @@ import { Binding } from "astal"; -import { Astal, Gdk, Gtk, Widget } from "astal/gtk3"; +import { Astal, Gdk, Widget } from "astal/gtk3"; +import { BackgroundWindow } from "./BackgroundWindow"; +import { Windows } from "../windows"; - -const { TOP, BOTTOM, LEFT, RIGHT } = Astal.WindowAnchor; - -export type PopupWindowProps = Pick & { - child?: (Gtk.Widget | Binding); - children?: (Array>); - marginTop?: number; - marginLeft?: number; - marginBottom?: number; - marginRight?: number; - onKeyPressEvent?: (self: Widget.Window, event: Gdk.Event) => void; +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() function will still be ran after close action if defined. + * 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; }; -export const PopupWindow = (props: PopupWindowProps): Widget.Window => { - if(!props.closeAction) - props.closeAction = (window) => window.close(); +export type PopupWindowProps = Omit & PopupWindowSpecificProps; - return new Widget.Window({ - namespace: props?.namespace || "popup-window", +export function PopupWindow(props: PopupWindowProps): Widget.Window { + props.closeAction = props.closeAction ?? ((window) => window.close()); + + const bgWindow = BackgroundWindow({ + monitor: Windows.getFocusedMonitorId() ?? 0, + css: props.cssBackgroundWindow ?? "", + onClick: () => { + props.closeAction!(window); + props.onClose?.(window); + } + }); + + const window = new Widget.Window({ + ...props, + namespace: props?.namespace ?? "popup-window", className: `popup-window ${(props.namespace instanceof Binding ? props.namespace.get() : props.namespace) || ""}`, - anchor: TOP | BOTTOM | LEFT | RIGHT, - exclusivity: props.exclusivity || Astal.Exclusivity.NORMAL, keymode: Astal.Keymode.EXCLUSIVE, - layer: props?.layer || Astal.Layer.OVERLAY, - focusOnMap: true, - setup: props.setup, - monitor: props.monitor || 0, - 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))) { - props.closeAction!(_); - props.onClose && props.onClose(_); - } + onDestroy: (self) => { + bgWindow.close(); + props.closeAction!(self); + props.onClose?.(self); + props.onDestroy?.(self); }, - onKeyPressEvent: (_, event: Gdk.Event) => { + onKeyPressEvent: (self, event: Gdk.Event) => { if(event.get_keyval()[1] === Gdk.KEY_Escape) { - props.closeAction!(_); - props.onClose && props.onClose(_); + props.closeAction!(self); + bgWindow.close(); + + return; } - props.onKeyPressEvent && - props.onKeyPressEvent(_, event); + props.onKeyPressEvent?.(self, event); }, - child: new Widget.Box({ - className: (props?.className instanceof Binding) ? - props.className.as((clsName: string|undefined) => - `popup ${clsName || ""}`) - : `popup ${props?.className || ""}`, - halign: props?.halign || Gtk.Align.CENTER, - valign: props?.valign || Gtk.Align.CENTER, - css: `.popup { - margin-top: ${props.marginTop || 0}px; - margin-bottom: ${props.marginBottom || 0}px; - margin-left: ${props.marginLeft || 0}px; - margin-right: ${props.marginRight || 0}px; - }`, - expand: props.expand, - vexpand: props.vexpand, - hexpand: props.hexpand, - widthRequest: props.widthRequest, - heightRequest: props.heightRequest, - onButtonPressEvent: () => true, - ...(props.child ? { child: props.child } : {}), - ...(props.children ? { children: props.children } : {}) - } as Widget.BoxProps) } as Widget.WindowProps); + + return window; }