tux/tpanel
1
0
Fork 0
mirror of https://github.com/tuxdotrs/tpanel.git synced 2025-10-10 21:01:54 +05:30
Code Issues Packages Projects Releases Wiki Activity

feat: add dynamic battery icon

Browse Source
This commit is contained in:
tux
2025-06-12 18:54:03 +05:30
parent 1d4c7538c4
commit e042268846
4 changed files with 21 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
widgets/bar/battery.tsx
View File

@@ -1,12 +1,28 @@
import { bind } from "astal";
import { bind, Variable } from "astal";
import AstalBattery from "gi://AstalBattery";
export const Battery = () => {
const battery = AstalBattery.get_default();
const chargingIcon = Variable.derive(
[
bind(battery, "percentage"),
bind(battery, "charging"),
bind(battery, "state"),
],
(percentage, charging, state) => {
const batFull = state === AstalBattery.State.FULLY_CHARGED;
const p = percentage * 100;
if (batFull) return "fa-battery-full-symbolic";
if (charging) return "fa-battery-charging-symbolic";
if (p < 30) return "fa-battery-low-symbolic";
return p < 70 ? "fa-battery-medium-symbolic" : "fa-battery-full-symbolic";
},
);
return (
<box cssClasses={["pill"]} visible={bind(battery, "isPresent")} spacing={5}>
<image iconName="fa-battery-full-symbolic" />
<image iconName={chargingIcon()} onDestroy={() => chargingIcon.drop()} />
<label
label={bind(battery, "percentage").as((p) => `${Math.floor(p * 100)}%`)}
/>