administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-06-30 17:11:14 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

move menu options and add current camera name badge

Browse Source
This commit is contained in:
Josh Hawkins 2026-05-24 15:43:25 -05:00
parent 14355f39fa
commit b0aa2c3510
2 changed files with 35 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/public/locales/en/views/settings.json
View File

@ -103,7 +103,7 @@
"cameraUi": "Camera UI", "cameraUi": "Camera UI",
"cameraTimestampStyle": "Timestamp style", "cameraTimestampStyle": "Timestamp style",
"cameraMqtt": "Camera MQTT", "cameraMqtt": "Camera MQTT",
"cameraManagement": "Management", "cameraManagement": "Camera management",
"cameraReview": "Review", "cameraReview": "Review",
"masksAndZones": "Masks / Zones", "masksAndZones": "Masks / Zones",
"motionTuner": "Motion tuner", "motionTuner": "Motion tuner",

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

@ -15,6 +15,7 @@ import {
AlertDialogHeader, AlertDialogHeader,
AlertDialogTitle, AlertDialogTitle,
} from "@/components/ui/alert-dialog"; } from "@/components/ui/alert-dialog";
import { Badge } from "@/components/ui/badge";
import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer"; import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
import { import {
Collapsible, Collapsible,
@ -310,6 +311,8 @@ const settingsGroups = [
{ {
label: "globalConfig", label: "globalConfig",
items: [ items: [
{ key: "profiles", component: ProfilesView },
{ key: "cameraManagement", component: CameraManagementView },
{ key: "globalDetect", component: GlobalDetectSettingsPage }, { key: "globalDetect", component: GlobalDetectSettingsPage },
{ key: "globalObjects", component: GlobalObjectsSettingsPage }, { key: "globalObjects", component: GlobalObjectsSettingsPage },
{ key: "globalMotion", component: GlobalMotionSettingsPage }, { key: "globalMotion", component: GlobalMotionSettingsPage },
@ -331,8 +334,6 @@ const settingsGroups = [
{ {
label: "cameras", label: "cameras",
items: [ items: [
{ key: "profiles", component: ProfilesView },
{ key: "cameraManagement", component: CameraManagementView },
{ key: "cameraDetect", component: CameraDetectSettingsPage }, { key: "cameraDetect", component: CameraDetectSettingsPage },
{ key: "cameraObjects", component: CameraObjectsSettingsPage }, { key: "cameraObjects", component: CameraObjectsSettingsPage },
{ key: "cameraMotion", component: CameraMotionSettingsPage }, { key: "cameraMotion", component: CameraMotionSettingsPage },
@ -1651,6 +1652,8 @@ export default function Settings() {
const isMultiItem = filteredItems.length > 1; const isMultiItem = filteredItems.length > 1;
const renderedExpanded = const renderedExpanded =
!isMultiItem || !collapsedGroups.has(group.label); !isMultiItem || !collapsedGroups.has(group.label);
const showCameraBadge =
group.label === "cameras" && !!selectedCamera;
const items = filteredItems.map((item) => ( const items = filteredItems.map((item) => (
<MobileMenuItem <MobileMenuItem
key={item.key} key={item.key}
@ -1686,7 +1689,19 @@ export default function Settings() {
)} )}
/> />
</CollapsibleTrigger> </CollapsibleTrigger>
<CollapsibleContent>{items}</CollapsibleContent> <CollapsibleContent>
{showCameraBadge && (
<div className="mb-2 ml-4 mr-4 mt-2">
<Badge
variant="outline"
className="max-w-full break-words smart-capitalize"
>
<CameraNameLabel camera={selectedCamera} />
</Badge>
</div>
)}
{items}
</CollapsibleContent>
</Collapsible> </Collapsible>
) : ( ) : (
items items
@ -2027,6 +2042,22 @@ export default function Settings() {
</SidebarGroupLabel> </SidebarGroupLabel>
<CollapsibleContent> <CollapsibleContent>
<SidebarMenuSub className="mx-2 border-0 md:mx-0"> <SidebarMenuSub className="mx-2 border-0 md:mx-0">
{group.label === "cameras" &&
selectedCamera && (
<li
className="mb-1 ml-0 mr-3 mt-0"
aria-hidden="true"
>
<Badge
variant="outline"
className="max-w-full break-words smart-capitalize"
>
<CameraNameLabel
camera={selectedCamera}
/>
</Badge>
</li>
)}
{filteredItems.map((item) => ( {filteredItems.map((item) => (
<SidebarMenuSubItem key={item.key}> <SidebarMenuSubItem key={item.key}>
<SidebarMenuSubButton <SidebarMenuSubButton