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

improve mobile

Browse Source
This commit is contained in:
Josh Hawkins 2025-10-08 10:19:49 -05:00
parent 6bf8aa3d64
commit 56906f0856
1 changed files with 40 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -279,35 +279,58 @@ export default function Settings() {
if (isMobile) { if (isMobile) {
return ( return (
<div className="flex size-full flex-col"> <div className="flex size-full flex-col">
<div className="sticky -top-2 z-50 mb-2 flex items-center justify-center bg-background p-4"> <div className="relative sticky -top-2 z-50 mb-2 flex items-center bg-background p-4">
<Button <Button
className="absolute left-0 rounded-lg" className="absolute left-4 z-10 rounded-lg"
aria-label="Open menu" aria-label="Open menu"
size="sm" size="sm"
onClick={() => setMobileMenuOpen(true)} onClick={() => setMobileMenuOpen(true)}
> >
<IoMdArrowRoundBack className="h-5 w-5 text-secondary-foreground" /> <IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
</Button> </Button>
<h2 className="text-lg font-semibold smart-capitalize"> <h2 className="flex-1 text-center text-lg font-semibold smart-capitalize">
{t("menu." + page)} {t("menu." + page)}
</h2> </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>
<MobilePage open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}> <MobilePage open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
<MobilePagePortal> <MobilePagePortal>
<MobilePageContent> <MobilePageContent className="px-4">
<MobilePageHeader> <MobilePageHeader>
<MobilePageTitle> <MobilePageTitle>
{t("settings", { ns: "common" })} {t("settings", { ns: "common" })}
</MobilePageTitle> </MobilePageTitle>
</MobilePageHeader> </MobilePageHeader>
<div className="p-4"> <div>
{settingsGroups.map((group) => { {settingsGroups.map((group) => {
const filteredItems = group.items.filter((item) => const filteredItems = group.items.filter((item) =>
visibleSettingsViews.includes(item.key as SettingsType), visibleSettingsViews.includes(item.key as SettingsType),
); );
if (filteredItems.length === 0) return null; if (filteredItems.length === 0) return null;
return ( return (
<div key={group.label} className="mb-4"> <div key={group.label} className="mb-3">
<h3 className="mb-2 text-sm font-medium text-muted-foreground"> <h3 className="mb-2 text-sm font-medium text-muted-foreground">
{group.label} {group.label}
</h3> </h3>
@ -337,43 +360,18 @@ export default function Settings() {
</MobilePageContent> </MobilePageContent>
</MobilePagePortal> </MobilePagePortal>
</MobilePage> </MobilePage>
{[ <div className="flex-1 overflow-auto p-2">
"debug", {(() => {
"cameras", const CurrentComponent = getCurrentComponent(page);
"masksAndZones", if (!CurrentComponent) return null;
"motionTuner", return (
"triggers", <CurrentComponent
].includes(page) && ( selectedCamera={selectedCamera}
<div className="ml-2 flex flex-shrink-0 items-center gap-2"> setUnsavedChanges={setUnsavedChanges}
{page == "masksAndZones" && (
<ZoneMaskFilterButton
selectedZoneMask={filterZoneMask} selectedZoneMask={filterZoneMask}
updateZoneMaskFilter={setFilterZoneMask}
/> />
)} );
<CameraSelectButton })()}
allCameras={cameras}
selectedCamera={selectedCamera}
setSelectedCamera={setSelectedCamera}
cameraEnabledStates={cameraEnabledStates}
currentPage={page}
/>
</div>
)}
<div className="mt-2 flex h-full w-full flex-col items-start md:h-dvh md:pb-24">
<div className="flex-1 overflow-auto p-2">
{(() => {
const CurrentComponent = getCurrentComponent(page);
if (!CurrentComponent) return null;
return (
<CurrentComponent
selectedCamera={selectedCamera}
setUnsavedChanges={setUnsavedChanges}
selectedZoneMask={filterZoneMask}
/>
);
})()}
</div>
</div> </div>
{confirmationDialogOpen && ( {confirmationDialogOpen && (
<AlertDialog <AlertDialog