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

move icon and make links in popvers clickable

Browse Source
This commit is contained in:
Josh Hawkins 2025-10-23 14:01:12 -05:00
parent 7304104198
commit 4e9c28e39f
1 changed files with 50 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
web/src/components/settings/wizard/Step1NameCamera.tsx
View File

@ -6,7 +6,6 @@ import {
FormItem, FormItem,
FormLabel, FormLabel,
FormMessage, FormMessage,
FormDescription,
} from "@/components/ui/form"; } from "@/components/ui/form";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { import {
@ -298,6 +297,7 @@ export default function Step1NameCamera({
}; };
setTestResult(testResult); setTestResult(testResult);
onUpdate({ streams: [{ id: "", url: "", roles: [], testResult }] });
toast.success(t("cameraWizard.step1.testSuccess")); toast.success(t("cameraWizard.step1.testSuccess"));
} else { } else {
const error = const error =
@ -337,7 +337,7 @@ export default function Step1NameCamera({
setIsTesting(false); setIsTesting(false);
setTestStatus(""); setTestStatus("");
} }
}, [form, generateStreamUrl, t]); }, [form, generateStreamUrl, t, onUpdate]);
const onSubmit = (data: z.infer<typeof step1FormData>) => { const onSubmit = (data: z.infer<typeof step1FormData>) => {
onUpdate(data); onUpdate(data);
@ -380,7 +380,9 @@ export default function Step1NameCamera({
name="cameraName" name="cameraName"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("cameraWizard.step1.cameraName")}</FormLabel> <FormLabel className="text-primary-variant">
{t("cameraWizard.step1.cameraName")}
</FormLabel>
<FormControl> <FormControl>
<Input <Input
className="h-8" className="h-8"
@ -400,7 +402,43 @@ export default function Step1NameCamera({
name="brandTemplate" name="brandTemplate"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("cameraWizard.step1.cameraBrand")}</FormLabel> <div className="flex items-center gap-1 pb-1">
<FormLabel className="text-primary-variant">
{t("cameraWizard.step1.cameraBrand")}
</FormLabel>
{field.value &&
(() => {
const selectedBrand = CAMERA_BRANDS.find(
(brand) => brand.value === field.value,
);
return selectedBrand &&
selectedBrand.value != "other" ? (
<Popover>
<PopoverTrigger asChild>
<Button
variant="ghost"
size="sm"
className="h-4 w-4 p-0"
>
<LuInfo className="size-3" />
</Button>
</PopoverTrigger>
<PopoverContent className="pointer-events-auto w-80 text-primary-variant">
<div className="space-y-2">
<h4 className="font-medium">
{selectedBrand.label}
</h4>
<p className="break-all text-sm text-muted-foreground">
{t("cameraWizard.step1.brandUrlFormat", {
exampleUrl: selectedBrand.exampleUrl,
})}
</p>
</div>
</PopoverContent>
</Popover>
) : null;
})()}
</div>
<Select <Select
onValueChange={field.onChange} onValueChange={field.onChange}
defaultValue={field.value} defaultValue={field.value}
@ -421,37 +459,6 @@ export default function Step1NameCamera({
</SelectContent> </SelectContent>
</Select> </Select>
<FormMessage /> <FormMessage />
{field.value &&
(() => {
const selectedBrand = CAMERA_BRANDS.find(
(brand) => brand.value === field.value,
);
return selectedBrand &&
selectedBrand.value != "other" ? (
<FormDescription className="mt-1 pt-0.5 text-xs text-muted-foreground">
<Popover>
<PopoverTrigger>
<div className="flex flex-row items-center gap-0.5 text-xs text-muted-foreground hover:text-primary">
<LuInfo className="mr-1 size-3" />
{t("cameraWizard.step1.brandInformation")}
</div>
</PopoverTrigger>
<PopoverContent className="w-80">
<div className="space-y-2">
<h4 className="font-medium">
{selectedBrand.label}
</h4>
<p className="break-all text-sm text-muted-foreground">
{t("cameraWizard.step1.brandUrlFormat", {
exampleUrl: selectedBrand.exampleUrl,
})}
</p>
</div>
</PopoverContent>
</Popover>
</FormDescription>
) : null;
})()}
</FormItem> </FormItem>
)} )}
/> />
@ -463,7 +470,9 @@ export default function Step1NameCamera({
name="host" name="host"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("cameraWizard.step1.host")}</FormLabel> <FormLabel className="text-primary-variant">
{t("cameraWizard.step1.host")}
</FormLabel>
<FormControl> <FormControl>
<Input <Input
className="h-8" className="h-8"
@ -481,7 +490,7 @@ export default function Step1NameCamera({
name="username" name="username"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel> <FormLabel className="text-primary-variant">
{t("cameraWizard.step1.username")} {t("cameraWizard.step1.username")}
</FormLabel> </FormLabel>
<FormControl> <FormControl>
@ -503,7 +512,7 @@ export default function Step1NameCamera({
name="password" name="password"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel> <FormLabel className="text-primary-variant">
{t("cameraWizard.step1.password")} {t("cameraWizard.step1.password")}
</FormLabel> </FormLabel>
<FormControl> <FormControl>
@ -544,7 +553,9 @@ export default function Step1NameCamera({
name="customUrl" name="customUrl"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("cameraWizard.step1.customUrl")}</FormLabel> <FormLabel className="text-primary-variant">
{t("cameraWizard.step1.customUrl")}
</FormLabel>
<FormControl> <FormControl>
<Input <Input
className="h-8" className="h-8"