administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-14 02:52:11 +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>
); );
} }

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

@ -330,17 +330,18 @@ 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", "debug",
"cameras", "cameras",
"masksAndZones", "masksAndZones",
"motionTuner", "motionTuner",
"triggers", "triggers",
].includes(page) && ( ].includes(page) ? (
<div className="absolute right-2 top-2 flex items-center gap-2"> <div className="flex items-center gap-2">
{page == "masksAndZones" && ( {page == "masksAndZones" && (
<ZoneMaskFilterButton <ZoneMaskFilterButton
selectedZoneMask={filterZoneMask} selectedZoneMask={filterZoneMask}
@ -355,7 +356,10 @@ export default function Settings() {
currentPage={page} currentPage={page}
/> />
</div> </div>
)} ) : undefined
}
>
<MobilePageTitle>{t("menu." + page)}</MobilePageTitle>
</MobilePageHeader> </MobilePageHeader>
<div className="p-2"> <div className="p-2">