diff --git a/app/components/FileTable.jsx b/app/components/FileTable.jsx index 0d8887807285c814454b607072aa1b56b8427485..2d3f28ae458cc788ce596aad741c719351379a8c 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 050dfa6c08ef5712a243f42866b36b657c6580f4..d28639bab57abf162fdef7623d2717b64d8d1ae7 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 f0a301ee81dfe28452a5cdde45d9b8f901ef8f25..de859907dd3c81b85fbdf4f64e3c1fca9a9eae56 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 5d1ecd463897f4fc40617745542dec3ccbedc5a5..dce392361bdeccfd5db05171ff4186d2749c45a8 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 d1c963b715d1d9f875603bedc567b195aa4632f1..0e7757bbcb3547b8f265605a2d7ef3d83e7912b8 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 b49ea5cb5f39a833123178715275e8154542e4b1..845404df262e242eb01c55f91655d1e67dcc653e 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', }