Merge pull request #3740 from betagouv/dev

2019-04-03-03

app/assets/images/icons/move-handle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-prefix="fas" data-icon="arrows-alt-v" class="svg-inline--fa fa-arrows-alt-v fa-w-8 fa-lg" width="32" height="32"><path d="M19.04 20.763h-1.656v-9.526h1.656c.768 0 2.494.242.61-1.6l-3.094-3.362a.815.815 0 0 0-1.22 0l-3.093 3.361c-1.643 1.831-.159 1.6.61 1.6h1.655v9.527h-1.655c-.769 0-2.235-.244-.61 1.6l3.093 3.362a.815.815 0 0 0 1.22 0l3.094-3.361c1.884-1.795.158-1.6-.61-1.6z" fill="currentColor"/><rect width="9" height="2" y="11" ry=".402"/><rect ry=".402" y="19" height="2" width="9"/><rect width="9" height="2" y="15" ry=".402"/><rect ry=".402" y="11" x="23" height="2" width="9"/><rect width="9" height="2" x="23" y="19" ry=".402"/><rect ry=".402" y="15" x="23" height="2" width="9"/></svg>

app/assets/stylesheets/new_design/icons.scss

@@ -131,4 +131,8 @@
   &.delete {
     background-image: image-url("icons/trash.svg");
   }
+
+  &.move-handle {
+    background-image: image-url("icons/move-handle.svg");
+  }
 }

app/assets/stylesheets/new_design/procedure_champs_editor.scss

@@ -2,24 +2,64 @@
 @import "constants";
 
 .type-de-champ {
-  background-color: $white;
+  width: 100%;
+  background-color: #FAFDFF;
   border: 1px solid $border-grey;
   border-radius: 5px;
-  margin-bottom: 10px;
-  width: 100%;
+  margin-bottom: $default-padding * 2;
+  box-shadow: 0px 2px 4px -4px;
+  overflow: hidden;
 
-  .handle {
-    cursor: ns-resize;
-    margin-right: 10px;
+  .handle.icon {
+    width: 32px;
+    height: 32px;
+    background-size: 32px;
+    margin-left: 7px;
+    margin-right: 16px;
+    align-self: center;
+    cursor: grab;
+    opacity: 0.8;
+
+    &:hover {
+      opacity: 0.4;
+    }
   }
 
   .move {
+    height: 44px;
+    border-radius: 25px;
     margin-right: 10px;
-    margin-bottom: 5px;
+
+    &:first-of-type {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      margin-bottom: -1px;
+    }
+
+    &:last-of-type {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+  }
+
+  .head {
+    background-color: #D9ECFF;
+
+    select {
+      margin-bottom: 0px;
+    }
   }
 
   &.type-header-section {
-    background-color: $blue;
+    &,
+    .head {
+      background-color: $blue;
+    }
+
+    .head .icon {
+      filter: contrast(0%) brightness(200%);
+      opacity: 0.9;
+    }
 
     label {
       color: $light-grey;
@@ -36,6 +76,7 @@
       border-bottom: 1px solid $border-grey;
 
       &.head {
+        border-bottom: 1px solid #D4E5F5;
         padding-bottom: 10px;
       }
     }
@@ -44,12 +85,6 @@
       margin-left: 55px;
     }
 
-    &.head {
-      select {
-        margin-bottom: 0px;
-      }
-    }
-
     &.delete {
       flex-grow: 1;
       display: flex;
@@ -88,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/MoveButton.js

@@ -2,20 +2,23 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-function MoveButton({ isVisible, icon, onClick }) {
-  if (isVisible) {
-    return (
-      <button className="button small icon-only move" onClick={onClick}>
-        <FontAwesomeIcon icon={icon} />
-      </button>
-    );
-  }
-  return null;
+function MoveButton({ isEnabled, icon, title, onClick }) {
+  return (
+    <button
+      className="button small icon-only move"
+      disabled={!isEnabled}
+      title={title}
+      onClick={onClick}
+    >
+      <FontAwesomeIcon icon={icon} />
+    </button>
+  );
 }
 
 MoveButton.propTypes = {
-  isVisible: PropTypes.bool,
+  isEnabled: PropTypes.bool,
   icon: PropTypes.string,
+  title: PropTypes.string,
   onClick: PropTypes.func
 };
 

app/javascript/components/TypesDeChampEditor/components/TypeDeChamp.js

@@ -76,8 +76,9 @@ const TypeDeChamp = sortableElement(
         >
           <div className="flex column justify-start">
             <MoveButton
-              isVisible={!isFirstItem}
+              isEnabled={!isFirstItem}
               icon="arrow-up"
+              title="Déplacer le champ vers le haut"
               onClick={() =>
                 dispatch({
                   type: 'moveTypeDeChampUp',
@@ -86,8 +87,9 @@ const TypeDeChamp = sortableElement(
               }
             />
             <MoveButton
-              isVisible={!isLastItem}
+              isEnabled={!isLastItem}
               icon="arrow-down"
+              title="Déplacer le champ vers le bas"
               onClick={() =>
                 dispatch({
                   type: 'moveTypeDeChampDown',
@@ -162,9 +164,10 @@ TypeDeChamp.propTypes = {
 };
 
 const DragHandle = sortableHandle(() => (
-  <div className="handle button small icon-only">
-    <FontAwesomeIcon icon="arrows-alt-v" size="lg" />
-  </div>
+  <div
+    className="handle small icon-only icon move-handle"
+    title="Déplacer le champ vers le haut ou vers le bas"
+  />
 ));
 
 function createUpdateHandler(dispatch, typeDeChamp, field, index, prefix) {

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
     };
   }
 

app/views/root/patron.html.haml

@@ -29,6 +29,7 @@
     %span.icon.phone
     %span.icon.clock
     %span.icon.download
+    %span.icon.move-handle
     %span.icon.frown
     %span.icon.meh
     %span.icon.smile