Commit c1ca4603 authored by Vignesh Devendran's avatar Vignesh Devendran 🎯
Browse files

feat(ui): download options and production clean up

parent b1906152
......@@ -48,10 +48,6 @@ const ManuscriptPage = ({ match, ...props }) => {
},
})
ManuscriptPage.propTypes = {
match: ReactRouterPropTypes.match.isRequired,
}
if (loading) return <Spinner />
if (error) return <CommsErrorBanner error={error} />
const { manuscript, currentUser } = data
......@@ -66,4 +62,8 @@ const ManuscriptPage = ({ match, ...props }) => {
)
}
ManuscriptPage.propTypes = {
match: ReactRouterPropTypes.match.isRequired,
}
export default ManuscriptPage
import React from 'react'
import PropTypes from 'prop-types'
import { Dropdown } from '@pubsweet/ui'
import { htmlToJats } from '../../../../../server/utils/jatsUtils'
let html = ""
// added console to test options - to be removed later
const options = [
{ id: 1, onClick: () => {
// eslint-disable-next-line
console.log("HTML Selected")
}, title: 'HTML',},
{ id: 2, onClick: () => {
// eslint-disable-next-line
console.log("PDF Selected")
}, title: 'PDF', },
{ id: 3, onClick: () => {
/* eslint-disable */
console.log("XML Selected")
console.log("HTML:", html)
console.log("JATS:", htmlToJats(html))
/* eslint-disable */
}, title: 'XML', },
]
/* eslint-disable import/prefer-default-export */
export const DownloadDropdown = ({source}) => {
html = source
return (
<Dropdown itemsList={options} primary>
Download
</Dropdown>
)
}
DownloadDropdown.propTypes = {
source: PropTypes.string.isRequired,
}
......@@ -2,8 +2,15 @@ import React from 'react'
import { withRouter } from 'react-router-dom'
import styled from 'styled-components'
import ProductionWaxEditor from '../../../wax-collab/src/ProductionWaxEditor'
import { Spinner } from '../../../shared'
import { DownloadDropdown } from './DownloadDropdown'
import {
Container,
Heading,
HeadingWithAction,
SectionContent,
Spinner,
} from '../../../shared'
const Info = styled.span`
align-items: center;
......@@ -15,25 +22,6 @@ const Info = styled.span`
padding: 0;
`
const Columns = styled.div`
display: grid;
grid-template-areas: 'manuscript';
grid-template-columns: 100%;
height: 100vh;
justify-content: center;
overflow: hidden;
`
const ManuscriptContainer = styled.div`
grid-area: manuscript;
overflow-y: scroll;
/* .wax-container {
height: 100%;
top: 0%;
} */
`
const Production = ({
file,
manuscript,
......@@ -41,30 +29,33 @@ const Production = ({
// fileUpload,
updateManuscript,
}) => (
<Columns>
{file &&
file.mimeType ===
'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ? (
<ManuscriptContainer>
{manuscript ? (
<ProductionWaxEditor
onBlur={source => {
updateManuscript(manuscript.id, { meta: { source } })
}}
onChange={source => {
updateManuscript(manuscript.id, { meta: { source } })
}}
user={currentUser}
value={manuscript.meta.source}
/>
) : (
<Spinner />
)}
</ManuscriptContainer>
<Container>
<HeadingWithAction>
<Heading>Production</Heading>
<DownloadDropdown source={manuscript.meta.source} />
</HeadingWithAction>
{file &&
file.mimeType ===
'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ? (
<SectionContent>
{manuscript ? (
<ProductionWaxEditor
onBlur={source => {
updateManuscript(manuscript.id, { meta: { source } })
}}
user={currentUser}
value={manuscript.meta.source}
/>
) : (
<Spinner />
)}
</SectionContent>
) : (
<Info>No supported view of the file</Info>
<SectionContent>
<Info>No supported view of the file</Info>
</SectionContent>
)}
</Columns>
</Container>
)
export default withRouter(Production)
......@@ -64,10 +64,6 @@ const ProductionPage = ({ match, ...props }) => {
},
})
ProductionPage.propTypes = {
match: ReactRouterPropTypes.match.isRequired,
}
if (loading) return <Spinner />
if (error) return <CommsErrorBanner error={error} />
const { manuscript, currentUser } = data
......@@ -82,4 +78,8 @@ const ProductionPage = ({ match, ...props }) => {
)
}
ProductionPage.propTypes = {
match: ReactRouterPropTypes.match.isRequired,
}
export default ProductionPage
......@@ -31,11 +31,8 @@ export const Menu = styled.div`
position: sticky;
top: -20px;
user-select: none;
z-index: 10;
z-index: 5;
&.production {
top: 0px;
}
& > div {
height: 36px;
......
......@@ -107,7 +107,7 @@ const ProductionWaxEditorLayout = (readOnly, readOnlyComments) => ({
</ReadOnlyEditorDiv>
) : (
<>
<Menu className="production">
<Menu>
<TopBar />
</Menu>
<ProductionEditorDiv className="wax-surface-scroll">
......
Markdown is supported
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