diff --git a/packages/component-faraday-ui/src/ManuscriptCard.js b/packages/component-faraday-ui/src/ManuscriptCard.js
index 8090c87170cd556126d4269f6e3bbc5ceb69177c..c0c9117eb40519fbe89598ac1778d3760766bb40 100644
--- a/packages/component-faraday-ui/src/ManuscriptCard.js
+++ b/packages/component-faraday-ui/src/ManuscriptCard.js
@@ -1,18 +1,26 @@
import React from 'react'
+import moment from 'moment'
import { get } from 'lodash'
import { H3, H4 } from '@pubsweet/ui'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
-import { compose, withHandlers, setDisplayName } from 'recompose'
+import { withJournal } from 'xpub-journal'
+import { compose, withHandlers, setDisplayName, withProps } from 'recompose'
-import Tag from './Tag'
-import Text from './Text'
-import Row from './gridItems/Row'
-import IconButton from './IconButton'
-import AuthorTagList from './AuthorTagList'
+import {
+ Tag,
+ Text,
+ Row,
+ IconButton,
+ AuthorTagList,
+ ReviewerBreakdown,
+} from './'
const ManuscriptCard = ({
+ fragment,
+ submitDate,
onCardClick,
+ manuscriptType = {},
fragment: {
authors = [],
id: fragmentId,
@@ -34,16 +42,23 @@ const ManuscriptCard = ({
</Row>
)}
<Row alignItems="center" justify="flex-start" mb={1}>
- <Text customId>{`ID ${customId}`}</Text>
- <Text secondary>Submitted on 03.07.2018</Text>
- <H4>{type}</H4>
- <Text secondary>{journal}</Text>
+ <Text customId mr={1}>{`ID ${customId}`}</Text>
+ <Text mr={3} secondary>
+ {submitDate}
+ </Text>
+ <H4>{manuscriptType.label || type}</H4>
+ <Text ml={1} secondary>
+ {journal}
+ </Text>
</Row>
<Row alignItems="center" justify="flex-start" mb={1}>
<H4>Handling editor</H4>
- <Text>{get(handlingEditor, 'name', 'No HE')}</Text>
- <H4>Reviewer Reports</H4>
- <Text>0 invited</Text>
+ <Text ml={1} mr={3}>
+ {get(handlingEditor, 'name', 'Unassigned')}
+ </Text>
+ {handlingEditor && (
+ <ReviewerBreakdown fragment={fragment} label="Reviewer Reports" />
+ )}
</Row>
</MainContainer>
<SideNavigation>
@@ -53,11 +68,20 @@ const ManuscriptCard = ({
)
export default compose(
+ withJournal,
withHandlers({
- onCardClick: ({ onClick, collection, fragment }) => () => {
+ onCardClick: ({ onClick, collection = {}, fragment = {} }) => () => {
onClick(collection, fragment)
},
}),
+ withProps(({ fragment: { submitted, metadata }, journal = {} }) => ({
+ submitDate: submitted
+ ? `Submitted on ${moment(submitted).format('DD.MM.YYYY')}`
+ : '',
+ manuscriptType: get(journal, 'manuscriptTypes', []).find(
+ t => t.value === get(metadata, 'type', ''),
+ ),
+ })),
setDisplayName('ManuscriptCard'),
)(ManuscriptCard)
@@ -74,32 +98,14 @@ const MainContainer = styled.div`
${H3} {
margin-bottom: 0;
}
-
- &:nth-child(3) {
- ${Text} {
- margin-right: ${th('gridUnit')};
- }
-
- ${H4} {
- margin-right: ${th('gridUnit')};
- }
- }
-
- &:last-child {
- ${H4} {
- margin-right: ${th('gridUnit')};
- }
-
- ${Text} {
- margin-right: calc(${th('gridUnit')} * 5);
- }
- }
}
`
const SideNavigation = styled.div`
align-items: center;
- background-color: ${th('colorBackgroundHue')};
+ background-color: ${th('colorBackgroundHue2')
+ ? th('colorBackgroundHue2')
+ : th('colorBackgroundHue')};
border-top-right-radius: ${th('borderRadius')};
border-bottom-right-radius: ${th('borderRadius')};
display: flex;
@@ -122,9 +128,5 @@ const Root = styled.div`
margin: 0;
margin-bottom: ${th('gridUnit')};
}
-
- ${H4} {
- margin: 0;
- }
`
// #endregion
diff --git a/packages/component-faraday-ui/src/ManuscriptCard.md b/packages/component-faraday-ui/src/ManuscriptCard.md
index 5be191d9d51a1e74905c95513e93eef6f6859ce9..9d44a5bd5c546db121d1b66ec2b0c958406acfc8 100644
--- a/packages/component-faraday-ui/src/ManuscriptCard.md
+++ b/packages/component-faraday-ui/src/ManuscriptCard.md
@@ -94,6 +94,7 @@ const collection = {
const fragment = {
authors,
created: new Date(),
+ submitted: new Date(),
metadata: {
journal: 'Awesomeness',
title: 'A very ok title with many authors',
diff --git a/packages/component-faraday-ui/src/ReviewerBreakdown.js b/packages/component-faraday-ui/src/ReviewerBreakdown.js
new file mode 100644
index 0000000000000000000000000000000000000000..5c0d5a9e52864acd01cf5f48c01e50cfd96fbd6c
--- /dev/null
+++ b/packages/component-faraday-ui/src/ReviewerBreakdown.js
@@ -0,0 +1,67 @@
+import React, { Fragment } from 'react'
+import { get } from 'lodash'
+import { H4 } from '@pubsweet/ui'
+import styled from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
+import { compose, withHandlers, withProps } from 'recompose'
+
+import { Text } from './'
+
+const ReviewerBreakdown = ({ getReportBreakdown }) => getReportBreakdown()
+
+const roleFilter = role => i => i.role === role
+const submittedFilter = r => r.review && r.review.submittedOn
+const acceptedFilter = i => i.hasAnswer && i.isAccepted
+const declinedFilter = i => i.hasAnswer && !i.isAccepted
+const reviewerReduce = (acc, r) => ({
+ ...acc,
+ accepted: acceptedFilter(r) ? acc.accepted + 1 : acc.accepted,
+ declined: declinedFilter(r) ? acc.declined + 1 : acc.declined,
+ submitted: submittedFilter(r) ? acc.submitted + 1 : acc.submitted,
+})
+
+export default compose(
+ withProps(({ fragment }) => ({
+ invitations: get(fragment, 'invitations', []),
+ recommendations: get(fragment, 'recommendations', []),
+ })),
+ withHandlers({
+ getReportBreakdown: ({
+ invitations,
+ recommendations,
+ label = '',
+ }) => () => {
+ const reviewerInvitations = invitations.filter(roleFilter('reviewer'))
+ const invitationsWithRecommendations = reviewerInvitations.map(r => ({
+ ...r,
+ review: recommendations.find(rec => rec.userId === r.userId),
+ }))
+ const report = invitationsWithRecommendations.reduce(reviewerReduce, {
+ accepted: 0,
+ declined: 0,
+ submitted: 0,
+ })
+ return (
+ <Fragment>
+ {!!label && <Label>{label}</Label>}
+ {reviewerInvitations.length ? (
+ <Text secondary>
+ {`${reviewerInvitations.length} invited, ${
+ report.accepted
+ } agreed, ${report.declined} declined, ${
+ report.submitted
+ } submitted`}
+ </Text>
+ ) : (
+ <Text secondary> {`${reviewerInvitations.length} invited`}</Text>
+ )}
+ </Fragment>
+ )
+ },
+ }),
+)(ReviewerBreakdown)
+
+const Label = styled(H4)`
+ display: inline-block;
+ margin-right: ${th('gridUnit')};
+`
diff --git a/packages/component-faraday-ui/src/ReviewerBreakdown.md b/packages/component-faraday-ui/src/ReviewerBreakdown.md
new file mode 100644
index 0000000000000000000000000000000000000000..d14eaaf2ce307b2ebb091b25cd220ac2084906ba
--- /dev/null
+++ b/packages/component-faraday-ui/src/ReviewerBreakdown.md
@@ -0,0 +1,92 @@
+Reviewer Breakdown Component
+
+```js
+const fragment = {
+ invitations: [
+ {
+ id: 'a69c1273-4073-4529-9e65-5424ad8034ea',
+ role: 'reviewer',
+ type: 'invitation',
+ userId: '9c79c3bf-ccba-4540-aad8-ce4609325826',
+ hasAnswer: false,
+ invitedOn: 1534506511008,
+ isAccepted: false,
+ respondedOn: null,
+ },
+ {
+ id: 'ca1c08bb-4da6-4cb4-972d-d16e3b66b884',
+ role: 'reviewer',
+ type: 'invitation',
+ userId: 'd3ab9a0b-d8e8-41e5-ab3b-72b13f84fba1',
+ hasAnswer: true,
+ invitedOn: 1534506542522,
+ isAccepted: true,
+ respondedOn: 1534506569565,
+ },
+ ],
+ recommendations: [
+ {
+ id: '87fb2c45-2685-47cc-9952-d58435ff8f3a',
+ userId: 'd3ab9a0b-d8e8-41e5-ab3b-72b13f84fba1',
+ comments: [
+ {
+ files: [],
+ public: true,
+ content: 'This is a great manuscript',
+ },
+ ],
+ createdOn: 1534506583815,
+ updatedOn: 1534506592527,
+ submittedOn: 1534506591684,
+ recommendation: 'publish',
+ recommendationType: 'review',
+ },
+ {
+ id: '9853453f-1049-4369-8543-1b812930430d',
+ userId: 'ede6770d-8dbf-4bf9-bbe2-98facfd0a114',
+ comments: [
+ {
+ public: true,
+ content: 'nice job',
+ },
+ {
+ public: false,
+ content: 'please publish this',
+ },
+ ],
+ createdOn: 1534506624583,
+ updatedOn: 1534506624583,
+ recommendation: 'publish',
+ recommendationType: 'editorRecommendation',
+ },
+ {
+ id: '64c5b596-fbfc-485c-9068-f3a58306efd7',
+ userId: '5b53da0d-3f88-4e94-b8f9-7eae6a754168',
+ createdOn: 1534506644873,
+ updatedOn: 1534506644873,
+ recommendation: 'publish',
+ recommendationType: 'editorRecommendation',
+ },
+ {
+ id: '3d43ff74-9a20-479d-a218-23bf8eac0b6a',
+ userId: '5b53da0d-3f88-4e94-b8f9-7eae6a754168',
+ createdOn: 1534506813446,
+ updatedOn: 1534506813446,
+ recommendation: 'publish',
+ recommendationType: 'editorRecommendation',
+ },
+ ],
+}
+;
+<ReviewerBreakdown fragment={fragment} />
+```
+
+Without invitations
+```js
+<ReviewerBreakdown fragment={{}} />
+```
+
+With label
+```js
+<ReviewerBreakdown fragment={{}} label='Reviewer Reports' />
+```
diff --git a/packages/component-faraday-ui/src/Tag.js b/packages/component-faraday-ui/src/Tag.js
index a21a88bfee05e5b980afaff052459ab4c101e985..87eb345a2475b5300a568efcfc676e0f22f64847 100644
--- a/packages/component-faraday-ui/src/Tag.js
+++ b/packages/component-faraday-ui/src/Tag.js
@@ -7,14 +7,16 @@ import { marginHelper } from './styledHelpers'
export default styled.div`
background-color: ${props =>
props.status ? th('tag.statusBackgroundColor') : th('tag.backgroundColor')};
- border-radius: ${th('borderRadius')};
+ border-radius: ${th('tag.borderRadius')
+ ? th('tag.borderRadius')
+ : th('borderRadius')};
color: ${th('tag.color')};
- font-family: ${th('fontInterface')};
+ font-family: ${th('fontHeading')};
font-size: ${th('tag.fontSize')};
+ font-weight: ${th('tag.fontWeight')};
padding: calc(${th('gridUnit')} / 4) calc(${th('gridUnit')} / 2);
text-align: center;
vertical-align: baseline;
- text-transform: uppercase;
width: fit-content;
${marginHelper};
diff --git a/packages/component-faraday-ui/src/index.js b/packages/component-faraday-ui/src/index.js
index 1ffa333d39bfccf3161563305b78b92356e828c6..1d7348d285e38ec23c03fbe4fbf9aea71ea62fb7 100644
--- a/packages/component-faraday-ui/src/index.js
+++ b/packages/component-faraday-ui/src/index.js
@@ -13,12 +13,15 @@ export { default as IconButton } from './IconButton'
export { default as Label } from './Label'
export { default as Logo } from './Logo'
export { default as ManuscriptCard } from './ManuscriptCard'
+export { default as ReviewerBreakdown } from './ReviewerBreakdown'
export { default as PersonInfo } from './PersonInfo'
export { default as SortableList } from './SortableList'
export { default as Tag } from './Tag'
export { default as Text } from './Text'
export { default as WizardAuthors } from './WizardAuthors'
+export * from './styledHelpers'
+
// modals
export * from './modals'
export * from './gridItems'
diff --git a/packages/component-faraday-ui/src/styledHelpers.js b/packages/component-faraday-ui/src/styledHelpers.js
index 2bdd97529c230d6bb12f4cb44c37020cd3df14d3..5d1f75bbc7e4eb67862b365eb8a3d291713f4315 100644
--- a/packages/component-faraday-ui/src/styledHelpers.js
+++ b/packages/component-faraday-ui/src/styledHelpers.js
@@ -61,6 +61,10 @@ export const positionHelper = css`
has(props, 'right') ? `${get(props, 'right')}px` : 'unset'};
`
+export const displayHelper = css`
+ display: ${({ display }) => display || 'initial'};
+`
+
export const radiusHelpers = props => {
const borderTop = props.isFirst
? css`
diff --git a/packages/components-faraday/src/components/Dashboard/Dashboard.js b/packages/components-faraday/src/components/Dashboard/Dashboard.js
index cfb41155d730777d740f3e0452a209e90adddd30..259aad9b59165767076ce0ea77fc9fd94ad68900 100644
--- a/packages/components-faraday/src/components/Dashboard/Dashboard.js
+++ b/packages/components-faraday/src/components/Dashboard/Dashboard.js
@@ -16,14 +16,14 @@ const Dashboard = ({
}) => (
<Fragment>
<Row alignItems="center" justify="space-between">
- <H1>Dashboard</H1>
+ <H1 mb={1}>Dashboard</H1>
<Button
data-test="new-manuscript"
disabled={!canCreateDraft}
onClick={createDraftSubmission}
primary
>
- New
+ Submit
</Button>
</Row>
<DashboardFilters
@@ -40,12 +40,3 @@ export default compose(
dashboardItems: filterItems(dashboard.all),
})),
)(Dashboard)
-
-// #region styles
-// const Root = styled.div`
-// display: flex;
-// flex-direction: column;
-// overflow: auto;
-// padding: 0 calc(${th('gridUnit')} * 17);
-// `
-// #endregion
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardFilters.js b/packages/components-faraday/src/components/Dashboard/DashboardFilters.js
index 37ae0a03390efaa686bdd62ea6dc66baf308045e..aea159fd763b3196a879c27a6a9b279b3569ec5b 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardFilters.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardFilters.js
@@ -8,7 +8,7 @@ const DashboardFilters = ({
changeFilterValue,
getDefaultFilterValue,
}) => (
- <Row alignItems="flex-end" justify="flex-start">
+ <Row alignItems="flex-end" justify="flex-start" mb={1}>
<Text mr={1} pb={1} secondary>
Filters
</Text>
@@ -22,7 +22,7 @@ const DashboardFilters = ({
/>
</Item>
<Item flex={0} vertical>
- <Label>Sort</Label>
+ <Label>Order</Label>
<Menu
inline
onChange={changeFilterValue('order')}
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardItems.js b/packages/components-faraday/src/components/Dashboard/DashboardItems.js
index 9ad6f1386f0d8e79cbfc167162c191b8408f4875..a978c0b0e709c3ecbb9911695473f029a5a48515 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardItems.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardItems.js
@@ -1,6 +1,7 @@
-import React, { Fragment } from 'react'
+import React from 'react'
import { H3 } from '@pubsweet/ui'
import { get, has } from 'lodash'
+import styled from 'styled-components'
import { withRouter } from 'react-router-dom'
import { ManuscriptCard, Row } from 'pubsweet-component-faraday-ui'
import { compose, setDisplayName, withHandlers, withProps } from 'recompose'
@@ -10,7 +11,7 @@ import withVersion from './withVersion'
const DashboardItem = withVersion(ManuscriptCard)
const DashboardItems = ({ onClick, list, deleteProject, listView = true }) => (
- <Fragment>
+ <Root>
{!list.length ? (
<Row justify="center" mt={4}>
<H3>Nothing to do at the moment. Please upload a manuscript.</H3>
@@ -24,12 +25,12 @@ const DashboardItems = ({ onClick, list, deleteProject, listView = true }) => (
/>
))
)}
- </Fragment>
+ </Root>
)
export default compose(
withRouter,
- withProps(({ collection, fragment }) => ({
+ withProps(({ collection = {}, fragment = {} }) => ({
hasDetails: get(collection, 'status', 'draft') !== 'draft',
isNotSubmitted:
get(collection, 'status', 'draft') === 'draft' ||
@@ -53,3 +54,13 @@ export default compose(
}),
setDisplayName('DashboardItems'),
)(DashboardItems)
+
+// #region styles
+const Root = styled.div`
+ height: calc(100vh - 200px);
+ overflow-y: auto;
+ div[open] {
+ width: auto;
+ }
+`
+// #endregion
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardPage.js b/packages/components-faraday/src/components/Dashboard/DashboardPage.js
index dce45132340db9e88b54fd63e0f61dc1fada9446..1e9e2825c054b65a057e624b72cc6e839fb8e5d4 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardPage.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardPage.js
@@ -16,7 +16,7 @@ import {
import { Dashboard } from './'
import { getHandlingEditors } from '../../redux/editors'
-import { priorityFilter, importanceSort, withFiltersHOC } from '../Filters'
+import { priorityFilter, orderFilter, withFiltersHOC } from '../Filters'
export default compose(
ConnectPage(() => [actions.getCollections(), actions.getUsers()]),
@@ -69,7 +69,7 @@ export default compose(
withJournal,
withFiltersHOC({
priority: priorityFilter,
- order: importanceSort,
+ order: orderFilter,
}),
withContext(
{
diff --git a/packages/components-faraday/src/components/Filters/index.js b/packages/components-faraday/src/components/Filters/index.js
index cec651407a1906360e0be3b88876740fde6ba1aa..35cfe518a5437bbb68dfc6a88ad2cc2bc25cf266 100644
--- a/packages/components-faraday/src/components/Filters/index.js
+++ b/packages/components-faraday/src/components/Filters/index.js
@@ -4,3 +4,4 @@ export { utils }
export { default as withFiltersHOC } from './withFilters'
export { default as priorityFilter } from './priorityFilter'
export { default as importanceSort } from './importanceSort'
+export { default as orderFilter } from './orderFilter'
diff --git a/packages/components-faraday/src/components/Filters/orderFilter.js b/packages/components-faraday/src/components/Filters/orderFilter.js
new file mode 100644
index 0000000000000000000000000000000000000000..ef98a27d9e7efba8233a27e4496a66b2077bf010
--- /dev/null
+++ b/packages/components-faraday/src/components/Filters/orderFilter.js
@@ -0,0 +1,17 @@
+const options = [
+ { label: 'Newest first', value: 'asc' },
+ { label: 'Oldest first', value: 'desc' },
+]
+
+const sortFn = orderValue => (i1, i2) => {
+ if (orderValue === 'desc') {
+ return i1.created - i2.created
+ }
+ return i2.created - i1.created
+}
+
+export default {
+ sortFn,
+ options,
+ type: 'order',
+}
diff --git a/packages/hindawi-theme/src/elements/Heading.js b/packages/hindawi-theme/src/elements/Heading.js
index ec5cf96c3b1e94733526d29f793493c288e09b6c..1d93c1651eb67e206a509a53f35beb53cd7af96b 100644
--- a/packages/hindawi-theme/src/elements/Heading.js
+++ b/packages/hindawi-theme/src/elements/Heading.js
@@ -1,17 +1,23 @@
import { css } from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
+import { marginHelper, displayHelper } from 'pubsweet-component-faraday-ui'
export default {
H1: css`
color: ${th('heading.h1Color')};
+ ${marginHelper};
`,
H2: css`
color: ${th('heading.h2Color')};
+ ${marginHelper};
`,
H3: css`
color: ${th('heading.h3Color')};
+ ${marginHelper};
`,
H4: css`
color: ${th('heading.h4Color')};
+ ${marginHelper};
+ ${displayHelper};
`,
}
diff --git a/packages/hindawi-theme/src/elements/Menu.js b/packages/hindawi-theme/src/elements/Menu.js
index 101824db4f87b97bc0f89821e6698e6960fbfc9b..da76d850844491a0803f43b877a468609bd36143 100644
--- a/packages/hindawi-theme/src/elements/Menu.js
+++ b/packages/hindawi-theme/src/elements/Menu.js
@@ -5,6 +5,7 @@ export default {
Main: css`
background: ${th('colorBackgroundHue')};
height: calc(${th('gridUnit')} * 4);
+ border-radius: ${th('borderRadius')};
min-width: 120px;
`,
Value: css`
@@ -17,6 +18,8 @@ export default {
`,
Placeholder: css`
color: ${th('colorText')};
+ line-height: ${th('gridUnit')};
+ padding: 0 ${th('gridUnit')};
`,
Opener: css`
border-color: ${props =>
diff --git a/packages/hindawi-theme/src/index.js b/packages/hindawi-theme/src/index.js
index 0de491e88b4c801667a2e0cc575b07df1353677a..c45fe692ad1850f36500b892239819fc67cbc7d3 100644
--- a/packages/hindawi-theme/src/index.js
+++ b/packages/hindawi-theme/src/index.js
@@ -19,6 +19,8 @@ import {
injectGlobal`
body {
height: 100vh;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
#root, #root > div {
@@ -34,6 +36,7 @@ const hindawiTheme = {
colorFurniture: '#DBDBDB',
colorBorder: '#DBDBDB',
colorBackgroundHue: '#FFFFFF',
+ colorBackgroundHue2: '#F6F6F6',
colorSuccess: '#63A945',
colorError: '#FC6A4B',
colorText: '#242424',
@@ -113,9 +116,10 @@ const hindawiTheme = {
tag: {
color: '#ffffff',
fontSize: '12px',
- fontWeight: 'bold',
+ fontWeight: '600',
backgroundColor: '#586971',
statusBackgroundColor: '#dbafc1',
+ borderRadius: '2px',
},
dashboardCard: {
diff --git a/packages/xpub-faraday/app/FaradayApp.js b/packages/xpub-faraday/app/FaradayApp.js
index f78e91ef7b77edebef2fd424d9568acac8d9d0f0..1ef508a8c807911d838522e92a2e169e9b746820 100644
--- a/packages/xpub-faraday/app/FaradayApp.js
+++ b/packages/xpub-faraday/app/FaradayApp.js
@@ -46,7 +46,7 @@ export default compose(
// #region styles
const Root = styled.div`
height: 100%;
- overflow-y: scroll;
+ overflow-y: auto;
div[open] {
width: auto;
}
@@ -55,8 +55,8 @@ const Root = styled.div`
const MainContainer = styled.div`
display: flex;
flex-direction: column;
- overflow-y: scroll;
+ overflow-y: auto;
padding: 0 calc(${th('gridUnit')} * 17);
- padding-top: ${th('appBar.height')};
+ padding-top: calc(${th('appBar.height')} + ${th('gridUnit')} * 3 )};
`
// #endregion