fixup! front: update stdcm simulation progress button design

OpenRailAssociation · Dec 4, 2024 · 8af599b · 8af599b
1 parent e8e4f3f
commit 8af599b
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/front/src/applications/stdcm/components/StdcmForm/StdcmConfig.tsx b/front/src/applications/stdcm/components/StdcmForm/StdcmConfig.tsx
@@ -76,6 +76,7 @@ const StdcmConfig = ({
   const scenarioID = useSelector(getScenarioID);
 
   const pathfinding = useStaticPathfinding(infra);
+  const formRef = useRef<HTMLDivElement>(null);
 
   const [formErrors, setFormErrors] = useState<StdcmConfigErrors>();
 
@@ -160,7 +161,7 @@ const StdcmConfig = ({
               <StdcmConsist disabled={disabled} />
             </div>
             <div className="stdcm__separator" />
-            <div className="stdcm-simulation-itinerary">
+            <div ref={formRef} className="stdcm-simulation-itinerary">
               <StdcmOrigin disabled={disabled} />
               <StdcmVias disabled={disabled} />
               <StdcmDestination disabled={disabled} />
@@ -201,6 +202,7 @@ const StdcmConfig = ({
                 <StdcmLoader
                   cancelStdcmRequest={cancelStdcmRequest}
                   launchButtonRef={launchButtonRef}
+                  formRef={formRef}
                 />
               )}
             </div>

diff --git a/front/src/applications/stdcm/components/StdcmLoader.tsx b/front/src/applications/stdcm/components/StdcmLoader.tsx
@@ -7,16 +7,15 @@ import { useTranslation } from 'react-i18next';
 import type { LoaderStatus } from '../types';
 
 const LOADER_HEIGHT = 176;
-const LOADER_BOTTOM_OFFSET = 32;
-const FORM_TOP_OFFSET = 120 + 68; // navbar + prev path heights
-const LAUNCH_BUTTON_HEIGHT = 40;
+const LOADER_OFFSET = 32;
 
 type StdcmLoaderProps = {
   cancelStdcmRequest: () => void;
   launchButtonRef: RefObject<HTMLDivElement>;
+  formRef: RefObject<HTMLDivElement>;
 };
 
-const StdcmLoader = ({ cancelStdcmRequest, launchButtonRef }: StdcmLoaderProps) => {
+const StdcmLoader = ({ cancelStdcmRequest, launchButtonRef, formRef }: StdcmLoaderProps) => {
   const { t } = useTranslation('stdcm');
   const loaderRef = useRef<HTMLDivElement>(null);
 
@@ -31,13 +30,13 @@ const StdcmLoader = ({ cancelStdcmRequest, launchButtonRef }: StdcmLoaderProps)
   useEffect(() => {
     // Depending on the scroll, change the position of the loader between fixed, sticky or absolute
     const handleScroll = () => {
-      if (!loaderRef.current || !launchButtonRef.current) return;
+      if (!loaderRef.current || !launchButtonRef.current || !formRef.current) return;
 
       const { scrollY, innerHeight } = window;
 
       const isLoaderFitting =
         innerHeight - launchButtonRef.current.getBoundingClientRect().top >
-        LOADER_HEIGHT + LOADER_BOTTOM_OFFSET;
+        LOADER_HEIGHT + LOADER_OFFSET;
 
       // Loader doesn't fit between the bottom of the form and bottom of the viewport
       if (!isLoaderFitting) {
@@ -48,9 +47,12 @@ const StdcmLoader = ({ cancelStdcmRequest, launchButtonRef }: StdcmLoaderProps)
         return;
       }
 
-      const currentFormHeight = loaderRef.current.parentElement!.clientHeight;
+      const currentFormHeight = formRef.current.clientHeight;
+      const topFormPosition = formRef.current.getBoundingClientRect().top;
+      const launchButtonHeight = launchButtonRef.current.clientHeight;
       const shouldLoaderStickTop =
-        scrollY > currentFormHeight + FORM_TOP_OFFSET - LAUNCH_BUTTON_HEIGHT;
+        scrollY >
+        currentFormHeight + scrollY + topFormPosition - launchButtonHeight - LOADER_OFFSET;
 
       // Loader reaches the top of the screen minus its top offset
       if (shouldLoaderStickTop) {