From a197459e4dfa6065357eaa0b05e63b41b4c88f41 Mon Sep 17 00:00:00 2001
From: Paul Chavard <git@paul.chavard.net>
Date: Wed, 3 Apr 2019 16:37:37 +0200
Subject: [PATCH 1/3] Fix react props warning

---
 .../components/TypesDeChampEditor/index.js    | 28 ++++++++-----------
 1 file changed, 11 insertions(+), 17 deletions(-)

diff --git a/app/javascript/components/TypesDeChampEditor/index.js b/app/javascript/components/TypesDeChampEditor/index.js
index 07b550014..d6e57d8ee 100644
--- a/app/javascript/components/TypesDeChampEditor/index.js
+++ b/app/javascript/components/TypesDeChampEditor/index.js
@@ -15,29 +15,23 @@ import TypeDeChamps from './components/TypeDeChamps';
 library.add(faArrowDown, faArrowsAltV, faArrowUp, 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
     };
   }
 

From 2374877e98bef91d426e94a902e8b0c42eb0cd80 Mon Sep 17 00:00:00 2001
From: Paul Chavard <git@paul.chavard.net>
Date: Wed, 3 Apr 2019 16:38:08 +0200
Subject: [PATCH 2/3] Add plus icon to ajouter un champ button

---
 .../components/TypeDeChampRepetitionOptions.js                 | 3 +++
 .../components/TypesDeChampEditor/components/TypeDeChamps.js   | 3 +++
 app/javascript/components/TypesDeChampEditor/index.js          | 3 ++-
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/app/javascript/components/TypesDeChampEditor/components/TypeDeChampRepetitionOptions.js b/app/javascript/components/TypesDeChampEditor/components/TypeDeChampRepetitionOptions.js
index 984057fdf..d5744036b 100644
--- a/app/javascript/components/TypesDeChampEditor/components/TypeDeChampRepetitionOptions.js
+++ b/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>
diff --git a/app/javascript/components/TypesDeChampEditor/components/TypeDeChamps.js b/app/javascript/components/TypesDeChampEditor/components/TypeDeChamps.js
index 2523dbf9d..9e25fc5b0 100644
--- a/app/javascript/components/TypesDeChampEditor/components/TypeDeChamps.js
+++ b/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
diff --git a/app/javascript/components/TypesDeChampEditor/index.js b/app/javascript/components/TypesDeChampEditor/index.js
index d6e57d8ee..dff850ac6 100644
--- a/app/javascript/components/TypesDeChampEditor/index.js
+++ b/app/javascript/components/TypesDeChampEditor/index.js
@@ -5,6 +5,7 @@ import {
   faArrowDown,
   faArrowsAltV,
   faArrowUp,
+  faPlus,
   faTrash
 } from '@fortawesome/free-solid-svg-icons';
 
@@ -12,7 +13,7 @@ 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(props) {

From 8e20b6dec21bbc4f5110197ccd05a83373e4ff33 Mon Sep 17 00:00:00 2001
From: Paul Chavard <git@paul.chavard.net>
Date: Wed, 3 Apr 2019 16:38:33 +0200
Subject: [PATCH 3/3] Make buttons bar wider

---
 .../new_design/procedure_champs_editor.scss           | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/new_design/procedure_champs_editor.scss b/app/assets/stylesheets/new_design/procedure_champs_editor.scss
index cd8d149b9..0e13037b2 100644
--- a/app/assets/stylesheets/new_design/procedure_champs_editor.scss
+++ b/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;
   }
 }