diff --git a/front/src/applications/operationalStudies/components/Scenario/ScenarioContent.tsx b/front/src/applications/operationalStudies/components/Scenario/ScenarioContent.tsx index f546ee653ba..07865651c1e 100644 --- a/front/src/applications/operationalStudies/components/Scenario/ScenarioContent.tsx +++ b/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(); 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(); @@ -134,8 +133,10 @@ const ScenarioContent = ({ infraReloadCount={reloadCount} collapseTimetable={() => setCollapsedTimetable(true)} /> + - {!isMacro && infra && ( + + {infra && ( <> {displayTrainScheduleManagement !== MANAGE_TRAIN_SCHEDULE_TYPES.none && (
+ {collapsedTimetable && ( + + )} {!isInfraLoaded && !isMacro && displayTrainScheduleManagement !== MANAGE_TRAIN_SCHEDULE_TYPES.add && @@ -186,37 +198,8 @@ const ScenarioContent = ({
)}
- {collapsedTimetable && ( - <> -
- -
{scenario.name}
-
- Infra logo - {scenario.infra_name} -
-
- - - - {scenario.electrical_profile_set_id - ? scenario.electrical_profile_set_id - : t('noElectricalProfileSet')} -
-
- - - )} {isMacro ? ( -
+
) : ( diff --git a/front/src/styles/scss/applications/operationalStudies/_nge.scss b/front/src/styles/scss/applications/operationalStudies/_nge.scss index a280474e24c..87f531d4b05 100644 --- a/front/src/styles/scss/applications/operationalStudies/_nge.scss +++ b/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); } diff --git a/front/src/styles/scss/applications/operationalStudies/_scenario.scss b/front/src/styles/scss/applications/operationalStudies/_scenario.scss index 1addf255550..7b85d02759b 100644 --- a/front/src/styles/scss/applications/operationalStudies/_scenario.scss +++ b/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,6 +826,7 @@ .scenario-results { padding-top: 8px; + padding-left: 24px; position: relative; overflow: auto; width: 100%; @@ -830,7 +834,7 @@ } .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; } }