administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-03-19 14:48:22 +03:00
Code Issues Actions 3 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

115
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,65 +849,72 @@ 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
{hasChanges && ( className={cn(
<span className="text-sm text-danger"> "flex flex-col items-center gap-4 pt-2 md:flex-row",
{t("unsavedChanges", { hasChanges ? "justify-between" : "justify-end",
ns: "views/settings",
defaultValue: "You have unsaved changes",
})}
</span>
)} )}
</div> >
<div className="flex items-center gap-2"> {hasChanges && (
{((level === "camera" && isOverridden) || level === "global") && <div className="flex items-center gap-2">
!hasChanges && ( <span className="text-sm text-danger">
{t("unsavedChanges", {
ns: "views/settings",
defaultValue: "You have unsaved changes",
})}
</span>
</div>
)}
<div className="flex w-full items-center gap-2 md:w-auto">
{((level === "camera" && isOverridden) || level === "global") &&
!hasChanges && (
<Button
onClick={() => setIsResetDialogOpen(true)}
variant="outline"
disabled={isSaving || disabled}
className="flex flex-1 gap-2"
>
{level === "global"
? t("button.resetToDefault", {
ns: "common",
defaultValue: "Reset to Default",
})
: t("button.resetToGlobal", {
ns: "common",
defaultValue: "Reset to Global",
})}
</Button>
)}
{hasChanges && (
<Button <Button
onClick={() => setIsResetDialogOpen(true)} onClick={handleReset}
variant="outline" variant="outline"
disabled={isSaving || disabled} disabled={isSaving || disabled}
className="flex flex-1 gap-2" className="flex min-w-36 flex-1 gap-2"
> >
{level === "global" {t("undo", { ns: "common", defaultValue: "Undo" })}
? t("button.resetToDefault", {
ns: "common",
defaultValue: "Reset to Default",
})
: t("button.resetToGlobal", {
ns: "common",
defaultValue: "Reset to Global",
})}
</Button> </Button>
)} )}
{hasChanges && (
<Button <Button
onClick={handleReset} onClick={handleSave}
variant="outline" variant="select"
disabled={isSaving || disabled} disabled={!hasChanges || isSaving || disabled}
className="flex min-w-36 flex-1 gap-2" className="flex min-w-36 flex-1 gap-2"
> >
{t("undo", { ns: "common", defaultValue: "Undo" })} {isSaving ? (
<>
<ActivityIndicator className="h-4 w-4" />
{t("button.saving", {
ns: "common",
defaultValue: "Saving...",
})}
</>
) : (
<>{t("button.save", { ns: "common", defaultValue: "Save" })}</>
)}
</Button> </Button>
)} </div>
<Button
onClick={handleSave}
variant="select"
disabled={!hasChanges || isSaving || disabled}
className="flex min-w-36 flex-1 gap-2"
>
{isSaving ? (
<>
<ActivityIndicator className="h-4 w-4" />
{t("button.saving", {
ns: "common",
defaultValue: "Saving...",
})}
</>
) : (
<>{t("button.save", { ns: "common", defaultValue: "Save" })}</>
)}
</Button>
</div> </div>
</div> </div>
@ -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;