Améliorations d'usabilité à l'éditeur de champs 2

Améliorations d'usabilité à l'éditeur de champs 2

app/assets/stylesheets/new_design/procedure_champs_editor.scss

@@ -123,21 +123,24 @@
 
 .champs-editor {
   .footer {
-    margin-bottom: 40px;
+    margin-bottom: 50px;
   }
 
   .buttons {
     display: flex;
     justify-content: space-between;
-    margin: 0px;
+    margin-left: -30px;
     position: fixed;
     bottom: 0px;
     background-color: $white;
-    max-width: $page-width;
+    max-width: 1100px;
     width: 100%;
     border: 1px solid $border-grey;
-    padding: 10px;
+    padding: 30px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
+    border-bottom: none;
+    padding-bottom: 15px;
+    padding-top: 15px;
   }
 }

app/javascript/components/TypesDeChampEditor/components/TypeDeChampRepetitionOptions.js

@@ -1,5 +1,6 @@
 import React, { useReducer, useRef } from 'react';
 import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import { SortableContainer, addChampLabel } from '../utils';
 import TypeDeChamp from './TypeDeChamp';
@@ -46,6 +47,8 @@ function TypeDeChampRepetitionOptions({
             })
           }
         >
+          <FontAwesomeIcon icon="plus" size="sm" />
+          &nbsp;&nbsp;
           {addChampLabel(state.isAnnotation)}
         </button>
       </div>

app/javascript/components/TypesDeChampEditor/components/TypeDeChamps.js

@@ -1,5 +1,6 @@
 import React, { useReducer, useRef } from 'react';
 import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import { SortableContainer, addChampLabel } from '../utils';
 import TypeDeChamp from './TypeDeChamp';
@@ -51,6 +52,8 @@ function TypeDeChamps({ state: rootState, typeDeChamps }) {
             })
           }
         >
+          <FontAwesomeIcon icon="plus" size="sm" />
+          &nbsp;&nbsp;
           {addChampLabel(state.isAnnotation)}
         </button>
         <button

app/javascript/components/TypesDeChampEditor/index.js

@@ -5,6 +5,7 @@ import {
   faArrowDown,
   faArrowsAltV,
   faArrowUp,
+  faPlus,
   faTrash
 } from '@fortawesome/free-solid-svg-icons';
 
@@ -12,32 +13,26 @@ import Flash from './Flash';
 import OperationsQueue from './OperationsQueue';
 import TypeDeChamps from './components/TypeDeChamps';
 
-library.add(faArrowDown, faArrowsAltV, faArrowUp, faTrash);
+library.add(faArrowDown, faArrowsAltV, faArrowUp, faPlus, faTrash);
 
 class TypesDeChampEditor extends Component {
-  constructor({
-    baseUrl,
-    typeDeChampsTypes,
-    directUploadUrl,
-    isAnnotation,
-    typeDeChamps
-  }) {
-    super({ typeDeChamps });
+  constructor(props) {
+    super(props);
     const defaultTypeDeChampAttributes = {
       type_champ: 'text',
       types_de_champ: [],
-      private: isAnnotation,
-      libelle: `${isAnnotation ? 'Nouvelle annotation' : 'Nouveau champ'} ${
-        typeDeChampsTypes[0][0]
-      }`
+      private: props.isAnnotation,
+      libelle: `${
+        props.isAnnotation ? 'Nouvelle annotation' : 'Nouveau champ'
+      } ${props.typeDeChampsTypes[0][0]}`
     };
     this.state = {
-      flash: new Flash(isAnnotation),
-      queue: new OperationsQueue(baseUrl),
+      flash: new Flash(props.isAnnotation),
+      queue: new OperationsQueue(props.baseUrl),
       defaultTypeDeChampAttributes,
-      typeDeChampsTypes,
-      directUploadUrl,
-      isAnnotation
+      typeDeChampsTypes: props.typeDeChampsTypes,
+      directUploadUrl: props.directUploadUrl,
+      isAnnotation: props.isAnnotation
     };
   }