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
|
import icons from "lib/icons"
import options from "options"
import PanelButton from "../PanelButton"
const battery = await Service.import("battery")
const { bar, percentage, blocks, width, low } = options.bar.battery
const Indicator = () => Widget.Icon({
setup: self => self.hook(battery, () => {
self.icon = battery.charging || battery.charged
? icons.battery.charging
: battery.icon_name
}),
})
const PercentLabel = () => Widget.Revealer({
transition: "slide_right",
click_through: true,
reveal_child: percentage.bind(),
child: Widget.Label({
label: battery.bind("percent").as(p => `${p}%`),
}),
})
const LevelBar = () => {
const level = Widget.LevelBar({
bar_mode: "discrete",
max_value: blocks.bind(),
visible: bar.bind().as(b => b !== "hidden"),
value: battery.bind("percent").as(p => (p / 100) * blocks.value),
})
const update = () => {
level.value = (battery.percent / 100) * blocks.value
level.css = `block { min-width: ${width.value / blocks.value}pt; }`
}
return level
.hook(width, update)
.hook(blocks, update)
.hook(bar, () => {
level.vpack = bar.value === "whole" ? "fill" : "center"
level.hpack = bar.value === "whole" ? "fill" : "center"
})
}
const WholeButton = () => Widget.Overlay({
vexpand: true,
child: LevelBar(),
class_name: "whole",
pass_through: true,
overlay: Widget.Box({
hpack: "center",
children: [
Widget.Icon({
icon: icons.battery.charging,
visible: Utils.merge([
battery.bind("charging"),
battery.bind("charged"),
], (ing, ed) => ing || ed),
}),
Widget.Box({
hpack: "center",
vpack: "center",
child: PercentLabel(),
}),
],
}),
})
const Regular = () => Widget.Box({
class_name: "regular",
children: [
Indicator(),
PercentLabel(),
LevelBar(),
],
})
export default () => PanelButton({
class_name: "battery-bar",
hexpand: false,
on_clicked: () => { percentage.value = !percentage.value },
visible: battery.bind("available"),
child: Widget.Box({
expand: true,
visible: battery.bind("available"),
child: bar.bind().as(b => b === "whole" ? WholeButton() : Regular()),
}),
setup: self => self
.hook(bar, w => w.toggleClassName("bar-hidden", bar.value === "hidden"))
.hook(battery, w => {
w.toggleClassName("charging", battery.charging || battery.charged)
w.toggleClassName("low", battery.percent < low.value)
}),
})
|
