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

Author: RomainValls

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

@@ -52,7 +52,6 @@ const ScenarioContent = ({
   const [collapsedTimetable, setCollapsedTimetable] = useState(false);
   const [trainIdToEdit, setTrainIdToEdit] = useState<number>();
   const [isMacro, setIsMacro] = useState(false);
-
   const {
     selectedTrainId,
     trainScheduleSummaries,
@@ -67,9 +66,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 +135,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 +168,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 &&
@@ -188,16 +202,9 @@ const ScenarioContent = ({
             <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={cx('scenario-timetable-collapsed', { 'd-none': collapsedTimetable })}
+                  >
                     <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" />
@@ -212,11 +219,10 @@ const ScenarioContent = ({
                         : 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;
   }
 }