diff --git a/packages/component-wizard/src/components/AuthorList.js b/packages/component-wizard/src/components/AuthorList.js index 264be41596c24dddeb887612ec8b00031aef45cd..5b180b4c47a66fd579ee0e54a006d9efff5d71bb 100644 --- a/packages/component-wizard/src/components/AuthorList.js +++ b/packages/component-wizard/src/components/AuthorList.js @@ -1,7 +1,7 @@ import React from 'react' import { get } from 'lodash' import classnames from 'classnames' -import { TextField, Menu } from '@pubsweet/ui' +import { TextField, Menu, Icon } from '@pubsweet/ui' import { compose, withState, withHandlers } from 'recompose' import classes from './AuthorList.local.scss' @@ -67,6 +67,14 @@ const Label = ({ label, value }) => ( </div> ) +const DragHandle = () => ( + <div className={classnames(classes['drag-handle'])}> + <Icon>chevron_up</Icon> + <Icon size={16}>menu</Icon> + <Icon>chevron_down</Icon> + </div> +) + const Author = ({ firstName, middleName, @@ -74,24 +82,23 @@ const Author = ({ email, affiliation, isDragging, - children, + dragHandle, }) => ( <div className={classnames(classes.author)}> - <span className={classnames(classes.title)}>Author</span> - {!isDragging && ( + {dragHandle} + <div className={classnames(classes.container)}> + <span className={classnames(classes.title)}>Author</span> <div className={classnames(classes.row)}> <Label label="First name" value={firstName} /> <Label label="Middle name" value={middleName} /> <Label label="Last name" value={lastName} /> </div> - )} - {!isDragging && ( <div className={classnames(classes.row)}> <Label label="Email" value={email} /> <Label label="Affiliation" value={affiliation} /> <Label label="Affiliation" value={affiliation} /> </div> - )} + </div> </div> ) @@ -102,7 +109,12 @@ const Authors = ({ author, authors, moveAuthor, addAuthor, editAuthor }) => ( author={author} editAuthor={editAuthor} /> - <SortableList items={authors} listItem={Author} moveItem={moveAuthor} /> + <SortableList + dragHandle={DragHandle} + items={authors} + listItem={Author} + moveItem={moveAuthor} + /> </div> ) diff --git a/packages/component-wizard/src/components/AuthorList.local.scss b/packages/component-wizard/src/components/AuthorList.local.scss index 56e988847b48eb9bca459c8780897358f2a4ea4b..353731088f448cb5a66c83d9f2019b3f8da0c879 100644 --- a/packages/component-wizard/src/components/AuthorList.local.scss +++ b/packages/component-wizard/src/components/AuthorList.local.scss @@ -5,6 +5,13 @@ .author { border: 1px solid #444; + display: flex; + flex-direction: row; + margin-bottom: 10px; + + .container { + flex: 1; + } .title { font-size: 16px; @@ -43,3 +50,12 @@ font-weight: 500; } } + +.drag-handle { + align-items: center; + border-right: 1px solid #444; + cursor: move; + display: flex; + flex-direction: column; + justify-content: center; +} diff --git a/packages/component-wizard/src/components/SortableList.js b/packages/component-wizard/src/components/SortableList.js index 95453bec0f48eeadffd7157c433c5d63821bda35..8538168ccc451ef3e38ab73066202bcdb2fdf7e2 100644 --- a/packages/component-wizard/src/components/SortableList.js +++ b/packages/component-wizard/src/components/SortableList.js @@ -2,9 +2,6 @@ import React from 'react' import { compose } from 'recompose' import { findDOMNode } from 'react-dom' import { DragSource, DropTarget } from 'react-dnd' -import classnames from 'classnames' -import { Icon } from '@pubsweet/ui' -import classes from './SortableList.local.scss' const itemSource = { beginDrag(props) { @@ -41,33 +38,34 @@ const itemTarget = { }, } -const DragHandle = () => ( - <div className={classnames(classes['drag-handle'])}> - <Icon>chevron_up</Icon> - <Icon>chevron_down</Icon> - </div> -) - const Item = ({ connectDragPreview, connectDragSource, connectDropTarget, listItem, + dragHandle, ...rest }) => - connectDragPreview( - <div style={{ display: 'flex' }}> - {connectDragSource( - <div className={classnames(classes['drag-handle'])}> - <Icon>chevron_up</Icon> - <Icon>chevron_down</Icon> - </div>, - )} - {connectDropTarget( - <div style={{ flex: 1 }}>{React.createElement(listItem, rest)}</div>, - )} - </div>, - ) + dragHandle + ? connectDragPreview( + connectDropTarget( + <div style={{ flex: 1 }}> + {React.createElement(listItem, { + ...rest, + dragHandle: connectDragSource( + <div style={{ display: 'flex' }}> + {React.createElement(dragHandle)} + </div>, + ), + })} + </div>, + ), + ) + : connectDropTarget( + connectDragSource( + <div style={{ flex: 1 }}>{React.createElement(listItem, rest)}</div>, + ), + ) const DecoratedItem = compose( DropTarget('item', itemTarget, (connect, monitor) => ({ @@ -81,10 +79,11 @@ const DecoratedItem = compose( })), )(Item) -const SortableList = ({ items, moveItem, listItem }) => ( +const SortableList = ({ items, moveItem, listItem, dragHandle }) => ( <div> {items.map((item, i) => ( <DecoratedItem + dragHandle={dragHandle} index={i} key={item.name || Math.random()} listItem={listItem} diff --git a/packages/component-wizard/src/components/SortableList.local.scss b/packages/component-wizard/src/components/SortableList.local.scss deleted file mode 100644 index 41607ab0e84369690e3e1d24b2e2dccd241c0dda..0000000000000000000000000000000000000000 --- a/packages/component-wizard/src/components/SortableList.local.scss +++ /dev/null @@ -1,5 +0,0 @@ -.drag-handle { - display: flex; - flex-direction: column; - justify-content: center; -} diff --git a/packages/xpub-faraday/app/config/journal/submit-wizard.js b/packages/xpub-faraday/app/config/journal/submit-wizard.js index 9b138d17e0b2e4df06029f2f60ccd7221975ad4c..4a9fcf0d97b0462af3bf15b53558cac50c581722 100644 --- a/packages/xpub-faraday/app/config/journal/submit-wizard.js +++ b/packages/xpub-faraday/app/config/journal/submit-wizard.js @@ -113,7 +113,6 @@ export default { label: 'Conflict of interest details', validate: [required, min3Chars], }, - {}, ], }, { diff --git a/packages/xpub-faraday/config/default.js b/packages/xpub-faraday/config/default.js index ac142cf190c5a2949aeb6142ab589fbb04fa27e3..36f785c3693194e7e9c1d5098f5f287f6f687de2 100644 --- a/packages/xpub-faraday/config/default.js +++ b/packages/xpub-faraday/config/default.js @@ -24,7 +24,7 @@ module.exports = { 'pubsweet-client': { API_ENDPOINT: '/api', 'login-redirect': '/', - 'redux-log': true, + 'redux-log': false, theme: process.env.PUBSWEET_THEME, }, 'mail-transport': {