administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-12 18:17: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> { interface MobilePageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
onClose?: () => void; onClose?: () => void;
actions?: React.ReactNode;
} }
export function MobilePageHeader({ export function MobilePageHeader({
children, children,
className, className,
onClose, onClose,
actions,
...props ...props
}: MobilePageHeaderProps) { }: MobilePageHeaderProps) {
const { t } = useTranslation(["common"]); const { t } = useTranslation(["common"]);
@ -208,6 +210,11 @@ export function MobilePageHeader({
<IoMdArrowRoundBack className="size-5 text-secondary-foreground" /> <IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
</Button> </Button>
<div className="flex flex-row text-center">{children}</div> <div className="flex flex-row text-center">{children}</div>
{actions && (
<div className="absolute right-0 flex items-center gap-2">
{actions}
</div>
)}
</div> </div>
); );
} }

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

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