diff --git a/gui/public/i18n/en/translation.ftl b/gui/public/i18n/en/translation.ftl index ab5bacae38..80fbc08a8f 100644 --- a/gui/public/i18n/en/translation.ftl +++ b/gui/public/i18n/en/translation.ftl @@ -74,6 +74,12 @@ skeleton_bone-ELBOW_OFFSET = Elbow Offset ## Tracker reset buttons reset-reset_all = Reset all proportions +reset-reset_all_warning = + Warning: This will reset your proportions to being just based on your height. + Are you sure you want to do this? +reset-reset_all_warning-reset = Reset proportions +reset-reset_all_warning-cancel = Cancel + reset-full = Full Reset reset-mounting = Reset Mounting reset-yaw = Yaw Reset diff --git a/gui/src/components/onboarding/OnboardingLayout.tsx b/gui/src/components/onboarding/OnboardingLayout.tsx index 1949e70dd8..671ada5e6d 100644 --- a/gui/src/components/onboarding/OnboardingLayout.tsx +++ b/gui/src/components/onboarding/OnboardingLayout.tsx @@ -10,7 +10,7 @@ import './OnboardingLayout.scss'; export function OnboardingLayout({ children }: { children: ReactNode }) { const { isMobile } = useBreakpoint('mobile'); const { state, skipSetup } = useOnboarding(); - const [skipWarning, setSkipWarning] = useState(false); + const [showWarning, setShowWarning] = useState(false); return !state.alonePage ? (
@@ -21,15 +21,15 @@ export function OnboardingLayout({ children }: { children: ReactNode }) {
setSkipWarning(true)} + modalVisible={showWarning} + onClick={() => setShowWarning(true)} >
{children}
setSkipWarning(false)} - isOpen={skipWarning} + onClose={() => setShowWarning(false)} + isOpen={showWarning} >
diff --git a/gui/src/components/onboarding/pages/body-proportions/AutomaticProportions.tsx b/gui/src/components/onboarding/pages/body-proportions/AutomaticProportions.tsx index e9f832febf..b843ba1352 100644 --- a/gui/src/components/onboarding/pages/body-proportions/AutomaticProportions.tsx +++ b/gui/src/components/onboarding/pages/body-proportions/AutomaticProportions.tsx @@ -15,6 +15,8 @@ import { VerifyResultsStep } from './autobone-steps/VerifyResults'; import { useCountdown } from '@/hooks/countdown'; import { CheckHeight } from './autobone-steps/CheckHeight'; import { PreparationStep } from './autobone-steps/Preparation'; +import { useState } from 'react'; +import { ProportionsResetModal } from './ProportionsResetModal'; export function AutomaticProportionsPage() { const { l10n } = useLocalization(); @@ -30,6 +32,8 @@ export function AutomaticProportionsPage() { }, }); + const [showWarning, setShowWarning] = useState(false); + applyProgress(0.9); return ( @@ -65,7 +69,7 @@ export function AutomaticProportionsPage() {
+ { + startCountdown(); + setShowWarning(false); + }} + onClose={() => setShowWarning(false)} + isOpen={showWarning} + > ); diff --git a/gui/src/components/onboarding/pages/body-proportions/ManualProportions.tsx b/gui/src/components/onboarding/pages/body-proportions/ManualProportions.tsx index 55a0ad7855..71b6accdd0 100644 --- a/gui/src/components/onboarding/pages/body-proportions/ManualProportions.tsx +++ b/gui/src/components/onboarding/pages/body-proportions/ManualProportions.tsx @@ -7,15 +7,17 @@ import { CheckBox } from '@/components/commons/Checkbox'; import { Typography } from '@/components/commons/Typography'; import { BodyProportions } from './BodyProportions'; import { useLocalization } from '@fluent/react'; -import { useEffect, useMemo } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import { useBreakpoint } from '@/hooks/breakpoint'; import { SkeletonVisualizerWidget } from '@/components/widgets/SkeletonVisualizerWidget'; +import { ProportionsResetModal } from './ProportionsResetModal'; export function ButtonsControl() { const { l10n } = useLocalization(); const { state } = useOnboarding(); const { sendRPCPacket } = useWebsocketAPI(); + const [showWarning, setShowWarning] = useState(false); const resetAll = () => { sendRPCPacket( RpcMessage.SkeletonResetAllRequest, @@ -32,9 +34,17 @@ export function ButtonsControl() { > {l10n.getString('onboarding-previous_step')} - + { + resetAll(); + setShowWarning(false); + }} + onClose={() => setShowWarning(false)} + isOpen={showWarning} + > {!state.alonePage && ( + + + + + + ); +} diff --git a/gui/src/components/onboarding/pages/mounting/MountingChoose.tsx b/gui/src/components/onboarding/pages/mounting/MountingChoose.tsx index 96eda0c580..af264e46e5 100644 --- a/gui/src/components/onboarding/pages/mounting/MountingChoose.tsx +++ b/gui/src/components/onboarding/pages/mounting/MountingChoose.tsx @@ -10,7 +10,7 @@ export function MountingChoose() { const { l10n } = useLocalization(); const { applyProgress, skipSetup, state } = useOnboarding(); const [animated, setAnimated] = useState(false); - const [skipWarning, setSkipWarning] = useState(false); + const [showWarning, setShowWarning] = useState(false); applyProgress(0.65); @@ -139,8 +139,8 @@ export function MountingChoose() { setSkipWarning(false)} - isOpen={skipWarning} + onClose={() => setShowWarning(false)} + isOpen={showWarning} > );