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

add optional actions to mobile page header for top right buttons

Browse Source
This commit is contained in:
Josh Hawkins 2025-10-08 12:45:39 -05:00
parent 644169bde2
commit 1da8216b32
2 changed files with 36 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/components/mobile/MobilePage.tsx
View File

@ -170,12 +170,14 @@ export function MobilePageContent({
interface MobilePageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
onClose?: () => void;
actions?: React.ReactNode;
}
export function MobilePageHeader({
children,
className,
onClose,
actions,
...props
}: MobilePageHeaderProps) {
const { t } = useTranslation(["common"]);
@ -208,6 +210,11 @@ export function MobilePageHeader({
<IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
</Button>
<div className="flex flex-row text-center">{children}</div>
{actions && (
<div className="absolute right-0 flex items-center gap-2">
{actions}
</div>
)}
</div>
);
}

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

@ -330,32 +330,36 @@ export default function Settings() {
open={contentMobileOpen}
onOpenChange={setContentMobileOpen}
>
<MobilePageContent className="scrollbar-container overflow-y-auto px-4">
<MobilePageHeader>
<MobilePageTitle>{t("menu." + page)}</MobilePageTitle>
{[
"debug",
"cameras",
"masksAndZones",
"motionTuner",
"triggers",
].includes(page) && (
<div className="absolute right-2 top-2 flex items-center gap-2">
{page == "masksAndZones" && (
<ZoneMaskFilterButton
selectedZoneMask={filterZoneMask}
updateZoneMaskFilter={setFilterZoneMask}
<MobilePageContent className="scrollbar-container overflow-y-auto px-2">
<MobilePageHeader
className="top-0"
actions={
[
"debug",
"cameras",
"masksAndZones",
"motionTuner",
"triggers",
].includes(page) ? (
<div className="flex items-center gap-2">
{page == "masksAndZones" && (
<ZoneMaskFilterButton
selectedZoneMask={filterZoneMask}
updateZoneMaskFilter={setFilterZoneMask}
/>
)}
<CameraSelectButton
allCameras={cameras}
selectedCamera={selectedCamera}
setSelectedCamera={setSelectedCamera}
cameraEnabledStates={cameraEnabledStates}
currentPage={page}
/>
)}
<CameraSelectButton
allCameras={cameras}
selectedCamera={selectedCamera}
setSelectedCamera={setSelectedCamera}
cameraEnabledStates={cameraEnabledStates}
currentPage={page}
/>
</div>
)}
</div>
) : undefined
}
>
<MobilePageTitle>{t("menu." + page)}</MobilePageTitle>
</MobilePageHeader>
<div className="p-2">