Merge pull request #3735 from betagouv/improve-editeur-de-champ-css

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

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;
+  margin-bottom: $default-padding * 2;
-  width: 100%;
+  box-shadow: 0px 2px 4px -4px;
+  overflow: hidden;
 
-  .handle {
+  .handle.icon {
-    cursor: ns-resize;
+    width: 32px;
-    margin-right: 10px;
+    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;

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 }) {
+function MoveButton({ isEnabled, icon, title, onClick }) {
-  if (isVisible) {
+  return (
-    return (
+    <button
-      <button className="button small icon-only move" onClick={onClick}>
+      className="button small icon-only move"
-        <FontAwesomeIcon icon={icon} />
+      disabled={!isEnabled}
-      </button>
+      title={title}
-    );
+      onClick={onClick}
-  }
+    >
-  return null;
+      <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">
+  <div
-    <FontAwesomeIcon icon="arrows-alt-v" size="lg" />
+    className="handle small icon-only icon move-handle"
-  </div>
+    title="Déplacer le champ vers le haut ou vers le bas"
+  />
 ));
 
 function createUpdateHandler(dispatch, typeDeChamp, field, index, prefix) {

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