blob: 6b0286fb850ef7fdf7c3817c9abc8c0ad04f27cb (
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
|
import { App, Astal, Gtk } from "astal/gtk3"
import { Variable } from "astal"
import Popup from "./Popover"
const { TOP, RIGHT, LEFT } = Astal.WindowAnchor
App.start({
instanceName: "popup-example",
css: `
.Popup>box {
background-color: @theme_bg_color;
box-shadow: 2px 3px 7px 0 rgba(0,0,0,0.4);
border-radius: 12px;
padding: 12px;
}
`,
main() {
const visible = Variable(false);
<Popup
className="Popup"
onClose={() => visible.set(false)}
visible={visible()}
marginTop={36}
marginRight={60}
valign={Gtk.Align.START}
halign={Gtk.Align.END}
>
<button onClicked={() => visible.set(false)}>
Click me to close the popup
</button>
</Popup>
return (
<window
anchor={TOP | LEFT | RIGHT}
exclusivity={Astal.Exclusivity.EXCLUSIVE}
>
<button onClicked={() => visible.set(true)} halign={Gtk.Align.END}>
Click to open popup
</button>
</window>
)
},
})
|
