mirror of
https://github.com/getpaseo/paseo.git
synced 2026-11-01 06:02:56 +00:00
Mohamed Boudra
e12feb633f
The reset countdown floored to one unit, so a weekly window read "resets 2d"
from 2d 23h down to 2d 0h and looked stuck for a day; the session window had
the same problem with hours. Countdowns now use two units ("2d 23h", "4h 59m"),
and every row also shows the clock time it resets ("7:20 AM", "Sat 8:00 AM",
"Oct 31, 3:00 PM"), so users can plan work around a reset without hovering.
Rows now put the window name and percent on one line, the bar under it, and the
reset on its own full-width line, so the exact time fits at phone width in
longer languages. The pinned-row background is gone; the pin glyph, drawn in
the foreground colour when pinned, is the only pinned signal. Bars are 6px.
49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import { Text, View } from "react-native";
|
|
import { StyleSheet } from "react-native-unistyles";
|
|
|
|
/**
|
|
* The reset data of a window or balance: the countdown first, then the exact time. When the line
|
|
* is too narrow the exact time gives way (truncates) and the countdown stays whole.
|
|
*/
|
|
export function UsageResetLine({
|
|
countdown,
|
|
exactTime,
|
|
atRisk = false,
|
|
testID,
|
|
}: {
|
|
countdown: string | null;
|
|
exactTime: string | null;
|
|
/** The countdown is a runs-out warning rather than a reset. */
|
|
atRisk?: boolean;
|
|
testID?: string;
|
|
}) {
|
|
if (!countdown) return null;
|
|
return (
|
|
<View style={styles.line} testID={testID}>
|
|
<Text style={atRisk ? styles.atRisk : styles.text}>{countdown}</Text>
|
|
{exactTime ? (
|
|
<Text style={[styles.text, styles.exactTime]} numberOfLines={1} ellipsizeMode="tail">
|
|
{`\u00a0·\u00a0${exactTime}`}
|
|
</Text>
|
|
) : null}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create((theme) => ({
|
|
line: { flexDirection: "row", alignItems: "center" },
|
|
text: {
|
|
flexShrink: 0,
|
|
color: theme.colors.foregroundMuted,
|
|
fontSize: theme.fontSize.sm,
|
|
fontWeight: theme.fontWeight.normal,
|
|
},
|
|
atRisk: {
|
|
flexShrink: 0,
|
|
color: theme.colors.statusDanger,
|
|
fontSize: theme.fontSize.sm,
|
|
fontWeight: theme.fontWeight.normal,
|
|
},
|
|
exactTime: { flexShrink: 1 },
|
|
}));
|