diff options
| author | 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com> | 2025-02-17 17:31:45 +1100 |
|---|---|---|
| committer | 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com> | 2025-02-17 17:31:45 +1100 |
| commit | 607f20343e3aabadc49e8baf04715eabedada171 (patch) | |
| tree | fafe49ce65e3ff0d73f03bdf66831ac20bdfc653 /src/modules | |
| parent | bar: battery tooltip (diff) | |
| download | caelestia-shell-607f20343e3aabadc49e8baf04715eabedada171.tar.gz caelestia-shell-607f20343e3aabadc49e8baf04715eabedada171.tar.bz2 caelestia-shell-607f20343e3aabadc49e8baf04715eabedada171.zip | |
bar: battery charging indicator
Diffstat (limited to 'src/modules')
| -rw-r--r-- | src/modules/bar.tsx | 45 |
1 files changed, 30 insertions, 15 deletions
diff --git a/src/modules/bar.tsx b/src/modules/bar.tsx index 2645fde..ad11f43 100644 --- a/src/modules/bar.tsx +++ b/src/modules/bar.tsx @@ -468,20 +468,35 @@ const NotifCount = () => ( </button> ); -const Battery = () => ( - <box - className={bind(AstalBattery.get_default(), "percentage").as(p => `module battery ${p < 0.2 ? "low" : ""}`)} - setup={self => - setupCustomTooltip( - self, - bind(AstalBattery.get_default(), "timeToEmpty").as(p => `${formatSeconds(p)} remaining`) - ) - } - > - <label className="icon" label={bind(AstalBattery.get_default(), "percentage").as(getBatteryIcon)} /> - <label label={bind(AstalBattery.get_default(), "percentage").as(p => `${Math.round(p * 100)}%`)} /> - </box> -); +const Battery = () => { + const className = Variable.derive( + [bind(AstalBattery.get_default(), "percentage"), bind(AstalBattery.get_default(), "charging")], + (p, c) => `module battery ${p < 0.2 && !c ? "low" : ""}` + ); + + return ( + <box + className={bind(className)} + setup={self => + setupCustomTooltip( + self, + bind(AstalBattery.get_default(), "timeToEmpty").as(p => `${formatSeconds(p)} remaining`) + ) + } + onDestroy={() => className.drop()} + > + <revealer + transitionType={Gtk.RevealerTransitionType.SLIDE_RIGHT} + transitionDuration={150} + revealChild={bind(AstalBattery.get_default(), "charging")} + > + <label className="icon" label="" /> + </revealer> + <label className="icon" label={bind(AstalBattery.get_default(), "percentage").as(getBatteryIcon)} /> + <label label={bind(AstalBattery.get_default(), "percentage").as(p => `${Math.round(p * 100)}%`)} /> + </box> + ); +}; const DateTime = () => ( <button @@ -537,7 +552,7 @@ export default ({ monitor }: { monitor: Monitor }) => ( <StatusIcons /> <PkgUpdates /> <NotifCount /> - {bind(AstalBattery.get_default(), "isBattery").as(b => b && <Battery />)} + {AstalBattery.get_default().isBattery && <Battery />} <DateTime /> <Power /> </box> |