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

Fix tooltips and group selection

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-04 16:15:35 -07:00
parent aed0966a37
commit d54b942a9d
2 changed files with 39 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,10 +6,9 @@ import {
TooltipContent, TooltipContent,
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import { useCallback, useState } from "react"; import { useState } from "react";
import { isDesktop } from "react-device-detect"; import { isDesktop } from "react-device-detect";
import { TooltipPortal } from "@radix-ui/react-tooltip"; import { TooltipPortal } from "@radix-ui/react-tooltip";
import { CameraGroupSelector } from "../filter/CameraGroupSelector";
const variants = { const variants = {
primary: { primary: {
@ -43,58 +42,36 @@ export default function NavItem({
}: NavItemProps) { }: NavItemProps) {
const shouldRender = dev ? ENV !== "production" : true; const shouldRender = dev ? ENV !== "production" : true;
const [showTooltip, setShowTooltip] = useState(false); if (!shouldRender) {
const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout>(); return;
const showTooltipTimer = useCallback( }
(showTooltip: boolean) => {
if (!showTooltip) {
setShowTooltip(showTooltip);
if (timeoutId) { const content = (
clearTimeout(timeoutId); <NavLink
} to={url}
} else { onClick={onClick}
setTimeoutId(setTimeout(() => setShowTooltip(showTooltip), 500)); className={({ isActive }) =>
`${className} flex flex-col justify-center items-center rounded-lg ${
variants[variant][isActive ? "active" : "inactive"]
}`
} }
}, >
[timeoutId], <Icon className="size-5 md:m-[6px]" />
</NavLink>
); );
return ( if (isDesktop) {
shouldRender && ( return (
<Tooltip open={isDesktop && showTooltip}> <Tooltip>
<NavLink <TooltipTrigger>{content}</TooltipTrigger>
to={url}
onClick={onClick}
className={`${className} flex flex-col justify-center items-center rounded-lg`}
>
{({ isActive }) => (
<>
<TooltipTrigger
className={`rounded-lg ${variants[variant][isActive ? "active" : "inactive"]}`}
>
<Icon
className="size-5 md:m-[6px]"
onMouseEnter={() =>
isDesktop ? showTooltipTimer(true) : null
}
onMouseLeave={() =>
isDesktop ? showTooltipTimer(false) : null
}
/>
</TooltipTrigger>
{isDesktop && title == "Live" && isActive && (
<CameraGroupSelector className="mt-2" />
)}
</>
)}
</NavLink>
<TooltipPortal> <TooltipPortal>
<TooltipContent side="right"> <TooltipContent side="right">
<p>{title}</p> <p>{title}</p>
</TooltipContent> </TooltipContent>
</TooltipPortal> </TooltipPortal>
</Tooltip> </Tooltip>
) );
); }
return content;
} }

24
web/src/components/navigation/Sidebar.tsx
View File

@ -2,22 +2,30 @@ import Logo from "../Logo";
import { navbarLinks } from "@/pages/site-navigation"; import { navbarLinks } from "@/pages/site-navigation";
import SettingsNavItems from "../settings/SettingsNavItems"; import SettingsNavItems from "../settings/SettingsNavItems";
import NavItem from "./NavItem"; import NavItem from "./NavItem";
import { CameraGroupSelector } from "../filter/CameraGroupSelector";
import { useLocation } from "react-router-dom";
function Sidebar() { function Sidebar() {
const location = useLocation();
return ( return (
<aside className="absolute w-[52px] z-10 left-o inset-y-0 overflow-y-auto scrollbar-hidden py-4 flex flex-col justify-between bg-primary border-r border-secondary-highlight"> <aside className="absolute w-[52px] z-10 left-o inset-y-0 overflow-y-auto scrollbar-hidden py-4 flex flex-col justify-between bg-primary border-r border-secondary-highlight">
<span tabIndex={0} className="sr-only" /> <span tabIndex={0} className="sr-only" />
<div className="w-full flex flex-col gap-0 items-center"> <div className="w-full flex flex-col gap-0 items-center">
<Logo className="w-8 h-8 mb-6" /> <Logo className="w-8 h-8 mb-6" />
{navbarLinks.map((item) => ( {navbarLinks.map((item) => (
<NavItem <div key={item.id}>
className="mx-[10px] mb-4" <NavItem
key={item.id} className={`mx-[10px] ${item.id == 1 ? "mb-2" : "mb-4"}`}
Icon={item.icon} Icon={item.icon}
title={item.title} title={item.title}
url={item.url} url={item.url}
dev={item.dev} dev={item.dev}
/> />
{item.id == 1 && item.url == location.pathname && (
<CameraGroupSelector className="mb-4" />
)}
</div>
))} ))}
</div> </div>
<SettingsNavItems className="hidden md:flex flex-col items-center mb-8" /> <SettingsNavItems className="hidden md:flex flex-col items-center mb-8" />