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

Fix tooltips for desktop and mobile nav bars

Browse Source
This commit is contained in:
Nicolas Mowen 2024-02-29 11:01:51 -07:00
parent 46e4004cf6
commit 176169dcc1
2 changed files with 16 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
web/src/components/navigation/NavItem.tsx
View File

@ -6,7 +6,8 @@ import {
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { TooltipPortal } from "@radix-ui/react-tooltip";
import { useState } from "react";
import { isDesktop } from "react-device-detect";
const variants = {
primary: {
@ -40,9 +41,11 @@ export default function NavItem({
}: NavItemProps) {
const shouldRender = dev ? ENV !== "production" : true;
const [showTooltip, setShowTooltip] = useState(false);
return (
shouldRender && (
<Tooltip>
<Tooltip open={isDesktop && showTooltip}>
<NavLink
to={url}
onClick={onClick}
@ -51,16 +54,16 @@ export default function NavItem({
variants[variant][isActive ? "active" : "inactive"]
}`
}
onMouseEnter={() => (isDesktop ? setShowTooltip(true) : null)}
onMouseLeave={() => (isDesktop ? setShowTooltip(false) : null)}
>
<TooltipTrigger>
<Icon className="size-5 md:m-[6px]" />
</TooltipTrigger>
<TooltipPortal>
<TooltipContent side="right">
<p>{title}</p>
</TooltipContent>
</TooltipPortal>
</NavLink>
<TooltipContent side="right">
<p>{title}</p>
</TooltipContent>
</Tooltip>
)
);

17
web/src/components/settings/SettingsNavItems.tsx
View File

@ -58,7 +58,6 @@ import {
TooltipTrigger,
} from "@/components/ui/tooltip";
import ActivityIndicator from "../ui/activity-indicator";
import { TooltipPortal } from "@radix-ui/react-tooltip";
type SettingsNavItemsProps = {
className?: string;
@ -107,11 +106,9 @@ export default function SettingsNavItems({ className }: SettingsNavItemsProps) {
<LuSettings />
</Button>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent side="right">
<p>Settings</p>
</TooltipContent>
</TooltipPortal>
<TooltipContent side="right">
<p>Settings</p>
</TooltipContent>
</Tooltip>
</a>
</DropdownMenuTrigger>
@ -252,11 +249,9 @@ export default function SettingsNavItems({ className }: SettingsNavItemsProps) {
<VscAccount />
</Button>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent side="right">
<p>Account</p>
</TooltipContent>
</TooltipPortal>
<TooltipContent side="right">
<p>Account</p>
</TooltipContent>
</Tooltip>
</div>
{restartDialogOpen && (