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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
import { App, Astal, Gtk, Gdk } from "astal/gtk3"
import { bind, Variable } from "astal"
import { BoxProps, CenterBoxProps } from "astal/gtk3/widget"
import AstalBattery from "gi://AstalBattery"
import AstalNetwork from "gi://AstalNetwork"
import AstalBluetooth from "gi://AstalBluetooth"
const { TOP, LEFT, RIGHT, BOTTOM } = Astal.WindowAnchor
const { START, CENTER, END } = Gtk.Align
function VerticalCenterBox(props: CenterBoxProps) {
return <centerbox
{...props}
vertical
halign={CENTER}
/>
}
function VerticalBox(props: BoxProps) {
return <box
{...props}
vertical
halign={CENTER}
/>
}
function Clock() {
const hours = Variable("").poll(360000, "date +%_H")
const minutes = Variable("").poll(60000, "date +%_M")
return <VerticalBox
className="Clock"
onDestroy={() => {
hours.drop()
minutes.drop()
}}
>
{hours()}
{minutes()}
</VerticalBox>
}
function Battery() {
const bat = AstalBattery.get_default()
return <icon
className="Battery"
tooltipText={bind(bat, "percentage").as((v) => `${v * 100}%`)}
icon={bind(bat, "iconName")}
/>
}
function Wifi() {
const wifi = AstalNetwork.get_default().get_wifi()!
return <icon
className="Wifi"
tooltipText={bind(wifi, "ssid").as(String)}
icon={bind(wifi, "iconName")}
/>
}
function Bluetooth() {
const bluetooth = AstalBluetooth.get_default()
const isPowered = bind(bluetooth, "isPowered")
return <label
className="Bluetooth"
label={isPowered.as(String)}
/>
}
export default function Bar(gdkmonitor: Gdk.Monitor) {
return <window
name="Bar"
gdkmonitor={gdkmonitor}
exclusivity={Astal.Exclusivity.EXCLUSIVE}
anchor={TOP | LEFT | BOTTOM}
application={App}>
<VerticalCenterBox
className="Bar"
>
<VerticalBox
className="ModulesTop"
valign={START}
>
</VerticalBox>
<VerticalBox
className="ModulesMiddle"
valign={CENTER}
>
<Clock />
</VerticalBox>
<VerticalBox
className="ModulesBottom"
valign={END}
>
<Bluetooth />
<Wifi />
<Battery />
</VerticalBox>
</VerticalCenterBox>
</window >
}
|
