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

use drawer on mobile

Browse Source
This commit is contained in:
Josh Hawkins 2024-04-25 12:37:44 -05:00
parent 7710c55b93
commit f6d5836110
1 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/components/filter/CameraGroupSelector.tsx
View File

@ -13,6 +13,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
import { getIconForGroup } from "@/utils/iconUtil"; import { getIconForGroup } from "@/utils/iconUtil";
import { LuPencil, LuPlus } from "react-icons/lu"; import { LuPencil, LuPlus } from "react-icons/lu";
import { Dialog, DialogContent, DialogTitle } from "../ui/dialog"; import { Dialog, DialogContent, DialogTitle } from "../ui/dialog";
import { Drawer, DrawerContent } from "../ui/drawer";
import { Input } from "../ui/input"; import { Input } from "../ui/input";
import { Separator } from "../ui/separator"; import { Separator } from "../ui/separator";
import { import {
@ -267,18 +268,23 @@ function NewGroupDialog({
setEditState("edit"); setEditState("edit");
}, []); }, []);
const Overlay = isDesktop ? Dialog : Drawer;
const Content = isDesktop ? DialogContent : DrawerContent;
return ( return (
<> <>
<Toaster className="toaster group z-[100]" position="top-center" /> <Toaster className="toaster group z-[100]" position="top-center" />
<Dialog <Overlay
open={open} open={open}
onOpenChange={(open) => { onOpenChange={(open) => {
setEditState("none"); setEditState("none");
setOpen(open); setOpen(open);
}} }}
> >
<DialogContent className="min-w-0 w-96 md:w-6/12 max-h-dvh overflow-y-auto"> <Content
<div className="flex flex-col my-4"> className={`min-w-0 ${isMobile ? "w-full p-3 rounded-t-2xl max-h-[90%]" : "w-6/12 max-h-dvh overflow-y-auto"}`}
>
<div className="flex flex-col my-4 overflow-y-auto">
{editState === "none" && ( {editState === "none" && (
<> <>
<div className="flex flex-row justify-between items-center py-2"> <div className="flex flex-row justify-between items-center py-2">
@ -322,8 +328,8 @@ function NewGroupDialog({
</> </>
)} )}
</div> </div>
</DialogContent> </Content>
</Dialog> </Overlay>
</> </>
); );
} }