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

use mobilepage with create trigger dialog

Browse Source
This commit is contained in:
Josh Hawkins 2025-09-22 08:59:23 -05:00
parent cd519ed1ad
commit 0920f3b5e4
1 changed files with 31 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
web/src/components/overlay/CreateTriggerDialog.tsx
View File

@ -38,6 +38,15 @@ import { Trigger, TriggerAction, TriggerType } from "@/types/trigger";
import { Switch } from "@/components/ui/switch"; import { Switch } from "@/components/ui/switch";
import { Textarea } from "../ui/textarea"; import { Textarea } from "../ui/textarea";
import { useCameraFriendlyName } from "@/hooks/use-camera-friendly-name"; import { useCameraFriendlyName } from "@/hooks/use-camera-friendly-name";
import { isDesktop, isMobile } from "react-device-detect";
import { cn } from "@/lib/utils";
import {
MobilePage,
MobilePageContent,
MobilePageDescription,
MobilePageHeader,
MobilePageTitle,
} from "../mobile/MobilePage";
type CreateTriggerDialogProps = { type CreateTriggerDialogProps = {
show: boolean; show: boolean;
@ -164,18 +173,30 @@ export default function CreateTriggerDialog({
const cameraName = useCameraFriendlyName(selectedCamera); const cameraName = useCameraFriendlyName(selectedCamera);
const Overlay = isDesktop ? Dialog : MobilePage;
const Content = isDesktop ? DialogContent : MobilePageContent;
const Header = isDesktop ? DialogHeader : MobilePageHeader;
const Description = isDesktop ? DialogDescription : MobilePageDescription;
const Title = isDesktop ? DialogTitle : MobilePageTitle;
return ( return (
<Dialog open={show} onOpenChange={onCancel}> <Overlay open={show} onOpenChange={onCancel}>
<DialogContent className="sm:max-w-[425px]"> <Content
<DialogHeader> className={cn(
<DialogTitle> "scrollbar-container overflow-y-auto",
isDesktop && "my-4 flex max-h-dvh flex-col",
isMobile && "px-4",
)}
>
<Header className="mt-2" onClose={onCancel}>
<Title>
{t( {t(
trigger trigger
? "triggers.dialog.editTrigger.title" ? "triggers.dialog.editTrigger.title"
: "triggers.dialog.createTrigger.title", : "triggers.dialog.createTrigger.title",
)} )}
</DialogTitle> </Title>
<DialogDescription> <Description className={cn(!isDesktop && "sr-only")}>
{t( {t(
trigger trigger
? "triggers.dialog.editTrigger.desc" ? "triggers.dialog.editTrigger.desc"
@ -184,8 +205,8 @@ export default function CreateTriggerDialog({
camera: cameraName, camera: cameraName,
}, },
)} )}
</DialogDescription> </Description>
</DialogHeader> </Header>
<Form {...form}> <Form {...form}>
<form <form
@ -415,7 +436,7 @@ export default function CreateTriggerDialog({
</DialogFooter> </DialogFooter>
</form> </form>
</Form> </Form>
</DialogContent> </Content>
</Dialog> </Overlay>
); );
} }