nosignal/nosignal-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

bar: better battery indicator

Browse source
This commit is contained in:
2 * r + 2 * t 2025-02-20 15:42:49 +11:00
parent 1a0816655d
commit e0038ff74d
2 changed files with 25 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
scss/bar.scss
View file

@ -74,7 +74,11 @@
.battery { .battery {
color: scheme.$teal; color: scheme.$teal;
.low { &.charging {
color: scheme.$green;
}
&.low {
color: scheme.$red; color: scheme.$red;
} }
} }

40
src/modules/bar.tsx
View file

@ -35,9 +35,16 @@ const getBatteryIcon = (perc: number) => {
}; };
const formatSeconds = (sec: number) => { const formatSeconds = (sec: number) => {
if (sec >= 3600) return `${Math.floor(sec / 3600)} hour${sec % 3600 === 0 ? "" : "s"}`; if (sec >= 3600) {
if (sec >= 60) return `${Math.floor(sec / 60)} minute${sec % 60 === 0 ? "" : "s"}`; const hours = Math.floor(sec / 3600);
return `${sec} second${sec === 1 ? "" : "s"}`; let str = `${hours} hour${hours === 1 ? "" : "s"}`;
const mins = Math.floor((sec % 3600) / 60);
if (mins > 0) str += ` ${mins} minute${mins === 1 ? "" : "s"}`;
return str;
} else if (sec >= 60) {
const mins = Math.floor(sec / 60);
return `${mins} minute${mins === 1 ? "" : "s"}`;
} else return `${sec} second${sec === 1 ? "" : "s"}`;
}; };
const hookFocusedClientProp = ( const hookFocusedClientProp = (
@ -451,30 +458,23 @@ const NotifCount = () => (
const Battery = () => { const Battery = () => {
const className = Variable.derive( const className = Variable.derive(
[bind(AstalBattery.get_default(), "percentage"), bind(AstalBattery.get_default(), "charging")], [bind(AstalBattery.get_default(), "percentage"), bind(AstalBattery.get_default(), "charging")],
(p, c) => `module battery ${p < 0.2 && !c ? "low" : ""}` (p, c) => `module battery ${c ? "charging" : p < 0.2 ? "low" : ""}`
);
const tooltip = Variable.derive(
[bind(AstalBattery.get_default(), "timeToEmpty"), bind(AstalBattery.get_default(), "timeToFull")],
(e, f) => (f > 0 ? `${formatSeconds(f)} until full` : `${formatSeconds(e)} remaining`)
); );
return ( return (
<box <box
vertical={config.vertical} vertical={config.vertical}
className={bind(className)} className={bind(className)}
setup={self => setup={self => setupCustomTooltip(self, bind(tooltip))}
setupCustomTooltip( onDestroy={() => {
self, className.drop();
bind(AstalBattery.get_default(), "timeToEmpty").as(p => `${formatSeconds(p)} remaining`) tooltip.drop();
) }}
}
onDestroy={() => className.drop()}
> >
<revealer
transitionType={
config.vertical ? Gtk.RevealerTransitionType.SLIDE_UP : Gtk.RevealerTransitionType.SLIDE_LEFT
}
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 className="icon" label={bind(AstalBattery.get_default(), "percentage").as(getBatteryIcon)} />
<label label={bind(AstalBattery.get_default(), "percentage").as(p => `${Math.round(p * 100)}%`)} /> <label label={bind(AstalBattery.get_default(), "percentage").as(p => `${Math.round(p * 100)}%`)} />
</box> </box>