From 70bb2796a4aa0b63595111c6c80ead44c5494b22 Mon Sep 17 00:00:00 2001 From: theocrsb Date: Thu, 10 Oct 2024 09:44:34 +0200 Subject: [PATCH] front: redesing conflicts list Signed-off-by: theocrsb --- .../en/operationalStudies/scenario.json | 4 +- .../fr/operationalStudies/scenario.json | 4 +- .../conflict/components/ConflictCard.tsx | 40 ++-- .../conflict/components/ConflictsList.tsx | 5 +- .../conflict/styles/_conflictList.scss | 190 ++++++++++-------- .../components/Timetable/Timetable.tsx | 20 +- front/src/styles/scss/_variables.scss | 1 + 7 files changed, 141 insertions(+), 123 deletions(-) diff --git a/front/public/locales/en/operationalStudies/scenario.json b/front/public/locales/en/operationalStudies/scenario.json index e18d7a6f31d..2d7377a45d1 100644 --- a/front/public/locales/en/operationalStudies/scenario.json +++ b/front/public/locales/en/operationalStudies/scenario.json @@ -87,6 +87,6 @@ "conflictsCount_one": "1 conflict", "conflictsCount_other": "{{count}} conflicts", "conflictsCount_zero": "No conflict", - "Routing": "Itineraries conflict", - "Spacing": "Spacing conflict" + "Routing": "Itineraries", + "Spacing": "Spacing" } diff --git a/front/public/locales/fr/operationalStudies/scenario.json b/front/public/locales/fr/operationalStudies/scenario.json index 81d59b958b7..913e8d4517a 100644 --- a/front/public/locales/fr/operationalStudies/scenario.json +++ b/front/public/locales/fr/operationalStudies/scenario.json @@ -87,6 +87,6 @@ "conflictsCount_one": "1 conflit", "conflictsCount_other": "{{count}} conflits", "conflictsCount_zero": "Aucun conflit", - "Routing": "Conflit d'itinéraires", - "Spacing": "Conflit d'espacement" + "Routing": "Itinéraires", + "Spacing": "Espacement" } diff --git a/front/src/modules/conflict/components/ConflictCard.tsx b/front/src/modules/conflict/components/ConflictCard.tsx index 67fba472fc8..3bf722ed4c6 100644 --- a/front/src/modules/conflict/components/ConflictCard.tsx +++ b/front/src/modules/conflict/components/ConflictCard.tsx @@ -1,7 +1,7 @@ +import dayjs from 'dayjs'; import { useTranslation } from 'react-i18next'; -import { BsLightningFill } from 'react-icons/bs'; -import { formatToIsoDate } from 'utils/date'; +import { extractHHMMSS } from 'utils/date'; import type { ConflictWithTrainNames } from '../types'; @@ -13,8 +13,10 @@ const ConflictCard = ({ onConflictClick: (conflict: ConflictWithTrainNames) => void; }) => { const { t } = useTranslation(['operationalStudies/scenario']); - const start_time = formatToIsoDate(conflict.start_time, true); - const end_time = formatToIsoDate(conflict.end_time, true); + const start_time = extractHHMMSS(conflict.start_time); + const end_time = extractHHMMSS(conflict.end_time); + const start_date = dayjs(conflict.start_time).format('DD/MM/YYYY'); + return (
- -
+
+

{t(`${conflict.conflict_type}`)}

+
+
+ {start_time} +
+
+ {end_time} +
+
+
+ {start_date} +
+
+
{conflict.trainNames.map((trainName, idx) => ( -
+
{trainName}
))}
-
-

{t(`${conflict.conflict_type}`)}

-
-
-
- {start_time} -
-
- {end_time} -
-
); }; diff --git a/front/src/modules/conflict/components/ConflictsList.tsx b/front/src/modules/conflict/components/ConflictsList.tsx index 123cec51b81..4d0816d3998 100644 --- a/front/src/modules/conflict/components/ConflictsList.tsx +++ b/front/src/modules/conflict/components/ConflictsList.tsx @@ -1,5 +1,6 @@ import { useMemo } from 'react'; +import { ChevronDown, ChevronUp } from '@osrd-project/ui-icons'; import cx from 'classnames'; import { useTranslation } from 'react-i18next'; @@ -34,7 +35,7 @@ const ConflictsList = ({ return null; } return ( -
+
- + {expanded ? : }
diff --git a/front/src/modules/conflict/styles/_conflictList.scss b/front/src/modules/conflict/styles/_conflictList.scss index 92ce8c07a0e..12e27b26755 100644 --- a/front/src/modules/conflict/styles/_conflictList.scss +++ b/front/src/modules/conflict/styles/_conflictList.scss @@ -1,102 +1,116 @@ .conflicts-list { - border: 2px solid var(--orange); - border-radius: 4px; - background-color: var(--white); - height: auto; - min-height: 43px; - overflow: hidden; - margin-bottom: 0.5rem; + margin-top: auto; + margin-inline: -1.5rem; + &.expanded { + margin-inline: -1.5rem; + position: absolute; + bottom: 0; + z-index: 2; + width: 100%; + } + .conflicts-list-header { + border-bottom: 0.0625rem solid var(--error80); + background-color: var(--error60); + color: var(--white100); + height: 2.9375rem; + min-width: 24.5rem; + max-width: 29.5rem; + display: flex; + justify-content: space-between; + padding: 0.6875rem 1rem 0.75rem 1rem; + h2 { + color: var(--white100); + font-size: 1.125rem; + line-height: 1.5rem; + font-weight: 600; + } + } + .conflicts-container { - padding: 0.2rem; display: none; + color: var(--black100); + background-color: var(--error60); + box-shadow: inset 0 0.0625rem var(--error30); &.expanded { display: block; - min-height: 72px; overflow: auto; - max-height: 200px; + max-height: calc(50vh - 3.75rem); } - } - .conflicts-list-header { - margin: 0; - padding: 0.5rem; - background-color: var(--orange); - color: var(--white); - font-size: 1rem; - font-weight: 600; - display: flex; - justify-content: space-between; - align-items: center; - height: 43px; - .icons-arrow-up { - transition: all 0.2s ease-in-out; - @media screen and (max-width: 1023px) { - transform: rotate(180deg); - } - &.expanded { - transition: all 0.2s ease-in-out; - transform: rotate(180deg); - @media screen and (max-width: 1023px) { - &.expanded { - transform: none; + + .conflict-card { + background-color: var(--white100); + margin: 0.25rem 0.5rem; + border-radius: 0.25rem; + display: flex; + min-height: 5.5rem; + + .trains-info { + font-family: 'IBM Plex Mono', monospace; + flex-basis: calc(43.3% - 0.0313rem); + border-right: 0.0313rem solid var(--grey20); + + .conflict-type { + font-family: 'IBM Plex Sans'; + height: 2.3125rem; + color: var(--black100); + font-size: 1.125rem; + line-height: 1.5rem; + font-weight: 600; + padding: 0.5625rem 0 0.25rem 0.75rem; + margin: 0; + } + + .start-and-end-time { + display: flex; + gap: 1rem; + .start-time { + padding-left: 0.75rem; + color: var(--black100); + font-size: 0.875rem; + font-weight: 600; + line-height: 1.25rem; + } + .end-time { + color: var(--black100); + font-size: 0.875rem; + line-height: 1.25rem; } } + + .departure-date { + padding-left: 0.75rem; + color: var(--grey50); + font-size: 0.75rem; + line-height: 1.25rem; + margin-bottom: 0.9375rem; + } } - } - h2 { - color: white; - } - &:hover { - cursor: pointer; - } - } - .conflict-card { - display: flex; - border: solid rgba(var(--orange-rgb), 0.1) 2px; - align-items: center; - padding: 0rem 0.5rem; - border-radius: 4px; - background-color: white; - margin-bottom: 0.2rem; - cursor: pointer; - &:hover { - background-color: rgba(var(--orange-rgb), 0.1); - } - .conflict-trains { - text-align: left; - font-size: 0.9rem; - font-weight: 600; - margin: 0 0.5rem; - width: 25%; - .card-text { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - } - .conflict-type { - text-align: left; - flex-grow: 1; - white-space: nowrap; - } - .conflict-times { - margin-left: 0.5rem; - text-align: right; - font-size: 0.8rem; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - .start-time { - font-weight: 600; - font-size: 0.9rem; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - .end-time { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + + .trains-name { + flex-basis: calc(56.7% - 0.0313rem); + border-left: 0.0313rem solid var(--grey20); + display: flex; + flex-wrap: wrap; + padding: 1rem 0 1rem 1rem; + gap: 0.5rem; + + .train-name-card { + font-family: 'IBM Plex Mono', monospace; + height: 1.5rem; + max-width: 13.0437rem; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + background-color: var(--error5); + color: var(--error80); + border: 0.0625rem solid var(--error30); + border-radius: 0.25rem; + padding: 0.125rem 0.5rem; + font-size: 0.875rem; + font-weight: 600; + line-height: 1.25rem; + } } } } diff --git a/front/src/modules/trainschedule/components/Timetable/Timetable.tsx b/front/src/modules/trainschedule/components/Timetable/Timetable.tsx index 2947ecd7857..ae787175874 100644 --- a/front/src/modules/trainschedule/components/Timetable/Timetable.tsx +++ b/front/src/modules/trainschedule/components/Timetable/Timetable.tsx @@ -151,17 +151,15 @@ const Timetable = ({ })} />
-
- {conflicts && ( - - )} -
+ {conflicts && ( + + )}
); }; diff --git a/front/src/styles/scss/_variables.scss b/front/src/styles/scss/_variables.scss index 8353c3b70a2..984c2b2e13d 100644 --- a/front/src/styles/scss/_variables.scss +++ b/front/src/styles/scss/_variables.scss @@ -44,6 +44,7 @@ $colors: ( 'black25': rgba(0, 0, 0, 0.25), 'black100': #000000, 'error5': #ffeeed, + 'error30': #ff6868, 'error60': #d91c1c, 'error80': #6b0000, 'grey5': #f5f5f5,