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

Settings fixes

Browse Source
This commit is contained in:
Nicolas Mowen 2024-05-18 13:53:39 -06:00
parent 3ce8816b9a
commit dc17791758
3 changed files with 61 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
web/src/components/menu/AccountSettings.tsx
View File

@ -34,55 +34,51 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
const MenuItem = isDesktop ? DropdownMenuItem : DialogClose;
return (
<div className={className}>
<Container>
<Trigger asChild>
<a href="#">
<Tooltip>
<TooltipTrigger asChild>
<div
className={cn(
"flex flex-col items-center justify-center",
isDesktop
? "cursor-pointer rounded-lg bg-secondary text-secondary-foreground hover:bg-muted"
: "text-secondary-foreground",
className,
)}
>
<VscAccount className="size-5 md:m-[6px]" />
</div>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent side="right">
<p>Account</p>
</TooltipContent>
</TooltipPortal>
</Tooltip>
</a>
</Trigger>
<Content
className={
isDesktop ? "mr-5 w-72" : "max-h-[75dvh] overflow-hidden p-2"
}
>
<div className="w-full flex-col overflow-y-auto overflow-x-hidden">
<DropdownMenuLabel>
Current User: {profile?.username || "anonymous"}
</DropdownMenuLabel>
<DropdownMenuSeparator className={isDesktop ? "mt-3" : "mt-1"} />
<MenuItem
className={
isDesktop ? "cursor-pointer" : "flex items-center p-2 text-sm"
}
<Container>
<Trigger asChild>
<Tooltip>
<TooltipTrigger asChild>
<div
className={cn(
"flex flex-col items-center justify-center",
isDesktop
? "cursor-pointer rounded-lg bg-secondary text-secondary-foreground hover:bg-muted"
: "text-secondary-foreground",
className,
)}
>
<a className="flex" href={logoutUrl}>
<LuLogOut className="mr-2 size-4" />
<span>Logout</span>
</a>
</MenuItem>
</div>
</Content>
</Container>
</div>
<VscAccount className="size-5 md:m-[6px]" />
</div>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent side="right">
<p>Account</p>
</TooltipContent>
</TooltipPortal>
</Tooltip>
</Trigger>
<Content
className={
isDesktop ? "mr-5 w-72" : "max-h-[75dvh] overflow-hidden p-2"
}
>
<div className="w-full flex-col overflow-y-auto overflow-x-hidden">
<DropdownMenuLabel>
Current User: {profile?.username || "anonymous"}
</DropdownMenuLabel>
<DropdownMenuSeparator className={isDesktop ? "mt-3" : "mt-1"} />
<MenuItem
className={
isDesktop ? "cursor-pointer" : "flex items-center p-2 text-sm"
}
>
<a className="flex" href={logoutUrl}>
<LuLogOut className="mr-2 size-4" />
<span>Logout</span>
</a>
</MenuItem>
</div>
</Content>
</Container>
);
}

30
web/src/components/menu/GeneralSettings.tsx
View File

@ -116,22 +116,20 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
<div className={className}>
<Container>
<Trigger asChild>
<a href="#">
<Tooltip>
<TooltipTrigger asChild>
<div
className={`flex flex-col items-center justify-center ${isDesktop ? "cursor-pointer rounded-lg bg-secondary text-secondary-foreground hover:bg-muted" : "text-secondary-foreground"}`}
>
<LuSettings className="size-5 md:m-[6px]" />
</div>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent side="right">
<p>Settings</p>
</TooltipContent>
</TooltipPortal>
</Tooltip>
</a>
<Tooltip>
<TooltipTrigger asChild>
<div
className={`flex flex-col items-center justify-center ${isDesktop ? "cursor-pointer rounded-lg bg-secondary text-secondary-foreground hover:bg-muted" : "text-secondary-foreground"}`}
>
<LuSettings className="size-5 md:m-[6px]" />
</div>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent side="right">
<p>Settings</p>
</TooltipContent>
</TooltipPortal>
</Tooltip>
</Trigger>
<Content
className={

4
web/src/components/navigation/Bottombar.tsx
View File

@ -15,7 +15,7 @@ import {
} from "@/context/statusbar-provider";
import { Link } from "react-router-dom";
import { cn } from "@/lib/utils";
import { isMobile } from "react-device-detect";
import { isIOS, isMobile } from "react-device-detect";
import { isPWA } from "@/utils/isPWA";
function Bottombar() {
@ -25,7 +25,7 @@ function Bottombar() {
<div
className={cn(
"absolute inset-x-4 bottom-0 flex h-16 flex-row justify-between",
isPWA
isPWA && isIOS
? "portrait:items-start portrait:pt-1 landscape:items-center"
: "items-center",
isMobile && !isPWA && "h-12 landscape:md:h-16",