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(() => ( -