87 lines
2.5 KiB
TypeScript
87 lines
2.5 KiB
TypeScript
import { App, Astal, Gdk, Gtk } from "astal/gtk3"
|
|
import { Variable, bind } from "astal"
|
|
|
|
interface DropdownProps {
|
|
gdkmonitor: Gdk.Monitor
|
|
target: Gtk.Widget
|
|
open: Variable<boolean>
|
|
width?: number
|
|
vertical?: boolean
|
|
className?: string
|
|
children: Array<JSX.Element>
|
|
}
|
|
|
|
export default function Dropdown({
|
|
gdkmonitor,
|
|
target,
|
|
open,
|
|
width = 260,
|
|
vertical = true,
|
|
className = "",
|
|
children,
|
|
}: DropdownProps) {
|
|
const { TOP, BOTTOM, LEFT, RIGHT } = Astal.WindowAnchor
|
|
const GAP = 8
|
|
|
|
const child = (
|
|
<box
|
|
className={`dropdown ${className}`}
|
|
vertical={vertical}
|
|
widthRequest={width}
|
|
halign={Gtk.Align.START}
|
|
valign={Gtk.Align.START}
|
|
>
|
|
{children}
|
|
</box>
|
|
)
|
|
|
|
function reposition() {
|
|
const toplevel = target.get_toplevel()
|
|
const [, tx, ty] = target.translate_coordinates(toplevel, 0, 0)
|
|
const { width: bw, height: bh } = target.get_allocation()
|
|
const { width: sw } = gdkmonitor.get_geometry()
|
|
|
|
const x = Math.min(Math.max(tx + bw / 2 - width / 2, GAP), sw - width - GAP)
|
|
const y = ty + bh + GAP
|
|
|
|
child.marginStart = Math.round(x)
|
|
child.marginTop = Math.round(y)
|
|
}
|
|
|
|
open.subscribe((v) => {
|
|
if (v) reposition()
|
|
})
|
|
|
|
return (
|
|
<window
|
|
className="popup-window"
|
|
application={App}
|
|
gdkmonitor={gdkmonitor}
|
|
namespace="ags-bar-popup"
|
|
layer={Astal.Layer.OVERLAY}
|
|
keymode={Astal.Keymode.EXCLUSIVE}
|
|
anchor={TOP | BOTTOM | LEFT | RIGHT}
|
|
exclusivity={Astal.Exclusivity.IGNORE}
|
|
visible={bind(open)}
|
|
onNotifyVisible={(self) => {
|
|
if (!self.visible) open.set(false)
|
|
}}
|
|
onButtonPressEvent={(self, e) => {
|
|
const event = e as unknown as Gdk.Event
|
|
const [, px, py] = event.get_coords()
|
|
const { x, y, width: w, height: h } = child.get_allocation()
|
|
const xOut = px < x || px > x + w
|
|
const yOut = py < y || py > y + h
|
|
|
|
if (xOut || yOut) self.visible = false
|
|
}}
|
|
onKeyPressEvent={(self, e) => {
|
|
const event = e as unknown as Gdk.Event
|
|
if (event.get_keyval()[1] === Gdk.KEY_Escape) self.visible = false
|
|
}}
|
|
>
|
|
{child}
|
|
</window>
|
|
)
|
|
}
|