diff --git a/packages/components-faraday/package.json b/packages/components-faraday/package.json
index 4b196127c02f3326636241b824e8029e4f0ffb82..0c9e9ac697ea51bd8cd203f8135fba00cc3b33d8 100644
--- a/packages/components-faraday/package.json
+++ b/packages/components-faraday/package.json
@@ -11,6 +11,7 @@
"react-dnd": "^2.5.4",
"react-dnd-html5-backend": "^2.5.4",
"react-dom": "^15.6.1",
+ "react-modal": "^3.2.1",
"react-router-dom": "^4.2.2",
"recompose": "^0.26.0",
"redux": "^3.6.0",
diff --git a/packages/components-faraday/src/components/Dashboard/AbstractModal.js b/packages/components-faraday/src/components/Dashboard/AbstractModal.js
new file mode 100644
index 0000000000000000000000000000000000000000..4692fa72a9d4ff98fb694b983e78ac16de21d804
--- /dev/null
+++ b/packages/components-faraday/src/components/Dashboard/AbstractModal.js
@@ -0,0 +1,101 @@
+import React from 'react'
+import { get } from 'lodash'
+import Modal from 'react-modal'
+import { Icon } from '@pubsweet/ui'
+import styled from 'styled-components'
+
+const customStyles = {
+ overlay: {
+ position: 'fixed',
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ backgroundColor: 'rgba(102, 112, 128, 0.8)',
+ },
+ content: {
+ top: '50%',
+ left: '50%',
+ right: 'auto',
+ bottom: 'auto',
+ marginRight: '-50%',
+ transform: 'translate(-50%, -50%)',
+ width: 600,
+ maxHeight: 500,
+ padding: 0,
+ overflowY: 'auto',
+ opacity: 1,
+ backgroundColor: 'transparent',
+ border: 'none',
+ borderRadius: 0,
+ },
+}
+
+// #region styled-components
+const Root = styled.div`
+ background-color: #fff;
+ padding: 50px 32px 32px 32px;
+ border: 1px solid #667080;
+ position: relative;
+`
+
+const Title = styled.span`
+ font-family: Helvetica;
+ font-size: 18px;
+ text-align: left;
+ color: #667080;
+`
+
+const Subtitle = styled.span`
+ color: #667080;
+ font-family: Helvetica;
+ font-size: 14px;
+ font-weight: bold;
+ line-height: 1.57;
+ margin-bottom: 8px;
+ text-align: left;
+`
+
+const Content = styled.div`
+ color: #667080;
+ font-family: Helvetica;
+ font-size: 14px;
+ line-height: 1.57;
+ margin-top: 10px;
+ text-align: left;
+`
+
+const CloseIcon = styled.div`
+ cursor: pointer;
+ position: absolute;
+ top: 5px;
+ right: 5px;
+`
+// #endregion
+
+const AbstractModal = ({ abstractModal, onClose }) => {
+ const isOpen = !!abstractModal
+ return (
+ <Modal
+ isOpen={isOpen}
+ onRequestClose={onClose}
+ shouldCloseOnOverlayClick
+ style={customStyles}
+ >
+ <Root>
+ <CloseIcon onClick={onClose}>
+ <Icon color="#667080">x</Icon>
+ </CloseIcon>
+ <Title
+ dangerouslySetInnerHTML={{ __html: get(abstractModal, 'title') }}
+ />
+ <Subtitle>Abstract</Subtitle>
+ <Content
+ dangerouslySetInnerHTML={{ __html: get(abstractModal, 'abstract') }}
+ />
+ </Root>
+ </Modal>
+ )
+}
+
+export default AbstractModal
diff --git a/packages/components-faraday/src/components/Dashboard/Dashboard.js b/packages/components-faraday/src/components/Dashboard/Dashboard.js
index 653c50351f02e4aa076cd4d9cbf2f3777c924a38..5ca2c0e155ebd558cd51fdad43f95bc3e024f378 100644
--- a/packages/components-faraday/src/components/Dashboard/Dashboard.js
+++ b/packages/components-faraday/src/components/Dashboard/Dashboard.js
@@ -1,10 +1,10 @@
import React from 'react'
-import { get, isEmpty } from 'lodash'
+import { get } from 'lodash'
import { Button } from '@pubsweet/ui'
-import { connect } from 'react-redux'
import { compose, withHandlers } from 'recompose'
import classes from './Dashboard.local.scss'
+import AbstractModal from './AbstractModal'
import DashboardItems from './DashboardItems'
import DashboardFilters from './DashboardFilters'
@@ -45,25 +45,11 @@ const Dashboard = ({
list={getItems()}
listView={listView}
/>
- {!isEmpty(abstractModal) && (
- <div className={classes.modal}>
- <div className={classes.modalContent}>
- <div
- className={classes.modalText}
- dangerouslySetInnerHTML={{ __html: abstractModal }} // eslint-disable-line
- />
- <Button onClick={setModal()}>Close</Button>
- </div>
- </div>
- )}
+ <AbstractModal abstractModal={abstractModal} onClose={setModal()} />
</div>
)
export default compose(
- connect(state => ({
- filters: state.filters.filter,
- sortOrder: state.filters.sortValue,
- })),
withHandlers({
getItems: ({
filters,
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardCard.js b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
index 970ce57a3c3aff705e9266b90e5a6d67b030b926..75868581a808f097bb0782eb252719632239e140 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardCard.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
@@ -1,7 +1,8 @@
import React from 'react'
import PropTypes from 'prop-types'
-import { get, isEmpty } from 'lodash'
import classnames from 'classnames'
+import { get, isEmpty } from 'lodash'
+import styled from 'styled-components'
import { Button, Icon } from '@pubsweet/ui'
import { compose, getContext } from 'recompose'
@@ -23,6 +24,7 @@ const DashboardCard = ({
const status = get(project, 'status') || 'Draft'
const hasFiles = !isEmpty(files)
const abstract = get(version, 'metadata.abstract')
+ const metadata = get(version, 'metadata')
return (
<div className={classes.card}>
@@ -107,10 +109,33 @@ const DashboardCard = ({
</div>
</div>
)}
+ {abstract && (
+ <ViewAbstractContainer onClick={setModal(metadata)}>
+ <Icon color="#667080" size={18}>
+ eye
+ </Icon>
+ <span>View Abstract</span>
+ </ViewAbstractContainer>
+ )}
</div>
)
}
+const ViewAbstractContainer = styled.div`
+ align-items: center;
+ cursor: pointer;
+ display: flex;
+
+ & > span {
+ color: #667080;
+ font-family: Helvetica;
+ font-size: 14px;
+ margin-left: 8px;
+ text-align: left;
+ text-decoration: underline;
+ }
+`
+
export default compose(
getContext({
setModal: PropTypes.func,
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardFilters.js b/packages/components-faraday/src/components/Dashboard/DashboardFilters.js
index 78241263936811ee2b9ce54aa7faddf3607314e3..3a2ae74005be770013c39138013a188174111c5b 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardFilters.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardFilters.js
@@ -1,10 +1,8 @@
import React from 'react'
-import { connect } from 'react-redux'
import { Icon, Menu } from '@pubsweet/ui'
import { compose, withHandlers } from 'recompose'
import classes from './Dashboard.local.scss'
-import { changeFilter, changeSort } from './redux/filters'
const sortOptions = [
{ label: 'Newest first', value: 'newest' },
@@ -54,7 +52,6 @@ const DashboardFilters = ({
)
export default compose(
- connect(null, { changeFilter, changeSort }),
withHandlers({
changeFilter: ({ changeFilter }) => filterKey => value => {
changeFilter(filterKey, value)
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardPage.js b/packages/components-faraday/src/components/Dashboard/DashboardPage.js
index 36a4a7adf345d5fcd95cdbeb708ecc843853c991..0e5c23cc67e928b3ecb0947c9fa0f18526cc5d8e 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardPage.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardPage.js
@@ -19,17 +19,16 @@ export default compose(
actions.getUsers(),
]),
withState('listView', 'changeView', true),
- withState('abstractModal', 'setAbstractModal', ''),
+ withState('abstractModal', 'setAbstractModal', null),
withHandlers({
changeViewMode: ({ changeView }) => () => changeView(listView => !listView),
- setModal: ({ setAbstractModal }) => abstract => () => {
- setAbstractModal(abstract)
+ setModal: ({ setAbstractModal }) => (metadata = null) => () => {
+ setAbstractModal(metadata)
},
}),
connect(
state => {
- const { collections } = state
- const { conversion } = state
+ const { collections, conversion } = state
const currentUser = selectCurrentUser(state)
const sortedCollections = newestFirst(collections)
@@ -49,7 +48,6 @@ export default compose(
),
all: sortedCollections,
}
-
return { collections, conversion, currentUser, dashboard }
},
(dispatch, { history }) => ({
@@ -95,7 +93,7 @@ export default compose(
}),
withContext(
{
- abstractModal: PropTypes.string,
+ abstractModal: PropTypes.object,
setModal: PropTypes.func,
},
({ abstractModal, setModal }) => ({
diff --git a/packages/components-faraday/src/components/Dashboard/redux/filters.js b/packages/components-faraday/src/components/Dashboard/redux/filters.js
deleted file mode 100644
index e50016723b70f39788b05687f18390c02f650c68..0000000000000000000000000000000000000000
--- a/packages/components-faraday/src/components/Dashboard/redux/filters.js
+++ /dev/null
@@ -1,41 +0,0 @@
-const initialState = {
- filter: {
- status: 'all',
- owner: 'all',
- },
- sortValue: 'newest',
-}
-
-const CHANGE_FILTER = 'filters/CHANGE_FILTER'
-const CHANGE_SORT = 'filters/CHANGE_SORT'
-
-export const changeFilter = (filterKey, value) => ({
- type: CHANGE_FILTER,
- filterKey,
- value,
-})
-
-export const changeSort = value => ({
- type: CHANGE_SORT,
- value,
-})
-
-export default (state = initialState, action) => {
- switch (action.type) {
- case CHANGE_FILTER:
- return {
- ...state,
- filter: {
- ...state.filter,
- [action.filterKey]: action.value,
- },
- }
- case CHANGE_SORT:
- return {
- ...state,
- sortValue: action.value,
- }
- default:
- return state
- }
-}
diff --git a/packages/components-faraday/src/components/Dashboard/redux/index.js b/packages/components-faraday/src/components/Dashboard/redux/index.js
deleted file mode 100644
index b5b1e82dc5649181aeaeb9dbcf8286a573a4b33a..0000000000000000000000000000000000000000
--- a/packages/components-faraday/src/components/Dashboard/redux/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default as filters } from './filters'
diff --git a/packages/components-faraday/src/index.js b/packages/components-faraday/src/index.js
index 3c0ed73cabca75cdc957af41d97563815a4e1498..b417ecc0a0cfaa39581f13b4fd9fa74a6a82efe3 100644
--- a/packages/components-faraday/src/index.js
+++ b/packages/components-faraday/src/index.js
@@ -4,7 +4,6 @@ module.exports = {
reducers: {
authors: () => require('./redux/authors').default,
files: () => require('./redux/files').default,
- filters: () => require('./components/Dashboard/redux/filters').default,
},
},
}
diff --git a/yarn.lock b/yarn.lock
index 76654745dcb4355df780499d9a0f89f31cf8640e..e434fdc51875637af9236f6e59916aa23ffa2c46 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3585,6 +3585,10 @@ execall@^1.0.0:
dependencies:
clone-regexp "^1.0.0"
+exenv@^1.2.0:
+ version "1.2.2"
+ resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
+
exit-hook@^1.0.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
@@ -8856,6 +8860,14 @@ react-input-autosize@^2.1.0:
dependencies:
prop-types "^15.5.8"
+react-modal@^3.2.1:
+ version "3.2.1"
+ resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.2.1.tgz#fa8f76aed55b67c22dcf1a1c15b05c8d11f18afe"
+ dependencies:
+ exenv "^1.2.0"
+ prop-types "^15.5.10"
+ warning "^3.0.0"
+
react-moment@^0.6.1:
version "0.6.8"
resolved "https://registry.yarnpkg.com/react-moment/-/react-moment-0.6.8.tgz#8612a90f3c8afec26fef6844806d84b9d9e3b212"