administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-07-15 00:11: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,
PopoverTrigger,
} from "@/components/ui/popover";
import { LuChevronDown, LuTriangleAlert } from "react-icons/lu";
import { LuArrowRight, LuChevronDown, LuTriangleAlert } from "react-icons/lu";
import {
CLONE_CATEGORIES,
type CloneCategoryKey,
@ -578,6 +578,7 @@ export default function CloneCameraDialog({
<Form {...form}>
<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">
<Label className="text-base">
{t("cameraManagement.clone.source.label")}
@ -593,7 +594,7 @@ export default function CloneCameraDialog({
onValueChange={field.onChange}
disabled={isSubmitting}
>
<SelectTrigger className="w-full max-w-xs">
<SelectTrigger className="w-full max-w-xs md:max-w-none">
<SelectValue
placeholder={t(
"cameraManagement.clone.source.placeholder",
@ -649,7 +650,7 @@ export default function CloneCameraDialog({
</Label>
</div>
{targetMode === "new" && (
<FormItem className="ml-7">
<FormItem>
<FormLabel className="sr-only">
{t(
"cameraManagement.clone.target.newNameLabel",
@ -658,7 +659,7 @@ export default function CloneCameraDialog({
<FormControl>
<Input
{...form.register("newName")}
className="max-w-xs"
className="max-w-xs md:max-w-none"
placeholder={t(
"cameraManagement.clone.target.newNamePlaceholder",
)}
@ -744,7 +745,7 @@ export default function CloneCameraDialog({
"cameraManagement.clone.target.existingPlaceholder",
);
return (
<FormItem className="ml-7">
<FormItem>
<Popover>
<FormControl>
<PopoverTrigger asChild>
@ -752,12 +753,13 @@ export default function CloneCameraDialog({
type="button"
variant="outline"
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
className={cn(
"truncate",
selectedNames.length === 0 &&
selectedNames.length ===
0 &&
"text-muted-foreground",
)}
>
@ -772,7 +774,7 @@ export default function CloneCameraDialog({
disablePortal
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
label={t(
"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) => (
<FilterSwitch
key={cam}
@ -797,7 +799,9 @@ export default function CloneCameraDialog({
cam,
)}
disabled={isSubmitting}
onCheckedChange={(checked) =>
onCheckedChange={(
checked,
) =>
tgtField.onChange(
checked
? [...selected, cam]
@ -809,6 +813,7 @@ export default function CloneCameraDialog({
/>
))}
</div>
</div>
</PopoverContent>
</Popover>
<FormMessage />
@ -825,8 +830,18 @@ export default function CloneCameraDialog({
/>
</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="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">
<Label className="text-base">
{t("cameraManagement.clone.categories.legend")}
@ -835,16 +850,16 @@ export default function CloneCameraDialog({
{t("cameraManagement.clone.categories.description")}
</p>
</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
className="cursor-pointer"
className="cursor-pointer whitespace-nowrap"
onClick={isSubmitting ? undefined : selectAllCategories}
>
{t("cameraManagement.clone.categories.selectAll")}
</span>
<span aria-hidden="true">|</span>
<span
className="cursor-pointer"
className="cursor-pointer whitespace-nowrap"
onClick={isSubmitting ? undefined : selectNoneCategories}
>
{t("cameraManagement.clone.categories.selectNone")}
@ -856,7 +871,7 @@ export default function CloneCameraDialog({
<Label className="font-medium">
{t("cameraManagement.clone.categories.general")}
</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) => (
<label
key={cat.key}
@ -911,7 +926,7 @@ export default function CloneCameraDialog({
</AlertDescription>
</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) => (
<label
key={cat.key}