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

Use dialog instead of popover

Browse Source
This commit is contained in:
Nicolas Mowen 2024-04-01 09:21:17 -06:00
parent 0a4d9e165e
commit e5bd2a901d
1 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -59,9 +59,13 @@ import {
import ActivityIndicator from "../indicators/activity-indicator"; import ActivityIndicator from "../indicators/activity-indicator";
import { isDesktop } from "react-device-detect"; import { isDesktop } from "react-device-detect";
import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer"; import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover"; import {
import { PopoverPortal } from "@radix-ui/react-popover"; Dialog,
import { DialogClose } from "../ui/dialog"; DialogClose,
DialogContent,
DialogPortal,
DialogTrigger,
} from "../ui/dialog";
type GeneralSettings = { type GeneralSettings = {
className?: string; className?: string;
@ -102,10 +106,10 @@ export default function GeneralSettings({ className }: GeneralSettings) {
const Trigger = isDesktop ? DropdownMenuTrigger : DrawerTrigger; const Trigger = isDesktop ? DropdownMenuTrigger : DrawerTrigger;
const Content = isDesktop ? DropdownMenuContent : DrawerContent; const Content = isDesktop ? DropdownMenuContent : DrawerContent;
const MenuItem = isDesktop ? DropdownMenuItem : DialogClose; const MenuItem = isDesktop ? DropdownMenuItem : DialogClose;
const SubItem = isDesktop ? DropdownMenuSub : Popover; const SubItem = isDesktop ? DropdownMenuSub : Dialog;
const SubItemTrigger = isDesktop ? DropdownMenuSubTrigger : PopoverTrigger; const SubItemTrigger = isDesktop ? DropdownMenuSubTrigger : DialogTrigger;
const SubItemContent = isDesktop ? DropdownMenuSubContent : PopoverContent; const SubItemContent = isDesktop ? DropdownMenuSubContent : DialogContent;
const Portal = isDesktop ? DropdownMenuPortal : PopoverPortal; const Portal = isDesktop ? DropdownMenuPortal : DialogPortal;
return ( return (
<> <>
@ -216,7 +220,9 @@ export default function GeneralSettings({ className }: GeneralSettings) {
<span>Dark Mode</span> <span>Dark Mode</span>
</SubItemTrigger> </SubItemTrigger>
<Portal> <Portal>
<SubItemContent> <SubItemContent
className={isDesktop ? "" : "w-[92%] rounded-2xl"}
>
<MenuItem <MenuItem
className={ className={
isDesktop isDesktop
@ -283,7 +289,9 @@ export default function GeneralSettings({ className }: GeneralSettings) {
<span>Theme</span> <span>Theme</span>
</SubItemTrigger> </SubItemTrigger>
<Portal> <Portal>
<SubItemContent> <SubItemContent
className={isDesktop ? "" : "w-[92%] rounded-2xl"}
>
{colorSchemes.map((scheme) => ( {colorSchemes.map((scheme) => (
<MenuItem <MenuItem
key={scheme} key={scheme}