✨ ags(background-window, popup-window): use props on background-window, use new background-window on popup-window
This commit is contained in:
retrozinndev
@@ -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);
|
||||
}
|
||||
|
||||
+39
-74
@@ -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<Widget.WindowProps,
|
||||
"namespace"
|
||||
| "visible"
|
||||
| "className"
|
||||
| "hexpand"
|
||||
| "vexpand"
|
||||
| "halign"
|
||||
| "valign"
|
||||
| "expand"
|
||||
| "layer"
|
||||
| "widthRequest"
|
||||
| "heightRequest"
|
||||
| "monitor"
|
||||
| "setup"
|
||||
| "exclusivity"> & {
|
||||
child?: (Gtk.Widget | Binding<Gtk.Widget | undefined>);
|
||||
children?: (Array<Gtk.Widget | Binding<Gtk.Widget | undefined>>);
|
||||
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<Widget.WindowProps, "keymode"> & 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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user