Skip to content

Commit 7123ab0

Browse files
theocrsbtheocrsb
committed
front: redesign top left of the scenario page
Signed-off-by: theocrsb <[email protected]>
1 parent bfa0065 commit 7123ab0

File tree

11 files changed

+296
-168
lines changed

11 files changed

+296
-168
lines changed

‎front/public/locales/en/operationalStudies/scenario.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,10 @@
1515
"filterPlaceholder": "Filter, tags",
1616
"advancedFiltersPlaceholder": "Filter by family, serie, detail",
1717
"infraLoadingState": "{{step}}/7",
18+
"infrastructure": "Infrastructure",
1819
"lessDetails": "less details",
19-
"macroscopic": "Macroscopic",
20-
"microscopic": "Microscopic",
20+
"macroscopic": "MACRO",
21+
"microscopic": "MICRO",
2122
"modifyScenario": "Modify scenario",
2223
"moreDetails": "more details",
2324
"noElectricalProfileSet": "No electrical profile",

‎front/public/locales/fr/operationalStudies/scenario.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,10 @@
1414
},
1515
"filterPlaceholder": "Filtre, étiquettes",
1616
"infraLoadingState": "{{step}}/7",
17+
"infrastructure": "Infrastructure",
1718
"lessDetails": "moins de détails",
18-
"macroscopic": "Macroscopique",
19-
"microscopic": "Microscopique",
19+
"macroscopic": "MACRO",
20+
"microscopic": "MICRO",
2021
"modifyScenario": "Modifier le scénario",
2122
"moreDetails": "plus de détails",
2223
"noElectricalProfileSet": "Pas de profil électrique",

‎front/src/applications/operationalStudies/components/MicroMacroSwitch.tsx

+18-19
Original file line numberDiff line numberDiff line change
@@ -9,25 +9,24 @@ type MicroMacroSwitchProps = {
99
const MicroMacroSwitch = ({ isMacro, setIsMacro }: MicroMacroSwitchProps) => {
1010
const { t } = useTranslation('operationalStudies/scenario');
1111
return (
12-
<div className="tabs-container">
13-
<div className="tabs">
14-
<div
15-
className={cx('tab', { active: !isMacro })}
16-
role="button"
17-
tabIndex={0}
18-
onClick={() => setIsMacro(false)}
19-
>
20-
{t('microscopic')}
21-
</div>
22-
<div
23-
className={cx('tab', { active: isMacro })}
24-
role="button"
25-
tabIndex={0}
26-
onClick={() => setIsMacro(true)}
27-
>
28-
{t('macroscopic')}
29-
</div>
30-
</div>
12+
<div className="micro-macro-buttons">
13+
<button
14+
type="button"
15+
className={cx('micro-button', { active: !isMacro })}
16+
tabIndex={0}
17+
onClick={() => setIsMacro(false)}
18+
>
19+
{t('microscopic')}
20+
</button>
21+
<div className="micro-macro-separator" />
22+
<button
23+
type="button"
24+
className={cx('macro-button', { active: isMacro })}
25+
tabIndex={0}
26+
onClick={() => setIsMacro(true)}
27+
>
28+
{t('macroscopic')}
29+
</button>
3130
</div>
3231
);
3332
};

‎front/src/applications/operationalStudies/components/Scenario/InfraLoadingState.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export default function InfraLoadingState({ infra }: Props) {
2929
title={infra.state}
3030
>
3131
{infra.state && infra.state === 'CACHED' ? (
32-
<span>•</span>
32+
<span className="infra-loaded" />
3333
) : (
3434
<>
3535
<span className="infra-loader">•</span>

‎front/src/applications/operationalStudies/components/Scenario/ScenarioDescription.tsx

+45-39
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
1-
import { ChevronLeft, Pencil } from '@osrd-project/ui-icons';
1+
import { Blocked, ChevronLeft, Pencil } from '@osrd-project/ui-icons';
22
import { useTranslation } from 'react-i18next';
3-
import { GiElectric } from 'react-icons/gi';
43

5-
import InfraLoadingState from 'applications/operationalStudies/components/Scenario/InfraLoadingState';
6-
import infraLogo from 'assets/pictures/components/tracks.svg';
74
import type { InfraWithState, ScenarioResponse } from 'common/api/osrdEditoastApi';
85
import { useModal } from 'common/BootstrapSNCF/ModalSNCF';
96
import AddAndEditScenarioModal from 'modules/scenario/components/AddOrEditScenarioModal';
107

8+
import InfraLoadingState from './InfraLoadingState';
9+
1110
type ScenarioDescriptionProps = {
1211
scenario: ScenarioResponse;
1312
infra?: InfraWithState;
@@ -25,14 +24,30 @@ const ScenarioDescription = ({
2524
const { openModal } = useModal();
2625

2726
return (
28-
<div className="scenario-details">
27+
<div>
2928
<div className="scenario-details-name">
3029
<span className="flex-grow-1 scenario-name text-truncate" title={scenario.name}>
3130
{scenario.name}
3231
</span>
32+
</div>
33+
34+
<div className="scenario-description">
35+
{scenario.description && (
36+
<div className="scenario-details-description">{scenario.description}</div>
37+
)}
38+
<div className="flex justify-end">
39+
<button
40+
type="button"
41+
className="scenario-collapse-button"
42+
aria-label={t('toggleTimetable')}
43+
onClick={() => collapseTimetable()}
44+
>
45+
<ChevronLeft />
46+
</button>
47+
</div>
3348
<button
3449
data-testid="editScenario"
35-
className="scenario-details-modify-button"
50+
className="update-scenario"
3651
type="button"
3752
aria-label={t('editScenario')}
3853
onClick={() =>
@@ -46,50 +61,41 @@ const ScenarioDescription = ({
4661
>
4762
<Pencil />
4863
</button>
49-
<button
50-
type="button"
51-
className="scenario-details-modify-button"
52-
aria-label={t('toggleTimetable')}
53-
onClick={() => collapseTimetable()}
54-
>
55-
<ChevronLeft />
56-
</button>
5764
</div>
58-
<div className="row">
59-
<div className="col-md-6">
60-
<div className="scenario-details-infra-name">
61-
<img src={infraLogo} alt="Infra logo" className="infra-logo mr-2" />
62-
{infra && <InfraLoadingState infra={infra} />}
63-
<span className="scenario-infra-name">{scenario.infra_name}</span>
64-
<small className="ml-auto text-muted">ID {scenario.infra_id}</small>
65-
</div>
66-
</div>
67-
<div className="col-md-6">
68-
<div className="scenario-details-electrical-profile-set">
69-
<span className="mr-2">
70-
<GiElectric />
71-
</span>
72-
{scenario.electrical_profile_set_id
73-
? scenario.electrical_profile_set_id
74-
: t('noElectricalProfileSet')}
75-
</div>
76-
</div>
65+
<div className="scenario-details-electrical-profile-set">
66+
{scenario.electrical_profile_set_id
67+
? scenario.electrical_profile_set_id
68+
: t('noElectricalProfileSet')}
69+
</div>
70+
71+
<div className="scenario-details-infra-name">
72+
{t('infrastructure')} :&nbsp;
73+
{infra && <InfraLoadingState infra={infra} />}
74+
&nbsp;
75+
<span className="scenario-infra-name">{scenario.infra_name}</span>&nbsp;| ID
76+
{scenario.infra_id}
7777
</div>
7878
{infra &&
7979
infra.state === 'TRANSIENT_ERROR' &&
8080
(infraReloadCount <= 5 ? (
81-
<div className="scenario-details-infra-error mt-1">
82-
{t('errorMessages.unableToLoadInfra', { infraReloadCount })}
81+
<div className="scenario-details-infra-error">
82+
<Blocked variant="fill" />
83+
<span className="error-description">
84+
{t('errorMessages.unableToLoadInfra', { infraReloadCount })}
85+
</span>
8386
</div>
8487
) : (
85-
<div className="scenario-details-infra-error mt-1">
86-
{t('errorMessages.softErrorInfra')}
88+
<div className="scenario-details-infra-error">
89+
<Blocked variant="fill" />
90+
<span className="error-description">{t('errorMessages.softErrorInfra')}</span>
8791
</div>
8892
))}
8993
{infra && infra.state === 'ERROR' && (
90-
<div className="scenario-details-infra-error mt-1">{t('errorMessages.hardErrorInfra')}</div>
94+
<div className="scenario-details-infra-error">
95+
<Blocked variant="fill" />
96+
<span className="error-description">{t('errorMessages.hardErrorInfra')}</span>
97+
</div>
9198
)}
92-
<div className="scenario-details-description">{scenario.description}</div>
9399
</div>
94100
);
95101
};

‎front/src/modules/trainschedule/components/Timetable/Timetable.tsx

+8-17
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useMemo, useState } from 'react';
22

3-
import { Alert, Download, Plus } from '@osrd-project/ui-icons';
3+
import { Alert } from '@osrd-project/ui-icons';
44
import cx from 'classnames';
55
import { compact } from 'lodash';
66
import { useTranslation } from 'react-i18next';
@@ -99,34 +99,25 @@ const Timetable = ({
9999
<div className="scenario-timetable">
100100
<div className="scenario-timetable-addtrains-buttons">
101101
<button
102-
className="btn btn-secondary btn-sm"
103-
type="button"
104-
data-testid="scenarios-import-train-schedule-button"
105-
onClick={() => setDisplayTrainScheduleManagement(MANAGE_TRAIN_SCHEDULE_TYPES.import)}
106-
>
107-
<span className="mr-2">
108-
<Download />
109-
</span>
110-
{t('timetable.importTrainSchedule')}
111-
</button>
112-
<button
113-
className="btn btn-primary btn-sm"
114102
type="button"
115103
data-testid="scenarios-add-train-schedule-button"
116104
onClick={() => {
117105
setDisplayTrainScheduleManagement(MANAGE_TRAIN_SCHEDULE_TYPES.add);
118106
}}
119107
>
120-
<span className="mr-2">
121-
<Plus />
122-
</span>
123108
{t('timetable.addTrainSchedule')}
124109
</button>
110+
<button
111+
type="button"
112+
data-testid="scenarios-import-train-schedule-button"
113+
onClick={() => setDisplayTrainScheduleManagement(MANAGE_TRAIN_SCHEDULE_TYPES.import)}
114+
>
115+
{t('timetable.importTrainSchedule')}
116+
</button>
125117
</div>
126118
<div
127119
className={cx('scenario-timetable-trains', {
128120
expanded: conflictsListExpanded,
129-
'with-details': showTrainDetails,
130121
})}
131122
>
132123
<TimetableToolbar

‎front/src/styles/scss/_variables.scss

+14
Original file line numberDiff line numberDiff line change
@@ -37,17 +37,31 @@ $colors: (
3737
'ambiantB5': #faf9f5,
3838
'ambiantB10': #f7f6ee,
3939
'ambiantB15': #f2f0e4,
40+
'black5': rgba(0, 0, 0, 0.05),
41+
'black10': rgba(0, 0, 0, 0.1),
42+
'black100': #000000,
4043
'error5': #ffeeed,
4144
'error60': #d91c1c,
4245
'error80': #6b0000,
46+
'grey20': #d3d1cf,
47+
'grey30': #b6b2af,
48+
'grey40': #94918e,
49+
'grey50': #797671,
4350
'grey60': #5c5955,
51+
'grey90': #1f1b17,
4452
'grey80': #312e2b,
53+
'info5': #e6f7ff,
54+
'info30': #70c1e5,
4555
'info60': #216482,
56+
'info80': #053348,
57+
'primary50': #256afa,
4658
'primary60': #1844ef,
4759
'primary80': #1f0f96,
4860
'selection20': #fff2b3,
61+
'success30': #3cca80,
4962
'warning30': #eaa72b,
5063
'warning60': #7d521e,
64+
'white100': #ffffff,
5165
);
5266

5367
:root {

0 commit comments

Comments
 (0)