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

add new ui options for collapsibles

Browse Source
This commit is contained in:
Josh Hawkins 2026-06-16 08:33:02 -05:00
parent 45bd005ca1
commit 727df06929
2 changed files with 90 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/components/config-form/section-configs/record.ts
View File

@ -44,7 +44,14 @@ const record: SectionConfigOverrides = {
hiddenFields: ["enabled_in_config", "sync_recordings"],
advancedFields: ["expire_interval", "preview", "export"],
uiSchema: {
continuous: {
"ui:options": { defaultOpen: true, disableCollapsible: true },
},
motion: {
"ui:options": { defaultOpen: true, disableCollapsible: true },
},
export: {
"ui:options": { defaultOpen: true, disableCollapsible: true },
hwaccel_args: {
"ui:widget": "FfmpegArgsWidget",
"ui:options": {
@ -59,13 +66,16 @@ const record: SectionConfigOverrides = {
"detections.retain.mode": {
"ui:options": { enumI18nPrefix: "retainMode" },
},
"preview.quality": {
preview: {
"ui:options": { defaultOpen: true, disableCollapsible: true },
quality: {
"ui:options": {
enumI18nPrefix: "previewQuality",
},
},
},
},
},
global: {
restartRequired: [],
},

67
web/src/components/config-form/theme/templates/ObjectFieldTemplate.tsx
View File

@ -156,7 +156,8 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
};
const hasModifiedDescendants = checkSubtreeModified(fieldPath);
const [isOpen, setIsOpen] = useState(hasModifiedDescendants);
const defaultOpen = uiSchema?.["ui:options"]?.defaultOpen === true;
const [isOpen, setIsOpen] = useState(hasModifiedDescendants || defaultOpen);
const resetKey = `${formContext?.level ?? "global"}::${
formContext?.cameraName ?? "global"
}`;
@ -192,6 +193,8 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
(uiSchema?.["ui:groups"] as Record<string, string[]> | undefined) || {};
const disableNestedCard =
uiSchema?.["ui:options"]?.disableNestedCard === true;
const disableCollapsible =
uiSchema?.["ui:options"]?.disableCollapsible === true;
const isHiddenProp = (prop: (typeof properties)[number]) =>
(prop.content.props as RjsfElementProps).uiSchema?.["ui:widget"] ===
@ -228,10 +231,10 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
useEffect(() => {
if (lastResetKeyRef.current !== resetKey) {
lastResetKeyRef.current = resetKey;
setIsOpen(hasModifiedDescendants);
setIsOpen(hasModifiedDescendants || defaultOpen);
setShowAdvanced(hasModifiedAdvanced);
}
}, [resetKey, hasModifiedDescendants, hasModifiedAdvanced]);
}, [resetKey, hasModifiedDescendants, hasModifiedAdvanced, defaultOpen]);
const { children } = props as ObjectFieldTemplateProps & {
children?: ReactNode;
};
@ -458,13 +461,8 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
);
}
// Nested objects render as collapsible cards
return (
<Card className="w-full">
<Collapsible open={isOpen} onOpenChange={setIsOpen}>
<CollapsibleTrigger asChild>
<CardHeader className="cursor-pointer p-4 transition-colors hover:bg-muted/50">
<div className="flex items-center justify-between">
// Label/description/docs header shared by the collapsible and static layouts.
const cardHeaderContent = (
<div className="min-w-0 pr-3">
<CardTitle
className={cn(
@ -473,9 +471,7 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
)}
>
{inferredLabel}
{objectRequiresRestart && (
<RestartRequiredIndicator className="ml-2" />
)}
{objectRequiresRestart && <RestartRequiredIndicator className="ml-2" />}
</CardTitle>
{inferredDescription && (
<p className="mt-1 text-xs text-muted-foreground">
@ -497,17 +493,10 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
</div>
)}
</div>
{isOpen ? (
<LuChevronDown className="h-4 w-4 shrink-0" />
) : (
<LuChevronRight className="h-4 w-4 shrink-0" />
)}
</div>
</CardHeader>
</CollapsibleTrigger>
<CollapsibleContent>
<CardContent className="space-y-6 p-4 pt-0">
{hasCustomChildren ? (
);
// Body shared by the collapsible and static layouts.
const cardBody = hasCustomChildren ? (
children
) : (
<>
@ -529,8 +518,36 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
{renderGroupedFields(advancedProps)}
</AdvancedCollapsible>
</>
);
// Static (non-collapsible) card: keep the labeled header, always show content.
if (disableCollapsible) {
return (
<Card className="w-full">
<CardHeader className="p-4">{cardHeaderContent}</CardHeader>
<CardContent className="space-y-6 p-4 pt-0">{cardBody}</CardContent>
</Card>
);
}
// Nested objects render as collapsible cards
return (
<Card className="w-full">
<Collapsible open={isOpen} onOpenChange={setIsOpen}>
<CollapsibleTrigger asChild>
<CardHeader className="cursor-pointer p-4 transition-colors hover:bg-muted/50">
<div className="flex items-center justify-between">
{cardHeaderContent}
{isOpen ? (
<LuChevronDown className="h-4 w-4 shrink-0" />
) : (
<LuChevronRight className="h-4 w-4 shrink-0" />
)}
</CardContent>
</div>
</CardHeader>
</CollapsibleTrigger>
<CollapsibleContent>
<CardContent className="space-y-6 p-4 pt-0">{cardBody}</CardContent>
</CollapsibleContent>
</Collapsible>
</Card>