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/6] 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/6] 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/6] 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) { From a197459e4dfa6065357eaa0b05e63b41b4c88f41 Mon Sep 17 00:00:00 2001 From: Paul Chavard Date: Wed, 3 Apr 2019 16:37:37 +0200 Subject: [PATCH 4/6] 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 Date: Wed, 3 Apr 2019 16:38:08 +0200 Subject: [PATCH 5/6] 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({ }) } > + +    {addChampLabel(state.isAnnotation)}
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 }) { }) } > + +    {addChampLabel(state.isAnnotation)}