front: editor - be able to select a theme

Close #5806 & #5821

- Adding the MapSettingsMapStyle component in the editor settings, and for
that I changed a little bit the CSS.
- sync labels of data and map layer in the editor with the one on the map.
- adding missing color to some theme (see #5821)

Author: sim51

front/public/locales/en/translation.json

@@ -188,7 +188,7 @@
       "toggle-layers": "Choose the types of elements to display",
       "osrd-layers": "Data layers",
       "speed-limits": "Speed limits",
-      "map-layers": "Map layers"
+      "map-layers": "Map settings"
     },
     "obj-types": {
       "BufferStop": "Buffer stop",

front/public/locales/fr/translation.json

@@ -188,7 +188,7 @@
       "toggle-layers": "Choisir les types d'éléments à afficher",
       "osrd-layers": "Couches de données",
       "speed-limits": "Limitations de vitesse",
-      "map-layers": "Couches cartographiques"
+      "map-layers": "Paramètres cartographiques"
     },
     "obj-types": {
       "BufferStop": "Heurtoir",

front/src/applications/editor/components/LayersModal.tsx

@@ -23,6 +23,7 @@ import { getMap } from 'reducers/map/selectors';
 import { getInfraID } from 'reducers/osrdconf/selectors';
 import { osrdEditoastApi } from 'common/api/osrdEditoastApi';
 import { updateLayersSettings } from 'reducers/map';
+import MapSettingsMapStyle from 'common/Map/Settings/MapSettingsMapStyle';
 
 export const LAYERS: Array<{ layers: LayerType[]; icon: string | JSX.Element }> = [
   { layers: ['track_sections'], icon: trackSectionsIcon },
@@ -198,6 +199,7 @@ const LayersModal: FC<LayersModalProps> = ({
         <div>
           <h4>{t('Editor.nav.map-layers')}</h4>
         </div>
+        <MapSettingsMapStyle />
         <MapSettingsBackgroundSwitches />
       </div>
 

front/src/common/Map/Consts/colors.ts

@@ -23,6 +23,10 @@ const colors: Record<string, Theme> = {
     electricbox: {
       text: '#b42222',
     },
+    error: {
+      color: '#ff0000',
+      text: '#ff0000',
+    },
     kp: {
       circle: '#162873',
       text: '#4d4f53',
@@ -143,10 +147,6 @@ const colors: Record<string, Theme> = {
       color: '#4b4b4b',
       text: '#164721',
     },
-    error: {
-      color: '#ff0000',
-      text: '#ff0000',
-    },
     warning: {
       color: '#FF8C00',
       text: '#FF8C00',
@@ -175,6 +175,10 @@ const colors: Record<string, Theme> = {
     electricbox: {
       text: '#b42222',
     },
+    error: {
+      color: '#ff0000',
+      text: '#ff0000',
+    },
     kp: {
       circle: '#8338ec',
       text: '#8338ec',
@@ -295,6 +299,10 @@ const colors: Record<string, Theme> = {
       color: '#ffbe0b',
       text: '#ffbe0b',
     },
+    warning: {
+      color: '#FF8C00',
+      text: '#FF8C00',
+    },
   },
   /* ***************************************************************************
    *
@@ -319,6 +327,10 @@ const colors: Record<string, Theme> = {
     electricbox: {
       text: bpLight,
     },
+    error: {
+      color: '#ff0000',
+      text: '#ff0000',
+    },
     kp: {
       circle: bpLight,
       text: bpLight,
@@ -439,6 +451,10 @@ const colors: Record<string, Theme> = {
       color: bpMedium,
       text: bpMedium,
     },
+    warning: {
+      color: '#FF8C00',
+      text: '#FF8C00',
+    },
   },
   /* ***************************************************************************
    *
@@ -463,6 +479,10 @@ const colors: Record<string, Theme> = {
     electricbox: {
       text: '#b42222',
     },
+    error: {
+      color: '#ff0000',
+      text: '#ff0000',
+    },
     kp: {
       circle: '#162873',
       text: '#4d4f53',
@@ -583,10 +603,6 @@ const colors: Record<string, Theme> = {
       color: '#4b4b4b',
       text: '#164721',
     },
-    error: {
-      color: '#ff0000',
-      text: '#ff0000',
-    },
     warning: {
       color: '#FF8C00',
       text: '#FF8C00',

front/src/common/Map/Map.scss

@@ -33,29 +33,6 @@
   @media screen and (min-width: 640px) {
     max-width: 50%;
   }
-  button.mapstyle-style-select {
-    border: none;
-    background-color: #f2f2f2;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    text-align: left;
-    border-radius: 8px;
-    margin-right: 1rem;
-    padding-right: 0.5rem;
-    img {
-      width: 5rem;
-      border-radius: 8px 0 0 8px;
-      margin-right: 0.5rem;
-    }
-    font-size: 0.9rem;
-    &:hover,
-    &.active {
-      background-color: #333;
-      color: #fff;
-    }
-  }
-
   .sub-section-title {
     cursor: pointer;
     i {
@@ -122,6 +99,32 @@
     border-color: var(--coolgray13);
   }
 }
+
+.mapstyle {
+  button.mapstyle-style-select {
+    border: none;
+    background-color: #f2f2f2;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    text-align: left;
+    border-radius: 8px;
+    margin-right: 1rem;
+    padding-right: 0.5rem;
+    img {
+      width: 5rem;
+      border-radius: 8px 0 0 8px;
+      margin-right: 0.5rem;
+    }
+    font-size: 0.9rem;
+    &:hover,
+    &.active {
+      background-color: #333;
+      color: #fff;
+    }
+  }
+}
+
 .map-search-marker {
   /* Circle center */
   margin-left: -16px;

front/src/common/Map/Settings/MapSettings.tsx

@@ -1,9 +1,10 @@
 import React, { FC, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
 import MapSettingsLayers from 'common/Map/Settings/MapSettingsLayers';
 import MapSettingsMapStyle from 'common/Map/Settings/MapSettingsMapStyle';
 import MapSettingsBackgroundSwitches from 'common/Map/Settings/MapSettingsBackgroundSwitches';
 import MapSettingsSpeedLimits from 'common/Map/Settings/MapSettingsSpeedLimits';
-import { useTranslation } from 'react-i18next';
 import HearderPopUp from '../HeaderPopUp';
 
 interface MapSettingsProps {

front/src/common/Map/Settings/MapSettingsMapStyle.tsx

@@ -16,7 +16,7 @@ const MapSettingsMapStyle: FC<unknown> = () => {
   const dispatch = useDispatch();
 
   return (
-    <div className="row ml-1">
+    <div className="row ml-1 mapstyle">
       <button
         className={cx('col-xs-4 mb-2 mapstyle-style-select', mapStyle === 'normal' && 'active')}
         type="button"