github/SlimeVR-Server
1
1
Fork 0
mirror of https://github.com/SlimeVR/SlimeVR-Server.git synced 2026-04-06 02:01:58 +02:00
Code Issues 159 Packages Projects Releases Wiki Activity

TrackerBattery battery level tooltip if not shown

Browse Source
This commit is contained in:
sctanf
2025-12-17 23:48:00 -06:00
parent c9783d097b
commit 6208979ce9
1 changed files with 44 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
gui/src/components/tracker/TrackerBattery.tsx
View File

@@ -2,6 +2,7 @@ import { useConfig } from '@/hooks/config';
import { useLocaleConfig } from '@/i18n/config';
import { BatteryIcon } from '@/components/commons/icon/BatteryIcon';
import { Typography } from '@/components/commons/Typography';
import { Tooltip } from '@/components/commons/Tooltip';
export function TrackerBattery({
value,
@@ -36,36 +37,49 @@ export function TrackerBattery({
const showVoltage = moreInfo && voltage && debug;
return (
<div className="flex gap-2">
<div className="flex flex-col justify-around">
<BatteryIcon value={value} disabled={disabled} charging={charging} />
<Tooltip
disabled={!charging && (!runtime || debug)}
preferedDirection="left"
content={
<div className="flex gap-1 items-center">
<Typography>{percentFormatter.format(value)}</Typography>
</div>
}
>
<div className="flex gap-2">
<div className="flex flex-col justify-around">
<BatteryIcon value={value} disabled={disabled} charging={charging} />
</div>
{((!charging || showVoltage) && (
<div className="w-15">
{!charging && runtime != null && runtime > 0 && (
<Typography color={textColor}>
{(runtime / BigInt(3600000000)).toString() +
'h ' +
(
(runtime % BigInt(3600000000)) /
BigInt(60000000)
).toString() +
'min'}
</Typography>
)}
{!charging && (!runtime || debug) && (
<Typography color={textColor}>
{percentFormatter.format(value)}
</Typography>
)}
{showVoltage && (
<Typography color={textColor}>
{voltageFormatter.format(voltage)}V
</Typography>
)}
</div>
)) || (
<div className="flex flex-col justify-center w-15">
<div className="w-5 h-1 bg-background-30 rounded-full" />
</div>
)}
</div>
{((!charging || showVoltage) && (
<div className="w-15">
{!charging && runtime != null && runtime > 0 && (
<Typography color={textColor}>
{(runtime / BigInt(3600000000)).toString() +
'h ' +
((runtime % BigInt(3600000000)) / BigInt(60000000)).toString() +
'min'}
</Typography>
)}
{!charging && (!runtime || debug) && (
<Typography color={textColor}>
{percentFormatter.format(value)}
</Typography>
)}
{showVoltage && (
<Typography color={textColor}>
{voltageFormatter.format(voltage)}V
</Typography>
)}
</div>
)) || (
<div className="flex flex-col justify-center w-15">
<div className="w-5 h-1 bg-background-30 rounded-full" />
</div>
)}
</div>
</Tooltip>
);
}