administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-17 00:25:23 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Portal tooltips

Browse Source
This commit is contained in:
Josh Hawkins 2024-09-25 20:10:42 -05:00
parent a6ccb37683
commit a07fcffe7f
2 changed files with 24 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/components/card/SearchThumbnail.tsx
View File

@ -15,6 +15,7 @@ import { capitalizeFirstLetter } from "@/utils/stringUtil";
import { SearchResult } from "@/types/search"; import { SearchResult } from "@/types/search";
import useContextMenu from "@/hooks/use-contextmenu"; import useContextMenu from "@/hooks/use-contextmenu";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { TooltipPortal } from "@radix-ui/react-tooltip";
type SearchThumbnailProps = { type SearchThumbnailProps = {
searchResult: SearchResult; searchResult: SearchResult;
@ -95,6 +96,7 @@ export default function SearchThumbnail({
</div> </div>
</TooltipTrigger> </TooltipTrigger>
</div> </div>
<TooltipPortal>
<TooltipContent className="capitalize"> <TooltipContent className="capitalize">
{[...new Set([searchResult.label])] {[...new Set([searchResult.label])]
.filter( .filter(
@ -105,6 +107,7 @@ export default function SearchThumbnail({
.join(", ") .join(", ")
.replaceAll("-verified", "")} .replaceAll("-verified", "")}
</TooltipContent> </TooltipContent>
</TooltipPortal>
</Tooltip> </Tooltip>
</div> </div>
<div className="rounded-t-l pointer-events-none absolute inset-x-0 top-0 z-10 h-[30%] w-full bg-gradient-to-b from-black/60 to-transparent"></div> <div className="rounded-t-l pointer-events-none absolute inset-x-0 top-0 z-10 h-[30%] w-full bg-gradient-to-b from-black/60 to-transparent"></div>

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

@ -31,6 +31,7 @@ import InputWithTags from "@/components/input/InputWithTags";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { isEqual } from "lodash"; import { isEqual } from "lodash";
import { formatDateToLocaleString } from "@/utils/dateUtil"; import { formatDateToLocaleString } from "@/utils/dateUtil";
import { TooltipPortal } from "@radix-ui/react-tooltip";
type SearchViewProps = { type SearchViewProps = {
search: string; search: string;
@ -401,6 +402,7 @@ export default function SearchView({
% %
</Chip> </Chip>
</TooltipTrigger> </TooltipTrigger>
<TooltipPortal>
<TooltipContent> <TooltipContent>
Matched {value.search_source} at{" "} Matched {value.search_source} at{" "}
{zScoreToConfidence( {zScoreToConfidence(
@ -409,6 +411,7 @@ export default function SearchView({
)} )}
% %
</TooltipContent> </TooltipContent>
</TooltipPortal>
</Tooltip> </Tooltip>
</div> </div>
)} )}