Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

Add tooltip for icons in review event list (#13334)

Browse Source
This commit is contained in:
Nicolas Mowen 2024-08-25 06:57:10 -06:00
parent 70aab068fd
commit 190ce5ee31
1 changed files with 39 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
web/src/components/card/ReviewCard.tsx
View File

@ -32,6 +32,8 @@ import { Drawer, DrawerContent } from "../ui/drawer";
import axios from "axios"; import axios from "axios";
import { toast } from "sonner"; import { toast } from "sonner";
import useKeyboardListener from "@/hooks/use-keyboard-listener"; import useKeyboardListener from "@/hooks/use-keyboard-listener";
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
import { capitalizeFirstLetter } from "@/utils/stringUtil";
type ReviewCardProps = { type ReviewCardProps = {
event: ReviewSegment; event: ReviewSegment;
@ -153,7 +155,10 @@ export default function ReviewCard({
}} }}
/> />
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center justify-evenly gap-1"> <div className="flex items-center justify-evenly gap-1">
<>
{event.data.objects.map((object) => { {event.data.objects.map((object) => {
return getIconForLabel( return getIconForLabel(
object, object,
@ -166,8 +171,27 @@ export default function ReviewCard({
"size-3 text-primary dark:text-white", "size-3 text-primary dark:text-white",
); );
})} })}
</>
<div className="font-extra-light text-xs">{formattedDate}</div> <div className="font-extra-light text-xs">{formattedDate}</div>
</div> </div>
</TooltipTrigger>
<TooltipContent className="capitalize">
{[
...new Set([
...(event.data.objects || []),
...(event.data.sub_labels || []),
...(event.data.audio || []),
]),
]
.filter(
(item) => item !== undefined && !item.includes("-verified"),
)
.map((text) => capitalizeFirstLetter(text))
.sort()
.join(", ")
.replaceAll("-verified", "")}
</TooltipContent>
</Tooltip>
<TimeAgo <TimeAgo
className="text-xs text-muted-foreground" className="text-xs text-muted-foreground"
time={event.start_time * 1000} time={event.start_time * 1000}