administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-05-05 04:57:42 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Use mobile drawer for face selection

Browse Source
This commit is contained in:
Nicolas Mowen 2025-04-10 13:38:43 -06:00
parent 64db518837
commit 29ab7f247e
1 changed files with 43 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
web/src/pages/FaceLibrary.tsx
View File

@ -13,6 +13,12 @@ import {
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerTrigger,
} from "@/components/ui/drawer";
import { import {
DropdownMenu, DropdownMenu,
DropdownMenuContent, DropdownMenuContent,
@ -842,6 +848,11 @@ function FaceAttempt({
}); });
}, [data, onRefresh, t]); }, [data, onRefresh, t]);
const Selector = isDesktop ? DropdownMenu : Drawer;
const SelectorTrigger = isDesktop ? DropdownMenuTrigger : DrawerTrigger;
const SelectorContent = isDesktop ? DropdownMenuContent : DrawerContent;
const SelectorItem = isDesktop ? DropdownMenuItem : DrawerClose;
return ( return (
<> <>
{newFace && ( {newFace && (
@ -896,33 +907,45 @@ function FaceAttempt({
</div> </div>
<div className="flex flex-row items-start justify-end gap-5 md:gap-4"> <div className="flex flex-row items-start justify-end gap-5 md:gap-4">
<Tooltip> <Tooltip>
<DropdownMenu> <Selector>
<DropdownMenuTrigger asChild> <SelectorTrigger asChild>
<TooltipTrigger> <TooltipTrigger>
<AddFaceIcon className="size-5 cursor-pointer text-primary-variant hover:text-primary" /> <AddFaceIcon className="size-5 cursor-pointer text-primary-variant hover:text-primary" />
</TooltipTrigger> </TooltipTrigger>
</DropdownMenuTrigger> </SelectorTrigger>
<DropdownMenuContent> <SelectorContent
className={cn(
"max-h-[75dvh] overflow-hidden",
isMobile && "mx-1 gap-2 rounded-t-2xl px-4",
)}
>
<DropdownMenuLabel>{t("trainFaceAs")}</DropdownMenuLabel> <DropdownMenuLabel>{t("trainFaceAs")}</DropdownMenuLabel>
<DropdownMenuItem <div
className="flex cursor-pointer gap-2 capitalize" className={cn(
onClick={() => setNewFace(true)} "flex flex-col",
isMobile && "gap-2 overflow-y-auto pb-4",
)}
> >
<LuPlus /> <SelectorItem
{t("createFaceLibrary.new")}
</DropdownMenuItem>
{faceNames.map((faceName) => (
<DropdownMenuItem
key={faceName}
className="flex cursor-pointer gap-2 capitalize" className="flex cursor-pointer gap-2 capitalize"
onClick={() => onTrainAttempt(faceName)} onClick={() => setNewFace(true)}
> >
<LuScanFace /> <LuPlus />
{faceName} {t("createFaceLibrary.new")}
</DropdownMenuItem> </SelectorItem>
))} {faceNames.map((faceName) => (
</DropdownMenuContent> <SelectorItem
</DropdownMenu> key={faceName}
className="flex cursor-pointer gap-2 capitalize"
onClick={() => onTrainAttempt(faceName)}
>
<LuScanFace />
{faceName}
</SelectorItem>
))}
</div>
</SelectorContent>
</Selector>
<TooltipContent>{t("trainFace")}</TooltipContent> <TooltipContent>{t("trainFace")}</TooltipContent>
</Tooltip> </Tooltip>
<Tooltip> <Tooltip>