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

#430 bugs from user testing

parent e67341fa
No related branches found
No related tags found
2 merge requests!93Shared data model,!94Dev
......@@ -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;
......
......@@ -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>
) : (
......
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>
)
}
}
......
......@@ -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>
)
}}
......
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)
......@@ -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 })}
......
......@@ -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>
......
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