administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-03-28 19:18:22 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

make buttons sticky at bottom of sections

Browse Source
This commit is contained in:
Josh Hawkins 2026-02-07 10:06:08 -06:00
parent 412eaf983a
commit 38e1b62135
2 changed files with 65 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
web/src/components/config-form/sections/BaseSection.tsx
View File

@ -47,7 +47,7 @@ import {
AlertDialogTitle, AlertDialogTitle,
} from "@/components/ui/alert-dialog"; } from "@/components/ui/alert-dialog";
import { applySchemaDefaults } from "@/lib/config-schema"; import { applySchemaDefaults } from "@/lib/config-schema";
import { isJsonObject } from "@/lib/utils"; import { cn, isJsonObject } from "@/lib/utils";
import { ConfigSectionData, JsonObject, JsonValue } from "@/types/configForm"; import { ConfigSectionData, JsonObject, JsonValue } from "@/types/configForm";
import ActivityIndicator from "@/components/indicators/activity-indicator"; import ActivityIndicator from "@/components/indicators/activity-indicator";
import RestartDialog from "@/components/overlay/dialog/RestartDialog"; import RestartDialog from "@/components/overlay/dialog/RestartDialog";
@ -849,18 +849,24 @@ export function ConfigSection({
/> />
{/* Save button */} {/* Save button */}
<div className="flex items-center justify-between pt-2"> <div className="sticky bottom-0 z-50 w-full border-t border-secondary bg-background pb-5 pt-0">
<div className="flex items-center gap-2"> <div
className={cn(
"flex flex-col items-center gap-4 pt-2 md:flex-row",
hasChanges ? "justify-between" : "justify-end",
)}
>
{hasChanges && ( {hasChanges && (
<div className="flex items-center gap-2">
<span className="text-sm text-danger"> <span className="text-sm text-danger">
{t("unsavedChanges", { {t("unsavedChanges", {
ns: "views/settings", ns: "views/settings",
defaultValue: "You have unsaved changes", defaultValue: "You have unsaved changes",
})} })}
</span> </span>
)}
</div> </div>
<div className="flex items-center gap-2"> )}
<div className="flex w-full items-center gap-2 md:w-auto">
{((level === "camera" && isOverridden) || level === "global") && {((level === "camera" && isOverridden) || level === "global") &&
!hasChanges && ( !hasChanges && (
<Button <Button
@ -910,6 +916,7 @@ export function ConfigSection({
</Button> </Button>
</div> </div>
</div> </div>
</div>
<AlertDialog open={isResetDialogOpen} onOpenChange={setIsResetDialogOpen}> <AlertDialog open={isResetDialogOpen} onOpenChange={setIsResetDialogOpen}>
<AlertDialogContent> <AlertDialogContent>
@ -1005,7 +1012,10 @@ export function ConfigSection({
{showOverrideIndicator && {showOverrideIndicator &&
level === "camera" && level === "camera" &&
isOverridden && ( isOverridden && (
<Badge variant="secondary" className="text-xs"> <Badge
variant="secondary"
className="cursor-default border-2 border-selected text-xs text-primary-variant"
>
{t("button.overridden", { {t("button.overridden", {
ns: "common", ns: "common",
defaultValue: "Overridden", defaultValue: "Overridden",
@ -1013,7 +1023,10 @@ export function ConfigSection({
</Badge> </Badge>
)} )}
{hasChanges && ( {hasChanges && (
<Badge variant="outline" className="text-xs"> <Badge
variant="secondary"
className="cursor-default bg-danger text-xs text-white hover:bg-danger"
>
{t("modified", { ns: "common", defaultValue: "Modified" })} {t("modified", { ns: "common", defaultValue: "Modified" })}
</Badge> </Badge>
)} )}

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

@ -1031,7 +1031,7 @@ export default function Settings() {
</SidebarContent> </SidebarContent>
</Sidebar> </Sidebar>
<SidebarInset> <SidebarInset>
<div className="scrollbar-container mb-24 flex-1 overflow-y-auto p-2 pr-0"> <div className="scrollbar-container mb-16 flex-1 overflow-y-auto p-2 pr-0">
{(() => { {(() => {
const CurrentComponent = getCurrentComponent(page); const CurrentComponent = getCurrentComponent(page);
if (!CurrentComponent) return null; if (!CurrentComponent) return null;