mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-02-08 20:25:26 +03:00
fix tooltip provider and add active tracking outline
This commit is contained in:
Josh Hawkins
parent
e70039177a
commit
77c84a2dfb
@ -8,7 +8,6 @@ import SettingsNavItems from "./settings/SettingsNavItems";
|
|||||||
import {
|
import {
|
||||||
Tooltip,
|
Tooltip,
|
||||||
TooltipContent,
|
TooltipContent,
|
||||||
TooltipProvider,
|
|
||||||
TooltipTrigger,
|
TooltipTrigger,
|
||||||
} from "@/components/ui/tooltip";
|
} from "@/components/ui/tooltip";
|
||||||
|
|
||||||
@ -23,18 +22,16 @@ function Sidebar({
|
|||||||
<aside className="w-[52px] z-10 h-screen sticky top-0 overflow-y-auto scrollbar-hidden py-4 flex flex-col justify-between">
|
<aside className="w-[52px] z-10 h-screen sticky top-0 overflow-y-auto scrollbar-hidden py-4 flex flex-col justify-between">
|
||||||
<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" />
|
||||||
<TooltipProvider>
|
{navbarLinks.map((item) => (
|
||||||
{navbarLinks.map((item) => (
|
<SidebarItem
|
||||||
<SidebarItem
|
key={item.id}
|
||||||
key={item.id}
|
Icon={item.icon}
|
||||||
Icon={item.icon}
|
title={item.title}
|
||||||
title={item.title}
|
url={item.url}
|
||||||
url={item.url}
|
dev={item.dev}
|
||||||
dev={item.dev}
|
onClick={() => setSheetOpen(false)}
|
||||||
onClick={() => setSheetOpen(false)}
|
/>
|
||||||
/>
|
))}
|
||||||
))}
|
|
||||||
</TooltipProvider>
|
|
||||||
</div>
|
</div>
|
||||||
<SettingsNavItems className="hidden md:flex flex-col items-center" />
|
<SettingsNavItems className="hidden md:flex flex-col items-center" />
|
||||||
</aside>
|
</aside>
|
||||||
|
|||||||
@ -151,9 +151,16 @@ export default function LivePlayer({
|
|||||||
} else {
|
} else {
|
||||||
player = <ActivityIndicator />;
|
player = <ActivityIndicator />;
|
||||||
}
|
}
|
||||||
|
// box - shadow: 0px 0px 10px 0px rgba(240, 62, 62, 1) inset;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`relative flex justify-center w-full ${className}`}>
|
<div
|
||||||
|
className={`relative flex justify-center w-full outline ${
|
||||||
|
activeTracking
|
||||||
|
? "outline-destructive outline-1 rounded-2xl shadow-[0_0_6px_1px] shadow-destructive"
|
||||||
|
: "outline-0"
|
||||||
|
} transition-all duration-500 ${className}`}
|
||||||
|
>
|
||||||
{(showStillWithoutActivity == false || activeMotion || activeTracking) &&
|
{(showStillWithoutActivity == false || activeMotion || activeTracking) &&
|
||||||
player}
|
player}
|
||||||
|
|
||||||
@ -188,14 +195,6 @@ export default function LivePlayer({
|
|||||||
<div className="ml-1 text-white text-xs">Sound</div>
|
<div className="ml-1 text-white text-xs">Sound</div>
|
||||||
</Chip>
|
</Chip>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<Chip
|
|
||||||
in={activeTracking}
|
|
||||||
className={`bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500/90 `}
|
|
||||||
>
|
|
||||||
<MdSelectAll className="w-4 h-4 text-object" />
|
|
||||||
<div className="ml-1 text-white text-xs">Tracking</div>
|
|
||||||
</Chip>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Chip className="absolute right-2 top-2 bg-gradient-to-br from-gray-300/50 to-gray-500/90">
|
<Chip className="absolute right-2 top-2 bg-gradient-to-br from-gray-300/50 to-gray-500/90">
|
||||||
|
|||||||
@ -55,7 +55,6 @@ import {
|
|||||||
import {
|
import {
|
||||||
Tooltip,
|
Tooltip,
|
||||||
TooltipContent,
|
TooltipContent,
|
||||||
TooltipProvider,
|
|
||||||
TooltipTrigger,
|
TooltipTrigger,
|
||||||
} from "@/components/ui/tooltip";
|
} from "@/components/ui/tooltip";
|
||||||
import ActivityIndicator from "../ui/activity-indicator";
|
import ActivityIndicator from "../ui/activity-indicator";
|
||||||
@ -98,164 +97,160 @@ export default function SettingsNavItems({ className }: SettingsNavItemsProps) {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className={className}>
|
<div className={className}>
|
||||||
<TooltipProvider>
|
<DropdownMenu>
|
||||||
<DropdownMenu>
|
<DropdownMenuTrigger>
|
||||||
<DropdownMenuTrigger asChild>
|
<Tooltip>
|
||||||
<Tooltip>
|
<TooltipTrigger asChild>
|
||||||
<TooltipTrigger>
|
<Button size="icon" variant="ghost">
|
||||||
<Button size="icon" variant="ghost">
|
<LuSettings />
|
||||||
<LuSettings />
|
</Button>
|
||||||
</Button>
|
</TooltipTrigger>
|
||||||
</TooltipTrigger>
|
<TooltipContent side="right">
|
||||||
<TooltipContent side="right">
|
<p>Settings</p>
|
||||||
<p>Settings</p>
|
</TooltipContent>
|
||||||
</TooltipContent>
|
</Tooltip>
|
||||||
</Tooltip>
|
</DropdownMenuTrigger>
|
||||||
</DropdownMenuTrigger>
|
<DropdownMenuContent className="md:w-72 mr-5">
|
||||||
<DropdownMenuContent className="md:w-72 mr-5">
|
<DropdownMenuLabel>System</DropdownMenuLabel>
|
||||||
<DropdownMenuLabel>System</DropdownMenuLabel>
|
<DropdownMenuSeparator />
|
||||||
<DropdownMenuSeparator />
|
<DropdownMenuGroup>
|
||||||
<DropdownMenuGroup>
|
<Link to="/storage">
|
||||||
<Link to="/storage">
|
|
||||||
<DropdownMenuItem>
|
|
||||||
<LuHardDrive className="mr-2 h-4 w-4" />
|
|
||||||
<span>Storage</span>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</Link>
|
|
||||||
<Link to="/system">
|
|
||||||
<DropdownMenuItem>
|
|
||||||
<LuActivity className="mr-2 h-4 w-4" />
|
|
||||||
<span>System metrics</span>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</Link>
|
|
||||||
<Link to="/logs">
|
|
||||||
<DropdownMenuItem>
|
|
||||||
<LuList className="mr-2 h-4 w-4" />
|
|
||||||
<span>System logs</span>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</Link>
|
|
||||||
</DropdownMenuGroup>
|
|
||||||
<DropdownMenuLabel className="mt-3">
|
|
||||||
Configuration
|
|
||||||
</DropdownMenuLabel>
|
|
||||||
<DropdownMenuSeparator />
|
|
||||||
<DropdownMenuGroup>
|
|
||||||
<Link to="/settings">
|
|
||||||
<DropdownMenuItem>
|
|
||||||
<LuSettings className="mr-2 h-4 w-4" />
|
|
||||||
<span>Settings</span>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</Link>
|
|
||||||
<Link to="/config">
|
|
||||||
<DropdownMenuItem>
|
|
||||||
<LuPenSquare className="mr-2 h-4 w-4" />
|
|
||||||
<span>Configuration editor</span>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</Link>
|
|
||||||
<DropdownMenuLabel className="mt-3">
|
|
||||||
Appearance
|
|
||||||
</DropdownMenuLabel>
|
|
||||||
<DropdownMenuSeparator />
|
|
||||||
<DropdownMenuSub>
|
|
||||||
<DropdownMenuSubTrigger>
|
|
||||||
<LuSunMoon className="mr-2 h-4 w-4" />
|
|
||||||
<span>Dark Mode</span>
|
|
||||||
</DropdownMenuSubTrigger>
|
|
||||||
<DropdownMenuPortal>
|
|
||||||
<DropdownMenuSubContent>
|
|
||||||
<DropdownMenuItem onClick={() => setTheme("light")}>
|
|
||||||
{theme === "light" ? (
|
|
||||||
<>
|
|
||||||
<LuSun className="mr-2 h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
|
||||||
Light
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<span className="mr-2 ml-6">Light</span>
|
|
||||||
)}
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem onClick={() => setTheme("dark")}>
|
|
||||||
{theme === "dark" ? (
|
|
||||||
<>
|
|
||||||
<LuMoon className="mr-2 h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
|
||||||
Dark
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<span className="mr-2 ml-6">Dark</span>
|
|
||||||
)}
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem onClick={() => setTheme("system")}>
|
|
||||||
{theme === "system" ? (
|
|
||||||
<>
|
|
||||||
<CgDarkMode className="mr-2 h-4 w-4 scale-100 transition-all" />
|
|
||||||
System
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<span className="mr-2 ml-6">System</span>
|
|
||||||
)}
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</DropdownMenuSubContent>
|
|
||||||
</DropdownMenuPortal>
|
|
||||||
</DropdownMenuSub>
|
|
||||||
<DropdownMenuSub>
|
|
||||||
<DropdownMenuSubTrigger>
|
|
||||||
<LuSunMoon className="mr-2 h-4 w-4" />
|
|
||||||
<span>Theme</span>
|
|
||||||
</DropdownMenuSubTrigger>
|
|
||||||
<DropdownMenuPortal>
|
|
||||||
<DropdownMenuSubContent>
|
|
||||||
{colorSchemes.map((scheme) => (
|
|
||||||
<DropdownMenuItem
|
|
||||||
key={scheme}
|
|
||||||
onClick={() => setColorScheme(scheme)}
|
|
||||||
>
|
|
||||||
{scheme === colorScheme ? (
|
|
||||||
<>
|
|
||||||
<IoColorPalette className="mr-2 h-4 w-4 rotate-0 scale-100 transition-all" />
|
|
||||||
{friendlyColorSchemeName(scheme)}
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<span className="mr-2 ml-6">
|
|
||||||
{friendlyColorSchemeName(scheme)}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</DropdownMenuItem>
|
|
||||||
))}
|
|
||||||
</DropdownMenuSubContent>
|
|
||||||
</DropdownMenuPortal>
|
|
||||||
</DropdownMenuSub>
|
|
||||||
</DropdownMenuGroup>
|
|
||||||
<DropdownMenuLabel className="mt-3">Help</DropdownMenuLabel>
|
|
||||||
<DropdownMenuSeparator />
|
|
||||||
<a href="https://docs.frigate.video">
|
|
||||||
<DropdownMenuItem>
|
<DropdownMenuItem>
|
||||||
<LuLifeBuoy className="mr-2 h-4 w-4" />
|
<LuHardDrive className="mr-2 h-4 w-4" />
|
||||||
<span>Documentation</span>
|
<span>Storage</span>
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</a>
|
</Link>
|
||||||
<a href="https://github.com/blakeblackshear/frigate">
|
<Link to="/system">
|
||||||
<DropdownMenuItem>
|
<DropdownMenuItem>
|
||||||
<LuGithub className="mr-2 h-4 w-4" />
|
<LuActivity className="mr-2 h-4 w-4" />
|
||||||
<span>GitHub</span>
|
<span>System metrics</span>
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</a>
|
</Link>
|
||||||
<DropdownMenuSeparator className="mt-3" />
|
<Link to="/logs">
|
||||||
<DropdownMenuItem onClick={() => setRestartDialogOpen(true)}>
|
<DropdownMenuItem>
|
||||||
<LuRotateCw className="mr-2 h-4 w-4" />
|
<LuList className="mr-2 h-4 w-4" />
|
||||||
<span>Restart Frigate</span>
|
<span>System logs</span>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</Link>
|
||||||
|
</DropdownMenuGroup>
|
||||||
|
<DropdownMenuLabel className="mt-3">
|
||||||
|
Configuration
|
||||||
|
</DropdownMenuLabel>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<DropdownMenuGroup>
|
||||||
|
<Link to="/settings">
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<LuSettings className="mr-2 h-4 w-4" />
|
||||||
|
<span>Settings</span>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</Link>
|
||||||
|
<Link to="/config">
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<LuPenSquare className="mr-2 h-4 w-4" />
|
||||||
|
<span>Configuration editor</span>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</Link>
|
||||||
|
<DropdownMenuLabel className="mt-3">Appearance</DropdownMenuLabel>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<DropdownMenuSub>
|
||||||
|
<DropdownMenuSubTrigger>
|
||||||
|
<LuSunMoon className="mr-2 h-4 w-4" />
|
||||||
|
<span>Dark Mode</span>
|
||||||
|
</DropdownMenuSubTrigger>
|
||||||
|
<DropdownMenuPortal>
|
||||||
|
<DropdownMenuSubContent>
|
||||||
|
<DropdownMenuItem onClick={() => setTheme("light")}>
|
||||||
|
{theme === "light" ? (
|
||||||
|
<>
|
||||||
|
<LuSun className="mr-2 h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
||||||
|
Light
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<span className="mr-2 ml-6">Light</span>
|
||||||
|
)}
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem onClick={() => setTheme("dark")}>
|
||||||
|
{theme === "dark" ? (
|
||||||
|
<>
|
||||||
|
<LuMoon className="mr-2 h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
||||||
|
Dark
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<span className="mr-2 ml-6">Dark</span>
|
||||||
|
)}
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem onClick={() => setTheme("system")}>
|
||||||
|
{theme === "system" ? (
|
||||||
|
<>
|
||||||
|
<CgDarkMode className="mr-2 h-4 w-4 scale-100 transition-all" />
|
||||||
|
System
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<span className="mr-2 ml-6">System</span>
|
||||||
|
)}
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuSubContent>
|
||||||
|
</DropdownMenuPortal>
|
||||||
|
</DropdownMenuSub>
|
||||||
|
<DropdownMenuSub>
|
||||||
|
<DropdownMenuSubTrigger>
|
||||||
|
<LuSunMoon className="mr-2 h-4 w-4" />
|
||||||
|
<span>Theme</span>
|
||||||
|
</DropdownMenuSubTrigger>
|
||||||
|
<DropdownMenuPortal>
|
||||||
|
<DropdownMenuSubContent>
|
||||||
|
{colorSchemes.map((scheme) => (
|
||||||
|
<DropdownMenuItem
|
||||||
|
key={scheme}
|
||||||
|
onClick={() => setColorScheme(scheme)}
|
||||||
|
>
|
||||||
|
{scheme === colorScheme ? (
|
||||||
|
<>
|
||||||
|
<IoColorPalette className="mr-2 h-4 w-4 rotate-0 scale-100 transition-all" />
|
||||||
|
{friendlyColorSchemeName(scheme)}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<span className="mr-2 ml-6">
|
||||||
|
{friendlyColorSchemeName(scheme)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</DropdownMenuItem>
|
||||||
|
))}
|
||||||
|
</DropdownMenuSubContent>
|
||||||
|
</DropdownMenuPortal>
|
||||||
|
</DropdownMenuSub>
|
||||||
|
</DropdownMenuGroup>
|
||||||
|
<DropdownMenuLabel className="mt-3">Help</DropdownMenuLabel>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<a href="https://docs.frigate.video">
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<LuLifeBuoy className="mr-2 h-4 w-4" />
|
||||||
|
<span>Documentation</span>
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</DropdownMenuContent>
|
</a>
|
||||||
</DropdownMenu>
|
<a href="https://github.com/blakeblackshear/frigate">
|
||||||
<Tooltip>
|
<DropdownMenuItem>
|
||||||
<TooltipTrigger>
|
<LuGithub className="mr-2 h-4 w-4" />
|
||||||
<Button size="icon" variant="ghost">
|
<span>GitHub</span>
|
||||||
<VscAccount />
|
</DropdownMenuItem>
|
||||||
</Button>
|
</a>
|
||||||
</TooltipTrigger>
|
<DropdownMenuSeparator className="mt-3" />
|
||||||
<TooltipContent side="right">
|
<DropdownMenuItem onClick={() => setRestartDialogOpen(true)}>
|
||||||
<p>Account</p>
|
<LuRotateCw className="mr-2 h-4 w-4" />
|
||||||
</TooltipContent>
|
<span>Restart Frigate</span>
|
||||||
</Tooltip>
|
</DropdownMenuItem>
|
||||||
</TooltipProvider>
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger>
|
||||||
|
<Button size="icon" variant="ghost">
|
||||||
|
<VscAccount />
|
||||||
|
</Button>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent side="right">
|
||||||
|
<p>Account</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
{restartDialogOpen && (
|
{restartDialogOpen && (
|
||||||
<AlertDialog
|
<AlertDialog
|
||||||
|
|||||||
@ -3,6 +3,7 @@ import { ThemeProvider } from "@/context/theme-provider";
|
|||||||
import { RecoilRoot } from "recoil";
|
import { RecoilRoot } from "recoil";
|
||||||
import { ApiProvider } from "@/api";
|
import { ApiProvider } from "@/api";
|
||||||
import { IconContext } from "react-icons";
|
import { IconContext } from "react-icons";
|
||||||
|
import { TooltipProvider } from "@/components/ui/tooltip";
|
||||||
|
|
||||||
type TProvidersProps = {
|
type TProvidersProps = {
|
||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
@ -13,9 +14,11 @@ function providers({ children }: TProvidersProps) {
|
|||||||
<RecoilRoot>
|
<RecoilRoot>
|
||||||
<ApiProvider>
|
<ApiProvider>
|
||||||
<ThemeProvider defaultTheme="light" storageKey="frigate-ui-theme">
|
<ThemeProvider defaultTheme="light" storageKey="frigate-ui-theme">
|
||||||
<IconContext.Provider value={{ size: "20" }}>
|
<TooltipProvider>
|
||||||
{children}
|
<IconContext.Provider value={{ size: "20" }}>
|
||||||
</IconContext.Provider>
|
{children}
|
||||||
|
</IconContext.Provider>
|
||||||
|
</TooltipProvider>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
</ApiProvider>
|
</ApiProvider>
|
||||||
</RecoilRoot>
|
</RecoilRoot>
|
||||||
|
|||||||
@ -24,13 +24,8 @@ module.exports = {
|
|||||||
"accordion-up": "accordion-up 0.2s ease-out",
|
"accordion-up": "accordion-up 0.2s ease-out",
|
||||||
},
|
},
|
||||||
aspectRatio: {
|
aspectRatio: {
|
||||||
"wide": "32 / 9",
|
wide: "32 / 9",
|
||||||
"tall": "9 / 16",
|
tall: "9 / 16",
|
||||||
},
|
|
||||||
borderRadius: {
|
|
||||||
lg: "var(--radius)",
|
|
||||||
md: "calc(var(--radius) - 2px)",
|
|
||||||
sm: "calc(var(--radius) - 4px)",
|
|
||||||
},
|
},
|
||||||
colors: {
|
colors: {
|
||||||
border: "hsl(var(--border))",
|
border: "hsl(var(--border))",
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user