From 1880e5161b7ddee88bcd4ec49701f4baea33150a Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Wed, 3 Apr 2019 15:35:49 +0200 Subject: [PATCH 1/3] types_de_champs_editor: improve apparence of Move buttons --- .../new_design/procedure_champs_editor.scss | 14 +++++++++++++- .../TypesDeChampEditor/components/MoveButton.js | 17 +++++++---------- .../components/TypeDeChamp.js | 4 ++-- 3 files changed, 22 insertions(+), 13 deletions(-) diff --git a/app/assets/stylesheets/new_design/procedure_champs_editor.scss b/app/assets/stylesheets/new_design/procedure_champs_editor.scss index 917b2d561..0b7d10445 100644 --- a/app/assets/stylesheets/new_design/procedure_champs_editor.scss +++ b/app/assets/stylesheets/new_design/procedure_champs_editor.scss @@ -14,8 +14,20 @@ } .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; + } } &.type-header-section { diff --git a/app/javascript/components/TypesDeChampEditor/components/MoveButton.js b/app/javascript/components/TypesDeChampEditor/components/MoveButton.js index 3d70b034e..5650f9d32 100644 --- a/app/javascript/components/TypesDeChampEditor/components/MoveButton.js +++ b/app/javascript/components/TypesDeChampEditor/components/MoveButton.js @@ -2,19 +2,16 @@ import React from 'react'; import PropTypes from 'prop-types'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -function MoveButton({ isVisible, icon, onClick }) { - if (isVisible) { - return ( - - ); - } - return null; +function MoveButton({ isEnabled, icon, onClick }) { + return ( + + ); } MoveButton.propTypes = { - isVisible: PropTypes.bool, + isEnabled: PropTypes.bool, icon: PropTypes.string, onClick: PropTypes.func }; diff --git a/app/javascript/components/TypesDeChampEditor/components/TypeDeChamp.js b/app/javascript/components/TypesDeChampEditor/components/TypeDeChamp.js index e9c5f7bd3..2db28ebe0 100644 --- a/app/javascript/components/TypesDeChampEditor/components/TypeDeChamp.js +++ b/app/javascript/components/TypesDeChampEditor/components/TypeDeChamp.js @@ -76,7 +76,7 @@ const TypeDeChamp = sortableElement( >
dispatch({ @@ -86,7 +86,7 @@ const TypeDeChamp = sortableElement( } /> dispatch({ From d79fee7040d143904ec17d17634f8d37e4585663 Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Wed, 3 Apr 2019 14:18:31 +0000 Subject: [PATCH 2/3] types_de_champ_editor: improve the move handle --- app/assets/images/icons/move-handle.svg | 1 + app/assets/stylesheets/new_design/icons.scss | 4 ++ .../new_design/procedure_champs_editor.scss | 49 ++++++++++++++----- .../components/TypeDeChamp.js | 3 +- app/views/root/patron.html.haml | 1 + 5 files changed, 43 insertions(+), 15 deletions(-) create mode 100644 app/assets/images/icons/move-handle.svg diff --git a/app/assets/images/icons/move-handle.svg b/app/assets/images/icons/move-handle.svg new file mode 100644 index 000000000..1e809fbc4 --- /dev/null +++ b/app/assets/images/icons/move-handle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/stylesheets/new_design/icons.scss b/app/assets/stylesheets/new_design/icons.scss index 359641530..19c858ac7 100644 --- a/app/assets/stylesheets/new_design/icons.scss +++ b/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"); + } } diff --git a/app/assets/stylesheets/new_design/procedure_champs_editor.scss b/app/assets/stylesheets/new_design/procedure_champs_editor.scss index 0b7d10445..cd8d149b9 100644 --- a/app/assets/stylesheets/new_design/procedure_champs_editor.scss +++ b/app/assets/stylesheets/new_design/procedure_champs_editor.scss @@ -2,15 +2,27 @@ @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 { @@ -30,8 +42,24 @@ } } + .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; @@ -48,6 +76,7 @@ border-bottom: 1px solid $border-grey; &.head { + border-bottom: 1px solid #D4E5F5; padding-bottom: 10px; } } @@ -56,12 +85,6 @@ margin-left: 55px; } - &.head { - select { - margin-bottom: 0px; - } - } - &.delete { flex-grow: 1; display: flex; diff --git a/app/javascript/components/TypesDeChampEditor/components/TypeDeChamp.js b/app/javascript/components/TypesDeChampEditor/components/TypeDeChamp.js index 2db28ebe0..8d5bc0a4b 100644 --- a/app/javascript/components/TypesDeChampEditor/components/TypeDeChamp.js +++ b/app/javascript/components/TypesDeChampEditor/components/TypeDeChamp.js @@ -162,8 +162,7 @@ TypeDeChamp.propTypes = { }; const DragHandle = sortableHandle(() => ( -
- +
)); diff --git a/app/views/root/patron.html.haml b/app/views/root/patron.html.haml index 892a010a0..5d6967001 100644 --- a/app/views/root/patron.html.haml +++ b/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 From 253008e66679a847362fb0896895d3208759a704 Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Wed, 3 Apr 2019 15:15:35 +0000 Subject: [PATCH 3/3] types_de_champ_editor: add title to actions --- .../TypesDeChampEditor/components/MoveButton.js | 10 ++++++++-- .../TypesDeChampEditor/components/TypeDeChamp.js | 8 ++++++-- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/app/javascript/components/TypesDeChampEditor/components/MoveButton.js b/app/javascript/components/TypesDeChampEditor/components/MoveButton.js index 5650f9d32..5aa94f983 100644 --- a/app/javascript/components/TypesDeChampEditor/components/MoveButton.js +++ b/app/javascript/components/TypesDeChampEditor/components/MoveButton.js @@ -2,9 +2,14 @@ import React from 'react'; import PropTypes from 'prop-types'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -function MoveButton({ isEnabled, icon, onClick }) { +function MoveButton({ isEnabled, icon, title, onClick }) { return ( - ); @@ -13,6 +18,7 @@ function MoveButton({ isEnabled, icon, onClick }) { MoveButton.propTypes = { isEnabled: PropTypes.bool, icon: PropTypes.string, + title: PropTypes.string, onClick: PropTypes.func }; diff --git a/app/javascript/components/TypesDeChampEditor/components/TypeDeChamp.js b/app/javascript/components/TypesDeChampEditor/components/TypeDeChamp.js index 8d5bc0a4b..9038a1424 100644 --- a/app/javascript/components/TypesDeChampEditor/components/TypeDeChamp.js +++ b/app/javascript/components/TypesDeChampEditor/components/TypeDeChamp.js @@ -78,6 +78,7 @@ const TypeDeChamp = sortableElement( dispatch({ type: 'moveTypeDeChampUp', @@ -88,6 +89,7 @@ const TypeDeChamp = sortableElement( dispatch({ type: 'moveTypeDeChampDown', @@ -162,8 +164,10 @@ TypeDeChamp.propTypes = { }; const DragHandle = sortableHandle(() => ( -
-
+
)); function createUpdateHandler(dispatch, typeDeChamp, field, index, prefix) {