Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-08-27 13:47:50 +02:00
Code Issues Projects Releases Wiki Activity

fix export dialog overflowing due to i18n time lengths (#19736)

Browse Source 
wrap the pair of custom time pickers in a flex-wrap
This commit is contained in:
Josh Hawkins 2025-08-25 18:11:42 -05:00 committed by GitHub
parent 4fcb1ea7ac
commit 0dda37ac43
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 130 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

258
web/src/components/overlay/ExportDialog.tsx
View File

@ -433,137 +433,139 @@ function CustomTimeSelector({
className={`mt-3 flex items-center rounded-lg bg-secondary text-secondary-foreground ${isDesktop ? "mx-8 gap-2 px-2" : "pl-2"}`} className={`mt-3 flex items-center rounded-lg bg-secondary text-secondary-foreground ${isDesktop ? "mx-8 gap-2 px-2" : "pl-2"}`}
> >
<FaCalendarAlt /> <FaCalendarAlt />
<Popover <div className="flex flex-wrap items-center">
open={startOpen} <Popover
onOpenChange={(open) => { open={startOpen}
if (!open) { onOpenChange={(open) => {
setStartOpen(false); if (!open) {
}
}}
>
<PopoverTrigger asChild>
<Button
className={`text-primary ${isDesktop ? "" : "text-xs"}`}
aria-label={t("export.time.start.title")}
variant={startOpen ? "select" : "default"}
size="sm"
onClick={() => {
setStartOpen(true);
setEndOpen(false);
}}
>
{formattedStart}
</Button>
</PopoverTrigger>
<PopoverContent className="flex flex-col items-center">
<TimezoneAwareCalendar
timezone={config?.ui.timezone}
selectedDay={new Date(startTime * 1000)}
onSelect={(day) => {
if (!day) {
return;
}
setRange({
before: endTime,
after: day.getTime() / 1000 + 1,
});
}}
/>
<SelectSeparator className="bg-secondary" />
<input
className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
id="startTime"
type="time"
value={startClock}
step={isIOS ? "60" : "1"}
onChange={(e) => {
const clock = e.target.value;
const [hour, minute, second] = isIOS
? [...clock.split(":"), "00"]
: clock.split(":");
const start = new Date(startTime * 1000);
start.setHours(
parseInt(hour),
parseInt(minute),
parseInt(second ?? 0),
0,
);
setRange({
before: endTime,
after: start.getTime() / 1000,
});
}}
/>
</PopoverContent>
</Popover>
<FaArrowRight className="size-4 text-primary" />
<Popover
open={endOpen}
onOpenChange={(open) => {
if (!open) {
setEndOpen(false);
}
}}
>
<PopoverTrigger asChild>
<Button
className={`text-primary ${isDesktop ? "" : "text-xs"}`}
aria-label={t("export.time.end.title")}
variant={endOpen ? "select" : "default"}
size="sm"
onClick={() => {
setEndOpen(true);
setStartOpen(false); setStartOpen(false);
}} }
> }}
{formattedEnd} >
</Button> <PopoverTrigger asChild>
</PopoverTrigger> <Button
<PopoverContent className="flex flex-col items-center"> className={`text-primary ${isDesktop ? "" : "text-xs"}`}
<TimezoneAwareCalendar aria-label={t("export.time.start.title")}
timezone={config?.ui.timezone} variant={startOpen ? "select" : "default"}
selectedDay={new Date(endTime * 1000)} size="sm"
onSelect={(day) => { onClick={() => {
if (!day) { setStartOpen(true);
return; setEndOpen(false);
} }}
>
{formattedStart}
</Button>
</PopoverTrigger>
<PopoverContent className="flex flex-col items-center">
<TimezoneAwareCalendar
timezone={config?.ui.timezone}
selectedDay={new Date(startTime * 1000)}
onSelect={(day) => {
if (!day) {
return;
}
setRange({ setRange({
after: startTime, before: endTime,
before: day.getTime() / 1000, after: day.getTime() / 1000 + 1,
}); });
}} }}
/> />
<SelectSeparator className="bg-secondary" /> <SelectSeparator className="bg-secondary" />
<input <input
className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]" className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
id="startTime" id="startTime"
type="time" type="time"
value={endClock} value={startClock}
step={isIOS ? "60" : "1"} step={isIOS ? "60" : "1"}
onChange={(e) => { onChange={(e) => {
const clock = e.target.value; const clock = e.target.value;
const [hour, minute, second] = isIOS const [hour, minute, second] = isIOS
? [...clock.split(":"), "00"] ? [...clock.split(":"), "00"]
: clock.split(":"); : clock.split(":");
const end = new Date(endTime * 1000); const start = new Date(startTime * 1000);
end.setHours( start.setHours(
parseInt(hour), parseInt(hour),
parseInt(minute), parseInt(minute),
parseInt(second ?? 0), parseInt(second ?? 0),
0, 0,
); );
setRange({ setRange({
before: end.getTime() / 1000, before: endTime,
after: startTime, after: start.getTime() / 1000,
}); });
}} }}
/> />
</PopoverContent> </PopoverContent>
</Popover> </Popover>
<FaArrowRight className="size-4 text-primary" />
<Popover
open={endOpen}
onOpenChange={(open) => {
if (!open) {
setEndOpen(false);
}
}}
>
<PopoverTrigger asChild>
<Button
className={`text-primary ${isDesktop ? "" : "text-xs"}`}
aria-label={t("export.time.end.title")}
variant={endOpen ? "select" : "default"}
size="sm"
onClick={() => {
setEndOpen(true);
setStartOpen(false);
}}
>
{formattedEnd}
</Button>
</PopoverTrigger>
<PopoverContent className="flex flex-col items-center">
<TimezoneAwareCalendar
timezone={config?.ui.timezone}
selectedDay={new Date(endTime * 1000)}
onSelect={(day) => {
if (!day) {
return;
}
setRange({
after: startTime,
before: day.getTime() / 1000,
});
}}
/>
<SelectSeparator className="bg-secondary" />
<input
className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
id="startTime"
type="time"
value={endClock}
step={isIOS ? "60" : "1"}
onChange={(e) => {
const clock = e.target.value;
const [hour, minute, second] = isIOS
? [...clock.split(":"), "00"]
: clock.split(":");
const end = new Date(endTime * 1000);
end.setHours(
parseInt(hour),
parseInt(minute),
parseInt(second ?? 0),
0,
);
setRange({
before: end.getTime() / 1000,
after: startTime,
});
}}
/>
</PopoverContent>
</Popover>
</div>
</div> </div>
); );
} }