front: display timetable in macro mode, add styles for macro container

Signed-off-by: romainvalls <romain.valls95@gmail.com>

Author: RomainValls

front/src/applications/operationalStudies/components/Scenario/ScenarioContent.tsx

@@ -3,7 +3,6 @@ import { useState, useEffect, useCallback } from 'react';
 import { ChevronRight } from '@osrd-project/ui-icons';
 import cx from 'classnames';
 import { useTranslation } from 'react-i18next';
-import { GiElectric } from 'react-icons/gi';
 
 import handleOperation from 'applications/operationalStudies/components/MacroEditor/ngeToOsrd';
 import importTimetableToNGE from 'applications/operationalStudies/components/MacroEditor/osrdToNge';
@@ -15,7 +14,6 @@ import useScenarioData from 'applications/operationalStudies/hooks/useScenarioDa
 import ImportTrainSchedule from 'applications/operationalStudies/views/ImportTrainSchedule';
 import ManageTrainSchedule from 'applications/operationalStudies/views/ManageTrainSchedule';
 import SimulationResults from 'applications/operationalStudies/views/SimulationResults';
-import infraLogo from 'assets/pictures/components/tracks.svg';
 import type {
   InfraWithState,
   ScenarioResponse,
@@ -52,7 +50,6 @@ const ScenarioContent = ({
   const [collapsedTimetable, setCollapsedTimetable] = useState(false);
   const [trainIdToEdit, setTrainIdToEdit] = useState<number>();
   const [isMacro, setIsMacro] = useState(false);
-
   const {
     selectedTrainId,
     trainScheduleSummaries,
@@ -67,9 +64,11 @@ const ScenarioContent = ({
   const toggleMicroMacroButton = useCallback(
     (isMacroMode: boolean) => {
       setIsMacro(isMacroMode);
-      setCollapsedTimetable(isMacroMode);
+      if (!isMacroMode && collapsedTimetable) {
+        setCollapsedTimetable(false);
+      }
     },
-    [setIsMacro, setCollapsedTimetable]
+    [setIsMacro, setCollapsedTimetable, collapsedTimetable]
   );
 
   const [ngeDto, setNgeDto] = useState<NetzgrafikDto>();
@@ -134,8 +133,10 @@ const ScenarioContent = ({
                 infraReloadCount={reloadCount}
                 collapseTimetable={() => setCollapsedTimetable(true)}
               />
+
               <MicroMacroSwitch isMacro={isMacro} setIsMacro={toggleMicroMacroButton} />
-              {!isMacro && infra && (
+
+              {infra && (
                 <>
                   {displayTrainScheduleManagement !== MANAGE_TRAIN_SCHEDULE_TYPES.none && (
                     <TimetableManageTrainSchedule
@@ -165,6 +166,17 @@ const ScenarioContent = ({
           </div>
 
           <div className={collapsedTimetable ? 'col-12' : 'col-hdp-9 col-xl-8 col-lg-7 col-md-6'}>
+            {collapsedTimetable && (
+              <button
+                data-testid="timetable-collapse-button"
+                className="timetable-collapse-button"
+                type="button"
+                aria-label={t('toggleTimetable')}
+                onClick={() => setCollapsedTimetable(false)}
+              >
+                <ChevronRight />
+              </button>
+            )}
             {!isInfraLoaded &&
               !isMacro &&
               displayTrainScheduleManagement !== MANAGE_TRAIN_SCHEDULE_TYPES.add &&
@@ -186,37 +198,8 @@ const ScenarioContent = ({
               </div>
             )}
             <div className="scenario-results">
-              {collapsedTimetable && (
-                <>
-                  <div className="scenario-timetable-collapsed">
-                    <button
-                      data-testid="timetable-collapse-button"
-                      className="timetable-collapse-button"
-                      type="button"
-                      aria-label={t('toggleTimetable')}
-                      onClick={() => setCollapsedTimetable(false)}
-                    >
-                      <ChevronRight />
-                    </button>
-                    <div className="lead ml-2">{scenario.name}</div>
-                    <div className="d-flex align-items-center ml-auto">
-                      <img src={infraLogo} alt="Infra logo" className="infra-logo mr-2" />
-                      {scenario.infra_name}
-                    </div>
-                    <div className="d-flex align-items-center ml-4">
-                      <span className="mr-1">
-                        <GiElectric />
-                      </span>
-                      {scenario.electrical_profile_set_id
-                        ? scenario.electrical_profile_set_id
-                        : t('noElectricalProfileSet')}
-                    </div>
-                  </div>
-                  <MicroMacroSwitch isMacro={isMacro} setIsMacro={toggleMicroMacroButton} />
-                </>
-              )}
               {isMacro ? (
-                <div className={cx(collapsedTimetable ? 'macro-container' : 'h-100')}>
+                <div className={cx(collapsedTimetable ? 'macro-container' : 'h-100 p-1')}>
                   <NGE dto={ngeDto} onOperation={handleNGEOperation} />
                 </div>
               ) : (

front/src/styles/scss/applications/operationalStudies/_nge.scss

@@ -1,5 +1,9 @@
 .nge-iframe-container {
   width: 100%;
   height: 100%;
-  border: 1px solid pink;
+  border-radius: 10px;
+  box-shadow:
+    -4px 0 8px var(--coolgray1),
+    4px 0 8px var(--coolgray1),
+    0 2px 8px var(--coolgray13);
 }

front/src/styles/scss/applications/operationalStudies/_scenario.scss

@@ -6,6 +6,7 @@
   font-family: 'IBM Plex Sans';
   .scenario-container {
     margin: 0;
+    position: relative;
   }
 
   @keyframes fadein {
@@ -18,6 +19,21 @@
     }
   }
 
+  .timetable-collapse-button {
+    position: absolute;
+    left: 0;
+    top: 38px;
+    padding-bottom: 3px;
+    padding-inline: 4px 12px;
+    height: 34px;
+    width: 24px;
+    color: var(--grey40);
+    background-color: var(--white100);
+    border-radius: 0px 5px 5px 0px;
+    box-shadow: 0 0 0 1px var(--black10);
+    clip-path: inset(-1px -1px -1px 1px);
+    z-index: 2;
+  }
   .micro-macro-buttons {
     button {
       color: var(--grey60);
@@ -68,19 +84,6 @@
     padding-bottom: 8px;
     z-index: 1;
     background-color: var(--coolgray1);
-    .timetable-collapse-button {
-      display: flex;
-      align-items: center;
-      position: relative;
-      top: 0;
-      left: 0;
-      background-color: var(--secondary);
-      color: var(--white100);
-      border: unset;
-      border-radius: 4px;
-      padding: 8px;
-      z-index: 2;
-    }
   }
 
   .scenario-timetable-managetrainschedule {
@@ -823,14 +826,15 @@
 
   .scenario-results {
     padding-top: 8px;
+    padding-left: 24px;
     position: relative;
     overflow: auto;
     width: 100%;
     height: var(--content-height);
   }
 
   .macro-container {
-    // the value subtracted is egal to the height of scenario-timetable-collapsed + micro-macro-buttons + scenario-results padding
-    height: calc(var(--content-height) - 156px);
+    height: calc(var(--content-height) - 20px);
+    padding-right: 10px;
   }
 }