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

#497, edit close buttons globally

parent 88dbb791
No related branches found
No related tags found
2 merge requests!116Shared data model,!117Dev
Showing
with 72 additions and 128 deletions
......@@ -4,7 +4,7 @@ import { Mutation } from 'react-apollo'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
import { Action, H3, H4, Button, Icon, Link } from '@pubsweet/ui'
import { B, Buttons, Close, CloseButton, Portal, Notification } from './ui'
import { B, Buttons, CloseModal, Portal, Notification } from './ui'
import { States, timeSince } from './dashboard'
import Citation from './submission-wizard/Citation'
import { REPLACE_MANUSCRIPT, CHECK_DUPES } from './operations'
......@@ -145,9 +145,7 @@ class ResolveDuplicates extends React.Component {
}
return (
<Portal ref={this.setRef} transparent>
<Close>
<CloseButton onClick={close} />
</Close>
<CloseModal onClick={close} />
<Columns>
<H3>This manuscript</H3>
<H3>Duplicate(s)</H3>
......
......@@ -4,15 +4,7 @@ import { H2, Button, Action, Link } from '@pubsweet/ui'
import { th } from '@pubsweet/ui-toolkit'
import styled from 'styled-components'
import moment from 'moment'
import {
Buttons,
Close,
CloseButton,
Table,
Portal,
TextArea,
Toggle,
} from '../ui'
import { Buttons, CloseModal, Table, Portal, TextArea, Toggle } from '../ui'
import Mailer from '../mailer'
import { CREATE_NOTE } from '../operations'
import EventDescription from './EventDescription'
......@@ -99,9 +91,7 @@ const NewNote = ({ close, manuscriptId, message, onChange }) => (
}
return (
<Portal transparent>
<Close style={{ margin: 0 }}>
<CloseButton onClick={() => close()} />
</Close>
<CloseModal onClick={() => close()} />
<H2>Add a note</H2>
<TextArea
label="Note (visible only to administrators)"
......
......@@ -4,7 +4,7 @@ import styled, { withTheme } from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
import { Action, H2, Button, Icon, TextField } from '@pubsweet/ui'
import { states } from 'config'
import { Portal, Buttons, Close, CloseButton, Notification } from '../ui'
import { Portal, Buttons, CloseModal, Notification } from '../ui'
import { ManuscriptMutations, NoteMutations } from '../SubmissionMutations'
import ResolveDuplicates from '../ResolveDuplicates'
import GrantSearch from '../GrantSearch'
......@@ -94,9 +94,7 @@ const MetaEdit = withTheme(
}
return (
<Portal style={{ backgroundColor: theme.colorBackground }} transparent>
<Close>
<CloseButton onClick={close} />
</Close>
<CloseModal onClick={close} />
<React.Fragment>
{(() => {
switch (toEdit) {
......
......@@ -8,8 +8,7 @@ import {
A,
B,
Buttons,
Close,
CloseButton,
CloseModal,
HTMLString,
Loading,
LoadingIcon,
......@@ -253,11 +252,7 @@ class PubMedSearch extends React.Component {
<SearchArea>
{this.state.unmatched && (
<Portal transparent>
<Close>
<CloseButton
onClick={() => this.setState({ unmatched: false })}
/>
</Close>
<CloseModal onClick={() => this.setState({ unmatched: false })} />
<UnmatchedCitation
citation={this.handleUnmatched}
close={() => this.setState({ unmatched: false })}
......
......@@ -4,7 +4,7 @@ import { capitalize } from 'lodash'
import styled from 'styled-components'
import { th, override } from '@pubsweet/ui-toolkit'
import { Button, H2, TextField, CheckboxGroup } from '@pubsweet/ui'
import { Buttons, TextArea, Portal, Close, CloseButton } from '../ui'
import { Buttons, TextArea, Portal, CloseModal } from '../ui'
const Recipient = styled.fieldset`
border: 0;
......@@ -48,9 +48,7 @@ const MailerForm = props => {
})
return (
<Portal transparent>
<Close style={{ margin: 0 }}>
<CloseButton onClick={() => props.close()} />
</Close>
<CloseModal onClick={() => props.close()} />
<H2>Send an email</H2>
<form onSubmit={props.handleSubmit}>
<Recipient>
......
......@@ -4,7 +4,7 @@ import styled from 'styled-components'
import { Action } from '@pubsweet/ui'
import { th } from '@pubsweet/ui-toolkit'
import PDFViewer from '../../component-pdf-viewer'
import { A, Page, Center, Cover, Close, CloseButton } from '../ui'
import { A, Page, Center, Cover, CloseModal } from '../ui'
import { ImageTypes } from './'
const Image = styled.img`
......@@ -55,11 +55,7 @@ class FilePreview extends React.Component {
ReactDOM.createPortal(
<Cover>
<Page>
<Close>
<CloseButton
onClick={() => this.setState({ preview: null })}
/>
</Close>
<CloseModal onClick={() => this.setState({ preview: null })} />
{preview.mimeType === 'application/pdf' ? (
<PDF>
<PDFViewer url={preview.url} />
......
import React from 'react'
import { withRouter } from 'react-router'
import { Mutation } from 'react-apollo'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
import { Action, Button, H2, Icon } from '@pubsweet/ui'
import {
PreviewFooter,
Notification,
Buttons,
Portal,
Close,
CloseButton,
} from '../ui'
import { Action, Button, H2, Icon, RadioGroup } from '@pubsweet/ui'
import { PreviewFooter, Notification, Buttons, Portal, CloseModal } from '../ui'
import SubmissionCancel from '../SubmissionCancel'
import { REVIEW_MANUSCRIPT, GET_REVIEWS, CURRENT_REVIEW } from './operations'
import ReviewInstructions from './ReviewInstructions'
import ListErrors from './ListErrors'
import SubmissionError from './SubmissionError'
const SmallAction = styled(Action)`
font-size: ${th('fontSizeBaseSmall')};
font-weight: 600;
`
const showPopup = button => {
button.parentNode.nextElementSibling.classList.remove('hidden')
}
class ReviewFooter extends React.Component {
state = {
report: false,
approve: false,
cancel: false,
radio: '',
}
render() {
const { currentUser, manuscript, previews, review, history } = this.props
const { report, approve, cancel } = this.state
const { report, approve, cancel, radio } = this.state
const { annotations } = review || []
const { status, teams } = manuscript
const submitter = teams.find(t => t.role === 'submitter').teamMembers[0]
......@@ -71,67 +55,59 @@ class ReviewFooter extends React.Component {
</Button>
)
} else if (manuscript.status === 'xml-triage') {
const options = [
{
value: 'xml-qa',
label: 'XML QA',
},
{
value: 'xml-review',
label: 'Author review',
},
{
value: 'xml-complete',
label: 'PMC (skip review)',
},
]
return (
<div>
<Button
onClick={() => this.setState({ approve: true })}
primary
>
Approve and route
Approve &amp; route
</Button>
<Button onClick={() => this.setState({ report: true })}>
Ask for correction
</Button>
{approve && (
<Portal transparent>
<Close>
<CloseButton
onClick={() => this.setState({ approve: false })}
/>
</Close>
<CloseModal
onClick={() => this.setState({ approve: false })}
/>
<H2>Errors fixed? Send for:</H2>
<Buttons>
<Button
onClick={async () => {
await setStatus('xml-qa')
this.setState({ approve: false })
}}
primary
>
XML QA
</Button>
<RadioGroup
name="setstatus"
onChange={radio => this.setState({ radio })}
options={options}
/>
<Buttons right>
<Button
disabled={!radio}
onClick={async () => {
await setStatus('xml-review')
history.push(
`/submission/${manuscript.id}/activity`,
)
await setStatus(radio)
if (radio === 'xml-qa') {
this.setState({ approve: false })
} else {
history.push(
`/submission/${manuscript.id}/activity`,
)
}
}}
primary
>
Author review
Confirm &amp; send
</Button>
<Button
onClick={e => showPopup(e.currentTarget)}
primary
>
PMC (skip review)
</Button>
</Buttons>
<Notification className="hidden" type="warning">
Are you sure you want to skip author review?{' '}
<SmallAction
onClick={async () => {
await setStatus('xml-complete')
history.push(
`/submission/${manuscript.id}/activity`,
)
}}
>
I&apos;m sure!
</SmallAction>
</Notification>
<Buttons right>
<Button
onClick={() => this.setState({ approve: false })}
>
......@@ -212,11 +188,9 @@ class ReviewFooter extends React.Component {
<React.Fragment>
{annotations && annotations.length > 0 ? (
<Portal transparent>
<Close>
<CloseButton
onClick={() => this.setState({ report: false })}
/>
</Close>
<CloseModal
onClick={() => this.setState({ report: false })}
/>
<H2>Send the following errors?</H2>
<ListErrors annotations={annotations} />
<Buttons right>
......
......@@ -31,6 +31,7 @@ const ReviewPage = ({ match, ...props }) => (
}
return (
<ReviewWithHeader
key={`${manuscript.id}${manuscript.status}`}
manuscript={manuscript}
match={match}
reload={() => refetch()}
......
......@@ -2,7 +2,7 @@ import React from 'react'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
import { Action, H2, CheckboxGroup } from '@pubsweet/ui'
import { Portal, Close, CloseButton, Loading, LoadingIcon, Toggle } from '../ui'
import { Portal, CloseModal, Loading, LoadingIcon, Toggle } from '../ui'
import SubmissionErrorReport, {
adminOptions,
Fieldset,
......@@ -91,9 +91,7 @@ class SubmissionError extends React.Component {
const html = manuscript.files.find(file => file.type === 'tempHTML')
return (
<Portal transparent>
<Close style={{ margin: 0 }}>
<CloseButton onClick={close} />
</Close>
<CloseModal onClick={close} />
<H2>Report Errors</H2>
<Toggle>
<Action
......
......@@ -5,8 +5,7 @@ import { Button, Action, CheckboxGroup, H1, H2, H3, Icon } from '@pubsweet/ui'
import {
Page,
Buttons,
Close,
CloseButton,
CloseModal,
PreviewPage,
PreviewFooter,
PreviewPanel,
......@@ -35,10 +34,9 @@ const Alert = withTheme(({ children, theme }) => (
</Icon>
))
const CloseEdit = styled(Close)`
const CloseEdit = styled(CloseModal)`
margin: calc(${th('gridUnit')} * 6) auto calc(${th('gridUnit')} * 2);
`
const ErrorReport = styled.p`
white-space: pre-wrap;
font-style: italic;
......@@ -164,11 +162,7 @@ class Submit extends React.Component {
} else if (editing) {
return (
<Page>
<CloseEdit>
<CloseButton
onClick={() => this.setState({ editing: null })}
/>
</CloseEdit>
<CloseEdit onClick={() => this.setState({ editing: null })} />
{editing.props['data-upload'] ? (
<div>
<H2>Files</H2>
......@@ -367,9 +361,7 @@ class Submit extends React.Component {
)}
{reject && (
<Portal transparent>
<Close style={{ margin: 0 }}>
<CloseButton onClick={() => this.setState({ reject: false })} />
</Close>
<CloseModal onClick={() => this.setState({ reject: false })} />
{currentUser.admin && status === 'submitted' ? (
<SubmissionErrorReport
checkedBoxes={checkedBoxes}
......
......@@ -6,8 +6,11 @@ const Close = styled.p`
display: flex;
align-items: center;
justify-content: flex-end;
margin: 0;
& + h2 {
margin-top: 0;
}
`
const CloseButton = ({ size = 4, ...props }) => (
<Action {...props}>
<Icon color="currentColor" size={size}>
......@@ -16,4 +19,10 @@ const CloseButton = ({ size = 4, ...props }) => (
</Action>
)
export { Close, CloseButton }
const CloseModal = ({ className, ...props }) => (
<Close className={className}>
<CloseButton {...props} />
</Close>
)
export { CloseModal, CloseButton }
......@@ -14,11 +14,6 @@ export const Modal = styled.div`
max-width: 90%;
box-sizing: border-box;
margin: calc(${th('gridUnit')} * 4) auto;
& > p:first-child {
& + h2 {
margin-top: 0;
}
}
h2:first-child {
margin-top: 0;
}
......
export { LoadingIcon, Loading } from './LoadingIcon'
export { Close, CloseButton } from './CloseButton'
export { CloseModal, CloseButton } from './CloseButton'
export { default as HTMLString } from './HTMLString'
export { default as Select } from './Select'
export { default as TextArea } from './TextArea'
......
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