Skip to content

Commit

Permalink
fixup! front: update stdcm simulation progress button design
Browse files Browse the repository at this point in the history
  • Loading branch information
SharglutDev committed Dec 4, 2024
1 parent d5b152a commit b81faad
Show file tree
Hide file tree
Showing 3 changed files with 13 additions and 14 deletions.
19 changes: 9 additions & 10 deletions front/src/applications/stdcm/components/StdcmLoader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const StdcmLoader = ({ cancelStdcmRequest, launchButtonRef }: StdcmLoaderProps)
const windowHeight = window.innerHeight;

const [loaderStatus, setLoaderStatus] = useState<LoaderStatus>({
status: windowHeight - top - 32 > LOADER_HEIGHT ? 'absolute' : 'fixedBottom',
status: windowHeight - top - 32 > LOADER_HEIGHT ? 'loader-absolute' : 'loader-fixed-bottom',
firstLaunch: true,
});

Expand All @@ -43,7 +43,7 @@ const StdcmLoader = ({ cancelStdcmRequest, launchButtonRef }: StdcmLoaderProps)
if (!isLoaderFitting) {
setLoaderStatus({
firstLaunch: false,
status: 'fixedBottom',
status: 'loader-fixed-bottom',
});
return;
}
Expand All @@ -56,14 +56,14 @@ const StdcmLoader = ({ cancelStdcmRequest, launchButtonRef }: StdcmLoaderProps)
if (shouldLoaderStickTop) {
setLoaderStatus({
firstLaunch: false,
status: 'fixedTop',
status: 'loader-fixed-top',
});
return;
}

setLoaderStatus({
firstLaunch: false,
status: 'absolute',
status: 'loader-absolute',
});
};

Expand All @@ -76,12 +76,11 @@ const StdcmLoader = ({ cancelStdcmRequest, launchButtonRef }: StdcmLoaderProps)
return (
<div
ref={loaderRef}
className={cx(`stdcm-loader`, {
'fixed-top': loaderStatus.status === 'fixedTop',
absolute: loaderStatus.status === 'absolute',
'with-fade-in-animation': loaderStatus.status === 'absolute' && loaderStatus.firstLaunch,
'fixed-bottom': loaderStatus.status === 'fixedBottom',
'with-slide-animation': loaderStatus.status === 'fixedBottom' && loaderStatus.firstLaunch,
className={cx('stdcm-loader', `${loaderStatus.status}`, {
'with-fade-in-animation':
loaderStatus.status === 'loader-absolute' && loaderStatus.firstLaunch,
'with-slide-animation':
loaderStatus.status === 'loader-fixed-bottom' && loaderStatus.firstLaunch,
})}
>
<div className="stdcm-loader__wrapper">
Expand Down
2 changes: 1 addition & 1 deletion front/src/applications/stdcm/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -202,6 +202,6 @@ export type StdcmLinkedPathResult = {
export type ExtremityPathStepType = 'origin' | 'destination';

export type LoaderStatus = {
status: 'fixedBottom' | 'fixedTop' | 'absolute';
status: 'loader-fixed-bottom' | 'loader-fixed-top' | 'loader-absolute';
firstLaunch: boolean;
};
6 changes: 3 additions & 3 deletions front/src/styles/scss/applications/stdcm/_loader.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
0 16px 30px -5px rgba(0, 0, 0, 0.16),
0 3px 5px -2px rgba(0, 0, 0, 0.1);

&.fixed-bottom {
&.loader-fixed-bottom {
position: fixed;
bottom: 32px;
top: unset;
Expand All @@ -19,7 +19,7 @@
}
}

&.absolute {
&.loader-absolute {
position: absolute;
bottom: calc(-176px + 40px); // height of the loader minus the height of the launch button

Expand All @@ -28,7 +28,7 @@
}
}

&.fixed-top {
&.loader-fixed-top {
position: fixed;
top: 32px;
bottom: unset;
Expand Down

0 comments on commit b81faad

Please sign in to comment.