Various UI fixes after review

MTES-MCT · Apr 13, 2021 · 85b51c8 · 85b51c8
1 parent 6166eae
commit 85b51c8
Show file tree

Hide file tree

Showing 10 changed files with 64 additions and 45 deletions.
diff --git a/frontend/src/components/controls/Control.js b/frontend/src/components/controls/Control.js
@@ -55,7 +55,7 @@ const Control = props => {
                       <SubValue>{props.control.latitude ? <>{getCoordinates([props.control.latitude, props.control.longitude], WSG84_PROJECTION)[0]}</> : <NoValue>-</NoValue>}</SubValue>
                   </SubField><br/>
                   <SubField>
-                      <Key width={47}>Lon.</Key>
+                      <Key width={25}>Lon.</Key>
                       <SubValue>{props.control.longitude ? <>{getCoordinates([props.control.latitude, props.control.longitude], WSG84_PROJECTION)[1]}</> : <NoValue>-</NoValue>}</SubValue>
                   </SubField>
               </SubFields> : null
@@ -81,7 +81,7 @@ const Control = props => {
         </SubFields>
         <Key width={47}>Résultat</Key>
         <SubValue>
-            { props.control.infractions && props.control.infractions.length ? `${props.control.infractions.length} infractions` : `pas d'infraction` }
+            { props.control.infractions && props.control.infractions.length ? `${props.control.infractions.length} infraction${props.control.infractions.length > 1 ? 's' : ''}` : `pas d'infraction` }
         </SubValue><br/>
         {
             props.control.seizure ?
@@ -258,7 +258,7 @@ const SubFields = styled.div`
 `
 
 const SubField = styled.div`
-  flex: 1 1 0;
+  flex: 0 1 0;
 `
 
 const Wrapper = styled.div`

diff --git a/frontend/src/components/controls/VesselControls.js b/frontend/src/components/controls/VesselControls.js
@@ -73,18 +73,20 @@ const VesselControls = props => {
                               <ControlResumeNumberElement>pêche <Number>{!isNaN(props.controlResumeAndControls.numberOfFishingInfractions) ? props.controlResumeAndControls.numberOfFishingInfractions : <NoValue>-</NoValue>}</Number></ControlResumeNumberElement>
                               <ControlResumeNumberElement>sécurité <Number>{ !isNaN(props.controlResumeAndControls.numberOfSecurityInfractions) ? props.controlResumeAndControls.numberOfSecurityInfractions : <NoValue>-</NoValue> }</Number></ControlResumeNumberElement>
                           </ControlResumeLine>
-                          <ResumeBox>
-                              <ResumeBoxNumber isRed={ props.controlResumeAndControls.numberOfDiversions }>{ !isNaN(props.controlResumeAndControls.numberOfDiversions) ? props.controlResumeAndControls.numberOfDiversions : <NoValue>-</NoValue> }</ResumeBoxNumber>
-                              <ResumeBoxText>Déroutement</ResumeBoxText>
-                          </ResumeBox>
-                          <ResumeBox>
-                              <ResumeBoxNumber isRed={ props.controlResumeAndControls.numberOfEscortsToQuay }>{ !isNaN(props.controlResumeAndControls.numberOfEscortsToQuay) ? props.controlResumeAndControls.numberOfEscortsToQuay : <NoValue>-</NoValue> }</ResumeBoxNumber>
-                              <ResumeBoxText>Reconduite à quai</ResumeBoxText>
-                          </ResumeBox>
-                          <ResumeBox>
-                              <ResumeBoxNumber isRed={ props.controlResumeAndControls.numberOfSeizures }>{ !isNaN(props.controlResumeAndControls.numberOfSeizures) ? props.controlResumeAndControls.numberOfSeizures : <NoValue>-</NoValue>}</ResumeBoxNumber>
-                              <ResumeBoxText>Appréhension</ResumeBoxText>
-                          </ResumeBox>
+                          <ResumesBoxes>
+                              <ResumeBox>
+                                  <ResumeBoxNumber isRed={ props.controlResumeAndControls.numberOfDiversions }>{ !isNaN(props.controlResumeAndControls.numberOfDiversions) ? props.controlResumeAndControls.numberOfDiversions : <NoValue>-</NoValue> }</ResumeBoxNumber>
+                                  <ResumeBoxText>Déroutement</ResumeBoxText>
+                              </ResumeBox>
+                              <ResumeBox>
+                                  <ResumeBoxNumber isRed={ props.controlResumeAndControls.numberOfEscortsToQuay }>{ !isNaN(props.controlResumeAndControls.numberOfEscortsToQuay) ? props.controlResumeAndControls.numberOfEscortsToQuay : <NoValue>-</NoValue> }</ResumeBoxNumber>
+                                  <ResumeBoxText>Reconduite à quai</ResumeBoxText>
+                              </ResumeBox>
+                              <ResumeBox>
+                                  <ResumeBoxNumber isRed={ props.controlResumeAndControls.numberOfSeizures }>{ !isNaN(props.controlResumeAndControls.numberOfSeizures) ? props.controlResumeAndControls.numberOfSeizures : <NoValue>-</NoValue>}</ResumeBoxNumber>
+                                  <ResumeBoxText>Appréhension</ResumeBoxText>
+                              </ResumeBox>
+                          </ResumesBoxes>
                       </Fields>
                   </Zone>
                   <Zone>
@@ -128,6 +130,12 @@ const VesselControls = props => {
         </>
 }
 
+const ResumesBoxes = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin-right: 15px;
+`
+
 const NoControls = styled.div`
   text-align: center;
   padding: 10px 0 10px 0;
@@ -179,7 +187,7 @@ const ResumeBoxNumber = styled.span`
   border-radius: 11px;
   height: 16px;
   display: inline-block;
-  line-height: 15px;
+  line-height: 14px;
   width: 16px;
   text-align: center;
   font-weight: bolder;
@@ -192,7 +200,7 @@ const ResumeBox = styled.span`
   font-size: 13px;
   height: 22px;
   display: inline-block;
-  margin: 8px 15px 10px 0;
+  margin: 8px 5px 10px 0;
 `
 
 const Number = styled.span`
@@ -297,16 +305,15 @@ const ControlResumeLine = styled.div`
   font-size: 13px;
   color: ${COLORS.textGray};
   display: flex;
-  flex: 1 1 1 1;
   width: 100%;
 `
 
 const ResumeText = styled.span`
-  margin: 5px 10px 0 0;
+  margin: 5px 0 0 0;
 `
 
 const ControlResumeNumberElement = styled.span`
-  margin: 5px 10px 0 15px;
+  margin: 5px 10px 0 14px;
 `
 
 const Gyro = styled(GyroSVG)`

diff --git a/frontend/src/components/ers_messages/ERSMessageSpecies.js b/frontend/src/components/ers_messages/ERSMessageSpecies.js
@@ -146,7 +146,7 @@ const TitleText = styled.span`
   text-overflow: ellipsis;
   overflow: hidden !important;
   white-space: nowrap;    
-  max-width: 185px; 
+  max-width: 180px; 
 `
 
 const Weight = styled.span`

diff --git a/frontend/src/components/ers_messages_resumes/LANMessageResume.js b/frontend/src/components/ers_messages_resumes/LANMessageResume.js
@@ -113,8 +113,11 @@ const LANMessageResume = props => {
                                     </SubValue><br/>
                                     <Weights>
                                         <Weight>
-                                            <SubKey>Poids FAR</SubKey><SubValueWeight>{props.speciesToWeightOfFAR && props.speciesToWeightOfFAR[speciesCatch.species] ?
-                                            <span title={`${props.speciesToWeightOfFAR[speciesCatch.species].weight} kg`}>{props.speciesToWeightOfFAR[speciesCatch.species].weight} kg</span> : <NoValue>-</NoValue>}</SubValueWeight>
+                                            <SubKey>Poids FAR</SubKey>
+                                            <SubValueWeight withPNOWeight={props.speciesToWeightOfPNO && props.speciesToWeightOfPNO[speciesCatch.species]}>{props.speciesToWeightOfFAR && props.speciesToWeightOfFAR[speciesCatch.species]
+                                              ? <span title={`${props.speciesToWeightOfFAR[speciesCatch.species].weight} kg`}>{props.speciesToWeightOfFAR[speciesCatch.species].weight} kg</span>
+                                              : <NoValue>-</NoValue>}
+                                            </SubValueWeight>
                                         </Weight>
                                         {
                                             props.speciesToWeightOfPNO && props.speciesToWeightOfPNO[speciesCatch.species]
@@ -127,8 +130,11 @@ const LANMessageResume = props => {
                                               : null
                                         }
                                         <Weight>
-                                            <SubKey>Poids LAN</SubKey><SubValueWeight>{props.speciesToWeightOfLAN && props.speciesToWeightOfLAN[speciesCatch.species] ?
-                                            <span title={`${props.speciesToWeightOfLAN[speciesCatch.species].weight} kg`}>{props.speciesToWeightOfLAN[speciesCatch.species].weight} kg</span> : <NoValue>-</NoValue>}</SubValueWeight>
+                                            <SubKey>Poids LAN</SubKey>
+                                            <SubValueWeight withPNOWeight={props.speciesToWeightOfPNO && props.speciesToWeightOfPNO[speciesCatch.species]}>{props.speciesToWeightOfLAN && props.speciesToWeightOfLAN[speciesCatch.species]
+                                              ? <span title={`${props.speciesToWeightOfLAN[speciesCatch.species].weight} kg`}>{props.speciesToWeightOfLAN[speciesCatch.species].weight} kg</span>
+                                              : <NoValue>-</NoValue>}
+                                            </SubValueWeight>
                                         </Weight>
                                     </Weights>
                                 </Species>
@@ -195,7 +201,7 @@ const SubValueWeight = styled.span`
   font-size: 13px;
   color: ${COLORS.grayDarkerThree};
   margin-right: 10px;
-  max-width: 50px;
+  max-width: ${props => props.withPNOWeight ? '50' : '90'}px;
   text-overflow: ellipsis;
   overflow: hidden !important;
   white-space: nowrap;

diff --git a/frontend/src/components/regulatory_zones/RegulatoryZoneMetadata.js b/frontend/src/components/regulatory_zones/RegulatoryZoneMetadata.js
@@ -361,7 +361,7 @@ const Content = styled.div`
   color: ${COLORS.grayDarker};
   background: ${COLORS.background};
   margin-top: 6px;
-  min-height: 470px;
+  min-height: 370px;
   overflow-y: auto;
   max-height: 85vh;
 `
@@ -498,21 +498,21 @@ const Wrapper = styled.div`
     
     @keyframes regulatory-metadata-box-opening-with-margin {
         0%   { min-height: 100px; opacity: 0; margin-left: -30px;   }
-        100% { min-height: 500px; opacity: 1; margin-left: 356px; }
+        100% { min-height: 400px; opacity: 1; margin-left: 356px; }
     }
     
     @keyframes regulatory-metadata-box-closing-with-margin {
-        0% { min-height: 500px; opacity: 1; margin-left: 371px; }
+        0% { min-height: 400px; opacity: 1; margin-left: 371px; }
         100%   { min-height: 100px; opacity: 0; margin-left: -30px;   }
     }
        
     @keyframes regulatory-metadata-box-opening {
         0%   { min-height: 100px; opacity: 0; margin-left: -30px;   }
-        100% { min-height: 500px; opacity: 1; margin-left: 356px; }
+        100% { min-height: 400px; opacity: 1; margin-left: 356px; }
     }
     
     @keyframes regulatory-metadata-box-closing {
-        0% { min-height: 500px; opacity: 1; margin-left: 361px; }
+        0% { min-height: 400px; opacity: 1; margin-left: 361px; }
         100%   { min-height: 100px; opacity: 0; margin-left: -30px;   }
     }
 `

diff --git a/frontend/src/components/vessel_list/DownloadVesselListModal.js b/frontend/src/components/vessel_list/DownloadVesselListModal.js
@@ -4,7 +4,6 @@ import Modal from "rsuite/lib/Modal";
 import {COLORS} from "../../constants/constants";
 import Checkbox from "rsuite/lib/Checkbox";
 import CheckboxGroup from "rsuite/lib/CheckboxGroup";
-import {Radio} from "rsuite";
 import { ExportToCsv } from 'export-to-csv';
 import countries from "i18n-iso-countries";
 import {getDate, getDateTime} from "../../utils";
@@ -185,7 +184,7 @@ const DownloadVesselListModal = props => {
                         onChange={handleCheckAll}
                     >
                         <SelectAllText>
-                            Tout sélectionner
+                            Tout {checkAll ? 'dé' : ''}sélectionner
                         </SelectAllText>
                     </Checkbox>
                 </SelectAll>

diff --git a/frontend/src/components/vessel_list/VesselListTable.js b/frontend/src/components/vessel_list/VesselListTable.js
@@ -104,7 +104,7 @@ const VesselListTable = props => {
             <Table
                 virtualized
                 height={510}
-                width={1210}
+                width={1207}
                 rowHeight={36}
                 data={getVessels()}
                 sortColumn={sortColumn}

diff --git a/frontend/src/containers/VesselList.js b/frontend/src/containers/VesselList.js
@@ -5,7 +5,7 @@ import {useDispatch, useSelector} from "react-redux";
 import {ReactComponent as VesselListSVG} from '../components/icons/Icone_liste_navires.svg';
 import {ReactComponent as BoxFilterSVG} from '../components/icons/Filtre_zone_rectangle.svg';
 import {ReactComponent as PolygonFilterSVG} from '../components/icons/Filtre_zone_polygone.svg';
-import {ReactComponent as CloseIconSVG} from '../components/icons/Croix_grise_clair.svg';
+import {ReactComponent as CloseIconSVG} from '../components/icons/Croix_grise.svg';
 import {COLORS} from "../constants/constants";
 import LayersEnum, {layersType as LayersType, layersType} from "../domain/entities/layers";
 import Modal from "rsuite/lib/Modal";
@@ -197,7 +197,6 @@ const VesselList = () => {
     }, [allVesselsChecked])
 
     const handleChange = (id, key, value) => {
-        console.log(id, key, value)
         const nextVessels = Object.assign([], vessels)
 
         nextVessels.find(item => item.id === id)[key] = value
@@ -427,7 +426,7 @@ const VesselList = () => {
                                     zonesSelected && zonesSelected.length && zonesSelected.find(zone => zone.code === LayersType.FREE_DRAW) ?
                                         zonesSelected.filter(zone => zone.code === LayersType.FREE_DRAW).map(zoneSelected => {
                                             return <ZoneSelected>
-                                                Effacer la zone définie
+                                                <DeleteZoneText>Effacer la zone définie</DeleteZoneText>
                                                 <CloseIcon onClick={() => callRemoveZoneSelected(zoneSelected)}/>
                                             </ZoneSelected>
                                         }) : null
@@ -473,6 +472,12 @@ const VesselList = () => {
     )
 }
 
+const DeleteZoneText = styled.span`
+  padding-bottom: 5px;
+  vertical-align: middle;
+  height: 30px;
+  display: inline-block;
+`
 const CustomZone = styled.span`
   margin-left: 50px;
 `
@@ -483,8 +488,10 @@ const ZoneSelected = styled.span`
   color: ${COLORS.textGray};
   margin-left: 0;
   font-size: 13px;
-  padding: 6px 3px 5px 7px;
-  vertical-align: super;
+  padding: 0px 3px 0px 7px;
+  vertical-align: top;
+  height: 30px;
+  display: inline-block;
 `
 
 const Wrapper = styled.div`
@@ -675,12 +682,12 @@ const BoxFilter = styled(BoxFilterSVG)`
 
 const CloseIcon = styled(CloseIconSVG)`
   width: 13px;
-  height: 13px;
-  margin-left: 5px;
   vertical-align: text-bottom;
-  margin-bottom: 2px;
-  margin-right: 3px;
   cursor: pointer;
+  border-left: 1px solid white;
+  height: 30px;
+  margin: 0 6px 0 7px;
+  padding-left: 7px;
 `
 
 const PolygonFilter = styled(PolygonFilterSVG)`

diff --git a/frontend/src/layers/DrawLayer.js b/frontend/src/layers/DrawLayer.js
@@ -32,7 +32,7 @@ const DrawLayer = ({ map }) => {
           image: new Icon({
             opacity: 1,
             src: `Pointeur_selection_zone.svg`,
-            scale: 1
+            scale: 1.5
           }),
           stroke: new Stroke({
             color: '#515151',

diff --git a/frontend/src/layers/styles/featuresStyles.js b/frontend/src/layers/styles/featuresStyles.js
@@ -204,7 +204,7 @@ export const setArrowStyle = (trackArrow, arrowFeature) => {
     });
 
     arrowFeature.setStyle((feature, resolution) => {
-        arrowStyle.getImage().setScale(1 / Math.pow(resolution, 1/6));
+        arrowStyle.getImage().setScale(1 / Math.pow(resolution, 1/5));
         return arrowStyle;
     });
 }