administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-07-02 10:01:15 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

use grid for source and target

Browse Source
This commit is contained in:
Josh Hawkins 2026-05-28 15:03:45 -05:00
parent f8172d6ff7
commit 2aceeb4a1c
1 changed files with 252 additions and 237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
web/src/components/settings/CloneCameraDialog.tsx
View File

@ -51,7 +51,7 @@ import {
PopoverContent, PopoverContent,
PopoverTrigger, PopoverTrigger,
} from "@/components/ui/popover"; } from "@/components/ui/popover";
import { LuChevronDown, LuTriangleAlert } from "react-icons/lu"; import { LuArrowRight, LuChevronDown, LuTriangleAlert } from "react-icons/lu";
import { import {
CLONE_CATEGORIES, CLONE_CATEGORIES,
type CloneCategoryKey, type CloneCategoryKey,
@ -578,6 +578,7 @@ export default function CloneCameraDialog({
<Form {...form}> <Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6"> <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
<div className="relative flex flex-col gap-6 md:grid md:grid-cols-2 md:items-start md:gap-12">
<div className="space-y-3"> <div className="space-y-3">
<Label className="text-base"> <Label className="text-base">
{t("cameraManagement.clone.source.label")} {t("cameraManagement.clone.source.label")}
@ -593,7 +594,7 @@ export default function CloneCameraDialog({
onValueChange={field.onChange} onValueChange={field.onChange}
disabled={isSubmitting} disabled={isSubmitting}
> >
<SelectTrigger className="w-full max-w-xs"> <SelectTrigger className="w-full max-w-xs md:max-w-none">
<SelectValue <SelectValue
placeholder={t( placeholder={t(
"cameraManagement.clone.source.placeholder", "cameraManagement.clone.source.placeholder",
@ -649,7 +650,7 @@ export default function CloneCameraDialog({
</Label> </Label>
</div> </div>
{targetMode === "new" && ( {targetMode === "new" && (
<FormItem className="ml-7"> <FormItem>
<FormLabel className="sr-only"> <FormLabel className="sr-only">
{t( {t(
"cameraManagement.clone.target.newNameLabel", "cameraManagement.clone.target.newNameLabel",
@ -658,7 +659,7 @@ export default function CloneCameraDialog({
<FormControl> <FormControl>
<Input <Input
{...form.register("newName")} {...form.register("newName")}
className="max-w-xs" className="max-w-xs md:max-w-none"
placeholder={t( placeholder={t(
"cameraManagement.clone.target.newNamePlaceholder", "cameraManagement.clone.target.newNamePlaceholder",
)} )}
@ -744,7 +745,7 @@ export default function CloneCameraDialog({
"cameraManagement.clone.target.existingPlaceholder", "cameraManagement.clone.target.existingPlaceholder",
); );
return ( return (
<FormItem className="ml-7"> <FormItem>
<Popover> <Popover>
<FormControl> <FormControl>
<PopoverTrigger asChild> <PopoverTrigger asChild>
@ -752,12 +753,13 @@ export default function CloneCameraDialog({
type="button" type="button"
variant="outline" variant="outline"
disabled={isSubmitting} disabled={isSubmitting}
className="w-full max-w-xs justify-between font-normal" className="w-full max-w-xs justify-between font-normal md:max-w-none"
> >
<span <span
className={cn( className={cn(
"truncate", "truncate",
selectedNames.length === 0 && selectedNames.length ===
0 &&
"text-muted-foreground", "text-muted-foreground",
)} )}
> >
@ -772,7 +774,7 @@ export default function CloneCameraDialog({
disablePortal disablePortal
className="w-[--radix-popover-trigger-width] p-0" className="w-[--radix-popover-trigger-width] p-0"
> >
<div className="scrollbar-container max-h-60 space-y-2.5 overflow-y-auto p-4"> <div className="scrollbar-container max-h-60 space-y-4 overflow-y-auto p-4">
<FilterSwitch <FilterSwitch
label={t( label={t(
"cameraManagement.clone.target.allCameras", "cameraManagement.clone.target.allCameras",
@ -787,7 +789,7 @@ export default function CloneCameraDialog({
) )
} }
/> />
<div className="border-t border-border/40" /> <div className="space-y-2.5">
{otherCameras.map((cam) => ( {otherCameras.map((cam) => (
<FilterSwitch <FilterSwitch
key={cam} key={cam}
@ -797,7 +799,9 @@ export default function CloneCameraDialog({
cam, cam,
)} )}
disabled={isSubmitting} disabled={isSubmitting}
onCheckedChange={(checked) => onCheckedChange={(
checked,
) =>
tgtField.onChange( tgtField.onChange(
checked checked
? [...selected, cam] ? [...selected, cam]
@ -809,6 +813,7 @@ export default function CloneCameraDialog({
/> />
))} ))}
</div> </div>
</div>
</PopoverContent> </PopoverContent>
</Popover> </Popover>
<FormMessage /> <FormMessage />
@ -825,8 +830,18 @@ export default function CloneCameraDialog({
/> />
</div> </div>
<div className="pointer-events-none absolute left-1/2 top-0 hidden -translate-x-1/2 flex-col space-y-3 md:flex">
<Label className="invisible text-base" aria-hidden="true">
{" "}
</Label>
<div className="flex h-10 items-center justify-center">
<LuArrowRight className="size-6 text-muted-foreground" />
</div>
</div>
</div>
<div className="space-y-4"> <div className="space-y-4">
<div className="flex flex-row items-start justify-between gap-2"> <div className="flex flex-col gap-2 md:flex-row md:items-end md:justify-between">
<div className="space-y-1"> <div className="space-y-1">
<Label className="text-base"> <Label className="text-base">
{t("cameraManagement.clone.categories.legend")} {t("cameraManagement.clone.categories.legend")}
@ -835,16 +850,16 @@ export default function CloneCameraDialog({
{t("cameraManagement.clone.categories.description")} {t("cameraManagement.clone.categories.description")}
</p> </p>
</div> </div>
<div className="flex flex-row items-center gap-2 text-right text-xs text-muted-foreground"> <div className="flex flex-row items-center gap-2 text-xs text-muted-foreground">
<span <span
className="cursor-pointer" className="cursor-pointer whitespace-nowrap"
onClick={isSubmitting ? undefined : selectAllCategories} onClick={isSubmitting ? undefined : selectAllCategories}
> >
{t("cameraManagement.clone.categories.selectAll")} {t("cameraManagement.clone.categories.selectAll")}
</span> </span>
<span aria-hidden="true">|</span> <span aria-hidden="true">|</span>
<span <span
className="cursor-pointer" className="cursor-pointer whitespace-nowrap"
onClick={isSubmitting ? undefined : selectNoneCategories} onClick={isSubmitting ? undefined : selectNoneCategories}
> >
{t("cameraManagement.clone.categories.selectNone")} {t("cameraManagement.clone.categories.selectNone")}
@ -856,7 +871,7 @@ export default function CloneCameraDialog({
<Label className="font-medium"> <Label className="font-medium">
{t("cameraManagement.clone.categories.general")} {t("cameraManagement.clone.categories.general")}
</Label> </Label>
<div className="grid grid-cols-1 gap-3 rounded-lg bg-secondary p-4 sm:grid-cols-2"> <div className="grid grid-cols-1 gap-x-12 gap-y-3 rounded-lg bg-secondary p-4 sm:grid-cols-2">
{groupedCategories.general.map((cat) => ( {groupedCategories.general.map((cat) => (
<label <label
key={cat.key} key={cat.key}
@ -911,7 +926,7 @@ export default function CloneCameraDialog({
</AlertDescription> </AlertDescription>
</Alert> </Alert>
)} )}
<div className="grid grid-cols-1 gap-3 rounded-lg bg-secondary p-4 sm:grid-cols-2"> <div className="grid grid-cols-1 gap-x-12 gap-y-3 rounded-lg bg-secondary p-4 sm:grid-cols-2">
{groupedCategories.spatial.map((cat) => ( {groupedCategories.spatial.map((cat) => (
<label <label
key={cat.key} key={cat.key}