administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-06-21 03:41:55 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Mobile UI/UX improvements (#23402)
Some checks are pending
CI / Synaptics Build (push) Blocked by required conditions
Details
CI / AMD64 Extra Build (push) Blocked by required conditions
Details
CI / ARM Extra Build (push) Blocked by required conditions
Details
CI / AMD64 Build (push) Waiting to run
Details
CI / ARM Build (push) Waiting to run
Details
CI / Jetson Jetpack 6 (push) Waiting to run
Details
CI / Assemble and push default build (push) Blocked by required conditions
Details

Browse Source 
* increase camera group icon size on mobile

add an animated slider when there is not enough space for all defined camera groups

* change desktop and mobile edit camera groups icon to pencil and add desktop tooltip

* apply safe area insets to mobile layout in PWA mode using viewport-fit=cover

* adaptively size bottom bar nav targets to 48px when they fit, else compact

icon size now targets the standardized 48×48px mobile touch target (Material Design 3 / Android 48dp bottom-nav minimum)
This commit is contained in:
Josh Hawkins 2026-06-04 10:56:11 -05:00 committed by GitHub
parent 7e83d5de90
commit b751025339
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 363 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/images/branding/favicon.ico" /> <link rel="icon" href="/images/branding/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<title>Frigate</title> <title>Frigate</title>
<link <link
rel="apple-touch-icon" rel="apple-touch-icon"

3
web/public/locales/en/components/camera.json
View File

@ -2,7 +2,10 @@
"group": { "group": {
"label": "Camera Groups", "label": "Camera Groups",
"add": "Add Camera Group", "add": "Add Camera Group",
"showAll": "Show all camera groups",
"showLess": "Show less",
"edit": "Edit Camera Group", "edit": "Edit Camera Group",
"editGroups": "Edit Camera Groups",
"delete": { "delete": {
"label": "Delete Camera Group", "label": "Delete Camera Group",
"confirm": { "confirm": {

4
web/src/App.tsx
View File

@ -78,7 +78,9 @@ function DefaultAppView() {
className={cn( className={cn(
"absolute right-0 top-0 overflow-hidden", "absolute right-0 top-0 overflow-hidden",
isMobile isMobile
? `bottom-${isPWA ? 16 : 12} left-0 md:bottom-16 landscape:bottom-14 landscape:md:bottom-16` ? isPWA
? "bottom-[calc(3rem+env(safe-area-inset-bottom))] left-0 pt-[env(safe-area-inset-top)] md:bottom-[calc(4rem+env(safe-area-inset-bottom))] landscape:pl-[env(safe-area-inset-left)] landscape:pr-[env(safe-area-inset-right)]"
: "bottom-12 left-0 md:bottom-16"
: "bottom-8 left-[52px]", : "bottom-8 left-[52px]",
)} )}
> >

258
web/src/components/filter/CameraGroupSelector.tsx
View File

@ -8,7 +8,17 @@ import { isDesktop, isMobile } from "react-device-detect";
import useSWR from "swr"; import useSWR from "swr";
import { MdHome } from "react-icons/md"; import { MdHome } from "react-icons/md";
import { Button, buttonVariants } from "../ui/button"; import { Button, buttonVariants } from "../ui/button";
import { useCallback, useEffect, useMemo, useState } from "react"; import {
useCallback,
useEffect,
useLayoutEffect,
useMemo,
useRef,
useState,
} from "react";
import { AnimatePresence, motion } from "framer-motion";
import { HiDotsHorizontal } from "react-icons/hi";
import { IoClose } from "react-icons/io5";
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip"; import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
import { LuPencil, LuPlus } from "react-icons/lu"; import { LuPencil, LuPlus } from "react-icons/lu";
import { import {
@ -56,7 +66,6 @@ import { z } from "zod";
import { Toaster } from "@/components/ui/sonner"; import { Toaster } from "@/components/ui/sonner";
import { toast } from "sonner"; import { toast } from "sonner";
import ActivityIndicator from "../indicators/activity-indicator"; import ActivityIndicator from "../indicators/activity-indicator";
import { ScrollArea, ScrollBar } from "../ui/scroll-area";
import { useUserPersistence } from "@/hooks/use-user-persistence"; import { useUserPersistence } from "@/hooks/use-user-persistence";
import { TooltipPortal } from "@radix-ui/react-tooltip"; import { TooltipPortal } from "@radix-ui/react-tooltip";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@ -145,7 +154,142 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
const [addGroup, setAddGroup] = useState(false); const [addGroup, setAddGroup] = useState(false);
const Scroller = isMobile ? ScrollArea : "div"; // mobile overflow reveal - the group strip sits left of the logo and is
// clipped (not scrollable) when there are too many groups, so render only
// the buttons that fully fit and surface a kebab next to the last visible
// one that expands a panel revealing all of them
const [expanded, setExpanded] = useState(false);
// null => all buttons fit, render them all with no kebab; a number => only
// that many fit alongside the kebab
const [visibleCount, setVisibleCount] = useState<number | null>(null);
const wrapperRef = useRef<HTMLDivElement | null>(null);
const measureRef = useRef<HTMLDivElement | null>(null);
useLayoutEffect(() => {
if (isDesktop) {
return;
}
const wrapper = wrapperRef.current;
const measure = measureRef.current;
if (!wrapper || !measure) {
return;
}
const gap = 8; // gap-2 between buttons in the strip
const wrapperGap = 4; // gap-1 between the strip and the kebab
const compute = () => {
const buttons = Array.from(measure.children) as HTMLElement[];
if (buttons.length === 0) {
return;
}
// the trailing child of the measurement row is a kebab clone
const kebab = buttons[buttons.length - 1];
const groupButtons = buttons.slice(0, -1);
const available = wrapper.clientWidth;
const fullWidth =
groupButtons.reduce((sum, el) => sum + el.offsetWidth, 0) +
Math.max(groupButtons.length - 1, 0) * gap;
if (fullWidth <= available) {
setVisibleCount(null);
return;
}
const budget = available - kebab.offsetWidth - wrapperGap;
let used = 0;
let count = 0;
for (const el of groupButtons) {
const next = (count === 0 ? 0 : gap) + el.offsetWidth;
if (used + next <= budget) {
used += next;
count += 1;
} else {
break;
}
}
setVisibleCount(Math.max(count, 1));
};
compute();
const observer = new ResizeObserver(compute);
observer.observe(wrapper);
return () => observer.disconnect();
}, [groups, isAdmin]);
const groupButtons = (afterSelect?: () => void) => {
const buttons = [
<Button
key="default-group"
className={cn(
"shrink-0",
group == "default"
? "bg-blue-900 bg-opacity-60 text-selected focus:bg-blue-900 focus:bg-opacity-60"
: "bg-secondary text-secondary-foreground",
)}
aria-label={t("menu.live.allCameras", { ns: "common" })}
size="sm"
onClick={() => {
if (group) {
setGroup("default", true);
}
afterSelect?.();
}}
>
<MdHome className="size-5" />
</Button>,
...groups.map(([name, config]) => (
<Button
key={name}
className={cn(
"shrink-0",
group == name
? "bg-blue-900 bg-opacity-60 text-selected focus:bg-blue-900 focus:bg-opacity-60"
: "bg-secondary text-secondary-foreground",
)}
aria-label={t("group.label")}
size="sm"
onClick={() => {
setGroup(name, group != "default");
afterSelect?.();
}}
>
{config && config.icon && isValidIconName(config.icon) && (
<IconRenderer icon={LuIcons[config.icon]} className="size-5" />
)}
</Button>
)),
];
if (isAdmin) {
buttons.push(
<Button
key="add-group"
className="shrink-0 bg-secondary text-muted-foreground"
aria-label={t("group.add")}
size="sm"
onClick={() => {
setAddGroup(true);
afterSelect?.();
}}
>
<LuPencil className="size-5 text-primary" />
</Button>,
);
}
return buttons;
};
return ( return (
<> <>
@ -158,12 +302,11 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
deleteGroup={deleteGroup} deleteGroup={deleteGroup}
isAdmin={isAdmin} isAdmin={isAdmin}
/> />
<Scroller className={`${isMobile ? "whitespace-nowrap" : ""}`}> {isDesktop ? (
<div <div
className={cn( className={cn(
"flex items-center justify-start gap-2", "flex flex-col items-center justify-start gap-2",
className, className,
isDesktop ? "flex-col" : "whitespace-nowrap",
)} )}
> >
<Tooltip open={tooltip == "default"}> <Tooltip open={tooltip == "default"}>
@ -177,8 +320,8 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
aria-label={t("menu.live.allCameras", { ns: "common" })} aria-label={t("menu.live.allCameras", { ns: "common" })}
size="xs" size="xs"
onClick={() => (group ? setGroup("default", true) : null)} onClick={() => (group ? setGroup("default", true) : null)}
onMouseEnter={() => (isDesktop ? showTooltip("default") : null)} onMouseEnter={() => showTooltip("default")}
onMouseLeave={() => (isDesktop ? showTooltip(undefined) : null)} onMouseLeave={() => showTooltip(undefined)}
> >
<MdHome className="size-4" /> <MdHome className="size-4" />
</Button> </Button>
@ -202,10 +345,8 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
aria-label={t("group.label")} aria-label={t("group.label")}
size="xs" size="xs"
onClick={() => setGroup(name, group != "default")} onClick={() => setGroup(name, group != "default")}
onMouseEnter={() => (isDesktop ? showTooltip(name) : null)} onMouseEnter={() => showTooltip(name)}
onMouseLeave={() => onMouseLeave={() => showTooltip(undefined)}
isDesktop ? showTooltip(undefined) : null
}
> >
{config && config.icon && isValidIconName(config.icon) && ( {config && config.icon && isValidIconName(config.icon) && (
<IconRenderer <IconRenderer
@ -225,18 +366,97 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
})} })}
{isAdmin && ( {isAdmin && (
<Tooltip open={tooltip == "edit"}>
<TooltipTrigger asChild>
<Button
className="bg-secondary text-muted-foreground"
aria-label={t("group.editGroups")}
size="xs"
onClick={() => setAddGroup(true)}
onMouseEnter={() => showTooltip("edit")}
onMouseLeave={() => showTooltip(undefined)}
>
<LuPencil className="size-4 text-primary" />
</Button>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent side="right">
{t("group.editGroups")}
</TooltipContent>
</TooltipPortal>
</Tooltip>
)}
</div>
) : (
<div
ref={wrapperRef}
className={cn("flex min-w-0 items-center gap-1", className)}
>
<div className="flex min-w-0 items-center gap-2 overflow-hidden whitespace-nowrap">
{visibleCount == null
? groupButtons()
: groupButtons().slice(0, visibleCount)}
</div>
{visibleCount != null && (
<Button <Button
className="bg-secondary text-muted-foreground" variant="ghost"
aria-label={t("group.add")} size="sm"
size="xs" className="shrink-0 px-2 text-secondary-foreground"
onClick={() => setAddGroup(true)} aria-label={t("group.showAll")}
onClick={() => setExpanded(true)}
> >
<LuPlus className="size-4 text-primary" /> <HiDotsHorizontal className="size-5" />
</Button> </Button>
)} )}
{isMobile && <ScrollBar orientation="horizontal" className="h-0" />}
{/* invisible row used only to measure natural button widths so we
can render exactly the buttons that fully fit */}
<div
className="pointer-events-none absolute left-0 top-0 h-0 w-0 overflow-hidden"
aria-hidden
inert
>
<div ref={measureRef} className="flex w-max items-center gap-2">
{groupButtons()}
<Button variant="ghost" size="sm" className="px-2">
<HiDotsHorizontal className="size-5" />
</Button>
</div>
</div>
{expanded && (
<div
className="fixed inset-0 z-20"
onClick={() => setExpanded(false)}
/>
)}
<AnimatePresence>
{expanded && (
<motion.div
key="group-overlay"
className="absolute inset-x-0 top-0 z-30 bg-background py-1 shadow-lg"
initial={{ clipPath: "inset(0 100% 0 0)" }}
animate={{ clipPath: "inset(0 0% 0 0)" }}
exit={{ clipPath: "inset(0 100% 0 0)" }}
transition={{ duration: 0.2, ease: "easeInOut" }}
>
<div className="flex flex-wrap items-center gap-2">
{groupButtons(() => setExpanded(false))}
<Button
variant="ghost"
size="sm"
className="ml-auto shrink-0 px-2 text-secondary-foreground"
aria-label={t("group.showLess")}
onClick={() => setExpanded(false)}
>
<IoClose className="size-5" />
</Button>
</div>
</motion.div>
)}
</AnimatePresence>
</div> </div>
</Scroller> )}
</> </>
); );
} }

6
web/src/components/icons/LiveIcons.tsx
View File

@ -6,9 +6,9 @@ export function LiveGridIcon({ layout }: LiveIconProps) {
return ( return (
<div className="flex size-full flex-col gap-0.5 overflow-hidden rounded-md"> <div className="flex size-full flex-col gap-0.5 overflow-hidden rounded-md">
<div <div
className={`h-1 w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`} className={`w-full flex-1 ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`}
/> />
<div className="flex h-1 w-full gap-0.5"> <div className="flex w-full flex-1 gap-0.5">
<div <div
className={`w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`} className={`w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`}
/> />
@ -16,7 +16,7 @@ export function LiveGridIcon({ layout }: LiveIconProps) {
className={`w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`} className={`w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`}
/> />
</div> </div>
<div className="flex h-1 w-full gap-0.5"> <div className="flex w-full flex-1 gap-0.5">
<div <div
className={`w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`} className={`w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`}
/> />

11
web/src/components/menu/GeneralSettings.tsx
View File

@ -82,9 +82,13 @@ import { MdCategory } from "react-icons/md";
type GeneralSettingsProps = { type GeneralSettingsProps = {
className?: string; className?: string;
large?: boolean;
}; };
export default function GeneralSettings({ className }: GeneralSettingsProps) { export default function GeneralSettings({
className,
large,
}: GeneralSettingsProps) {
const { t } = useTranslation(["common", "views/settings"]); const { t } = useTranslation(["common", "views/settings"]);
const { getLocaleDocUrl } = useDocDomain(); const { getLocaleDocUrl } = useDocDomain();
const { data: profile } = useSWR("profile"); const { data: profile } = useSWR("profile");
@ -225,10 +229,13 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
isDesktop isDesktop
? "cursor-pointer rounded-lg bg-secondary text-secondary-foreground hover:bg-muted" ? "cursor-pointer rounded-lg bg-secondary text-secondary-foreground hover:bg-muted"
: "text-secondary-foreground", : "text-secondary-foreground",
large && "size-12",
className, className,
)} )}
> >
<LuSettings className="size-5 md:m-[6px]" /> <LuSettings
className={cn("md:m-[6px]", large ? "size-6" : "size-5")}
/>
</div> </div>
</TooltipTrigger> </TooltipTrigger>
<TooltipPortal> <TooltipPortal>

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

@ -146,9 +146,10 @@ export function MobilePageContent({
<motion.div <motion.div
ref={containerRef} ref={containerRef}
className={cn( className={cn(
"fixed inset-0 z-50 mb-12 bg-background", "fixed inset-0 z-50 bg-background",
isPWA && "mb-16", isPWA
"landscape:mb-14 landscape:md:mb-16", ? "mb-[calc(3rem+env(safe-area-inset-bottom))] md:mb-[calc(4rem+env(safe-area-inset-bottom))]"
: "mb-12 md:mb-16",
className, className,
)} )}
initial={{ x: "100%" }} initial={{ x: "100%" }}

89
web/src/components/navigation/Bottombar.tsx
View File

@ -4,7 +4,14 @@ import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
import useSWR from "swr"; import useSWR from "swr";
import { FrigateStats } from "@/types/stats"; import { FrigateStats } from "@/types/stats";
import { useEmbeddingsReindexProgress, useFrigateStats } from "@/api/ws"; import { useEmbeddingsReindexProgress, useFrigateStats } from "@/api/ws";
import { useContext, useEffect, useMemo } from "react"; import {
useContext,
useEffect,
useLayoutEffect,
useMemo,
useRef,
useState,
} from "react";
import useStats from "@/hooks/use-stats"; import useStats from "@/hooks/use-stats";
import GeneralSettings from "../menu/GeneralSettings"; import GeneralSettings from "../menu/GeneralSettings";
import useNavigation from "@/hooks/use-navigation"; import useNavigation from "@/hooks/use-navigation";
@ -14,36 +21,82 @@ import {
} from "@/context/statusbar-provider"; } from "@/context/statusbar-provider";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { isIOS, isMobile } from "react-device-detect"; import { isMobile } from "react-device-detect";
import { isPWA } from "@/utils/isPWA"; import { isPWA } from "@/utils/isPWA";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
function Bottombar() { function Bottombar() {
const navItems = useNavigation("secondary"); const navItems = useNavigation("secondary");
// Render 48px touch targets when they fit with even spacing, otherwise fall
// back to the compact size. Measured against the live bar width and icon
// count (which varies with enabled nav items and the status alert).
const containerRef = useRef<HTMLDivElement | null>(null);
const [large, setLarge] = useState(false);
useLayoutEffect(() => {
const el = containerRef.current;
if (!el) {
return;
}
const TARGET = 48; // standard bottom-nav touch target (px)
const MIN_GAP = 8; // minimum spacing between targets (px)
const compute = () => {
const count = el.children.length;
if (count === 0) {
return;
}
const needed = count * TARGET + Math.max(count - 1, 0) * MIN_GAP;
setLarge(needed <= el.clientWidth);
};
compute();
const resize = new ResizeObserver(compute);
resize.observe(el);
// recompute when items are added/removed (e.g. the status alert appears)
const mutation = new MutationObserver(compute);
mutation.observe(el, { childList: true });
return () => {
resize.disconnect();
mutation.disconnect();
};
}, [navItems]);
return ( return (
<div <div
ref={containerRef}
className={cn( className={cn(
"absolute inset-x-4 bottom-0 flex h-16 flex-row justify-between", "absolute inset-x-4 bottom-0 flex h-16 flex-row items-center justify-between",
isPWA && isIOS isMobile &&
? "portrait:items-start portrait:pt-1 landscape:items-center" (isPWA
: "items-center", ? "h-[calc(3rem+env(safe-area-inset-bottom))] pb-[env(safe-area-inset-bottom)] md:h-[calc(4rem+env(safe-area-inset-bottom))]"
isMobile && !isPWA && "h-12 md:h-16", : "h-12 md:h-16 md:pb-2"),
)} )}
> >
{navItems.map((item) => ( {navItems.map((item) => (
<NavItem key={item.id} className="p-2" item={item} Icon={item.icon} /> <NavItem
key={item.id}
large={large}
className="p-2"
item={item}
Icon={item.icon}
/>
))} ))}
<GeneralSettings className="p-2" /> <GeneralSettings large={large} className="p-2" />
<StatusAlertNav className="p-2" /> <StatusAlertNav large={large} className="p-2" />
</div> </div>
); );
} }
type StatusAlertNavProps = { type StatusAlertNavProps = {
className?: string; className?: string;
large?: boolean;
}; };
function StatusAlertNav({ className }: StatusAlertNavProps) { function StatusAlertNav({ className, large }: StatusAlertNavProps) {
const { t } = useTranslation(["views/system"]); const { t } = useTranslation(["views/system"]);
const { data: initialStats } = useSWR<FrigateStats>("stats", { const { data: initialStats } = useSWR<FrigateStats>("stats", {
revalidateOnFocus: false, revalidateOnFocus: false,
@ -105,8 +158,18 @@ function StatusAlertNav({ className }: StatusAlertNavProps) {
return ( return (
<Drawer> <Drawer>
<DrawerTrigger asChild> <DrawerTrigger asChild>
<div className="p-2"> <div
<IoIosWarning className="size-5 text-danger md:m-[6px]" /> className={cn(
"flex flex-col items-center justify-center p-2",
large && "size-12",
)}
>
<IoIosWarning
className={cn(
"text-danger md:m-[6px]",
large ? "size-6" : "size-5",
)}
/>
</div> </div>
</DrawerTrigger> </DrawerTrigger>
<DrawerContent <DrawerContent

5
web/src/components/navigation/NavItem.tsx
View File

@ -27,6 +27,7 @@ type NavItemProps = {
item: NavData; item: NavData;
Icon: IconType; Icon: IconType;
onClick?: () => void; onClick?: () => void;
large?: boolean;
}; };
export default function NavItem({ export default function NavItem({
@ -34,6 +35,7 @@ export default function NavItem({
item, item,
Icon, Icon,
onClick, onClick,
large,
}: NavItemProps) { }: NavItemProps) {
const { t } = useTranslation(["common"]); const { t } = useTranslation(["common"]);
if (item.enabled == false) { if (item.enabled == false) {
@ -48,11 +50,12 @@ export default function NavItem({
cn( cn(
"flex flex-col items-center justify-center rounded-lg p-[6px]", "flex flex-col items-center justify-center rounded-lg p-[6px]",
className, className,
large && "size-12",
variants[item.variant ?? "primary"][isActive ? "active" : "inactive"], variants[item.variant ?? "primary"][isActive ? "active" : "inactive"],
) )
} }
> >
<Icon className="size-5" /> <Icon className={large ? "size-6" : "size-5"} />
</NavLink> </NavLink>
); );

7
web/src/components/ui/drawer.tsx
View File

@ -2,8 +2,6 @@ import * as React from "react";
import { Drawer as DrawerPrimitive } from "vaul"; import { Drawer as DrawerPrimitive } from "vaul";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { isPWA } from "@/utils/isPWA";
import { isIOS } from "react-device-detect";
const Drawer = ({ const Drawer = ({
shouldScaleBackground = true, shouldScaleBackground = true,
@ -43,10 +41,9 @@ const DrawerContent = React.forwardRef<
<DrawerPrimitive.Content <DrawerPrimitive.Content
ref={ref} ref={ref}
className={cn( className={cn(
"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background", "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border border-b-0 bg-background",
className, className,
isIOS && isPWA && "pb-5", "pb-[calc(0.25rem+env(safe-area-inset-bottom))]",
isIOS && !isPWA && "md:pb-5",
)} )}
{...props} {...props}
> >

31
web/src/views/live/LiveDashboardView.tsx
View File

@ -404,34 +404,38 @@ export default function LiveDashboardView({
{isMobile && ( {isMobile && (
<div className="relative flex h-11 items-center justify-between"> <div className="relative flex h-11 items-center justify-between">
<Logo className="absolute inset-x-1/2 h-8 -translate-x-1/2" /> <Logo className="absolute inset-x-1/2 h-8 -translate-x-1/2" />
<div className="max-w-[45%]"> <div className="w-[45%]">
<CameraGroupSelector /> <CameraGroupSelector />
</div> </div>
{(!cameraGroup || cameraGroup == "default" || isMobileOnly) && ( {(!cameraGroup || cameraGroup == "default" || isMobileOnly) && (
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<Button <Button
className={`p-1 ${ className={
mobileLayout == "grid" mobileLayout == "grid"
? "bg-blue-900 bg-opacity-60 focus:bg-blue-900 focus:bg-opacity-60" ? "bg-blue-900 bg-opacity-60 focus:bg-blue-900 focus:bg-opacity-60"
: "bg-secondary" : "bg-secondary"
}`} }
aria-label="Use mobile grid layout" aria-label="Use mobile grid layout"
size="xs" size="sm"
onClick={() => setMobileLayout("grid")} onClick={() => setMobileLayout("grid")}
> >
<LiveGridIcon layout={mobileLayout} /> <div className="size-5">
<LiveGridIcon layout={mobileLayout} />
</div>
</Button> </Button>
<Button <Button
className={`p-1 ${ className={
mobileLayout == "list" mobileLayout == "list"
? "bg-blue-900 bg-opacity-60 focus:bg-blue-900 focus:bg-opacity-60" ? "bg-blue-900 bg-opacity-60 focus:bg-blue-900 focus:bg-opacity-60"
: "bg-secondary" : "bg-secondary"
}`} }
aria-label="Use mobile list layout" aria-label="Use mobile list layout"
size="xs" size="sm"
onClick={() => setMobileLayout("list")} onClick={() => setMobileLayout("list")}
> >
<LiveListIcon layout={mobileLayout} /> <div className="size-5">
<LiveListIcon layout={mobileLayout} />
</div>
</Button> </Button>
</div> </div>
)} )}
@ -439,18 +443,21 @@ export default function LiveDashboardView({
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<Button <Button
className={cn( className={cn(
"p-1",
isEditMode isEditMode
? "bg-selected text-primary" ? "bg-selected text-primary"
: "bg-secondary text-secondary-foreground", : "bg-secondary text-secondary-foreground",
)} )}
aria-label="Enter layout editing mode" aria-label="Enter layout editing mode"
size="xs" size="sm"
onClick={() => onClick={() =>
setIsEditMode((prevIsEditMode) => !prevIsEditMode) setIsEditMode((prevIsEditMode) => !prevIsEditMode)
} }
> >
{isEditMode ? <IoClose /> : <LuLayoutDashboard />} {isEditMode ? (
<IoClose className="size-5" />
) : (
<LuLayoutDashboard className="size-5" />
)}
</Button> </Button>
</div> </div>
)} )}