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

use mobile page for components

Browse Source
This commit is contained in:
Josh Hawkins 2025-10-08 12:30:55 -05:00
parent a34d7e04cc
commit 644169bde2
1 changed files with 58 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
web/src/pages/Settings.tsx
View File

@ -56,11 +56,16 @@ import {
SidebarMenuSubItem, SidebarMenuSubItem,
SidebarProvider, SidebarProvider,
} from "@/components/ui/sidebar"; } from "@/components/ui/sidebar";
import { IoMdArrowRoundBack } from "react-icons/io";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import Heading from "@/components/ui/heading"; import Heading from "@/components/ui/heading";
import { LuChevronRight } from "react-icons/lu"; import { LuChevronRight } from "react-icons/lu";
import Logo from "@/components/Logo"; import Logo from "@/components/Logo";
import {
MobilePage,
MobilePageContent,
MobilePageHeader,
MobilePageTitle,
} from "@/components/mobile/MobilePage";
const allSettingsViews = [ const allSettingsViews = [
"ui", "ui",
@ -131,7 +136,7 @@ function MobileMenuItem({
}: { }: {
item: { key: string }; item: { key: string };
onSelect: (key: string) => void; onSelect: (key: string) => void;
onClose: () => void; onClose?: () => void;
className?: string; className?: string;
}) { }) {
const { t } = useTranslation(["views/settings"]); const { t } = useTranslation(["views/settings"]);
@ -142,7 +147,7 @@ function MobileMenuItem({
className={cn("w-full justify-between pr-2", className)} className={cn("w-full justify-between pr-2", className)}
onClick={() => { onClick={() => {
onSelect(item.key); onSelect(item.key);
onClose(); onClose?.();
}} }}
> >
<div className="smart-capitalize">{t("menu." + item.key)}</div> <div className="smart-capitalize">{t("menu." + item.key)}</div>
@ -155,7 +160,7 @@ export default function Settings() {
const { t } = useTranslation(["views/settings"]); const { t } = useTranslation(["views/settings"]);
const [page, setPage] = useState<SettingsType>("ui"); const [page, setPage] = useState<SettingsType>("ui");
const [_, setPageToggle] = useOptimisticState(page, setPage, 100); const [_, setPageToggle] = useOptimisticState(page, setPage, 100);
const [mobileMenuOpen, setMobileMenuOpen] = useState(isMobile); const [contentMobileOpen, setContentMobileOpen] = useState(false);
const { data: config } = useSWR<FrigateConfig>("config"); const { data: config } = useSWR<FrigateConfig>("config");
@ -271,7 +276,7 @@ export default function Settings() {
if (isMobile) { if (isMobile) {
return ( return (
<> <>
{mobileMenuOpen ? ( {!contentMobileOpen && (
<div className="flex size-full flex-col"> <div className="flex size-full flex-col">
<div className="sticky -top-2 z-50 mb-2 bg-background p-4"> <div className="sticky -top-2 z-50 mb-2 bg-background p-4">
<div className="flex items-center justify-center"> <div className="flex items-center justify-center">
@ -311,8 +316,8 @@ export default function Settings() {
} else { } else {
setPageToggle(key as SettingsType); setPageToggle(key as SettingsType);
} }
setContentMobileOpen(true);
}} }}
onClose={() => setMobileMenuOpen(false)}
/> />
))} ))}
</div> </div>
@ -320,61 +325,54 @@ export default function Settings() {
})} })}
</div> </div>
</div> </div>
) : (
<div
className={cn(
"sticky -top-2 z-50 mb-2 flex items-center bg-background p-4",
)}
>
<Button
className="absolute left-4 z-10 rounded-lg"
aria-label="Open menu"
size="sm"
onClick={() => setMobileMenuOpen(true)}
>
<IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
</Button>
<h2 className="flex-1 text-center text-lg font-semibold smart-capitalize">
{t("menu." + page)}
</h2>
{[
"debug",
"cameras",
"masksAndZones",
"motionTuner",
"triggers",
].includes(page) && (
<div className="absolute right-4 flex items-center gap-2">
{page == "masksAndZones" && (
<ZoneMaskFilterButton
selectedZoneMask={filterZoneMask}
updateZoneMaskFilter={setFilterZoneMask}
/>
)}
<CameraSelectButton
allCameras={cameras}
selectedCamera={selectedCamera}
setSelectedCamera={setSelectedCamera}
cameraEnabledStates={cameraEnabledStates}
currentPage={page}
/>
</div>
)}
</div>
)} )}
<div className="flex-1 overflow-auto p-2"> <MobilePage
{(() => { open={contentMobileOpen}
const CurrentComponent = getCurrentComponent(page); onOpenChange={setContentMobileOpen}
if (!CurrentComponent) return null; >
return ( <MobilePageContent className="scrollbar-container overflow-y-auto px-4">
<CurrentComponent <MobilePageHeader>
selectedCamera={selectedCamera} <MobilePageTitle>{t("menu." + page)}</MobilePageTitle>
setUnsavedChanges={setUnsavedChanges} {[
selectedZoneMask={filterZoneMask} "debug",
/> "cameras",
); "masksAndZones",
})()} "motionTuner",
</div> "triggers",
].includes(page) && (
<div className="absolute right-2 top-2 flex items-center gap-2">
{page == "masksAndZones" && (
<ZoneMaskFilterButton
selectedZoneMask={filterZoneMask}
updateZoneMaskFilter={setFilterZoneMask}
/>
)}
<CameraSelectButton
allCameras={cameras}
selectedCamera={selectedCamera}
setSelectedCamera={setSelectedCamera}
cameraEnabledStates={cameraEnabledStates}
currentPage={page}
/>
</div>
)}
</MobilePageHeader>
<div className="p-2">
{(() => {
const CurrentComponent = getCurrentComponent(page);
if (!CurrentComponent) return null;
return (
<CurrentComponent
selectedCamera={selectedCamera}
setUnsavedChanges={setUnsavedChanges}
selectedZoneMask={filterZoneMask}
/>
);
})()}
</div>
</MobilePageContent>
</MobilePage>
{confirmationDialogOpen && ( {confirmationDialogOpen && (
<AlertDialog <AlertDialog
open={confirmationDialogOpen} open={confirmationDialogOpen}