Skip to content
Snippets Groups Projects
Commit 97a83b9b authored by Audrey Hamelers's avatar Audrey Hamelers
Browse files

style changes for submission review page

parent 8eb6cb58
No related branches found
No related tags found
2 merge requests!60Dev,!37Shared data model
Hide whitespace changes
Inline Side-by-side
app/components/FileTable.jsx
+ 7
− 1
View file @ 97a83b9b
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;
......
app/components/dashboard/DashboardList.jsx
+ 31
− 13
View file @ 97a83b9b
......@@ -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')
......
app/components/submission-wizard/SubmitForm.jsx
+ 22
− 1
View file @ 97a83b9b
......@@ -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>
......
app/components/submission-wizard/SubmitPage.jsx
+ 43
− 30
View file @ 97a83b9b
......@@ -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
......
app/components/ui/atoms/PreviewPage.jsx
+ 4
− 5
View file @ 97a83b9b
......@@ -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;
& > * {
......
app/components/ui/molecules/Notification.jsx
+ 3
− 3
View file @ 97a83b9b
......@@ -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',
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment