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

make wizard footers consistent with dialog footers

Browse Source
This commit is contained in:
Josh Hawkins 2026-05-29 16:00:02 -05:00
parent e847d56de3
commit 998cf0f2be
11 changed files with 22 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/classification/wizard/Step1NameAndDefine.tsx
View File

@ -489,7 +489,7 @@ export default function Step1NameAndDefine({
</form> </form>
</Form> </Form>
<div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4"> <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
<Button type="button" onClick={onCancel} className="sm:flex-1"> <Button type="button" onClick={onCancel} className="sm:flex-1">
{t("button.cancel", { ns: "common" })} {t("button.cancel", { ns: "common" })}
</Button> </Button>

2
web/src/components/classification/wizard/Step2StateArea.tsx
View File

@ -458,7 +458,7 @@ export default function Step2StateArea({
</div> </div>
</div> </div>
<div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4"> <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
<Button type="button" onClick={onBack} className="sm:flex-1"> <Button type="button" onClick={onBack} className="sm:flex-1">
{t("button.back", { ns: "common" })} {t("button.back", { ns: "common" })}
</Button> </Button>

2
web/src/components/classification/wizard/Step3ChooseExamples.tsx
View File

@ -693,7 +693,7 @@ export default function Step3ChooseExamples({
)} )}
{!isTraining && ( {!isTraining && (
<div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4"> <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
<Button type="button" onClick={handleBack} className="sm:flex-1"> <Button type="button" onClick={handleBack} className="sm:flex-1">
{t("button.back", { ns: "common" })} {t("button.back", { ns: "common" })}
</Button> </Button>

6
web/src/components/overlay/detail/FaceCreateWizardDialog.tsx
View File

@ -131,7 +131,7 @@ export default function CreateFaceWizardDialog({
forbiddenPattern={/#/} forbiddenPattern={/#/}
forbiddenErrorMessage={t("description.nameCannotContainHash")} forbiddenErrorMessage={t("description.nameCannotContainHash")}
> >
<div className="flex justify-end py-2"> <div className="flex flex-col-reverse gap-2 py-2 sm:flex-row sm:justify-end">
<Button variant="select" type="submit"> <Button variant="select" type="submit">
{t("button.next", { ns: "common" })} {t("button.next", { ns: "common" })}
</Button> </Button>
@ -144,7 +144,7 @@ export default function CreateFaceWizardDialog({
{t("steps.description.uploadFace", { name })} {t("steps.description.uploadFace", { name })}
</div> </div>
<ImageEntry onSave={onUploadImage}> <ImageEntry onSave={onUploadImage}>
<div className="flex justify-end py-2"> <div className="flex flex-col-reverse gap-2 py-2 sm:flex-row sm:justify-end">
<Button variant="select" type="submit"> <Button variant="select" type="submit">
{t("button.next", { ns: "common" })} {t("button.next", { ns: "common" })}
</Button> </Button>
@ -173,7 +173,7 @@ export default function CreateFaceWizardDialog({
<LuExternalLink className="ml-2 inline-flex size-3" /> <LuExternalLink className="ml-2 inline-flex size-3" />
</Link> </Link>
</div> </div>
<div className="flex justify-end"> <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
<Button <Button
variant="select" variant="select"
onClick={() => { onClick={() => {

2
web/src/components/settings/wizard/Step1NameCamera.tsx
View File

@ -455,7 +455,7 @@ export default function Step1NameCamera({
</form> </form>
</Form> </Form>
<div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4"> <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
<Button type="button" onClick={onCancel} className="sm:flex-1"> <Button type="button" onClick={onCancel} className="sm:flex-1">
{t("button.cancel", { ns: "common" })} {t("button.cancel", { ns: "common" })}
</Button> </Button>

8
web/src/components/settings/wizard/Step2ProbeOrSnapshot.tsx
View File

@ -626,7 +626,7 @@ function ProbeFooterButtons({
<ActivityIndicator className="size-4" /> <ActivityIndicator className="size-4" />
{t("cameraWizard.step2.probing")} {t("cameraWizard.step2.probing")}
</div> </div>
<div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4"> <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
<Button type="button" onClick={onBack} disabled className="sm:flex-1"> <Button type="button" onClick={onBack} disabled className="sm:flex-1">
{t("button.back", { ns: "common" })} {t("button.back", { ns: "common" })}
</Button> </Button>
@ -649,7 +649,7 @@ function ProbeFooterButtons({
return ( return (
<div className="space-y-4"> <div className="space-y-4">
<div className="text-sm text-destructive">{probeError}</div> <div className="text-sm text-destructive">{probeError}</div>
<div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4"> <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
<Button type="button" onClick={onBack} className="sm:flex-1"> <Button type="button" onClick={onBack} className="sm:flex-1">
{t("button.back", { ns: "common" })} {t("button.back", { ns: "common" })}
</Button> </Button>
@ -670,7 +670,7 @@ function ProbeFooterButtons({
// If manual mode, show Continue when test succeeded, otherwise show Test (calls onManualTest) // If manual mode, show Continue when test succeeded, otherwise show Test (calls onManualTest)
if (mode === "manual") { if (mode === "manual") {
return ( return (
<div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4"> <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
<Button type="button" onClick={onBack} className="sm:flex-1"> <Button type="button" onClick={onBack} className="sm:flex-1">
{t("button.back", { ns: "common" })} {t("button.back", { ns: "common" })}
</Button> </Button>
@ -707,7 +707,7 @@ function ProbeFooterButtons({
// Default probe footer // Default probe footer
return ( return (
<div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4"> <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
<Button type="button" onClick={onBack} className="sm:flex-1"> <Button type="button" onClick={onBack} className="sm:flex-1">
{t("button.back", { ns: "common" })} {t("button.back", { ns: "common" })}
</Button> </Button>

2
web/src/components/settings/wizard/Step3StreamConfig.tsx
View File

@ -731,7 +731,7 @@ export default function Step3StreamConfig({
</div> </div>
)} )}
<div className="flex flex-col gap-3 pt-6 sm:flex-row sm:justify-end sm:gap-4"> <div className="flex flex-col-reverse gap-2 pt-6 sm:flex-row sm:justify-end">
{onBack && ( {onBack && (
<Button type="button" onClick={onBack} className="sm:flex-1"> <Button type="button" onClick={onBack} className="sm:flex-1">
{t("button.back", { ns: "common" })} {t("button.back", { ns: "common" })}

2
web/src/components/settings/wizard/Step4Validation.tsx
View File

@ -490,7 +490,7 @@ export default function Step4Validation({
</div> </div>
</div> </div>
<div className="flex flex-col gap-3 pt-6 sm:flex-row sm:justify-end sm:gap-4"> <div className="flex flex-col-reverse gap-2 pt-6 sm:flex-row sm:justify-end">
{onBack && ( {onBack && (
<Button type="button" onClick={onBack} className="sm:flex-1"> <Button type="button" onClick={onBack} className="sm:flex-1">
{t("button.back", { ns: "common" })} {t("button.back", { ns: "common" })}

11
web/src/components/trigger/wizard/Step1NameAndType.tsx
View File

@ -176,20 +176,15 @@ export default function Step1NameAndType({
)} )}
/> />
<div className="flex gap-2 pt-4"> <div className="flex flex-col-reverse gap-2 pt-4 sm:flex-row sm:justify-end">
<Button <Button type="button" onClick={onCancel} className="sm:flex-1">
type="button"
variant="outline"
onClick={onCancel}
className="flex-1"
>
{t("button.cancel", { ns: "common" })} {t("button.cancel", { ns: "common" })}
</Button> </Button>
<Button <Button
type="submit" type="submit"
variant="select" variant="select"
disabled={!form.formState.isValid} disabled={!form.formState.isValid}
className="flex-1" className="sm:flex-1"
> >
{t("button.next", { ns: "common" })} {t("button.next", { ns: "common" })}
</Button> </Button>

11
web/src/components/trigger/wizard/Step2ConfigureData.tsx
View File

@ -109,20 +109,15 @@ export default function Step2ConfigureData({
)} )}
/> />
<div className="flex gap-2 pt-4"> <div className="flex flex-col-reverse gap-2 pt-4 sm:flex-row sm:justify-end">
<Button <Button type="button" onClick={onBack} className="sm:flex-1">
type="button"
variant="outline"
onClick={onBack}
className="flex-1"
>
{t("button.back", { ns: "common" })} {t("button.back", { ns: "common" })}
</Button> </Button>
<Button <Button
type="submit" type="submit"
variant="select" variant="select"
disabled={!form.formState.isValid} disabled={!form.formState.isValid}
className="flex-1" className="sm:flex-1"
> >
{t("button.next", { ns: "common" })} {t("button.next", { ns: "common" })}
</Button> </Button>

11
web/src/components/trigger/wizard/Step3ThresholdAndActions.tsx
View File

@ -181,20 +181,15 @@ export default function Step3ThresholdAndActions({
)} )}
/> />
<div className="flex gap-2 pt-4"> <div className="flex flex-col-reverse gap-2 pt-4 sm:flex-row sm:justify-end">
<Button <Button type="button" onClick={onBack} className="sm:flex-1">
type="button"
variant="outline"
onClick={onBack}
className="flex-1"
>
{t("button.back", { ns: "common" })} {t("button.back", { ns: "common" })}
</Button> </Button>
<Button <Button
type="button" type="button"
onClick={handleSave} onClick={handleSave}
disabled={isLoading} disabled={isLoading}
className="flex-1" className="sm:flex-1"
variant="select" variant="select"
> >
{isLoading && <ActivityIndicator className="mr-2 size-5" />} {isLoading && <ActivityIndicator className="mr-2 size-5" />}