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 { useTranslation } from "react-i18next";
import { FrigateConfig } from "@/types/frigateConfig"; import { FrigateConfig } from "@/types/frigateConfig";
import { CameraNameLabel } from "../camera/CameraNameLabel"; 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 = { type CreateRoleOverlayProps = {
show: boolean; show: boolean;
@ -100,15 +109,27 @@ export default function CreateRoleDialog({
onCancel(); 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 ( return (
<Dialog open={show} onOpenChange={onCancel}> <Overlay open={show} onOpenChange={onCancel}>
<DialogContent className="sm:max-w-[425px]"> <Content
<DialogHeader> className={cn(
<DialogTitle>{t("roles.dialog.createRole.title")}</DialogTitle> "scrollbar-container overflow-y-auto",
<DialogDescription> 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")} {t("roles.dialog.createRole.desc")}
</DialogDescription> </Description>
</DialogHeader> </Header>
<Form {...form}> <Form {...form}>
<form <form
@ -222,7 +243,7 @@ export default function CreateRoleDialog({
</DialogFooter> </DialogFooter>
</form> </form>
</Form> </Form>
</DialogContent> </Content>
</Dialog> </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 { 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>
); );
} }

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

@ -33,6 +33,15 @@ import {
import { Shield, User } from "lucide-react"; import { Shield, User } from "lucide-react";
import { LuCheck, LuX } from "react-icons/lu"; import { LuCheck, LuX } from "react-icons/lu";
import { useTranslation } from "react-i18next"; 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 = { type CreateUserOverlayProps = {
show: boolean; show: boolean;
@ -110,15 +119,27 @@ export default function CreateUserDialog({
onCancel(); 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 ( return (
<Dialog open={show} onOpenChange={onCancel}> <Overlay open={show} onOpenChange={onCancel}>
<DialogContent className="sm:max-w-[425px]"> <Content
<DialogHeader> className={cn(
<DialogTitle>{t("users.dialog.createUser.title")}</DialogTitle> "scrollbar-container overflow-y-auto",
<DialogDescription> 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")} {t("users.dialog.createUser.desc")}
</DialogDescription> </Description>
</DialogHeader> </Header>
<Form {...form}> <Form {...form}>
<form <form
@ -286,7 +307,7 @@ export default function CreateUserDialog({
</DialogFooter> </DialogFooter>
</form> </form>
</Form> </Form>
</DialogContent> </Content>
</Dialog> </Overlay>
); );
} }