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