mirror of
				https://github.com/blakeblackshear/frigate.git
				synced 2025-10-27 10:52:11 +01:00 
			
		
		
		
	Add steps for face step indicator (#17719)
This commit is contained in:
		
							parent
							
								
									760ed25f0c
								
							
						
					
					
						commit
						9e666ddf40
					
				| @ -21,6 +21,11 @@ | |||||||
|     "new": "Create New Face", |     "new": "Create New Face", | ||||||
|     "nextSteps": "To build a strong foundation:<li>Use the Train tab to select and train on images for each detected person.</li><li>Focus on straight-on images for best results; avoid training images that capture faces at an angle.</li></ul>" |     "nextSteps": "To build a strong foundation:<li>Use the Train tab to select and train on images for each detected person.</li><li>Focus on straight-on images for best results; avoid training images that capture faces at an angle.</li></ul>" | ||||||
|   }, |   }, | ||||||
|  |   "steps": { | ||||||
|  |     "faceName": "Enter Face Name", | ||||||
|  |     "uploadFace": "Upload Face Image", | ||||||
|  |     "nextSteps": "Next Steps" | ||||||
|  |   }, | ||||||
|   "train": { |   "train": { | ||||||
|     "title": "Train", |     "title": "Train", | ||||||
|     "aria": "Select train" |     "aria": "Select train" | ||||||
|  | |||||||
| @ -1,13 +1,18 @@ | |||||||
| import { cn } from "@/lib/utils"; | import { cn } from "@/lib/utils"; | ||||||
|  | import { useTranslation } from "react-i18next"; | ||||||
| 
 | 
 | ||||||
| type StepIndicatorProps = { | type StepIndicatorProps = { | ||||||
|   steps: string[]; |   steps: string[]; | ||||||
|   currentStep: number; |   currentStep: number; | ||||||
|  |   translationNameSpace: string; | ||||||
| }; | }; | ||||||
| export default function StepIndicator({ | export default function StepIndicator({ | ||||||
|   steps, |   steps, | ||||||
|   currentStep, |   currentStep, | ||||||
|  |   translationNameSpace, | ||||||
| }: StepIndicatorProps) { | }: StepIndicatorProps) { | ||||||
|  |   const { t } = useTranslation(translationNameSpace); | ||||||
|  | 
 | ||||||
|   return ( |   return ( | ||||||
|     <div className="flex flex-row justify-evenly"> |     <div className="flex flex-row justify-evenly"> | ||||||
|       {steps.map((name, idx) => ( |       {steps.map((name, idx) => ( | ||||||
| @ -20,7 +25,7 @@ export default function StepIndicator({ | |||||||
|           > |           > | ||||||
|             {idx + 1} |             {idx + 1} | ||||||
|           </div> |           </div> | ||||||
|           <div className="w-24 text-center md:w-24">{name}</div> |           <div className="w-24 text-center md:w-24">{t(name)}</div> | ||||||
|         </div> |         </div> | ||||||
|       ))} |       ))} | ||||||
|     </div> |     </div> | ||||||
|  | |||||||
| @ -25,7 +25,7 @@ import { LuExternalLink } from "react-icons/lu"; | |||||||
| import { Link } from "react-router-dom"; | import { Link } from "react-router-dom"; | ||||||
| import { toast } from "sonner"; | import { toast } from "sonner"; | ||||||
| 
 | 
 | ||||||
| const STEPS = ["Enter Face Name", "Upload Face Image", "Next Steps"]; | const STEPS = ["steps.faceName", "steps.uploadFace", "steps.nextSteps"]; | ||||||
| 
 | 
 | ||||||
| type CreateFaceWizardDialogProps = { | type CreateFaceWizardDialogProps = { | ||||||
|   open: boolean; |   open: boolean; | ||||||
| @ -107,7 +107,11 @@ export default function CreateFaceWizardDialog({ | |||||||
|           <Title>{t("button.addFace")}</Title> |           <Title>{t("button.addFace")}</Title> | ||||||
|           {isDesktop && <Description>{t("description.addFace")}</Description>} |           {isDesktop && <Description>{t("description.addFace")}</Description>} | ||||||
|         </Header> |         </Header> | ||||||
|         <StepIndicator steps={STEPS} currentStep={step} /> |         <StepIndicator | ||||||
|  |           steps={STEPS} | ||||||
|  |           currentStep={step} | ||||||
|  |           translationNameSpace="views/faceLibrary" | ||||||
|  |         /> | ||||||
|         {step == 0 && ( |         {step == 0 && ( | ||||||
|           <TextEntry |           <TextEntry | ||||||
|             placeholder={t("description.placeholder")} |             placeholder={t("description.placeholder")} | ||||||
|  | |||||||
		Loading…
	
		Reference in New Issue
	
	Block a user