blob: e058079b4a9ced51da09491b610a283a4c71c681 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
import { Astal, Gdk, Widget } from "astal/gtk3"
import Variable from "astal/variable"
type Popover2Props = Pick<
Widget.WindowProps,
| "name"
| "namespace"
| "className"
| "visible"
| "child"
> & {
onClose?(self: Widget.Window): void
}
/**
* Full screen window where the child is positioned to center.
*
* NOTE: Workaround for the label wrap issue by padding the window
* with eventboxes and only anchoring to TOP | BOTTOM.
*/
export default function Popover2({
child,
onClose,
...props
}: Popover2Props) {
let win: Widget.Window
const width = Variable(1000)
const hide = () => (win.visible = false)
return (
<window
{...props}
setup={self => win = self}
css="background-color: transparent"
keymode={Astal.Keymode.EXCLUSIVE}
anchor={Astal.WindowAnchor.TOP | Astal.WindowAnchor.BOTTOM}
exclusivity={Astal.Exclusivity.IGNORE}
onNotifyVisible={(self) => {
// instead of anchoring to all sides we set the width explicitly
// otherwise label wrapping won't work correctly without setting their width
if (self.visible) {
width.set(self.get_current_monitor().workarea.width)
} else {
onClose?.(self)
}
}}
// close when hitting Escape
onKeyPressEvent={(self, event: Gdk.Event) => {
if (event.get_keyval()[1] === Gdk.KEY_Escape) {
self.visible = false
}
}}
>
<box>
<eventbox widthRequest={width(w => w / 2)} expand onClick={hide} />
<box hexpand={false} vertical>
<eventbox expand onClick={hide} />
{child}
<eventbox expand onClick={hide} />
</box>
<eventbox widthRequest={width(w => w / 2)} expand onClick={hide} />
</box>
</window>
)
}
|
