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

Rework mobile drawers to have a max height (#10330)

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-08 10:14:58 -07:00 committed by GitHub
parent cb3045b424
commit ea5cb4fd8b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 158 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -155,6 +155,7 @@ function CamerasFilterButton({
Filter Cameras Filter Cameras
</DropdownMenuLabel> </DropdownMenuLabel>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<div className="h-auto overflow-y-auto overflow-x-hidden">
<FilterCheckBox <FilterCheckBox
isChecked={currentCameras == undefined} isChecked={currentCameras == undefined}
label="All Cameras" label="All Cameras"
@ -189,12 +190,16 @@ function CamerasFilterButton({
label={item.replaceAll("_", " ")} label={item.replaceAll("_", " ")}
onCheckedChange={(isChecked) => { onCheckedChange={(isChecked) => {
if (isChecked) { if (isChecked) {
const updatedCameras = currentCameras ? [...currentCameras] : []; const updatedCameras = currentCameras
? [...currentCameras]
: [];
updatedCameras.push(item); updatedCameras.push(item);
setCurrentCameras(updatedCameras); setCurrentCameras(updatedCameras);
} else { } else {
const updatedCameras = currentCameras ? [...currentCameras] : []; const updatedCameras = currentCameras
? [...currentCameras]
: [];
// can not deselect the last item // can not deselect the last item
if (updatedCameras.length > 1) { if (updatedCameras.length > 1) {
@ -205,6 +210,7 @@ function CamerasFilterButton({
}} }}
/> />
))} ))}
</div>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<div className="flex justify-center items-center"> <div className="flex justify-center items-center">
<Button <Button
@ -233,7 +239,9 @@ function CamerasFilterButton({
}} }}
> >
<DrawerTrigger asChild>{trigger}</DrawerTrigger> <DrawerTrigger asChild>{trigger}</DrawerTrigger>
<DrawerContent>{content}</DrawerContent> <DrawerContent className="max-h-[75dvh] overflow-hidden">
{content}
</DrawerContent>
</Drawer> </Drawer>
); );
} }
@ -380,13 +388,16 @@ function GeneralFilterButton({
checked={reviewed == 1} checked={reviewed == 1}
onCheckedChange={() => setReviewed(reviewed == 0 ? 1 : 0)} onCheckedChange={() => setReviewed(reviewed == 0 ? 1 : 0)}
/> />
<Label className="ml-2" htmlFor="reviewed">Show Reviewed</Label> <Label className="ml-2" htmlFor="reviewed">
Show Reviewed
</Label>
</div> </div>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuLabel className="flex justify-center items-center"> <DropdownMenuLabel className="flex justify-center items-center">
Filter Labels Filter Labels
</DropdownMenuLabel> </DropdownMenuLabel>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<div className="h-auto overflow-y-auto overflow-x-hidden">
<FilterCheckBox <FilterCheckBox
isChecked={currentLabels == undefined} isChecked={currentLabels == undefined}
label="All Labels" label="All Labels"
@ -420,6 +431,7 @@ function GeneralFilterButton({
}} }}
/> />
))} ))}
</div>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<div className="flex justify-center items-center"> <div className="flex justify-center items-center">
<Button <Button
@ -456,7 +468,9 @@ function GeneralFilterButton({
}} }}
> >
<DrawerTrigger asChild>{trigger}</DrawerTrigger> <DrawerTrigger asChild>{trigger}</DrawerTrigger>
<DrawerContent>{content}</DrawerContent> <DrawerContent className="max-h-[75dvh] overflow-hidden">
{content}
</DrawerContent>
</Drawer> </Drawer>
); );
} }

42
web/src/pages/SubmitPlus.tsx
View File

@ -9,6 +9,7 @@ import {
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
import { import {
DropdownMenu, DropdownMenu,
DropdownMenuContent, DropdownMenuContent,
@ -20,6 +21,7 @@ import { Event } from "@/types/event";
import { FrigateConfig } from "@/types/frigateConfig"; import { FrigateConfig } from "@/types/frigateConfig";
import axios from "axios"; import axios from "axios";
import { useCallback, useMemo, useState } from "react"; import { useCallback, useMemo, useState } from "react";
import { isMobile } from "react-device-detect";
import { FaList, FaVideo } from "react-icons/fa"; import { FaList, FaVideo } from "react-icons/fa";
import useSWR from "swr"; import useSWR from "swr";
@ -193,9 +195,13 @@ function PlusFilterGroup({
undefined, undefined,
); );
const Menu = isMobile ? Drawer : DropdownMenu;
const Trigger = isMobile ? DrawerTrigger : DropdownMenuTrigger;
const Content = isMobile ? DrawerContent : DropdownMenuContent;
return ( return (
<div className="w-full h-16 flex justify-start gap-2 items-center"> <div className="w-full h-16 flex justify-start gap-2 items-center">
<DropdownMenu <Menu
open={open == "camera"} open={open == "camera"}
onOpenChange={(open) => { onOpenChange={(open) => {
if (!open) { if (!open) {
@ -204,7 +210,7 @@ function PlusFilterGroup({
setOpen(open ? "camera" : "none"); setOpen(open ? "camera" : "none");
}} }}
> >
<DropdownMenuTrigger asChild> <Trigger asChild>
<Button size="sm" className="mx-1 capitalize" variant="secondary"> <Button size="sm" className="mx-1 capitalize" variant="secondary">
<FaVideo className="md:mr-[10px] text-muted-foreground" /> <FaVideo className="md:mr-[10px] text-muted-foreground" />
<div className="hidden md:block"> <div className="hidden md:block">
@ -213,8 +219,8 @@ function PlusFilterGroup({
: `${selectedCameras.length} Cameras`} : `${selectedCameras.length} Cameras`}
</div> </div>
</Button> </Button>
</DropdownMenuTrigger> </Trigger>
<DropdownMenuContent> <Content className={isMobile ? "max-h-[75dvh]" : ""}>
<DropdownMenuLabel className="flex justify-center"> <DropdownMenuLabel className="flex justify-center">
Filter Cameras Filter Cameras
</DropdownMenuLabel> </DropdownMenuLabel>
@ -229,6 +235,7 @@ function PlusFilterGroup({
}} }}
/> />
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<div className={isMobile ? "h-auto overflow-y-auto" : ""}>
{allCameras.map((item) => ( {allCameras.map((item) => (
<FilterCheckBox <FilterCheckBox
key={item} key={item}
@ -256,6 +263,7 @@ function PlusFilterGroup({
}} }}
/> />
))} ))}
</div>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<div className="flex justify-center items-center"> <div className="flex justify-center items-center">
<Button <Button
@ -268,9 +276,9 @@ function PlusFilterGroup({
Apply Apply
</Button> </Button>
</div> </div>
</DropdownMenuContent> </Content>
</DropdownMenu> </Menu>
<DropdownMenu <Menu
open={open == "label"} open={open == "label"}
onOpenChange={(open) => { onOpenChange={(open) => {
if (!open) { if (!open) {
@ -279,7 +287,7 @@ function PlusFilterGroup({
setOpen(open ? "label" : "none"); setOpen(open ? "label" : "none");
}} }}
> >
<DropdownMenuTrigger asChild> <Trigger asChild>
<Button size="sm" className="mx-1 capitalize" variant="secondary"> <Button size="sm" className="mx-1 capitalize" variant="secondary">
<FaList className="md:mr-[10px] text-muted-foreground" /> <FaList className="md:mr-[10px] text-muted-foreground" />
<div className="hidden md:block"> <div className="hidden md:block">
@ -288,8 +296,8 @@ function PlusFilterGroup({
: `${selectedLabels.length} Labels`} : `${selectedLabels.length} Labels`}
</div> </div>
</Button> </Button>
</DropdownMenuTrigger> </Trigger>
<DropdownMenuContent> <Content className={isMobile ? "max-h-[75dvh]" : ""}>
<DropdownMenuLabel className="flex justify-center"> <DropdownMenuLabel className="flex justify-center">
Filter Labels Filter Labels
</DropdownMenuLabel> </DropdownMenuLabel>
@ -304,6 +312,7 @@ function PlusFilterGroup({
}} }}
/> />
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<div className={isMobile ? "h-auto overflow-y-auto" : ""}>
{allLabels.map((item) => ( {allLabels.map((item) => (
<FilterCheckBox <FilterCheckBox
key={item} key={item}
@ -311,12 +320,16 @@ function PlusFilterGroup({
label={item.replaceAll("_", " ")} label={item.replaceAll("_", " ")}
onCheckedChange={(isChecked) => { onCheckedChange={(isChecked) => {
if (isChecked) { if (isChecked) {
const updatedLabels = currentLabels ? [...currentLabels] : []; const updatedLabels = currentLabels
? [...currentLabels]
: [];
updatedLabels.push(item); updatedLabels.push(item);
setCurrentLabels(updatedLabels); setCurrentLabels(updatedLabels);
} else { } else {
const updatedLabels = currentLabels ? [...currentLabels] : []; const updatedLabels = currentLabels
? [...currentLabels]
: [];
// can not deselect the last item // can not deselect the last item
if (updatedLabels.length > 1) { if (updatedLabels.length > 1) {
@ -327,6 +340,7 @@ function PlusFilterGroup({
}} }}
/> />
))} ))}
</div>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<div className="flex justify-center items-center"> <div className="flex justify-center items-center">
<Button <Button
@ -339,8 +353,8 @@ function PlusFilterGroup({
Apply Apply
</Button> </Button>
</div> </div>
</DropdownMenuContent> </Content>
</DropdownMenu> </Menu>
</div> </div>
); );
} }