administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-08 20:25:26 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Show filters on mobile view

Browse Source
This commit is contained in:
Nicolas Mowen 2024-02-27 14:01:24 -07:00
parent b7079011e9
commit 6aae93c583
2 changed files with 29 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
web/src/components/filter/ReviewFilterGroup.tsx
View File

@ -15,6 +15,7 @@ import { Calendar } from "../ui/calendar";
import { ReviewFilter } from "@/types/review"; import { ReviewFilter } from "@/types/review";
import { getEndOfDayTimestamp } from "@/utils/dateUtil"; import { getEndOfDayTimestamp } from "@/utils/dateUtil";
import { useFormattedTimestamp } from "@/hooks/use-date-utils"; import { useFormattedTimestamp } from "@/hooks/use-date-utils";
import { isMobile } from "react-device-detect";
const ATTRIBUTES = ["amazon", "face", "fedex", "license_plate", "ups"]; const ATTRIBUTES = ["amazon", "face", "fedex", "license_plate", "ups"];
@ -122,11 +123,17 @@ function CamerasFilterButton({
}} }}
> >
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button className="mx-1 capitalize" variant="secondary"> <Button
<LuVideo className=" mr-[10px]" /> size={isMobile ? "sm" : "default"}
{selectedCameras == undefined className="mx-1 capitalize"
? "All Cameras" variant="secondary"
: `${selectedCameras.length} Cameras`} >
<LuVideo className="md:mr-[10px]" />
<div className="hidden md:block">
{selectedCameras == undefined
? "All Cameras"
: `${selectedCameras.length} Cameras`}
</div>
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent> <DropdownMenuContent>
@ -205,9 +212,15 @@ function CalendarFilterButton({
}} }}
> >
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button className="mx-1" variant="secondary"> <Button
<LuCalendar className=" mr-[10px]" /> size={isMobile ? "sm" : "default"}
{day == undefined ? "Last 24 Hours" : selectedDate} className="mx-1"
variant="secondary"
>
<LuCalendar className="md:mr-[10px]" />
<div className="hidden md:block">
{day == undefined ? "Last 24 Hours" : selectedDate}
</div>
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent> <PopoverContent>
@ -241,9 +254,13 @@ function GeneralFilterButton({
return ( return (
<Popover> <Popover>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button className="mx-1" variant="secondary"> <Button
<LuFilter className=" mr-[10px]" /> size={isMobile ? "sm" : "default"}
Filter className="mx-1"
variant="secondary"
>
<LuFilter className="md:mr-[10px]" />
<div className="hidden md:block">Filter</div>
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent side="left" asChild> <PopoverContent side="left" asChild>

4
web/src/views/events/EventView.tsx
View File

@ -229,9 +229,7 @@ export default function EventView({
<div className="hidden md:block">Motion</div> <div className="hidden md:block">Motion</div>
</ToggleGroupItem> </ToggleGroupItem>
</ToggleGroup> </ToggleGroup>
{isDesktop && ( <ReviewFilterGroup filter={filter} onUpdateFilter={updateFilter} />
<ReviewFilterGroup filter={filter} onUpdateFilter={updateFilter} />
)}
</div> </div>
<div className="flex h-full overflow-hidden"> <div className="flex h-full overflow-hidden">