administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-12-17 02:26:43 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

remove footer on explore images and move to overlay

Browse Source
This commit is contained in:
Josh Hawkins 2025-10-24 09:31:08 -05:00
parent 8610a3c4e5
commit d057d4ab58
3 changed files with 50 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/card/SearchThumbnailFooter.tsx
View File

@ -42,11 +42,11 @@ export default function SearchThumbnailFooter({
return ( return (
<div <div
className={cn( className={cn(
"flex w-full flex-row items-center justify-between gap-2", "flex w-full flex-row items-center justify-between gap-2 text-white",
columns > 4 && "items-start sm:flex-col lg:flex-row lg:items-center", columns > 4 && "items-start sm:flex-col lg:flex-row lg:items-center",
)} )}
> >
<div className="flex flex-col items-start text-xs text-primary-variant"> <div className="flex flex-col items-start text-xs text-white/90 drop-shadow-lg">
{searchResult.end_time ? ( {searchResult.end_time ? (
<TimeAgo time={searchResult.start_time * 1000} dense /> <TimeAgo time={searchResult.start_time * 1000} dense />
) : ( ) : (

28
web/src/components/menu/SearchResultActions.tsx
View File

@ -214,10 +214,14 @@ export default function SearchResultActions({
searchResult.data.type == "object" && ( searchResult.data.type == "object" && (
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger>
<MdImageSearch <div className="group relative inline-flex items-center justify-center">
className="size-5 cursor-pointer text-primary-variant hover:text-primary" {/* blurred circular hover background */}
onClick={findSimilar} <div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" />
/> <MdImageSearch
className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white"
onClick={findSimilar}
/>
</div>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
{t("itemMenu.findSimilar.label")} {t("itemMenu.findSimilar.label")}
@ -233,10 +237,13 @@ export default function SearchResultActions({
!searchResult.plus_id && ( !searchResult.plus_id && (
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger>
<FrigatePlusIcon <div className="group relative inline-flex items-center justify-center">
className="size-5 cursor-pointer text-primary-variant hover:text-primary" <div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" />
onClick={showSnapshot} <FrigatePlusIcon
/> className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white"
onClick={showSnapshot}
/>
</div>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
{t("itemMenu.submitToPlus.label")} {t("itemMenu.submitToPlus.label")}
@ -246,7 +253,10 @@ export default function SearchResultActions({
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger> <DropdownMenuTrigger>
<FiMoreVertical className="size-5 cursor-pointer text-primary-variant hover:text-primary" /> <div className="group relative inline-flex items-center justify-center">
<div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" />
<FiMoreVertical className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white" />
</div>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end">{menuItems}</DropdownMenuContent> <DropdownMenuContent align="end">{menuItems}</DropdownMenuContent>
</DropdownMenu> </DropdownMenu>

58
web/src/views/search/SearchView.tsx
View File

@ -577,7 +577,7 @@ export default function SearchView({
> >
<div <div
className={cn( className={cn(
"aspect-square w-full overflow-hidden rounded-t-lg border", "relative aspect-square w-full overflow-hidden rounded-lg",
)} )}
> >
<SearchThumbnail <SearchThumbnail
@ -634,38 +634,38 @@ export default function SearchView({
</Tooltip> </Tooltip>
</div> </div>
)} )}
<div className="absolute bottom-0 left-0 right-0 z-30 bg-gradient-to-t from-black/70 to-transparent p-2">
<SearchThumbnailFooter
searchResult={value}
columns={columns}
findSimilar={() => {
if (config?.semantic_search.enabled) {
setSimilaritySearch(value);
}
}}
refreshResults={refresh}
showObjectLifecycle={() =>
onSelectSearch(value, false, "object_lifecycle")
}
showSnapshot={() =>
onSelectSearch(value, false, "snapshot")
}
addTrigger={() => {
if (
config?.semantic_search.enabled &&
value.data.type == "object"
) {
navigate(
`/settings?page=triggers&camera=${value.camera}&event_id=${value.id}`,
);
}
}}
/>
</div>
</div> </div>
<div <div
className={`review-item-ring pointer-events-none absolute inset-0 z-10 size-full rounded-lg outline outline-[3px] -outline-offset-[2.8px] ${selected ? `shadow-selected outline-selected` : "outline-transparent duration-500"}`} className={`review-item-ring pointer-events-none absolute inset-0 z-10 size-full rounded-lg outline outline-[3px] -outline-offset-[2.8px] ${selected ? `shadow-selected outline-selected` : "outline-transparent duration-500"}`}
/> />
<div className="flex w-full grow items-center justify-between rounded-b-lg border border-t-0 bg-card p-3 text-card-foreground">
<SearchThumbnailFooter
searchResult={value}
columns={columns}
findSimilar={() => {
if (config?.semantic_search.enabled) {
setSimilaritySearch(value);
}
}}
refreshResults={refresh}
showObjectLifecycle={() =>
onSelectSearch(value, false, "object_lifecycle")
}
showSnapshot={() =>
onSelectSearch(value, false, "snapshot")
}
addTrigger={() => {
if (
config?.semantic_search.enabled &&
value.data.type == "object"
) {
navigate(
`/settings?page=triggers&camera=${value.camera}&event_id=${value.id}`,
);
}
}}
/>
</div>
</div> </div>
); );
})} })}