front: fix items alignement in stdcm card

Signed-off-by: Clara Ni <[email protected]>
OpenRailAssociation · Oct 10, 2024 · 60d1e85 · 60d1e85
1 parent 214ceb1
commit 60d1e85
Show file tree

Hide file tree

Showing 12 changed files with 184 additions and 111 deletions.
diff --git a/front/src/applications/stdcmV2/components/StdcmCard.tsx b/front/src/applications/stdcmV2/components/StdcmCard.tsx
@@ -6,9 +6,17 @@ export type StdcmCardProps = {
   disabled?: boolean;
   title?: React.ReactNode;
   children: React.ReactNode;
+  className?: string;
 };
 
-const StdcmCard = ({ name, hasTip = false, disabled = false, title, children }: StdcmCardProps) => (
+const StdcmCard = ({
+  name,
+  hasTip = false,
+  disabled = false,
+  title,
+  children,
+  className = '',
+}: StdcmCardProps) => (
   <div className={cx('stdcm-v2-card', { 'has-tip': hasTip, disabled })}>
     {name && (
       <div
@@ -23,7 +31,7 @@ const StdcmCard = ({ name, hasTip = false, disabled = false, title, children }:
         {title}
       </div>
     )}
-    <div className="stdcm-v2-card__body">{children}</div>
+    <div className={cx('stdcm-v2-card__body', `${className}`)}>{children}</div>
   </div>
 );
 

diff --git a/front/src/applications/stdcmV2/components/StdcmConsist.tsx b/front/src/applications/stdcmV2/components/StdcmConsist.tsx
@@ -108,33 +108,43 @@ const StdcmConsist = ({ setCurrentSimulationInputs, disabled = false }: StdcmCon
       name={t('consist.consist')}
       title={<ConsistCardTitle rollingStock={rollingStock} />}
       disabled={disabled}
+      className="consist"
     >
-      <div className="stdcm-v2-consist">
-        <div className="suggestions">
-          <ComboBox
-            id="tractionEngine"
-            label={t('consist.tractionEngine')}
-            value={filters.text.toUpperCase()}
-            onClick={onInputClick}
-            onChange={onInputChange}
-            autoComplete="off"
-            disabled={disabled}
-            suggestions={filteredRollingStockList}
-            getSuggestionLabel={(suggestion: LightRollingStockWithLiveries) => getLabel(suggestion)}
-            onSelectSuggestion={onSelectSuggestion}
-          />
-        </div>
-        <div className="stdcm-v2-consist__properties d-flex justify-content-between">
-          <Input id="tonnage" label={t('consist.tonnage')} trailingContent="t" />
-          <Input id="length" label={t('consist.length')} trailingContent="m" />
-        </div>
-        <SpeedLimitByTagSelector
+      <div className="traction-engine">
+        <ComboBox
+          id="tractionEngine"
+          label={t('consist.tractionEngine')}
+          value={filters.text.toUpperCase()}
+          onClick={onInputClick}
+          onChange={onInputChange}
+          autoComplete="off"
           disabled={disabled}
-          selectedSpeedLimitByTag={speedLimitByTag}
-          speedLimitsByTags={speedLimitsByTags}
-          dispatchUpdateSpeedLimitByTag={dispatchUpdateSpeedLimitByTag}
+          suggestions={filteredRollingStockList}
+          getSuggestionLabel={(suggestion: LightRollingStockWithLiveries) => getLabel(suggestion)}
+          onSelectSuggestion={onSelectSuggestion}
         />
       </div>
+      <div className="stdcm-v2-consist__properties">
+        <Input
+          id="tonnage"
+          label={t('consist.tonnage')}
+          trailingContent="t"
+          inputFieldWrapperClassname="weight"
+        />
+        <Input
+          id="length"
+          label={t('consist.length')}
+          trailingContent="m"
+          inputFieldWrapperClassname="length"
+        />
+      </div>
+      <SpeedLimitByTagSelector
+        disabled={disabled}
+        selectedSpeedLimitByTag={speedLimitByTag}
+        speedLimitsByTags={speedLimitsByTags}
+        dispatchUpdateSpeedLimitByTag={dispatchUpdateSpeedLimitByTag}
+        className="speed-limit-by-tag-selector"
+      />
     </StdcmCard>
   );
 };

diff --git a/front/src/applications/stdcmV2/components/StdcmDefaultCard.tsx b/front/src/applications/stdcmV2/components/StdcmDefaultCard.tsx
@@ -14,9 +14,9 @@ const StdcmDefaultCard = ({
   onClick,
   disabled = false,
 }: StdcmCardProps) => (
-  <StdcmCard hasTip={hasTip} disabled={disabled}>
+  <StdcmCard hasTip={hasTip} disabled={disabled} className="add-via">
     <button type="button" onClick={onClick}>
-      <span className="stdcm-v2-default-card-icon ml-n1">{Icon}</span>
+      <span className="stdcm-v2-default-card-icon">{Icon}</span>
       <span className="stdcm-v2-default-card-button">{text}</span>
     </button>
   </StdcmCard>

diff --git a/front/src/applications/stdcmV2/components/StdcmDestination.tsx b/front/src/applications/stdcmV2/components/StdcmDestination.tsx
@@ -101,6 +101,7 @@ const StdcmDestination = ({
       name={t('trainPath.destination')}
       title={<img src={DestinationIcon} alt="destination" className="stdcm-destination-icon" />}
       disabled={disabled}
+      className="extremity"
     >
       <div className="stdcm-v2-destination">
         <StdcmOperationalPoint

diff --git a/front/src/applications/stdcmV2/components/StdcmOpSchedule.tsx b/front/src/applications/stdcmV2/components/StdcmOpSchedule.tsx
@@ -100,8 +100,8 @@ const StdcmOpSchedule = ({
   );
 
   return (
-    <div className="d-flex flex-column">
-      <div className="col-12 pr-1">
+    <>
+      <div className="arrival-type-select">
         <Select
           id={`select-${opId}`}
           value={opScheduleTimeType}
@@ -116,7 +116,7 @@ const StdcmOpSchedule = ({
         />
       </div>
       {opScheduleTimeType === 'preciseTime' && (
-        <div className="d-flex pl-2 pr-1">
+        <div className="d-flex">
           {/* TODO: Remove empty onChange events once we fix the warning on ui-core side */}
           <DatePicker
             inputProps={{
@@ -166,7 +166,7 @@ const StdcmOpSchedule = ({
           </div>
         </div>
       )}
-    </div>
+    </>
   );
 };
 

diff --git a/front/src/applications/stdcmV2/components/StdcmOperationalPoint.tsx b/front/src/applications/stdcmV2/components/StdcmOperationalPoint.tsx
@@ -126,8 +126,8 @@ const StdcmOperationalPoint = ({
   }, [point]);
 
   return (
-    <div className="flex">
-      <div className="suggestions col-9">
+    <div className="location-line">
+      <div className="col-9 ci-input">
         <ComboBox
           id={`${opPointId}-ci`}
           label={t('trainPath.ci')}
@@ -140,7 +140,7 @@ const StdcmOperationalPoint = ({
           onSelectSuggestion={onSelectSuggestion}
         />
       </div>
-      <div className="suggestions stdcm-v2-ch-selector w-100 px-1 pb-2 col-3">
+      <div className="col-3 p-0">
         <Select
           label={t('trainPath.ch')}
           id={`${opPointId}-ch`}

diff --git a/front/src/applications/stdcmV2/components/StdcmOrigin.tsx b/front/src/applications/stdcmV2/components/StdcmOrigin.tsx
@@ -90,29 +90,28 @@ const StdcmOrigin = ({
     <StdcmCard
       name={t('trainPath.origin')}
       title={<img src={OriginIcon} alt="origin" className="stdcm-origin-icon" />}
+      className="extremity"
       disabled={disabled}
       hasTip
     >
-      <div className="stdcm-v2-origin__parameters">
-        <StdcmOperationalPoint
-          updatePoint={updateOriginPoint}
-          point={origin}
-          opPointId={origin?.id || 'origin'}
+      <StdcmOperationalPoint
+        updatePoint={updateOriginPoint}
+        point={origin}
+        opPointId={origin?.id || 'origin'}
+        disabled={disabled}
+      />
+      {origin && (
+        <StdcmOpSchedule
+          onArrivalChange={onOriginArrivalChange}
+          onArrivalTypeChange={onOriginArrivalTypeChange}
+          onArrivalToleranceChange={onOriginToleranceChange}
+          opTimingData={originArrival}
+          opToleranceValues={originToleranceValues}
+          opScheduleTimeType={origin?.arrivalType || ArrivalTimeTypes.PRECISE_TIME}
           disabled={disabled}
+          opId="origin-arrival"
         />
-        {origin && (
-          <StdcmOpSchedule
-            onArrivalChange={onOriginArrivalChange}
-            onArrivalTypeChange={onOriginArrivalTypeChange}
-            onArrivalToleranceChange={onOriginToleranceChange}
-            opTimingData={originArrival}
-            opToleranceValues={originToleranceValues}
-            opScheduleTimeType={origin?.arrivalType || ArrivalTimeTypes.PRECISE_TIME}
-            disabled={disabled}
-            opId="origin-arrival"
-          />
-        )}
-      </div>
+      )}
     </StdcmCard>
   );
 };

diff --git a/front/src/applications/stdcmV2/components/StdcmStopType.tsx b/front/src/applications/stdcmV2/components/StdcmStopType.tsx
@@ -12,7 +12,7 @@ const StdcmStopType = ({ stopTypes, updatePathStepStopType }: StdcmStopTypeProps
   const { t } = useTranslation('stdcm');
 
   return (
-    <div className="stdcm-v2-via-stop-for selector">
+    <div className="stop-type-selector">
       <Select
         label={t('trainPath.type')}
         id="type"

diff --git a/front/src/applications/stdcmV2/components/StdcmVias.tsx b/front/src/applications/stdcmV2/components/StdcmVias.tsx
@@ -138,15 +138,14 @@ const StdcmVias = ({ disabled = false, setCurrentSimulationInputs }: StdcmConfig
                 }
                 hasTip
                 disabled={disabled}
+                className="via"
               >
-                <div className="stdcm-v2-vias">
-                  <StdcmOperationalPoint
-                    updatePoint={(e) => updatePathStepsList(e, pathStepIndex)}
-                    point={pathStep}
-                    opPointId={pathStep.id}
-                    disabled={disabled}
-                  />
-                </div>
+                <StdcmOperationalPoint
+                  updatePoint={(e) => updatePathStepsList(e, pathStepIndex)}
+                  point={pathStep}
+                  opPointId={pathStep.id}
+                  disabled={disabled}
+                />
                 {'uic' in pathStep && pathStep.uic !== -1 && (
                   <>
                     <StdcmStopType

diff --git a/front/src/common/SpeedLimitByTagSelector/SpeedLimitByTagSelector.tsx b/front/src/common/SpeedLimitByTagSelector/SpeedLimitByTagSelector.tsx
@@ -13,6 +13,7 @@ type SpeedLimitByTagSelectorProps = {
   selectedSpeedLimitByTag?: string;
   speedLimitsByTags: string[];
   dispatchUpdateSpeedLimitByTag: (newTag: string | null) => void;
+  className?: string;
 };
 
 export default function SpeedLimitByTagSelector({
@@ -21,6 +22,7 @@ export default function SpeedLimitByTagSelector({
   selectedSpeedLimitByTag: speedLimitByTag,
   speedLimitsByTags,
   dispatchUpdateSpeedLimitByTag,
+  className = '',
 }: SpeedLimitByTagSelectorProps) {
   const { t } = useTranslation(['operationalStudies/manageTrainSchedule']);
 
@@ -34,9 +36,12 @@ export default function SpeedLimitByTagSelector({
   return (
     <div className="osrd-config-item mb-3">
       <div
-        className={cx('osrd-config-item-container', {
-          'd-flex align-items-center gap-10': condensed,
-        })}
+        className={
+          (cx('osrd-config-item-container', {
+            'd-flex align-items-center gap-10': condensed,
+          }),
+          className)
+        }
       >
         <Select
           disabled={disabled}