From f6dd7e5a55c0ebf59518ecd5856672b74aa9f540 Mon Sep 17 00:00:00 2001
From: Bogdan Cochior <bogdan.cochior@thinslices.com>
Date: Fri, 24 Aug 2018 11:18:52 +0300
Subject: [PATCH] feat(metadata): add ManuscriptMetadata
---
.../component-faraday-ui/src/ContextualBox.md | 4 +-
packages/component-faraday-ui/src/File.js | 12 +--
.../component-faraday-ui/src/FileSection.js | 1 +
.../src/ManuscriptFileList.js | 76 ++++++++++++++++---
.../src/ManuscriptMetadata.js | 24 +++---
.../component-faraday-ui/src/WizardFiles.js | 2 +-
.../src/components/ManuscriptLayout.js | 2 +
.../hindawi-theme/src/elements/Accordion.js | 5 +-
packages/hindawi-theme/src/index.js | 2 +-
9 files changed, 96 insertions(+), 32 deletions(-)
diff --git a/packages/component-faraday-ui/src/ContextualBox.md b/packages/component-faraday-ui/src/ContextualBox.md
index dc2b6e300..f29c14bfd 100644
--- a/packages/component-faraday-ui/src/ContextualBox.md
+++ b/packages/component-faraday-ui/src/ContextualBox.md
@@ -34,8 +34,8 @@ A contextual box without border, shadow and no backgrounds.
```js
<ContextualBox label="Files" transparent>
<div>
- <FileItem file={{ id: '1', name: 'myfile.pdf', size: 123123 }} />
- <FileItem file={{ id: '2', name: 'myfile2.pdf', size: 1123 }} />
+ <FileItem item={{ id: '1', name: 'myfile.pdf', size: 123123 }} />
+ <FileItem item={{ id: '2', name: 'myfile2.pdf', size: 1123 }} />
</div>
</ContextualBox>
```
diff --git a/packages/component-faraday-ui/src/File.js b/packages/component-faraday-ui/src/File.js
index 4d8d80bc5..b98d67fb8 100644
--- a/packages/component-faraday-ui/src/File.js
+++ b/packages/component-faraday-ui/src/File.js
@@ -44,7 +44,9 @@ const FileItem = ({
<Root data-test-id={`file-${file.id}`} {...rest}>
{typeof dragHandle === 'function' ? dragHandle() : dragHandle}
<FileInfo>
- <Text secondary>{file.name}</Text>
+ <Text mr={1} secondary>
+ {file.name}
+ </Text>
<Label>{fileSize}</Label>
</FileInfo>
{hasPreview && (
@@ -117,22 +119,22 @@ export default compose(
const Root = styled.div`
align-items: center;
background-color: ${th('colorBackgroundHue')};
- border: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
- box-shadow: ${th('boxShadow')};
+ box-shadow: ${({ shadow }) => (shadow ? th('boxShadow') : 'none')};
border-radius: ${th('borderRadius')};
display: flex;
+ border: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
height: calc(${th('gridUnit')} * 5);
-
+ white-space: nowrap;
${marginHelper};
`
const FileInfo = styled.div`
align-items: center;
- border-right: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
display: flex;
flex: 1;
justify-content: space-between;
height: calc(${th('gridUnit')} * 5);
padding: 0 ${th('gridUnit')};
+ border-right: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
`
// #endregion
diff --git a/packages/component-faraday-ui/src/FileSection.js b/packages/component-faraday-ui/src/FileSection.js
index 3a9da8d0e..59382b1ff 100644
--- a/packages/component-faraday-ui/src/FileSection.js
+++ b/packages/component-faraday-ui/src/FileSection.js
@@ -84,6 +84,7 @@ const FileSection = ({
onDelete={onDelete}
onDownload={onDownload}
onPreview={onPreview}
+ shadow
/>
{error && (
<Row>
diff --git a/packages/component-faraday-ui/src/ManuscriptFileList.js b/packages/component-faraday-ui/src/ManuscriptFileList.js
index db577bca3..74b5eb01e 100644
--- a/packages/component-faraday-ui/src/ManuscriptFileList.js
+++ b/packages/component-faraday-ui/src/ManuscriptFileList.js
@@ -1,19 +1,39 @@
import React, { Fragment } from 'react'
-import { Text, FileItem } from 'pubsweet-component-faraday-ui'
+import { Text, FileItem, Item, Row } from 'pubsweet-component-faraday-ui'
+
+import { withFilePreview, withFileDownload } from './helpers'
const ManuscriptFileList = ({
files: { manuscripts = [], coverLetter = [], supplementary = [] },
+ previewFile,
+ downloadFile,
...rest
}) => (
<Fragment>
{!!manuscripts.length && (
<Fragment>
- <Text labelLine mb={1} mt={3}>
+ <Text labelLine mb={1} mt={1}>
MAIN MANUSCRIPT
</Text>
- {manuscripts.map(file => (
- <FileItem item={file} key={file.id} {...rest} mb={1} />
- ))}
+ <Row justify="flex-start" mb={1}>
+ {manuscripts.map(file => (
+ <Item
+ alignItems="flex-start"
+ flex={0}
+ key={file.id}
+ mr={1}
+ vertical
+ >
+ <FileItem
+ item={file}
+ onDownload={downloadFile}
+ onPreview={previewFile}
+ {...rest}
+ mb={1}
+ />
+ </Item>
+ ))}
+ </Row>
</Fragment>
)}
{!!supplementary.length && (
@@ -21,9 +41,25 @@ const ManuscriptFileList = ({
<Text labelLine mb={1} mt={2}>
SUPPLEMENTARY FILES
</Text>
- {supplementary.map(file => (
- <FileItem item={file} key={file.id} {...rest} mb={1} />
- ))}
+ <Row justify="flex-start" mb={1}>
+ {supplementary.map(file => (
+ <Item
+ alignItems="flex-start"
+ flex={0}
+ key={file.id}
+ mr={1}
+ vertical
+ >
+ <FileItem
+ item={file}
+ onDownload={downloadFile}
+ onPreview={previewFile}
+ {...rest}
+ mb={1}
+ />
+ </Item>
+ ))}
+ </Row>
</Fragment>
)}
{!!coverLetter.length && (
@@ -31,12 +67,28 @@ const ManuscriptFileList = ({
<Text labelLine mb={1} mt={2}>
COVER LETTER
</Text>
- {coverLetter.map(file => (
- <FileItem item={file} key={file.id} {...rest} mb={1} />
- ))}
+ <Row justify="flex-start" mb={1}>
+ {coverLetter.map(file => (
+ <Item
+ alignItems="flex-start"
+ flex={0}
+ key={file.id}
+ mr={1}
+ vertical
+ >
+ <FileItem
+ item={file}
+ onDownload={downloadFile}
+ onPreview={previewFile}
+ {...rest}
+ mb={1}
+ />
+ </Item>
+ ))}
+ </Row>
</Fragment>
)}
</Fragment>
)
-export default ManuscriptFileList
+export default withFilePreview(withFileDownload(ManuscriptFileList))
diff --git a/packages/component-faraday-ui/src/ManuscriptMetadata.js b/packages/component-faraday-ui/src/ManuscriptMetadata.js
index 4dbbdacb7..2978f4269 100644
--- a/packages/component-faraday-ui/src/ManuscriptMetadata.js
+++ b/packages/component-faraday-ui/src/ManuscriptMetadata.js
@@ -1,11 +1,15 @@
import React, { Fragment } from 'react'
import { isEmpty, get } from 'lodash'
-// import { Accordion } from '@pubsweet/ui'
-import Accordion from 'pubsweet-component-faraday-ui/src/pending/Accordion'
-import { Text, Item } from 'pubsweet-component-faraday-ui'
+import {
+ Text,
+ Item,
+ ContextualBox,
+ ManuscriptFileList,
+} from 'pubsweet-component-faraday-ui'
const ManuscriptMetadata = ({
+ getSignedUrl,
fragment: {
files = {},
authors = [],
@@ -16,32 +20,32 @@ const ManuscriptMetadata = ({
<Fragment>
{!!abstract && (
<Item mb={1}>
- <Accordion label="Abstract" transparent>
+ <ContextualBox label="Abstract" transparent>
<Text dangerouslySetInnerHTML={{ __html: abstract }} mb={1} mt={1} />
- </Accordion>
+ </ContextualBox>
</Item>
)}
{conflicts.hasConflicts === 'yes' && (
<Item mb={1}>
- <Accordion label="Conflict of Interest" transparent>
+ <ContextualBox label="Conflict of Interest" transparent>
<Text
dangerouslySetInnerHTML={{ __html: get(conflicts, 'message', '') }}
mb={1}
mt={1}
/>
- </Accordion>
+ </ContextualBox>
</Item>
)}
{!isEmpty(files) && (
<Item mb={1}>
- <Accordion
+ <ContextualBox
label={`Files (${files.coverLetter.length +
files.manuscripts.length +
files.supplementary.length})`}
transparent
>
- Fisiere aici
- </Accordion>
+ <ManuscriptFileList files={files} getSignedUrl={getSignedUrl} />
+ </ContextualBox>
</Item>
)}
</Fragment>
diff --git a/packages/component-faraday-ui/src/WizardFiles.js b/packages/component-faraday-ui/src/WizardFiles.js
index 9a1557d59..a95da12f3 100644
--- a/packages/component-faraday-ui/src/WizardFiles.js
+++ b/packages/component-faraday-ui/src/WizardFiles.js
@@ -56,7 +56,7 @@ const WizardFiles = ({
onFileDrop={addFile('supplementary')}
onFilePick={addFile('supplementary')}
onPreview={previewFile}
- title="Supplimental Files"
+ title="Supplementary Files"
/>
</Fragment>
)
diff --git a/packages/component-manuscript/src/components/ManuscriptLayout.js b/packages/component-manuscript/src/components/ManuscriptLayout.js
index 037e692e0..8120863b8 100644
--- a/packages/component-manuscript/src/components/ManuscriptLayout.js
+++ b/packages/component-manuscript/src/components/ManuscriptLayout.js
@@ -5,6 +5,7 @@ import {
Text,
ManuscriptHeader,
ManuscriptDetailsTop,
+ ManuscriptMetadata,
} from 'pubsweet-component-faraday-ui'
const ManuscriptLayout = ({
@@ -37,6 +38,7 @@ const ManuscriptLayout = ({
fragment={fragment}
journal={journal}
/>
+ <ManuscriptMetadata fragment={fragment} getSignedUrl={getSignedUrl} />
</Fragment>
) : (
<Text>Loading...</Text>
diff --git a/packages/hindawi-theme/src/elements/Accordion.js b/packages/hindawi-theme/src/elements/Accordion.js
index 649315076..75707f3e6 100644
--- a/packages/hindawi-theme/src/elements/Accordion.js
+++ b/packages/hindawi-theme/src/elements/Accordion.js
@@ -12,7 +12,10 @@ export default {
`,
Header: {
Root: css`
- background-color: ${th('accordion.headerBackgroundColor')};
+ background-color: ${props =>
+ !props.transparent
+ ? th('accordion.headerBackgroundColor')
+ : 'transparent'};
border-radius: ${props => (props.expanded ? 0 : th('borderRadius'))};
borde-border-top-left-radius: ${th('borderRadius')};
border-top-right-radius: ${th('borderRadius')};
diff --git a/packages/hindawi-theme/src/index.js b/packages/hindawi-theme/src/index.js
index 1bccea7aa..e57df7559 100644
--- a/packages/hindawi-theme/src/index.js
+++ b/packages/hindawi-theme/src/index.js
@@ -165,7 +165,7 @@ const hindawiTheme = {
gridUnit: '8px',
/* Border */
- borderRadius: '5px',
+ borderRadius: '3px',
borderWidth: '1px', // julien: not 0
borderStyle: 'solid',
--
GitLab