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

image picker fixes

Browse Source
This commit is contained in:
Josh Hawkins 2025-10-27 12:51:31 -05:00
parent 85f89cac0c
commit 8a6cd05af1
3 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/public/locales/en/components/dialog.json
View File

@ -112,6 +112,7 @@
}, },
"imagePicker": { "imagePicker": {
"selectImage": "Select a tracked object's thumbnail", "selectImage": "Select a tracked object's thumbnail",
"unknownLabel": "Saved Trigger Image",
"search": { "search": {
"placeholder": "Search by label or sub label..." "placeholder": "Search by label or sub label..."
}, },

2
web/public/locales/en/views/settings.json
View File

@ -883,7 +883,7 @@
"desc": "Semantic Search must be enabled to use Triggers." "desc": "Semantic Search must be enabled to use Triggers."
}, },
"management": { "management": {
"title": "Trigger Management", "title": "Triggers",
"desc": "Manage triggers for {{camera}}. Use the thumbnail type to trigger on similar thumbnails to your selected tracked object, and the description type to trigger on similar descriptions to text you specify." "desc": "Manage triggers for {{camera}}. Use the thumbnail type to trigger on similar thumbnails to your selected tracked object, and the description type to trigger on similar descriptions to text you specify."
}, },
"addTrigger": "Add Trigger", "addTrigger": "Add Trigger",

19
web/src/components/overlay/ImagePicker.tsx
View File

@ -34,7 +34,7 @@ export default function ImagePicker({
direct = false, direct = false,
className, className,
}: ImagePickerProps) { }: ImagePickerProps) {
const { t } = useTranslation(["components/dialog"]); const { t } = useTranslation(["components/dialog", "views/settings"]);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const [searchTerm, setSearchTerm] = useState(""); const [searchTerm, setSearchTerm] = useState("");
@ -160,8 +160,8 @@ export default function ImagePicker({
) : ( ) : (
<div className="hover:cursor-pointer"> <div className="hover:cursor-pointer">
<div className="my-3 flex w-full flex-row items-center justify-between gap-2"> <div className="my-3 flex w-full flex-row items-center justify-between gap-2">
<div className="flex flex-row items-center gap-2"> <div className="flex flex-row items-center gap-4">
<div className="relative h-8 w-8"> <div className="relative size-16">
<img <img
src={ src={
selectedImage selectedImage
@ -169,7 +169,7 @@ export default function ImagePicker({
: `${apiHost}clips/triggers/${camera}/${selectedImageId}.webp` : `${apiHost}clips/triggers/${camera}/${selectedImageId}.webp`
} }
alt={selectedImage?.label || "Selected image"} alt={selectedImage?.label || "Selected image"}
className="h-8 w-8 rounded object-cover" className="size-16 rounded object-cover"
onLoad={() => handleImageLoad(selectedImageId || "")} onLoad={() => handleImageLoad(selectedImageId || "")}
loading="lazy" loading="lazy"
/> />
@ -180,7 +180,7 @@ export default function ImagePicker({
)} )}
</div> </div>
<div className="text-sm smart-capitalize"> <div className="text-sm smart-capitalize">
{selectedImage?.label || selectedImageId} {selectedImage?.label || t("imagePicker.unknownLabel")}
{selectedImage?.sub_label {selectedImage?.sub_label
? ` (${selectedImage.sub_label})` ? ` (${selectedImage.sub_label})`
: ""} : ""}
@ -204,13 +204,18 @@ export default function ImagePicker({
<DialogContent <DialogContent
className={cn( className={cn(
"scrollbar-container overflow-y-auto", "scrollbar-container overflow-y-auto",
isDesktop && "max-h-[75dvh] sm:max-w-xl md:max-w-3xl", isDesktop && "max-h-[75dvh] sm:max-w-xl md:max-w-[70%]",
isMobile && "px-4", isMobile && "px-4",
className, className,
)} )}
> >
<div className="mb-3 flex flex-row items-center justify-between"> <div className="mb-3 flex flex-col items-start justify-start">
<Heading as="h4">{t("imagePicker.selectImage")}</Heading> <Heading as="h4">{t("imagePicker.selectImage")}</Heading>
<div className="text-sm text-muted-foreground">
{t("triggers.dialog.form.content.imageDesc", {
ns: "views/settings",
})}
</div>
<span tabIndex={0} className="sr-only" /> <span tabIndex={0} className="sr-only" />
</div> </div>
{renderSearchInput()} {renderSearchInput()}