blob: 5386b66481cdc6c667756a82bf0450db96f77c25 (
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
67
68
69
70
71
72
|
import { App, Astal, Gtk } from "astal/gtk3"
import { Variable } from "astal"
import Popover from "./Popover"
import Popover2 from "./Popover2"
const { TOP, RIGHT, LEFT } = Astal.WindowAnchor
const lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis semper risus."
App.start({
instanceName: "popup-example",
css: `
.popup {
background-color: @theme_bg_color;
box-shadow: 2px 3px 7px 0 rgba(0,0,0,0.4);
border-radius: 12px;
padding: 12px;
}
`,
main() {
const visible1 = Variable(false);
const visible2 = Variable(false);
const _popover1 = <Popover
className="Popup"
onClose={() => visible1.set(false)}
visible={visible1()}
marginTop={36}
marginRight={60}
valign={Gtk.Align.START}
halign={Gtk.Align.END}
>
<box className="popup" vertical>
{/* maxWidthChars is needed to make wrap work */}
<label label={lorem} wrap maxWidthChars={8} />
<button onClicked={() => visible1.set(false)}>
Click me to close the popup
</button>
</box>
</Popover>
const _popover2 = <Popover2
className="Popup"
onClose={() => visible2.set(false)}
visible={visible2()}
>
<box className="popup" vertical>
{/* maxWidthChars is needed, wrap will work as intended */}
<label label={lorem} wrap />
<button onClicked={() => visible2.set(false)}>
Click me to close the popup
</button>
</box>
</Popover2>
return (
<window
anchor={TOP | LEFT | RIGHT}
exclusivity={Astal.Exclusivity.EXCLUSIVE}
>
<box halign={Gtk.Align.END}>
<button onClicked={() => visible2.set(true)} halign={Gtk.Align.END}>
Click to open popover2
</button>
<button onClicked={() => visible1.set(true)} halign={Gtk.Align.END}>
Click to open popover
</button>
</box>
</window>
)
},
})
|
