95 lines
2.7 KiB
TypeScript
95 lines
2.7 KiB
TypeScript
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)
|
|
}),
|
|
})
|