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

40
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,56 +286,47 @@ 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>
<IconWrapper
icon={LuPencil}
className={`size-[15px] cursor-pointer ${hoveredPolygonIndex === index && "text-primary-variant"}`}
onClick={() => { onClick={() => {
setActivePolygonIndex(index); setActivePolygonIndex(index);
setEditPane(polygon.type); setEditPane(polygon.type);
}} }}
>
<Tooltip>
<TooltipTrigger asChild>
<LuPencil
className={`size-[15px] ${
hoveredPolygonIndex === index && "text-primary-variant"
}`}
/> />
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>Edit</TooltipContent> <TooltipContent>Edit</TooltipContent>
</Tooltip> </Tooltip>
</div>
<div
className="cursor-pointer"
onClick={() => handleCopyCoordinates(index)}
>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<LuCopy <IconWrapper
className={`size-[15px] ${ icon={LuCopy}
className={`size-[15px] cursor-pointer ${
hoveredPolygonIndex === index && "text-primary-variant" hoveredPolygonIndex === index && "text-primary-variant"
}`} }`}
onClick={() => handleCopyCoordinates(index)}
/> />
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>Copy coordinates</TooltipContent> <TooltipContent>Copy coordinates</TooltipContent>
</Tooltip> </Tooltip>
</div>
<div
className="cursor-pointer"
onClick={() => !isLoading && setDeleteDialogOpen(true)}
>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<HiTrash <IconWrapper
className={`size-[15px] ${ icon={HiTrash}
className={`size-[15px] cursor-pointer ${
hoveredPolygonIndex === index && hoveredPolygonIndex === index &&
"text-primary-variant fill-primary-variant" "text-primary-variant fill-primary-variant"
}`} }`}
onClick={() => !isLoading && setDeleteDialogOpen(true)}
/> />
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>Delete</TooltipContent> <TooltipContent>Delete</TooltipContent>
</Tooltip> </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;