mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-02-08 12:15:25 +03:00
tooltips
This commit is contained in:
Josh Hawkins
parent
b6ca0d17f9
commit
e70039177a
@ -5,7 +5,7 @@ import { Button } from "@/components/ui/button";
|
|||||||
import { ENV } from "@/env";
|
import { ENV } from "@/env";
|
||||||
import { NavLink } from "react-router-dom";
|
import { NavLink } from "react-router-dom";
|
||||||
import { navbarLinks } from "@/pages/site-navigation";
|
import { navbarLinks } from "@/pages/site-navigation";
|
||||||
import SettingsDropdownMenu from "./settings/SettingsNavItems";
|
import SettingsNavItems from "./settings/SettingsNavItems";
|
||||||
|
|
||||||
type HeaderProps = {
|
type HeaderProps = {
|
||||||
onToggleNavbar: () => void;
|
onToggleNavbar: () => void;
|
||||||
@ -62,7 +62,7 @@ function Header({ onToggleNavbar }: HeaderProps) {
|
|||||||
</Link>
|
</Link>
|
||||||
<HeaderNavigation />
|
<HeaderNavigation />
|
||||||
</div>
|
</div>
|
||||||
<SettingsDropdownMenu className="flex flex-shrink-0 md:gap-2" />
|
<SettingsNavItems className="flex flex-shrink-0 md:gap-2" />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,7 +4,13 @@ import { Sheet, SheetContent } from "@/components/ui/sheet";
|
|||||||
import Logo from "./Logo";
|
import Logo from "./Logo";
|
||||||
import { ENV } from "@/env";
|
import { ENV } from "@/env";
|
||||||
import { navbarLinks } from "@/pages/site-navigation";
|
import { navbarLinks } from "@/pages/site-navigation";
|
||||||
import SettingsDropdownMenu from "./settings/SettingsNavItems";
|
import SettingsNavItems from "./settings/SettingsNavItems";
|
||||||
|
import {
|
||||||
|
Tooltip,
|
||||||
|
TooltipContent,
|
||||||
|
TooltipProvider,
|
||||||
|
TooltipTrigger,
|
||||||
|
} from "@/components/ui/tooltip";
|
||||||
|
|
||||||
function Sidebar({
|
function Sidebar({
|
||||||
sheetOpen,
|
sheetOpen,
|
||||||
@ -14,21 +20,23 @@ function Sidebar({
|
|||||||
setSheetOpen: (open: boolean) => void;
|
setSheetOpen: (open: boolean) => void;
|
||||||
}) {
|
}) {
|
||||||
const sidebar = (
|
const sidebar = (
|
||||||
<aside className="w-[52px] 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" />
|
||||||
{navbarLinks.map((item) => (
|
<TooltipProvider>
|
||||||
<SidebarItem
|
{navbarLinks.map((item) => (
|
||||||
key={item.id}
|
<SidebarItem
|
||||||
Icon={item.icon}
|
key={item.id}
|
||||||
title={item.title}
|
Icon={item.icon}
|
||||||
url={item.url}
|
title={item.title}
|
||||||
dev={item.dev}
|
url={item.url}
|
||||||
onClick={() => setSheetOpen(false)}
|
dev={item.dev}
|
||||||
/>
|
onClick={() => setSheetOpen(false)}
|
||||||
))}
|
/>
|
||||||
|
))}
|
||||||
|
</TooltipProvider>
|
||||||
</div>
|
</div>
|
||||||
<SettingsDropdownMenu className="flex flex-col items-center" />
|
<SettingsNavItems className="hidden md:flex flex-col items-center" />
|
||||||
</aside>
|
</aside>
|
||||||
);
|
);
|
||||||
|
|
||||||
@ -40,7 +48,7 @@ function Sidebar({
|
|||||||
modal={false}
|
modal={false}
|
||||||
onOpenChange={() => setSheetOpen(false)}
|
onOpenChange={() => setSheetOpen(false)}
|
||||||
>
|
>
|
||||||
<SheetContent side="left" className="w-[100px]">
|
<SheetContent side="left" className="w-[90px]">
|
||||||
<div className="w-full flex flex-row justify-center"></div>
|
<div className="w-full flex flex-row justify-center"></div>
|
||||||
{sidebar}
|
{sidebar}
|
||||||
</SheetContent>
|
</SheetContent>
|
||||||
@ -62,20 +70,26 @@ function SidebarItem({ Icon, title, url, dev, onClick }: SidebarItemProps) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
shouldRender && (
|
shouldRender && (
|
||||||
<NavLink
|
<Tooltip>
|
||||||
to={url}
|
<NavLink
|
||||||
onClick={onClick}
|
to={url}
|
||||||
className={({ isActive }) =>
|
onClick={onClick}
|
||||||
`mx-[10px] mb-6 flex flex-col justify-center items-center rounded-lg ${
|
className={({ isActive }) =>
|
||||||
isActive
|
`mx-[10px] mb-6 flex flex-col justify-center items-center rounded-lg ${
|
||||||
? "font-bold text-white bg-blue-400"
|
isActive
|
||||||
: "text-muted-foreground bg-secondary"
|
? "font-bold text-white bg-primary"
|
||||||
}`
|
: "text-muted-foreground bg-secondary"
|
||||||
}
|
}`
|
||||||
>
|
}
|
||||||
<Icon className="w-5 h-5 m-[6px]" />
|
>
|
||||||
<div className="hidden">{title}</div>
|
<TooltipTrigger>
|
||||||
</NavLink>
|
<Icon className="w-5 h-5 m-[6px]" />
|
||||||
|
</TooltipTrigger>
|
||||||
|
</NavLink>
|
||||||
|
<TooltipContent side="right">
|
||||||
|
<p>{title}</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -52,6 +52,12 @@ import {
|
|||||||
SheetHeader,
|
SheetHeader,
|
||||||
SheetTitle,
|
SheetTitle,
|
||||||
} from "../ui/sheet";
|
} from "../ui/sheet";
|
||||||
|
import {
|
||||||
|
Tooltip,
|
||||||
|
TooltipContent,
|
||||||
|
TooltipProvider,
|
||||||
|
TooltipTrigger,
|
||||||
|
} from "@/components/ui/tooltip";
|
||||||
import ActivityIndicator from "../ui/activity-indicator";
|
import ActivityIndicator from "../ui/activity-indicator";
|
||||||
|
|
||||||
type SettingsNavItemsProps = {
|
type SettingsNavItemsProps = {
|
||||||
@ -92,146 +98,164 @@ export default function SettingsNavItems({ className }: SettingsNavItemsProps) {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className={className}>
|
<div className={className}>
|
||||||
<DropdownMenu>
|
<TooltipProvider>
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenu>
|
||||||
<Button size="icon" variant="ghost">
|
<DropdownMenuTrigger asChild>
|
||||||
<LuSettings />
|
<Tooltip>
|
||||||
</Button>
|
<TooltipTrigger>
|
||||||
</DropdownMenuTrigger>
|
<Button size="icon" variant="ghost">
|
||||||
<DropdownMenuContent className="md:w-72 mr-5">
|
<LuSettings />
|
||||||
<DropdownMenuLabel>System</DropdownMenuLabel>
|
</Button>
|
||||||
<DropdownMenuSeparator />
|
</TooltipTrigger>
|
||||||
<DropdownMenuGroup>
|
<TooltipContent side="right">
|
||||||
<Link to="/storage">
|
<p>Settings</p>
|
||||||
<DropdownMenuItem>
|
</TooltipContent>
|
||||||
<LuHardDrive className="mr-2 h-4 w-4" />
|
</Tooltip>
|
||||||
<span>Storage</span>
|
</DropdownMenuTrigger>
|
||||||
</DropdownMenuItem>
|
<DropdownMenuContent className="md:w-72 mr-5">
|
||||||
</Link>
|
<DropdownMenuLabel>System</DropdownMenuLabel>
|
||||||
<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 />
|
<DropdownMenuSeparator />
|
||||||
<DropdownMenuSub>
|
<DropdownMenuGroup>
|
||||||
<DropdownMenuSubTrigger>
|
<Link to="/storage">
|
||||||
<LuSunMoon className="mr-2 h-4 w-4" />
|
<DropdownMenuItem>
|
||||||
<span>Dark Mode</span>
|
<LuHardDrive className="mr-2 h-4 w-4" />
|
||||||
</DropdownMenuSubTrigger>
|
<span>Storage</span>
|
||||||
<DropdownMenuPortal>
|
</DropdownMenuItem>
|
||||||
<DropdownMenuSubContent>
|
</Link>
|
||||||
<DropdownMenuItem onClick={() => setTheme("light")}>
|
<Link to="/system">
|
||||||
{theme === "light" ? (
|
<DropdownMenuItem>
|
||||||
<>
|
<LuActivity className="mr-2 h-4 w-4" />
|
||||||
<LuSun className="mr-2 h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
<span>System metrics</span>
|
||||||
Light
|
</DropdownMenuItem>
|
||||||
</>
|
</Link>
|
||||||
) : (
|
<Link to="/logs">
|
||||||
<span className="mr-2 ml-6">Light</span>
|
<DropdownMenuItem>
|
||||||
)}
|
<LuList className="mr-2 h-4 w-4" />
|
||||||
</DropdownMenuItem>
|
<span>System logs</span>
|
||||||
<DropdownMenuItem onClick={() => setTheme("dark")}>
|
</DropdownMenuItem>
|
||||||
{theme === "dark" ? (
|
</Link>
|
||||||
<>
|
</DropdownMenuGroup>
|
||||||
<LuMoon className="mr-2 h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
<DropdownMenuLabel className="mt-3">
|
||||||
Dark
|
Configuration
|
||||||
</>
|
</DropdownMenuLabel>
|
||||||
) : (
|
<DropdownMenuSeparator />
|
||||||
<span className="mr-2 ml-6">Dark</span>
|
<DropdownMenuGroup>
|
||||||
)}
|
<Link to="/settings">
|
||||||
</DropdownMenuItem>
|
<DropdownMenuItem>
|
||||||
<DropdownMenuItem onClick={() => setTheme("system")}>
|
<LuSettings className="mr-2 h-4 w-4" />
|
||||||
{theme === "system" ? (
|
<span>Settings</span>
|
||||||
<>
|
</DropdownMenuItem>
|
||||||
<CgDarkMode className="mr-2 h-4 w-4 scale-100 transition-all" />
|
</Link>
|
||||||
System
|
<Link to="/config">
|
||||||
</>
|
<DropdownMenuItem>
|
||||||
) : (
|
<LuPenSquare className="mr-2 h-4 w-4" />
|
||||||
<span className="mr-2 ml-6">System</span>
|
<span>Configuration editor</span>
|
||||||
)}
|
</DropdownMenuItem>
|
||||||
</DropdownMenuItem>
|
</Link>
|
||||||
</DropdownMenuSubContent>
|
<DropdownMenuLabel className="mt-3">
|
||||||
</DropdownMenuPortal>
|
Appearance
|
||||||
</DropdownMenuSub>
|
</DropdownMenuLabel>
|
||||||
<DropdownMenuSub>
|
<DropdownMenuSeparator />
|
||||||
<DropdownMenuSubTrigger>
|
<DropdownMenuSub>
|
||||||
<LuSunMoon className="mr-2 h-4 w-4" />
|
<DropdownMenuSubTrigger>
|
||||||
<span>Theme</span>
|
<LuSunMoon className="mr-2 h-4 w-4" />
|
||||||
</DropdownMenuSubTrigger>
|
<span>Dark Mode</span>
|
||||||
<DropdownMenuPortal>
|
</DropdownMenuSubTrigger>
|
||||||
<DropdownMenuSubContent>
|
<DropdownMenuPortal>
|
||||||
{colorSchemes.map((scheme) => (
|
<DropdownMenuSubContent>
|
||||||
<DropdownMenuItem
|
<DropdownMenuItem onClick={() => setTheme("light")}>
|
||||||
key={scheme}
|
{theme === "light" ? (
|
||||||
onClick={() => setColorScheme(scheme)}
|
|
||||||
>
|
|
||||||
{scheme === colorScheme ? (
|
|
||||||
<>
|
<>
|
||||||
<IoColorPalette className="mr-2 h-4 w-4 rotate-0 scale-100 transition-all" />
|
<LuSun className="mr-2 h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
||||||
{friendlyColorSchemeName(scheme)}
|
Light
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<span className="mr-2 ml-6">
|
<span className="mr-2 ml-6">Light</span>
|
||||||
{friendlyColorSchemeName(scheme)}
|
|
||||||
</span>
|
|
||||||
)}
|
)}
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
))}
|
<DropdownMenuItem onClick={() => setTheme("dark")}>
|
||||||
</DropdownMenuSubContent>
|
{theme === "dark" ? (
|
||||||
</DropdownMenuPortal>
|
<>
|
||||||
</DropdownMenuSub>
|
<LuMoon className="mr-2 h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
||||||
</DropdownMenuGroup>
|
Dark
|
||||||
<DropdownMenuLabel className="mt-3">Help</DropdownMenuLabel>
|
</>
|
||||||
<DropdownMenuSeparator />
|
) : (
|
||||||
<a href="https://docs.frigate.video">
|
<span className="mr-2 ml-6">Dark</span>
|
||||||
<DropdownMenuItem>
|
)}
|
||||||
<LuLifeBuoy className="mr-2 h-4 w-4" />
|
</DropdownMenuItem>
|
||||||
<span>Documentation</span>
|
<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>
|
||||||
|
</a>
|
||||||
|
<a href="https://github.com/blakeblackshear/frigate">
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<LuGithub className="mr-2 h-4 w-4" />
|
||||||
|
<span>GitHub</span>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</a>
|
||||||
|
<DropdownMenuSeparator className="mt-3" />
|
||||||
|
<DropdownMenuItem onClick={() => setRestartDialogOpen(true)}>
|
||||||
|
<LuRotateCw className="mr-2 h-4 w-4" />
|
||||||
|
<span>Restart Frigate</span>
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</a>
|
</DropdownMenuContent>
|
||||||
<a href="https://github.com/blakeblackshear/frigate">
|
</DropdownMenu>
|
||||||
<DropdownMenuItem>
|
<Tooltip>
|
||||||
<LuGithub className="mr-2 h-4 w-4" />
|
<TooltipTrigger>
|
||||||
<span>GitHub</span>
|
<Button size="icon" variant="ghost">
|
||||||
</DropdownMenuItem>
|
<VscAccount />
|
||||||
</a>
|
</Button>
|
||||||
<DropdownMenuSeparator className="mt-3" />
|
</TooltipTrigger>
|
||||||
<DropdownMenuItem onClick={() => setRestartDialogOpen(true)}>
|
<TooltipContent side="right">
|
||||||
<LuRotateCw className="mr-2 h-4 w-4" />
|
<p>Account</p>
|
||||||
<span>Restart Frigate</span>
|
</TooltipContent>
|
||||||
</DropdownMenuItem>
|
</Tooltip>
|
||||||
</DropdownMenuContent>
|
</TooltipProvider>
|
||||||
</DropdownMenu>
|
|
||||||
<Button size="icon" variant="ghost">
|
|
||||||
<VscAccount />
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
{restartDialogOpen && (
|
{restartDialogOpen && (
|
||||||
<AlertDialog
|
<AlertDialog
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user