Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-09-23 17:52:05 +02:00
Code Issues Projects Releases Wiki Activity

UI tweaks (#20168)

Browse Source 
* use mobilepage with create trigger dialog

* use mobilepage with create user dialog

* use mobilepage with create role dialog
This commit is contained in:
Josh Hawkins 2025-09-22 09:36:36 -05:00 committed by GitHub
parent 318457113b
commit bdb7a18602
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 91 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
web/src/components/overlay/CreateRoleDialog.tsx
View File

@ -26,6 +26,15 @@ import {
import { useTranslation } from "react-i18next";
import { FrigateConfig } from "@/types/frigateConfig";
import { CameraNameLabel } from "../camera/CameraNameLabel";
import { isDesktop, isMobile } from "react-device-detect";
import { cn } from "@/lib/utils";
import {
MobilePage,
MobilePageContent,
MobilePageDescription,
MobilePageHeader,
MobilePageTitle,
} from "../mobile/MobilePage";
type CreateRoleOverlayProps = {
show: boolean;
@ -100,15 +109,27 @@ export default function CreateRoleDialog({
onCancel();
};
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 (
<Dialog open={show} onOpenChange={onCancel}>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>{t("roles.dialog.createRole.title")}</DialogTitle>
<DialogDescription>
<Overlay open={show} onOpenChange={onCancel}>
<Content
className={cn(
"scrollbar-container overflow-y-auto",
isDesktop && "my-4 flex max-h-dvh flex-col sm:max-w-[425px]",
isMobile && "px-4",
)}
>
<Header className="mt-2" onClose={onCancel}>
<Title>{t("roles.dialog.createRole.title")}</Title>
<Description className={cn(!isDesktop && "sr-only")}>
{t("roles.dialog.createRole.desc")}
</DialogDescription>
</DialogHeader>
</Description>
</Header>
<Form {...form}>
<form
@ -222,7 +243,7 @@ export default function CreateRoleDialog({
</DialogFooter>
</form>
</Form>
</DialogContent>
</Dialog>
</Content>
</Overlay>
);
}

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 { Textarea } from "../ui/textarea";
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 = {
show: boolean;
@ -164,18 +173,30 @@ export default function CreateTriggerDialog({
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 (
<Dialog open={show} onOpenChange={onCancel}>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>
<Overlay open={show} onOpenChange={onCancel}>
<Content
className={cn(
"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(
trigger
? "triggers.dialog.editTrigger.title"
: "triggers.dialog.createTrigger.title",
)}
</DialogTitle>
<DialogDescription>
</Title>
<Description className={cn(!isDesktop && "sr-only")}>
{t(
trigger
? "triggers.dialog.editTrigger.desc"
@ -184,8 +205,8 @@ export default function CreateTriggerDialog({
camera: cameraName,
},
)}
</DialogDescription>
</DialogHeader>
</Description>
</Header>
<Form {...form}>
<form
@ -415,7 +436,7 @@ export default function CreateTriggerDialog({
</DialogFooter>
</form>
</Form>
</DialogContent>
</Dialog>
</Content>
</Overlay>
);
}

39
web/src/components/overlay/CreateUserDialog.tsx
View File

@ -33,6 +33,15 @@ import {
import { Shield, User } from "lucide-react";
import { LuCheck, LuX } from "react-icons/lu";
import { useTranslation } from "react-i18next";
import { isDesktop, isMobile } from "react-device-detect";
import { cn } from "@/lib/utils";
import {
MobilePage,
MobilePageContent,
MobilePageDescription,
MobilePageHeader,
MobilePageTitle,
} from "../mobile/MobilePage";
type CreateUserOverlayProps = {
show: boolean;
@ -110,15 +119,27 @@ export default function CreateUserDialog({
onCancel();
};
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 (
<Dialog open={show} onOpenChange={onCancel}>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>{t("users.dialog.createUser.title")}</DialogTitle>
<DialogDescription>
<Overlay open={show} onOpenChange={onCancel}>
<Content
className={cn(
"scrollbar-container overflow-y-auto",
isDesktop && "my-4 flex max-h-dvh flex-col sm:max-w-[425px]",
isMobile && "px-4",
)}
>
<Header className="mt-2" onClose={onCancel}>
<Title>{t("users.dialog.createUser.title")}</Title>
<Description className={cn(!isDesktop && "sr-only")}>
{t("users.dialog.createUser.desc")}
</DialogDescription>
</DialogHeader>
</Description>
</Header>
<Form {...form}>
<form
@ -286,7 +307,7 @@ export default function CreateUserDialog({
</DialogFooter>
</form>
</Form>
</DialogContent>
</Dialog>
</Content>
</Overlay>
);
}