administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-07-14 16:01:13 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix frigate+ pane layout and buttons to match other settings panes

Browse Source
This commit is contained in:
Josh Hawkins 2026-05-11 15:25:38 -05:00
parent a4c6e11642
commit b07ebb4b58
1 changed files with 321 additions and 321 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
web/src/views/settings/FrigatePlusSettingsView.tsx
View File

@ -239,11 +239,9 @@ export default function FrigatePlusSettingsView({
} }
return ( return (
<div className="flex size-full flex-col md:flex-row"> <div className="flex size-full flex-col md:pr-2">
<Toaster position="top-center" closeButton={true} /> <Toaster position="top-center" closeButton={true} />
<div className="mt-2 flex h-full w-full flex-col"> <div className="w-full max-w-5xl space-y-6 pt-2">
<div className="scrollbar-container flex-1 overflow-y-auto">
<div className="w-full max-w-5xl space-y-6">
<div className="flex flex-col gap-0"> <div className="flex flex-col gap-0">
<Heading as="h4" className="mb-2"> <Heading as="h4" className="mb-2">
{t("frigatePlus.title")} {t("frigatePlus.title")}
@ -298,9 +296,7 @@ export default function FrigatePlusSettingsView({
)} )}
{config?.plus?.enabled && ( {config?.plus?.enabled && (
<SettingsGroupCard <SettingsGroupCard title={t("frigatePlus.cardTitles.otherModels")}>
title={t("frigatePlus.cardTitles.otherModels")}
>
<SplitCardRow <SplitCardRow
label={t("frigatePlus.modelInfo.availableModels")} label={t("frigatePlus.modelInfo.availableModels")}
description={ description={
@ -339,8 +335,7 @@ export default function FrigatePlusSettingsView({
"frigatePlus.modelInfo.plusModelType.userModel", "frigatePlus.modelInfo.plusModelType.userModel",
)) + )) +
") " + ") " +
availableModels[frigatePlusSettings.model.id] availableModels[frigatePlusSettings.model.id].name +
.name +
" (" + " (" +
availableModels[frigatePlusSettings.model.id] availableModels[frigatePlusSettings.model.id]
.width + .width +
@ -349,9 +344,7 @@ export default function FrigatePlusSettingsView({
.height + .height +
")" ")"
: isLoadingModels : isLoadingModels
? t( ? t("frigatePlus.modelInfo.loadingAvailableModels")
"frigatePlus.modelInfo.loadingAvailableModels",
)
: t("frigatePlus.modelInfo.selectModel")} : t("frigatePlus.modelInfo.selectModel")}
</SelectTrigger> </SelectTrigger>
@ -465,9 +458,7 @@ export default function FrigatePlusSettingsView({
</SettingsGroupCard> </SettingsGroupCard>
)} )}
<SettingsGroupCard <SettingsGroupCard title={t("frigatePlus.cardTitles.configuration")}>
title={t("frigatePlus.cardTitles.configuration")}
>
<SplitCardRow <SplitCardRow
label={t("frigatePlus.snapshotConfig.title")} label={t("frigatePlus.snapshotConfig.title")}
description={ description={
@ -500,9 +491,7 @@ export default function FrigatePlusSettingsView({
{t("frigatePlus.snapshotConfig.table.camera")} {t("frigatePlus.snapshotConfig.table.camera")}
</th> </th>
<th className="px-4 py-2 text-center"> <th className="px-4 py-2 text-center">
{t( {t("frigatePlus.snapshotConfig.table.snapshots")}
"frigatePlus.snapshotConfig.table.snapshots",
)}
</th> </th>
</tr> </tr>
</thead> </thead>
@ -535,25 +524,37 @@ export default function FrigatePlusSettingsView({
</SettingsGroupCard> </SettingsGroupCard>
</div> </div>
</div> </div>
</div>
<div className="sticky bottom-0 z-50 w-full border-t border-secondary bg-background pb-5 pt-0 md:pr-2"> <div className="sticky bottom-0 z-50 mt-6 w-full border-t border-secondary bg-background pt-0">
<div className="flex flex-col items-center gap-4 pt-2 md:flex-row md:justify-end"> <div
<div className="flex w-full items-center gap-2 md:w-auto"> className={cn(
<Button "flex flex-col items-center gap-4 pt-2 md:flex-row",
className="flex min-w-36 flex-1 gap-2" changedValue ? "justify-between" : "justify-end",
variant="outline" )}
aria-label={t("button.reset", { ns: "common" })}
onClick={onCancel}
> >
{t("button.reset", { ns: "common" })} {changedValue && (
</Button> <div className="flex items-center gap-2">
<span className="text-sm text-unsaved">
{t("unsavedChanges")}
</span>
</div>
)}
<div className="flex w-full flex-col gap-2 sm:flex-row sm:items-center md:w-auto">
{changedValue && (
<Button <Button
onClick={onCancel}
variant="outline"
disabled={isLoading}
className="flex min-w-36 flex-1 gap-2"
>
{t("button.undo", { ns: "common" })}
</Button>
)}
<Button
onClick={saveToConfig}
variant="select" variant="select"
disabled={!changedValue || isLoading} disabled={!changedValue || isLoading}
className="flex min-w-36 flex-1 gap-2" className="flex min-w-36 flex-1 gap-2"
aria-label={t("button.save", { ns: "common" })}
onClick={saveToConfig}
> >
{isLoading ? ( {isLoading ? (
<> <>
@ -567,7 +568,6 @@ export default function FrigatePlusSettingsView({
</div> </div>
</div> </div>
</div> </div>
</div>
<RestartDialog <RestartDialog
isOpen={restartDialogOpen} isOpen={restartDialogOpen}
onClose={() => setRestartDialogOpen(false)} onClose={() => setRestartDialogOpen(false)}