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

Convert settings on mobile to drawer

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-31 07:20:00 -06:00
parent f734a1f887
commit 2fb9c94895
2 changed files with 132 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,5 @@
import Logo from "../Logo"; import Logo from "../Logo";
import { navbarLinks } from "@/pages/site-navigation"; import { navbarLinks } from "@/pages/site-navigation";
import SettingsNavItems from "../settings/SettingsNavItems";
import NavItem from "./NavItem"; import NavItem from "./NavItem";
import { CameraGroupSelector } from "../filter/CameraGroupSelector"; import { CameraGroupSelector } from "../filter/CameraGroupSelector";
import { useLocation } from "react-router-dom"; import { useLocation } from "react-router-dom";

193
web/src/components/settings/GeneralSettings.tsx
View File

@ -57,6 +57,11 @@ import {
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import ActivityIndicator from "../indicators/activity-indicator"; import ActivityIndicator from "../indicators/activity-indicator";
import { isDesktop } from "react-device-detect";
import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
import { PopoverPortal } from "@radix-ui/react-popover";
import { DialogClose } from "../ui/dialog";
type GeneralSettings = { type GeneralSettings = {
className?: string; className?: string;
@ -93,11 +98,20 @@ export default function GeneralSettings({ className }: GeneralSettings) {
window.location.href = "/"; window.location.href = "/";
}; };
const Container = isDesktop ? DropdownMenu : Drawer;
const Trigger = isDesktop ? DropdownMenuTrigger : DrawerTrigger;
const Content = isDesktop ? DropdownMenuContent : DrawerContent;
const MenuItem = isDesktop ? DropdownMenuItem : DialogClose;
const SubItem = isDesktop ? DropdownMenuSub : Popover;
const SubItemTrigger = isDesktop ? DropdownMenuSubTrigger : PopoverTrigger;
const SubItemContent = isDesktop ? DropdownMenuSubContent : PopoverContent;
const Portal = isDesktop ? DropdownMenuPortal : PopoverPortal;
return ( return (
<> <>
<div className={className}> <div className={className}>
<DropdownMenu> <Container>
<DropdownMenuTrigger asChild> <Trigger asChild>
<a href="#"> <a href="#">
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
@ -110,28 +124,40 @@ export default function GeneralSettings({ className }: GeneralSettings) {
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</a> </a>
</DropdownMenuTrigger> </Trigger>
<DropdownMenuContent className="md:w-72 mr-5"> <Content className={isDesktop ? "w-72 mr-5" : "max-h-[75dvh]"}>
<DropdownMenuLabel>System</DropdownMenuLabel> <DropdownMenuLabel>System</DropdownMenuLabel>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuGroup> <DropdownMenuGroup className={isDesktop ? "" : "flex flex-col"}>
<Link to="/storage"> <Link to="/storage">
<DropdownMenuItem> <MenuItem
<LuHardDrive className="mr-2 h-4 w-4" /> className={
isDesktop ? "cursor-pointer" : "p-2 flex items-center"
}
>
<LuHardDrive className="mr-2 size-4" />
<span>Storage</span> <span>Storage</span>
</DropdownMenuItem> </MenuItem>
</Link> </Link>
<Link to="/system"> <Link to="/system">
<DropdownMenuItem> <MenuItem
<LuActivity className="mr-2 h-4 w-4" /> className={
isDesktop ? "cursor-pointer" : "p-2 flex items-center"
}
>
<LuActivity className="mr-2 size-4" />
<span>System metrics</span> <span>System metrics</span>
</DropdownMenuItem> </MenuItem>
</Link> </Link>
<Link to="/logs"> <Link to="/logs">
<DropdownMenuItem> <MenuItem
<LuList className="mr-2 h-4 w-4" /> className={
isDesktop ? "cursor-pointer" : "p-2 flex items-center"
}
>
<LuList className="mr-2 size-4" />
<span>System logs</span> <span>System logs</span>
</DropdownMenuItem> </MenuItem>
</Link> </Link>
</DropdownMenuGroup> </DropdownMenuGroup>
<DropdownMenuLabel className="mt-3"> <DropdownMenuLabel className="mt-3">
@ -140,74 +166,108 @@ export default function GeneralSettings({ className }: GeneralSettings) {
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuGroup> <DropdownMenuGroup>
<Link to="/settings"> <Link to="/settings">
<DropdownMenuItem> <MenuItem
<LuSettings className="mr-2 h-4 w-4" /> className={
isDesktop ? "cursor-pointer" : "p-2 flex items-center"
}
>
<LuSettings className="mr-2 size-4" />
<span>Settings</span> <span>Settings</span>
</DropdownMenuItem> </MenuItem>
</Link> </Link>
<Link to="/config"> <Link to="/config">
<DropdownMenuItem> <MenuItem
<LuPenSquare className="mr-2 h-4 w-4" /> className={
isDesktop ? "cursor-pointer" : "p-2 flex items-center"
}
>
<LuPenSquare className="mr-2 size-4" />
<span>Configuration editor</span> <span>Configuration editor</span>
</DropdownMenuItem> </MenuItem>
</Link> </Link>
<DropdownMenuLabel className="mt-3">Appearance</DropdownMenuLabel> <DropdownMenuLabel className="mt-3">Appearance</DropdownMenuLabel>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuSub> <SubItem>
<DropdownMenuSubTrigger> <SubItemTrigger
<LuSunMoon className="mr-2 h-4 w-4" /> className={
isDesktop ? "cursor-pointer" : "p-2 flex items-center"
}
>
<LuSunMoon className="mr-2 size-4" />
<span>Dark Mode</span> <span>Dark Mode</span>
</DropdownMenuSubTrigger> </SubItemTrigger>
<DropdownMenuPortal> <Portal>
<DropdownMenuSubContent> <SubItemContent>
<DropdownMenuItem onClick={() => setTheme("light")}> <MenuItem
className={
isDesktop ? "cursor-pointer" : "p-2 flex items-center"
}
onClick={() => setTheme("light")}
>
{theme === "light" ? ( {theme === "light" ? (
<> <>
<LuSun className="mr-2 h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" /> <LuSun className="mr-2 size-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
Light Light
</> </>
) : ( ) : (
<span className="mr-2 ml-6">Light</span> <span className="mr-2 ml-6">Light</span>
)} )}
</DropdownMenuItem> </MenuItem>
<DropdownMenuItem onClick={() => setTheme("dark")}> <MenuItem
className={
isDesktop ? "cursor-pointer" : "p-2 flex items-center"
}
onClick={() => setTheme("dark")}
>
{theme === "dark" ? ( {theme === "dark" ? (
<> <>
<LuMoon className="mr-2 h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" /> <LuMoon className="mr-2 size-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
Dark Dark
</> </>
) : ( ) : (
<span className="mr-2 ml-6">Dark</span> <span className="mr-2 ml-6">Dark</span>
)} )}
</DropdownMenuItem> </MenuItem>
<DropdownMenuItem onClick={() => setTheme("system")}> <MenuItem
className={
isDesktop ? "cursor-pointer" : "p-2 flex items-center"
}
onClick={() => setTheme("system")}
>
{theme === "system" ? ( {theme === "system" ? (
<> <>
<CgDarkMode className="mr-2 h-4 w-4 scale-100 transition-all" /> <CgDarkMode className="mr-2 size-4 scale-100 transition-all" />
System System
</> </>
) : ( ) : (
<span className="mr-2 ml-6">System</span> <span className="mr-2 ml-6">System</span>
)} )}
</DropdownMenuItem> </MenuItem>
</DropdownMenuSubContent> </SubItemContent>
</DropdownMenuPortal> </Portal>
</DropdownMenuSub> </SubItem>
<DropdownMenuSub> <SubItem>
<DropdownMenuSubTrigger> <SubItemTrigger
<LuSunMoon className="mr-2 h-4 w-4" /> className={
isDesktop ? "cursor-pointer" : "p-2 flex items-center"
}
>
<LuSunMoon className="mr-2 size-4" />
<span>Theme</span> <span>Theme</span>
</DropdownMenuSubTrigger> </SubItemTrigger>
<DropdownMenuPortal> <Portal>
<DropdownMenuSubContent> <SubItemContent>
{colorSchemes.map((scheme) => ( {colorSchemes.map((scheme) => (
<DropdownMenuItem <MenuItem
key={scheme} key={scheme}
className={
isDesktop ? "cursor-pointer" : "p-2 flex items-center"
}
onClick={() => setColorScheme(scheme)} onClick={() => setColorScheme(scheme)}
> >
{scheme === colorScheme ? ( {scheme === colorScheme ? (
<> <>
<IoColorPalette className="mr-2 h-4 w-4 rotate-0 scale-100 transition-all" /> <IoColorPalette className="mr-2 size-4 rotate-0 scale-100 transition-all" />
{friendlyColorSchemeName(scheme)} {friendlyColorSchemeName(scheme)}
</> </>
) : ( ) : (
@ -215,33 +275,44 @@ export default function GeneralSettings({ className }: GeneralSettings) {
{friendlyColorSchemeName(scheme)} {friendlyColorSchemeName(scheme)}
</span> </span>
)} )}
</DropdownMenuItem> </MenuItem>
))} ))}
</DropdownMenuSubContent> </SubItemContent>
</DropdownMenuPortal> </Portal>
</DropdownMenuSub> </SubItem>
</DropdownMenuGroup> </DropdownMenuGroup>
<DropdownMenuLabel className="mt-3">Help</DropdownMenuLabel> <DropdownMenuLabel className="mt-3">Help</DropdownMenuLabel>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<a href="https://docs.frigate.video"> <a href="https://docs.frigate.video">
<DropdownMenuItem> <MenuItem
<LuLifeBuoy className="mr-2 h-4 w-4" /> className={
isDesktop ? "cursor-pointer" : "p-2 flex items-center"
}
>
<LuLifeBuoy className="mr-2 size-4" />
<span>Documentation</span> <span>Documentation</span>
</DropdownMenuItem> </MenuItem>
</a> </a>
<a href="https://github.com/blakeblackshear/frigate"> <a href="https://github.com/blakeblackshear/frigate">
<DropdownMenuItem> <MenuItem
<LuGithub className="mr-2 h-4 w-4" /> className={
isDesktop ? "cursor-pointer" : "p-2 flex items-center"
}
>
<LuGithub className="mr-2 size-4" />
<span>GitHub</span> <span>GitHub</span>
</DropdownMenuItem> </MenuItem>
</a> </a>
<DropdownMenuSeparator className="mt-3" /> <DropdownMenuSeparator className="mt-3" />
<DropdownMenuItem onClick={() => setRestartDialogOpen(true)}> <MenuItem
<LuRotateCw className="mr-2 h-4 w-4" /> className={isDesktop ? "cursor-pointer" : "p-2 flex items-center"}
onClick={() => setRestartDialogOpen(true)}
>
<LuRotateCw className="mr-2 size-4" />
<span>Restart Frigate</span> <span>Restart Frigate</span>
</DropdownMenuItem> </MenuItem>
</DropdownMenuContent> </Content>
</DropdownMenu> </Container>
</div> </div>
{restartDialogOpen && ( {restartDialogOpen && (
<AlertDialog <AlertDialog