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

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

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