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

fix tooltip trigger for icons

Browse Source
This commit is contained in:
Josh Hawkins 2024-04-18 18:12:40 -05:00
parent 4f753f1d2c
commit 2ce0c587e8
2 changed files with 62 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
web/src/components/settings/PolygonItem.tsx
View File

@ -33,6 +33,7 @@ import { toast } from "sonner";
import useSWR from "swr"; import useSWR from "swr";
import { FrigateConfig } from "@/types/frigateConfig"; import { FrigateConfig } from "@/types/frigateConfig";
import { reviewQueries } from "@/utils/zoneEdutUtil"; import { reviewQueries } from "@/utils/zoneEdutUtil";
import IconWrapper from "../ui/icon-wrapper";
type PolygonItemProps = { type PolygonItemProps = {
polygon: Polygon; polygon: Polygon;
@ -285,55 +286,46 @@ export default function PolygonItem({
)} )}
{!isMobile && hoveredPolygonIndex === index && ( {!isMobile && hoveredPolygonIndex === index && (
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<div <Tooltip>
className="cursor-pointer" <TooltipTrigger asChild>
onClick={() => { <IconWrapper
setActivePolygonIndex(index); icon={LuPencil}
setEditPane(polygon.type); className={`size-[15px] cursor-pointer ${hoveredPolygonIndex === index && "text-primary-variant"}`}
}} onClick={() => {
> setActivePolygonIndex(index);
<Tooltip> setEditPane(polygon.type);
<TooltipTrigger asChild> }}
<LuPencil />
className={`size-[15px] ${ </TooltipTrigger>
hoveredPolygonIndex === index && "text-primary-variant" <TooltipContent>Edit</TooltipContent>
}`} </Tooltip>
/>
</TooltipTrigger> <Tooltip>
<TooltipContent>Edit</TooltipContent> <TooltipTrigger asChild>
</Tooltip> <IconWrapper
</div> icon={LuCopy}
<div className={`size-[15px] cursor-pointer ${
className="cursor-pointer" hoveredPolygonIndex === index && "text-primary-variant"
onClick={() => handleCopyCoordinates(index)} }`}
> onClick={() => handleCopyCoordinates(index)}
<Tooltip> />
<TooltipTrigger asChild> </TooltipTrigger>
<LuCopy <TooltipContent>Copy coordinates</TooltipContent>
className={`size-[15px] ${ </Tooltip>
hoveredPolygonIndex === index && "text-primary-variant"
}`} <Tooltip>
/> <TooltipTrigger asChild>
</TooltipTrigger> <IconWrapper
<TooltipContent>Copy coordinates</TooltipContent> icon={HiTrash}
</Tooltip> className={`size-[15px] cursor-pointer ${
</div> hoveredPolygonIndex === index &&
<div "text-primary-variant fill-primary-variant"
className="cursor-pointer" }`}
onClick={() => !isLoading && setDeleteDialogOpen(true)} onClick={() => !isLoading && setDeleteDialogOpen(true)}
> />
<Tooltip> </TooltipTrigger>
<TooltipTrigger asChild> <TooltipContent>Delete</TooltipContent>
<HiTrash </Tooltip>
className={`size-[15px] ${
hoveredPolygonIndex === index &&
"text-primary-variant fill-primary-variant"
}`}
/>
</TooltipTrigger>
<TooltipContent>Delete</TooltipContent>
</Tooltip>
</div>
</div> </div>
)} )}
</div> </div>

21
web/src/components/ui/icon-wrapper.tsx Normal file
View File

@ -0,0 +1,21 @@
import { ForwardedRef, forwardRef } from "react";
import { IconType } from "react-icons";
interface IconWrapperProps {
icon: IconType;
className?: string;
[key: string]: any;
}
const IconWrapper = forwardRef(
(
{ icon: Icon, className, ...props }: IconWrapperProps,
ref: ForwardedRef<HTMLDivElement>,
) => (
<div {...props} ref={ref}>
<Icon className={className} />
</div>
),
);
export default IconWrapper;