From 9e54f700eb0261e69c1592206a5cbf8584eee707 Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <hamelers@ebi.ac.uk>
Date: Tue, 12 Mar 2019 13:33:10 +0000
Subject: [PATCH] #430 bugs from user testing
---
app/components/SubmissionHeader.jsx | 4 +-
.../citation-search/PubMedSearch.jsx | 23 +-
.../manage-account/AccountDetails.jsx | 6 +-
.../manage-account/ManageAccount.jsx | 17 +-
.../submission-wizard/CreatePage.jsx | 239 +++++++++---------
app/components/submission-wizard/Submit.jsx | 3 +
app/components/ui/molecules/Notification.jsx | 14 +-
7 files changed, 154 insertions(+), 152 deletions(-)
diff --git a/app/components/SubmissionHeader.jsx b/app/components/SubmissionHeader.jsx
index db830320f..33a89f094 100644
--- a/app/components/SubmissionHeader.jsx
+++ b/app/components/SubmissionHeader.jsx
@@ -8,7 +8,9 @@ import { States } from './dashboard'
const ManuscriptHead = styled(FlexBar)`
border-bottom: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
- font-weight: 600;
+ * {
+ font-weight: 600;
+ }
`
const Left = styled.div`
white-space: nowrap;
diff --git a/app/components/citation-search/PubMedSearch.jsx b/app/components/citation-search/PubMedSearch.jsx
index 48f91d077..e711684d6 100755
--- a/app/components/citation-search/PubMedSearch.jsx
+++ b/app/components/citation-search/PubMedSearch.jsx
@@ -3,7 +3,7 @@ import { ApolloConsumer } from 'react-apollo'
import styled from 'styled-components'
import moment from 'moment'
import { th } from '@pubsweet/ui-toolkit'
-import { Action, Button, Icon, H3, Link } from '@pubsweet/ui'
+import { Action, Button, Icon, H3, H4, Link } from '@pubsweet/ui'
import {
A,
B,
@@ -28,12 +28,10 @@ const LoadMore = styled(Button)`
const SearchArea = styled.div`
margin: 0 auto;
`
-const Notice = styled.p`
- margin: 0 auto calc(${th('gridUnit')} * 3);
- button {
- display: flex;
- align-items: center;
- justify-content: flex-start;
+const Notice = styled(H4)`
+ margin: 0 auto;
+ & + div {
+ margin-bottom: calc(${th('gridUnit')} * 3);
}
`
const Links = styled.p`
@@ -351,20 +349,17 @@ class PubMedSearch extends React.Component {
/>
{hitcount !== null && (
<React.Fragment>
- <Notice>
- <B>Select your citation from results</B>
- </Notice>
+ <Notice>Select your citation from results</Notice>
{(hitcount === 0 || results.length > 0) && (
<React.Fragment>
{this.props.changeNote ? (
<Notification type="info">
+ {hitcount === 0 && 'No results found. '}
+ {results.length > 0 && 'Manuscript not in results? '}
<Action
onClick={() => this.setState({ unmatched: true })}
>
- {hitcount === 0 &&
- 'No results found. Click to enter citation manually.'}
- {results.length > 0 &&
- 'Manuscript not in results? Click to enter citation manually'}
+ Click to enter citation manually.
</Action>
</Notification>
) : (
diff --git a/app/components/manage-account/AccountDetails.jsx b/app/components/manage-account/AccountDetails.jsx
index d772e6db3..35d9ca5ea 100644
--- a/app/components/manage-account/AccountDetails.jsx
+++ b/app/components/manage-account/AccountDetails.jsx
@@ -1,6 +1,6 @@
import React from 'react'
import { H1, Link, Button, Icon } from '@pubsweet/ui'
-import { Page, Notification, ConfirmDialog, Select } from '../ui'
+import { Notification, ConfirmDialog, Select } from '../ui'
import UserCore from '../UserCore'
const NO_PRIVILEGE = 'No Privilege'
@@ -43,7 +43,7 @@ class AccountDetails extends React.Component {
})
}
return (
- <Page>
+ <React.Fragment>
{values.signup && <H1>Create a Europe PMC plus account</H1>}
{values.myAccount && <H1>My Account</H1>}
@@ -82,7 +82,7 @@ class AccountDetails extends React.Component {
message="Are you sure you want to reset password?"
/>
</div>
- </Page>
+ </React.Fragment>
)
}
}
diff --git a/app/components/manage-account/ManageAccount.jsx b/app/components/manage-account/ManageAccount.jsx
index 9506a6eb1..b8faf1253 100644
--- a/app/components/manage-account/ManageAccount.jsx
+++ b/app/components/manage-account/ManageAccount.jsx
@@ -7,16 +7,13 @@ import AccountDetails from './AccountDetailsContainer'
import MergeAccount from './MergeAccount'
import { GET_USER, GET_ROLES_BY_TYPE } from './queries'
-const Constainer = styled.div`
+const Container = styled.div`
.reset-pass {
margin-top: 20px;
}
> div {
padding: 0px;
}
- section {
- margin-top: 60px;
- }
.search-again {
float: right;
font-size: 14px;
@@ -54,7 +51,7 @@ const ManageAccount = props => (
}
return (
<Page>
- <Constainer>
+ <Container>
<H1>Manage User: {props.location.pathname.split('/')[2]}</H1>
<Link className="search-again" to="/manage-users">
<Icon color="currentColor" size={2}>
@@ -68,12 +65,10 @@ const ManageAccount = props => (
roles={data.rolesByType}
user={userData.epmc_user}
/>
- <section>
- <H3>Admin</H3>
- <H5>Merge data from another account</H5>
- <MergeAccount {...props} user={userData.epmc_user} />
- </section>
- </Constainer>
+ <H3>Admin</H3>
+ <H5>Merge data from another account</H5>
+ <MergeAccount {...props} user={userData.epmc_user} />
+ </Container>
</Page>
)
}}
diff --git a/app/components/submission-wizard/CreatePage.jsx b/app/components/submission-wizard/CreatePage.jsx
index 9ef53aef0..5ef5f6b6b 100755
--- a/app/components/submission-wizard/CreatePage.jsx
+++ b/app/components/submission-wizard/CreatePage.jsx
@@ -1,4 +1,5 @@
import React from 'react'
+import { withRouter } from 'react-router'
import { Query } from 'react-apollo'
import { omit } from 'lodash'
import styled, { createGlobalStyle } from 'styled-components'
@@ -204,7 +205,7 @@ class Created extends React.Component {
render() {
const currentUser = this.context
const { currentStep, status, error, checked } = this.state
- const { manuscript } = this.props
+ const { manuscript, history } = this.props
const { id: mId, meta, journal, files: allfiles, teams } = manuscript
const { notes, fundingGroup: grants } = meta
const files = allfiles
@@ -229,125 +230,129 @@ class Created extends React.Component {
teams && teams.find(team => team.role === 'submitter')
? teams.find(team => team.role === 'submitter').teamMembers[0]
: null
- return (
- <SplitPage>
- <StepPanel>
- <div>
- <CreatePageHeader currentStep={currentStep} />
- {currentStep === 0 && <H2>Citation</H2>}
- {currentStep === 1 && <H2>Files</H2>}
- {error && <Notification type="error">{error}</Notification>}
- {currentStep === 0 && (
- <React.Fragment>
- {this.state.showSearch ? (
- <PubMedWithMutations
- citationData={this.changeCitation}
- manuscript={manuscript}
+ if (manuscript.status === 'INITIAL') {
+ return (
+ <SplitPage>
+ <StepPanel>
+ <div>
+ <CreatePageHeader currentStep={currentStep} />
+ {currentStep === 0 && <H2>Citation</H2>}
+ {currentStep === 1 && <H2>Files</H2>}
+ {error && <Notification type="error">{error}</Notification>}
+ {currentStep === 0 && (
+ <React.Fragment>
+ {this.state.showSearch ? (
+ <PubMedWithMutations
+ citationData={this.changeCitation}
+ manuscript={manuscript}
+ />
+ ) : (
+ <Confirm>
+ <Citation journal={journal} metadata={meta} />
+ <Icon color="currentColor" size={5}>
+ check
+ </Icon>
+ </Confirm>
+ )}
+ </React.Fragment>
+ )}
+ {currentStep === 1 && (
+ <React.Fragment>
+ <UploadFiles
+ checked={checked}
+ files={files}
+ manuscript={mId}
+ parentStatus={status}
+ types={SubmissionTypes}
/>
- ) : (
- <Confirm>
- <Citation journal={journal} metadata={meta} />
- <Icon color="currentColor" size={5}>
- check
- </Icon>
- </Confirm>
- )}
- </React.Fragment>
- )}
- {currentStep === 1 && (
- <React.Fragment>
- <UploadFiles
- checked={checked}
- files={files}
- manuscript={mId}
- parentStatus={status}
- types={SubmissionTypes}
+ {files.length > 0 && (
+ <React.Fragment>
+ <p>
+ {!checked && <ErrorText>* </ErrorText>}
+ Please certify the following statement is true:
+ </p>
+ <Checkbox
+ checked={checked}
+ label="I have provided all of the files that are part of this manuscript, including figures, tables, appendices, and all supplemental files. I understand that the processing of the manuscript will be delayed if any of the manuscript files are missing."
+ onChange={() => this.checkFiles()}
+ />
+ </React.Fragment>
+ )}
+ </React.Fragment>
+ )}
+ {currentStep === 2 && (
+ <GrantSearch
+ changedEmbargo={this.props.updateEmbargo}
+ changedGrants={this.props.updateGrants}
+ selectedEmbargo={meta.releaseDelay}
+ selectedGrants={fundingGroup}
/>
- {files.length > 0 && (
- <React.Fragment>
- <p>
- {!checked && <ErrorText>* </ErrorText>}
- Please certify the following statement is true:
- </p>
- <Checkbox
- checked={checked}
- label="I have provided all of the files that are part of this manuscript, including figures, tables, appendices, and all supplemental files. I understand that the processing of the manuscript will be delayed if any of the manuscript files are missing."
- onChange={() => this.checkFiles()}
- />
- </React.Fragment>
- )}
- </React.Fragment>
- )}
- {currentStep === 2 && (
- <GrantSearch
- changedEmbargo={this.props.updateEmbargo}
- changedGrants={this.props.updateGrants}
- selectedEmbargo={meta.releaseDelay}
- selectedGrants={fundingGroup}
- />
- )}
- {currentStep === 3 && (
- <ReviewerWithMutations
- currentUser={currentUser}
- funding={fundingGroup}
- manuscriptId={mId}
- reviewer={null}
- reviewerNote={reviewerNote}
- submitter={submitter}
- />
- )}
- <Buttons>
- <Buttons right>
- <Button
- disabled={this.getDisableNext(currentStep)}
- onClick={this.goNext}
- primary={!this.state.showSearch}
- title={
- this.state.showSearch
- ? 'Click to proceed with previously selected citation'
- : ''
- }
- >
- {this.state.showSearch ? 'Cancel citation change' : 'Next'}
- </Button>
- {!this.state.showSearch && (
- <Button onClick={this.goPrev}>
- {currentStep === 0 ? 'Change citation' : 'Previous'}
- </Button>
- )}
- </Buttons>
- <Buttons left>
- {!this.state.showSearch && (
- <Button onClick={() => this.props.history.push('/dashboard')}>
- Save and complete later
+ )}
+ {currentStep === 3 && (
+ <ReviewerWithMutations
+ currentUser={currentUser}
+ funding={fundingGroup}
+ manuscriptId={mId}
+ reviewer={null}
+ reviewerNote={reviewerNote}
+ submitter={submitter}
+ />
+ )}
+ <Buttons>
+ <Buttons right>
+ <Button
+ disabled={this.getDisableNext(currentStep)}
+ onClick={this.goNext}
+ primary={!this.state.showSearch}
+ title={
+ this.state.showSearch
+ ? 'Click to proceed with previously selected citation'
+ : ''
+ }
+ >
+ {this.state.showSearch ? 'Cancel citation change' : 'Next'}
</Button>
- )}
- {status && (
- <Status>
- <Icon color="currentColor" size={2}>
- info
- </Icon>
- {status}
- </Status>
- )}
+ {!this.state.showSearch && (
+ <Button onClick={this.goPrev}>
+ {currentStep === 0 ? 'Change citation' : 'Previous'}
+ </Button>
+ )}
+ </Buttons>
+ <Buttons left>
+ {!this.state.showSearch && (
+ <Button onClick={() => history.push('/dashboard')}>
+ Save and complete later
+ </Button>
+ )}
+ {status && (
+ <Status>
+ <Icon color="currentColor" size={2}>
+ info
+ </Icon>
+ {status}
+ </Status>
+ )}
+ </Buttons>
</Buttons>
- </Buttons>
- </div>
- </StepPanel>
- <InfoPanel>
- <FadeIn />
- <div
- className={`hidden ${this.state.showInfo && 'showInfo'}`}
- id="more-info"
- onClick={() => this.setState({ showInfo: !this.state.showInfo })}
- >
- More Info
- <Icon>{`chevron-${this.state.showInfo ? 'down' : 'right'}`}</Icon>
- </div>
- <CreateInfo currentStep={currentStep} />
- </InfoPanel>
- </SplitPage>
- )
+ </div>
+ </StepPanel>
+ <InfoPanel>
+ <FadeIn />
+ <div
+ className={`hidden ${this.state.showInfo && 'showInfo'}`}
+ id="more-info"
+ onClick={() => this.setState({ showInfo: !this.state.showInfo })}
+ >
+ More Info
+ <Icon>{`chevron-${this.state.showInfo ? 'down' : 'right'}`}</Icon>
+ </div>
+ <CreateInfo currentStep={currentStep} />
+ </InfoPanel>
+ </SplitPage>
+ )
+ }
+ history.push(`/submission/${manuscript.id}/submit`)
+ return null
}
}
@@ -381,4 +386,4 @@ const CreatePage = ({ match, ...props }) => (
</Query>
)
-export default CreatePage
+export default withRouter(CreatePage)
diff --git a/app/components/submission-wizard/Submit.jsx b/app/components/submission-wizard/Submit.jsx
index af5851066..32980d4fc 100644
--- a/app/components/submission-wizard/Submit.jsx
+++ b/app/components/submission-wizard/Submit.jsx
@@ -128,6 +128,9 @@ class Submit extends React.Component {
submitter.user.id === currentUser.id &&
!['INITIAL', 'READY', 'submission-error'].includes(status))
) {
+ window.scrollY = 0
+ window.pageYOffset = 0
+ document.scrollingElement.scrollTop = 0
return (
<SubmitComplete
cancel={() => this.setState({ cancel: true })}
diff --git a/app/components/ui/molecules/Notification.jsx b/app/components/ui/molecules/Notification.jsx
index 5691d7d1c..e2ff2a97b 100644
--- a/app/components/ui/molecules/Notification.jsx
+++ b/app/components/ui/molecules/Notification.jsx
@@ -7,10 +7,11 @@ const Container = styled.div`
padding: ${th('gridUnit')};
margin: ${th('gridUnit')} 0;
width: 100%;
- &.not(.hidden) {
- display: flex;
- align-items: flex-start;
- border: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
+ display: flex;
+ align-items: flex-start;
+ border: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
+ &.hidden {
+ display: none;
}
&.warning {
color: ${th('colorText')};
@@ -28,7 +29,8 @@ const Container = styled.div`
color: ${th('colorTextReverse')};
background-color: ${th('colorSuccess')};
}
- & > div {
+ & > div,
+ & > div * {
font-size: ${th('fontSizeBaseSmall')};
}
`
@@ -40,7 +42,7 @@ const NotifIcon = {
}
const Notification = ({ children, type, ...props }) => (
- <Container className={`${props.className} ${type}`}>
+ <Container className={`${props.className ? props.className : ''} ${type}`}>
<Icon color="currentColor" size={2}>
{NotifIcon[type]}
</Icon>
--
GitLab