Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

use portal on all sidebar tooltips (#11267)

Browse Source
This commit is contained in:
Josh Hawkins 2024-05-06 12:18:28 -05:00 committed by GitHub
parent ca8ef70096
commit 306c11d730
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 23 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
web/src/components/filter/CameraGroupSelector.tsx
View File

@ -59,6 +59,7 @@ import { Toaster } from "@/components/ui/sonner";
import { toast } from "sonner"; import { toast } from "sonner";
import ActivityIndicator from "../indicators/activity-indicator"; import ActivityIndicator from "../indicators/activity-indicator";
import { ScrollArea, ScrollBar } from "../ui/scroll-area"; import { ScrollArea, ScrollBar } from "../ui/scroll-area";
import { TooltipPortal } from "@radix-ui/react-tooltip";
type CameraGroupSelectorProps = { type CameraGroupSelectorProps = {
className?: string; className?: string;
@ -137,9 +138,11 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
<MdHome className="size-4" /> <MdHome className="size-4" />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent className="capitalize" side="right"> <TooltipPortal>
All Cameras <TooltipContent className="capitalize" side="right">
</TooltipContent> All Cameras
</TooltipContent>
</TooltipPortal>
</Tooltip> </Tooltip>
{groups.map(([name, config]) => { {groups.map(([name, config]) => {
return ( return (
@ -161,9 +164,11 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
{getIconForGroup(config.icon)} {getIconForGroup(config.icon)}
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent className="capitalize" side="right"> <TooltipPortal>
{name} <TooltipContent className="capitalize" side="right">
</TooltipContent> {name}
</TooltipContent>
</TooltipPortal>
</Tooltip> </Tooltip>
); );
})} })}

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

@ -3,6 +3,7 @@ import {
TooltipContent, TooltipContent,
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import { TooltipPortal } from "@radix-ui/react-tooltip";
import { isDesktop } from "react-device-detect"; import { isDesktop } from "react-device-detect";
import { VscAccount } from "react-icons/vsc"; import { VscAccount } from "react-icons/vsc";
@ -19,9 +20,11 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
<VscAccount className="size-5 md:m-[6px]" /> <VscAccount className="size-5 md:m-[6px]" />
</div> </div>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent side="right"> <TooltipPortal>
<p>Account</p> <TooltipContent side="right">
</TooltipContent> <p>Account</p>
</TooltipContent>
</TooltipPortal>
</Tooltip> </Tooltip>
); );
} }

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

@ -65,6 +65,7 @@ import {
DialogPortal, DialogPortal,
DialogTrigger, DialogTrigger,
} from "../ui/dialog"; } from "../ui/dialog";
import { TooltipPortal } from "@radix-ui/react-tooltip";
type GeneralSettingsProps = { type GeneralSettingsProps = {
className?: string; className?: string;
@ -124,9 +125,11 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
<LuSettings className="size-5 md:m-[6px]" /> <LuSettings className="size-5 md:m-[6px]" />
</div> </div>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent side="right"> <TooltipPortal>
<p>Settings</p> <TooltipContent side="right">
</TooltipContent> <p>Settings</p>
</TooltipContent>
</TooltipPortal>
</Tooltip> </Tooltip>
</a> </a>
</Trigger> </Trigger>