From 97a83b9b21b3d83063790ba06b6fcb7a410c2581 Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <hamelers@ebi.ac.uk>
Date: Wed, 30 Jan 2019 13:20:51 +0000
Subject: [PATCH] style changes for submission review page
---
app/components/FileTable.jsx | 8 +-
app/components/dashboard/DashboardList.jsx | 44 +++++++----
.../submission-wizard/SubmitForm.jsx | 23 +++++-
.../submission-wizard/SubmitPage.jsx | 73 +++++++++++--------
app/components/ui/atoms/PreviewPage.jsx | 9 +--
app/components/ui/molecules/Notification.jsx | 6 +-
6 files changed, 110 insertions(+), 53 deletions(-)
diff --git a/app/components/FileTable.jsx b/app/components/FileTable.jsx
index 0d8887807..2d3f28ae4 100755
--- a/app/components/FileTable.jsx
+++ b/app/components/FileTable.jsx
@@ -1,6 +1,6 @@
import React from 'react'
import styled from 'styled-components'
-import { th } from '@pubsweet/ui-toolkit'
+import { th, darken } from '@pubsweet/ui-toolkit'
import { Table as DefaultTable } from './ui'
import FilePreview from './FilePreview'
@@ -48,6 +48,9 @@ export const fileSort = files =>
const Table = styled(DefaultTable)`
width: 100%;
border-style: hidden;
+ tr:nth-child(odd) {
+ background-color: ${darken('colorBackground', 3)};
+ }
td,
th {
&:first-child {
@@ -65,6 +68,9 @@ const Table = styled(DefaultTable)`
}
}
}
+ th {
+ background-color: ${darken('colorBackground', 7)};
+ }
@media screen and (max-width: 1050px) {
td {
hyphens: auto;
diff --git a/app/components/dashboard/DashboardList.jsx b/app/components/dashboard/DashboardList.jsx
index 050dfa6c0..d28639bab 100644
--- a/app/components/dashboard/DashboardList.jsx
+++ b/app/components/dashboard/DashboardList.jsx
@@ -101,59 +101,57 @@ const UnclaimAction = styled(Action)`
}
}
`
-export const ManuscriptURL = {
- INITIAL: 'create',
- READY: 'submit',
- 'in-review': 'submit',
- submitted: 'submit',
- tagging: 'review',
- 'xml-qa': 'review',
- 'xml-review': 'review',
- 'xml-triage': 'review',
- 'xml-complete': '',
- published: '',
-}
const submitterState = {
INITIAL: {
status: 'Not yet submitted',
color: 'error',
+ url: 'create',
},
READY: {
status: 'Not yet submitted',
color: 'error',
+ url: 'submit',
},
'in-review': {
status: 'Submitted',
color: 'normal',
+ url: 'submit',
},
submitted: {
status: 'Submitted',
color: 'normal',
+ url: 'submit',
},
tagging: {
status: 'Processing',
color: 'normal',
+ url: 'submit',
},
'xml-qa': {
status: 'Processing',
color: 'normal',
+ url: 'submit',
},
'xml-review': {
status: 'Processing',
color: 'normal',
+ url: 'submit',
},
'xml-triage': {
status: 'Processing',
color: 'normal',
+ url: 'submit',
},
'xml-complete': {
status: 'Approved for archive',
color: 'success',
+ url: 'submit',
},
published: {
status: 'Available in archive',
color: 'success',
+ url: 'submit',
},
}
@@ -161,42 +159,52 @@ const reviewerState = {
INITIAL: {
status: 'Not yet submitted',
color: 'normal',
+ url: 'submit',
},
READY: {
status: 'Not yet submitted',
color: 'normal',
+ url: 'submit',
},
'in-review': {
status: 'Needs review',
color: 'error',
+ url: 'submit',
},
submitted: {
status: 'Submitted',
color: 'normal',
+ url: 'submit',
},
tagging: {
status: 'Processing',
color: 'warning',
+ url: 'submit',
},
'xml-qa': {
status: 'Processing',
color: 'warning',
+ url: 'submit',
},
'xml-review': {
status: 'Needs final review',
color: 'error',
+ url: 'review',
},
'xml-triage': {
status: 'Processing',
color: 'warning',
+ url: 'submit',
},
'xml-complete': {
status: 'Approved for archive',
color: 'success',
+ url: 'submit',
},
published: {
status: 'Available in archive',
color: 'success',
+ url: 'submit',
},
}
@@ -204,42 +212,52 @@ const adminState = {
INITIAL: {
status: 'Not yet submitted',
color: 'normal',
+ url: 'create',
},
READY: {
status: 'Not yet submitted',
color: 'normal',
+ url: 'submit',
},
'in-review': {
status: 'Needs review',
color: 'normal',
+ url: 'submit',
},
submitted: {
status: 'Needs QA',
color: 'error',
+ url: 'submit',
},
tagging: {
status: 'XML tagging',
color: 'normal',
+ url: 'review',
},
'xml-qa': {
status: 'Needs XML QA',
color: 'error',
+ url: 'review',
},
'xml-review': {
status: 'Final review',
color: 'normal',
+ url: 'review',
},
'xml-triage': {
status: 'XML errors',
color: 'error',
+ url: 'review',
},
'xml-complete': {
status: 'Needs citation',
color: 'warning',
+ url: 'review',
},
published: {
status: 'Available in archive',
color: 'success',
+ url: 'review',
},
}
@@ -288,7 +306,7 @@ const DashboardList = ({
{listData.map(manuscript => {
const { claimedBy, meta, journal, updated, status } = manuscript
const state = States[userRole][status]
- const url = ManuscriptURL[status]
+ const { url } = state
const { articleIds, releaseDelay, unmatchedJournal } = meta
const pmid =
articleIds && articleIds.find(aid => aid.pubIdType === 'pmid')
diff --git a/app/components/submission-wizard/SubmitForm.jsx b/app/components/submission-wizard/SubmitForm.jsx
index f0a301ee8..de859907d 100755
--- a/app/components/submission-wizard/SubmitForm.jsx
+++ b/app/components/submission-wizard/SubmitForm.jsx
@@ -265,6 +265,27 @@ class SubmitForm extends React.Component {
</Section>
)
} else if (reviewer && reviewer.user.id === currentUser.id) {
+ if (status && status !== 'in-review') {
+ return ReactDOM.createPortal(
+ <Screen>
+ <Modal>
+ <H2>Thank you for your submission</H2>
+ <p>{`Your submission is ${
+ status === 'READY'
+ ? 'with the submitter'
+ : 'being processed'
+ }. You will receive email updates as your manuscript is processed. You can also log in to Europe PMC plus at any time to check the status of your submission.`}</p>
+ <Button
+ onClick={() => this.props.history.push('/')}
+ primary
+ >
+ Done
+ </Button>
+ </Modal>
+ </Screen>,
+ document.getElementById('root').firstChild,
+ )
+ }
return (
<Section>
<Header>
@@ -299,7 +320,7 @@ class SubmitForm extends React.Component {
} else if (currentUser.admin) {
return (
<Section>
- <H3>Attention Admin</H3>
+ <H3>Attention Helpdesk</H3>
<Content>
<b>This manuscript has not yet been submitted</b>
</Content>
diff --git a/app/components/submission-wizard/SubmitPage.jsx b/app/components/submission-wizard/SubmitPage.jsx
index 5d1ecd463..dce392361 100755
--- a/app/components/submission-wizard/SubmitPage.jsx
+++ b/app/components/submission-wizard/SubmitPage.jsx
@@ -3,7 +3,7 @@ import { Query } from 'react-apollo'
import { omit } from 'lodash'
import styled, { withTheme } from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
-import { Button, Action, ErrorText, H1, H2, H3, Icon } from '@pubsweet/ui'
+import { Button, Action, H1, H2, H3, Icon } from '@pubsweet/ui'
import {
Page,
B,
@@ -40,6 +40,14 @@ const Alert = withTheme(({ children, theme }) => (
</Icon>
))
+const ErrorMessage = styled.p`
+ color: ${th('colorError')};
+ font-size: ${th('fontSizeBaseSmall')};
+ display: flex;
+ align-items: flex-start;
+ margin-left: calc(-${th('gridUnit')} / 2);
+`
+
const Status = styled.span`
margin-right: calc(${th('gridUnit')} * 2);
font-style: italic;
@@ -154,16 +162,16 @@ class Submit extends React.Component {
)
: []
let reviewer = null
- if (notes && notes.some(n => n.notesType === 'selectedReviewer')) {
- reviewer = JSON.parse(
- notes.find(n => n.notesType === 'selectedReviewer').content,
- )
- } else if (teams && teams.find(team => team.role === 'reviewer')) {
+ if (teams && teams.find(team => team.role === 'reviewer')) {
const rev = teams.find(team => team.role === 'reviewer').teamMembers[0]
reviewer = {
id: rev.user.id,
name: rev.alias.name,
}
+ } else if (notes && notes.some(n => n.notesType === 'selectedReviewer')) {
+ reviewer = JSON.parse(
+ notes.find(n => n.notesType === 'selectedReviewer').content,
+ )
}
const submitter =
teams && teams.find(team => team.role === 'submitter').teamMembers[0]
@@ -183,12 +191,12 @@ class Submit extends React.Component {
error:
// TODO: Add test for duplicate articles!
currentUser.admin && status === 'submitted' && unmatchedJournal ? (
- <ErrorText>
+ <ErrorMessage>
<Icon color="currentColor" size={2}>
alert_circle
</Icon>
Journal is not in the NLM Catalog.
- </ErrorText>
+ </ErrorMessage>
) : null,
}
const manuscriptFiles = {
@@ -200,12 +208,12 @@ class Submit extends React.Component {
files
.filter(file => !file.type || SubmissionTypes.includes(file.type))
.some(file => !file.label || !file.type) ? (
- <ErrorText>
+ <ErrorMessage>
<Icon color="currentColor" size={2}>
alert_circle
</Icon>
All files must have a type and a label.
- </ErrorText>
+ </ErrorMessage>
) : null,
}
@@ -213,15 +221,17 @@ class Submit extends React.Component {
title: 'Funding',
content: (
<div>
- <p>
- <B>Grants: </B>
- {fundingGroup.map((f, t) => (
- <span key={f.awardId}>
- {`${f.fundingSource} ${f.awardId}`}
- {t !== f.length - 1 && ', '}
- </span>
- ))}
- </p>
+ {fundingGroup && fundingGroup.length > 0 && (
+ <p>
+ <B>Grants: </B>
+ {fundingGroup.map((f, t) => (
+ <span key={f.awardId}>
+ {`${f.fundingSource} ${f.awardId}`}
+ {t !== fundingGroup.length - 1 && ', '}
+ </span>
+ ))}
+ </p>
+ )}
{(releaseDelay || typeof releaseDelay === 'number') && (
<p>
<B>Embargo: </B>
@@ -243,7 +253,7 @@ class Submit extends React.Component {
error:
// TODO: Add test for duplicate articles!
!fundingGroup || fundingGroup.length === 0 || !releaseDelay ? (
- <ErrorText>
+ <ErrorMessage>
<Icon color="currentColor" size={2}>
alert_circle
</Icon>
@@ -252,7 +262,7 @@ class Submit extends React.Component {
{(!fundingGroup || fundingGroup.length === 0) &&
!releaseDelay && <br />}
{!releaseDelay && 'Embargo period must be set.'}
- </ErrorText>
+ </ErrorMessage>
) : null,
}
@@ -260,11 +270,14 @@ class Submit extends React.Component {
title: 'Reviewer',
content: reviewer && (
<p>
- {reviewer.id && submitter.user.id === reviewer.id
- ? `Manuscript Submitter (${this.formatName(
- submitter.alias.name,
- )})`
- : this.formatName(reviewer.name)}
+ {reviewer.id && submitter.user.id === reviewer.id ? (
+ `Manuscript Submitter (${this.formatName(submitter.alias.name)})`
+ ) : (
+ <React.Fragment>
+ {this.formatName(reviewer.name)}
+ {reviewer.id && currentUser.id === reviewer.id && ' (Me)'}
+ </React.Fragment>
+ )}
</p>
),
edit: (
@@ -278,12 +291,12 @@ class Submit extends React.Component {
/>
),
error: !reviewer && (
- <ErrorText>
+ <ErrorMessage>
<Icon color="currentColor" size={2}>
alert_circle
</Icon>
Reviewer must be indicated.
- </ErrorText>
+ </ErrorMessage>
),
}
@@ -371,12 +384,12 @@ class Submit extends React.Component {
<React.Fragment>{editing}</React.Fragment>
)}
{this.state.error && (
- <ErrorText>
+ <ErrorMessage>
<Icon color="currentColor" size={2}>
alert_circle
</Icon>
{this.state.error}
- </ErrorText>
+ </ErrorMessage>
)}
<Buttons>
<Button
diff --git a/app/components/ui/atoms/PreviewPage.jsx b/app/components/ui/atoms/PreviewPage.jsx
index d1c963b71..0e7757bbc 100755
--- a/app/components/ui/atoms/PreviewPage.jsx
+++ b/app/components/ui/atoms/PreviewPage.jsx
@@ -75,10 +75,9 @@ export const EditSection = styled.div`
`
export const SectionContent = styled.div`
> * {
- padding: ${th('gridUnit')} calc(${th('gridUnit')} * 3);
- margin-top: 0;
+ padding: 0 calc(${th('gridUnit')} * 3);
@media screen and (max-width: 870px) {
- padding: ${th('gridUnit')} calc(${th('gridUnit')} * 4);
+ padding: 0 calc(${th('gridUnit')} * 4);
}
}
overflow: auto;
@@ -88,10 +87,10 @@ export const SectionHeader = styled.div`
flex-flow: row wrap;
align-items: center;
justify-content: space-between;
+ background-color: ${th('colorBackgroundHue')};
min-height: calc(${th('gridUnit')} * 6);
padding: ${th('gridUnit')} calc(${th('gridUnit')} * 3);
- border: ${th('borderWidth')} ${th('borderStyle')}
- ${props => (props.error ? th('colorError') : th('colorBorder'))};
+ border: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
border-right: 0;
border-left: 0;
& > * {
diff --git a/app/components/ui/molecules/Notification.jsx b/app/components/ui/molecules/Notification.jsx
index b49ea5cb5..845404df2 100644
--- a/app/components/ui/molecules/Notification.jsx
+++ b/app/components/ui/molecules/Notification.jsx
@@ -9,7 +9,7 @@ const Container = styled.div`
width: 100%;
color: ${th('colorTextReverse')};
display: flex;
- align-items: center;
+ align-items: flex-start;
border: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
&.warning {
background-color: ${th('colorWarning')};
@@ -29,8 +29,8 @@ const Container = styled.div`
}
`
const NotifIcon = {
- warning: 'alert-circle',
- error: 'alert-triangle',
+ warning: 'alert-triangle',
+ error: 'alert-circle',
info: 'info',
success: 'check-circle',
}
--
GitLab