github/SlimeVR-Server
1
1
Fork 0
mirror of https://github.com/SlimeVR/SlimeVR-Server.git synced 2026-04-06 02:01:58 +02:00
Code Issues 161 Packages Projects Releases Wiki Activity

Stay Aligned UI Improvements (#1632)

Browse Source
This commit is contained in:
Aed
2025-11-24 10:05:17 +00:00
committed by GitHub
parent d986a5e116
commit 2ee65a9bd2
2 changed files with 50 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
gui/public/i18n/en/translation.ftl
View File

@@ -1277,7 +1277,7 @@ onboarding-stay_aligned-put_trackers_on-title = Put on your trackers
onboarding-stay_aligned-put_trackers_on-description = To save your resting poses, we'll use the trackers you just assigned. Put on all your trackers, you can see which are which in the figure to the right.
onboarding-stay_aligned-put_trackers_on-trackers_warning = You have fewer than 5 trackers currently connected and assigned! This is the minimum amount of trackers required for Stay Aligned to function properly.
onboarding-stay_aligned-put_trackers_on-next = I have all my trackers on
onboarding-stay_aligned-verify_mounting-title = Check your Mounting
onboarding-stay_aligned-verify_mounting-title = Mounting Reset
onboarding-stay_aligned-verify_mounting-step-0 = Stay Aligned requires good mounting. Otherwise, you won't get a good experience with Stay Aligned.
onboarding-stay_aligned-verify_mounting-step-1 = 1. Move around while standing.
onboarding-stay_aligned-verify_mounting-step-2 = 2. Sit down and move your legs and feet.

79
gui/src/components/onboarding/pages/stay-aligned/stay-aligned-steps/VerifyMounting.tsx
View File

@@ -1,44 +1,63 @@
import { Button } from '@/components/commons/Button';
import { Typography } from '@/components/commons/Typography';
import { ResetType } from 'solarxr-protocol';
import { ResetButton } from '@/components/home/ResetButton';
import { useLocalization } from '@fluent/react';
import { useBreakpoint } from '@/hooks/breakpoint';
import { VerticalStepComponentProps } from '@/components/commons/VerticalStepper';
import { Localized } from '@fluent/react';
export function VerifyMountingStep({
nextStep,
prevStep,
}: VerticalStepComponentProps) {
const { isMobile } = useBreakpoint('mobile');
const { l10n } = useLocalization();
return (
<div className="flex flex-grow flex-col gap-4 py-2">
<div className="flex flex-col gap-2">
<Localized id="onboarding-stay_aligned-verify_mounting-step-0">
<Typography />
</Localized>
<Localized id="onboarding-stay_aligned-verify_mounting-step-1">
<Typography />
</Localized>
<Localized id="onboarding-stay_aligned-verify_mounting-step-2">
<Typography />
</Localized>
<Localized id="onboarding-stay_aligned-verify_mounting-step-3">
<Typography />
</Localized>
</div>
<div className="flex gap-3 justify-between">
<Localized id="onboarding-stay_aligned-previous_step">
<Button variant="secondary" onClick={prevStep} />
</Localized>
<div className="flex flex-col flex-grow justify-between py-2 gap-2">
<div className="flex flex-col flex-grow">
<div className="flex flex-grow flex-col gap-4 max-w-sm">
<div className="flex flex-col gap-2">
<Typography>
{l10n.getString(
'onboarding-automatic_mounting-mounting_reset-step-0'
)}
</Typography>
<Typography>
{l10n.getString(
'onboarding-automatic_mounting-mounting_reset-step-1'
)}
</Typography>
</div>
</div>
<div className="flex gap-2">
<Localized id="onboarding-stay_aligned-verify_mounting-redo_mounting">
<Button
variant={'secondary'}
to="/onboarding/mounting/choose"
state={{ alonePage: true }}
{isMobile && (
<div className="flex flex-col items-center fill-background-50 justify-center">
<img
src="/images/mounting-reset-pose.webp"
width={450}
alt="mounting reset ski pose"
/>
</Localized>
<Localized id="onboarding-stay_aligned-next_step">
<Button variant="primary" onClick={nextStep} />
</Localized>
</div>
)}
{!isMobile && (
<div className="flex flex-col pt-1 items-center fill-background-50 justify-center">
<img
src="/images/mounting-reset-pose.webp"
width={600}
alt="mounting reset ski pose"
/>
</div>
)}
<div className="flex gap-3 justify-between">
<Button variant={'secondary'} onClick={prevStep}>
{l10n.getString('onboarding-automatic_mounting-prev_step')}
</Button>
<ResetButton
size="small"
type={ResetType.Mounting}
onReseted={nextStep}
/>
</div>
</div>
</div>