From 9d0b91ce2678a4e0dab6274674cdac6a878ef6cc Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munt@gmail.com>
Date: Thu, 26 Apr 2018 17:28:25 +0300
Subject: [PATCH] feat(manuscript-details): add most of manuscript details
sections
---
.../src/components/Authors.js | 63 ++++++++++
.../src/components/Expandable.js | 66 ++++++++++
.../src/components/Files.js | 114 ++++++++++++++++++
.../src/components/ManuscriptDetails.js | 51 ++++++++
.../src/components/ManuscriptLayout.js | 2 +
.../src/components/index.js | 4 +
packages/xpub-faraday/config/default.js | 2 +-
yarn.lock | 2 +-
8 files changed, 302 insertions(+), 2 deletions(-)
create mode 100644 packages/component-manuscript/src/components/Authors.js
create mode 100644 packages/component-manuscript/src/components/Expandable.js
create mode 100644 packages/component-manuscript/src/components/Files.js
create mode 100644 packages/component-manuscript/src/components/ManuscriptDetails.js
diff --git a/packages/component-manuscript/src/components/Authors.js b/packages/component-manuscript/src/components/Authors.js
new file mode 100644
index 000000000..0e761b69f
--- /dev/null
+++ b/packages/component-manuscript/src/components/Authors.js
@@ -0,0 +1,63 @@
+import React from 'react'
+import { th } from '@pubsweet/ui'
+import styled from 'styled-components'
+
+const TR = ({ name, email, affiliation }) => (
+ <Row>
+ <td>{name}</td>
+ <td>{email}</td>
+ <td>{affiliation}</td>
+ </Row>
+)
+
+const authors = [
+ { name: 'Pallavi1', email: 'cocojambo1@gmail.com', affiliation: 'UTI' },
+ { name: 'Pallavi2', email: 'cocojambo2@gmail.com', affiliation: 'UTI' },
+ { name: 'Pallavi3', email: 'cocojambo3@gmail.com', affiliation: 'UTI' },
+ { name: 'Pallavi4', email: 'cocojambo4@gmail.com', affiliation: 'UTI' },
+]
+
+const Authors = () => (
+ <Table>
+ <thead>
+ <tr>
+ <td>Full Name</td>
+ <td>Email</td>
+ <td>Affiliation</td>
+ </tr>
+ </thead>
+ <tbody>{authors.map(a => <TR key={a.email} {...a} />)}</tbody>
+ </Table>
+)
+
+export default Authors
+
+// #region styled-components
+const Row = styled.tr`
+ border-bottom: ${th('borderDefault')};
+ color: ${th('colorPrimary')};
+ font-family: ${th('fontReading')};
+ font-size: ${th('fontSizeBaseSmall')};
+ height: 40px;
+ text-align: left;
+ &:hover {
+ background-color: ${th('backgroundColorReverse')};
+ }
+`
+
+const Table = styled.table`
+ border-spacing: 0;
+ border-collapse: collapse;
+ width: 100%;
+
+ & thead tr {
+ border-bottom: ${th('borderDefault')};
+ color: ${th('colorPrimary')};
+ font-family: ${th('fontReading')};
+ font-size: ${th('fontSizeBaseSmall')};
+ font-weight: bold;
+ height: 40px;
+ text-align: left;
+ }
+`
+// #endregion
diff --git a/packages/component-manuscript/src/components/Expandable.js b/packages/component-manuscript/src/components/Expandable.js
new file mode 100644
index 000000000..122e0d13e
--- /dev/null
+++ b/packages/component-manuscript/src/components/Expandable.js
@@ -0,0 +1,66 @@
+import React from 'react'
+import styled from 'styled-components'
+import { th, Icon } from '@pubsweet/ui'
+import { compose, withState, withHandlers } from 'recompose'
+
+const Expandable = ({ expanded, label, children, toggle }) => (
+ <Root expanded={expanded}>
+ <Header onClick={toggle}>
+ <Chevron expanded={expanded}>
+ <Icon primary size={3}>
+ chevron_up
+ </Icon>
+ </Chevron>
+ <SectionLabel>{label}</SectionLabel>
+ </Header>
+ {expanded && <ChildrenContainer>{children}</ChildrenContainer>}
+ </Root>
+)
+
+export default compose(
+ withState('expanded', 'setExpanded', false),
+ withHandlers({
+ toggle: ({ setExpanded }) => () => {
+ setExpanded(e => !e)
+ },
+ }),
+)(Expandable)
+
+// #region styled-components
+const Chevron = styled.div`
+ align-items: center;
+ height: calc(${th('subGridUnit')} * 5);
+ display: flex;
+ justify-content: center;
+ transform: ${({ expanded }) => `rotateZ(${expanded ? 0 : 180}deg)`};
+ transition: transform 0.2s;
+ width: calc(${th('subGridUnit')} * 5);
+`
+
+const SectionLabel = styled.span`
+ color: ${th('colorPrimary')};
+ font-family: ${th('fontHeading')};
+ font-size: ${th('fontSizeBase')};
+ text-transform: uppercase;
+`
+
+const ChildrenContainer = styled.div`
+ padding: calc(${th('subGridUnit')} * 3);
+`
+
+const Header = styled.div`
+ align-items: center;
+ border-bottom: ${th('borderDefault')};
+ cursor: pointer;
+ display: flex;
+ justify-content: flex-start;
+`
+
+const Root = styled.div`
+ cursor: pointer;
+ display: flex;
+ flex-direction: column;
+ /* height: ${({ expanded }) => `${expanded ? 160 : 40}px`}; */
+ transition: all 0.3s;
+`
+// #endregion
diff --git a/packages/component-manuscript/src/components/Files.js b/packages/component-manuscript/src/components/Files.js
new file mode 100644
index 000000000..7a5ff48b7
--- /dev/null
+++ b/packages/component-manuscript/src/components/Files.js
@@ -0,0 +1,114 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+import { th, Icon } from '@pubsweet/ui'
+
+const parseFileSize = (size = 0) => {
+ const kbSize = Math.floor(size / 1000)
+ const mbSize = Math.floor(kbSize / 1000)
+ const gbSize = Math.floor(mbSize / 1000)
+
+ if (gbSize) {
+ return `${gbSize} GB`
+ } else if (mbSize) {
+ return `${mbSize} MB`
+ } else if (kbSize) {
+ return `${kbSize} kB`
+ }
+ return `${size} bytes`
+}
+
+const File = ({ fileName = 'Some_awesome_stuff.pdf', fileSize }) => (
+ <FileRoot>
+ <IconButton>
+ <Icon primary size={3}>
+ eye
+ </Icon>
+ </IconButton>
+ <IconButton>
+ <Icon primary size={3}>
+ download
+ </Icon>
+ </IconButton>
+ <FileName>{fileName}</FileName>
+ <FileSize>{parseFileSize(fileSize)}</FileSize>
+ </FileRoot>
+)
+
+const Files = () => (
+ <Root>
+ <Header>
+ <span>Main manuscript</span>
+ <div />
+ </Header>
+ <File fileName="file1.png" fileSize={212312312} />
+ <File fileName="file2.png" fileSize={3231} />
+ <File fileName="file3.png" fileSize={5521231} />
+ <Header>
+ <span>Supplimentary files</span>
+ <div />
+ </Header>
+ <Header>
+ <span>Cover letter</span>
+ <div />
+ </Header>
+ </Root>
+)
+
+export default Files
+
+// #region styled-component
+const defaultText = css`
+ color: ${th('colorPrimary')};
+ font-family: ${th('fontHeading')};
+ font-size: ${th('fontSizeBaseSmall')};
+`
+
+const FileName = styled.span`
+ ${defaultText};
+`
+const FileSize = FileName.extend`
+ margin-left: ${th('subGridUnit')};
+`
+
+const IconButton = styled.div`
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ margin: 0 ${th('subGridUnit')};
+`
+
+const FileRoot = styled.div`
+ align-items: center;
+ border: ${th('borderDefault')};
+ display: flex;
+ flex-direction: row;
+ margin-bottom: ${th('subGridUnit')};
+ padding: ${th('subGridUnit')};
+`
+
+const Header = styled.div`
+ align-self: stretch;
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+
+ & span {
+ ${defaultText};
+ margin-right: ${th('subGridUnit')};
+ text-transform: uppercase;
+ }
+
+ & div {
+ background: ${th('colorPrimary')};
+ flex: 1;
+ height: 1px;
+ }
+`
+
+const Root = styled.div`
+ align-items: flex-start;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+`
+// #endregion
diff --git a/packages/component-manuscript/src/components/ManuscriptDetails.js b/packages/component-manuscript/src/components/ManuscriptDetails.js
new file mode 100644
index 000000000..ca2fcf96a
--- /dev/null
+++ b/packages/component-manuscript/src/components/ManuscriptDetails.js
@@ -0,0 +1,51 @@
+import React from 'react'
+import { th } from '@pubsweet/ui'
+import styled from 'styled-components'
+
+import { Authors, Expandable, Files } from './'
+
+const Conflict = () => (
+ <Text>
+ “Prevention is better than cure.†Well said and well understood! But there
+ are certain types of headaches, which are part and parcel of you; gifted to
+ you by birth! Sinus headache is one of them, unfortunately. Many say about
+ sinus, “that which can not be cured, must be endured!’ You can control it,
+ reduce its impact. Can it be ever eradicated? The answer is in the negative,
+ as far as the present day medical research can take you! In sinus,
+ invariably you have the headache, but every headache is not sinus! Sinus and
+ nasal passage problems are the cause of headache, mostly! It is not that you
+ </Text>
+)
+
+const ManuscriptDetails = () => (
+ <Root>
+ <Expandable label="Details">
+ <Expandable label="abstract">wai sebi nu fi nasol</Expandable>
+ <Expandable label="Conflict of interest">
+ <Conflict />
+ </Expandable>
+ <Expandable label="authors">
+ <Authors />
+ </Expandable>
+ <Expandable label="files">
+ <Files />
+ </Expandable>
+ </Expandable>
+ </Root>
+)
+
+export default ManuscriptDetails
+
+// #region styled-components
+const Text = styled.span`
+ color: ${th('colorPrimary')};
+ font-family: ${th('fontReading')};
+ font-size: ${th('fontSizeBaseSmall')};
+`
+
+const Root = styled.div`
+ border: ${th('borderDefault')};
+ margin-top: calc(${th('subGridUnit')} * 2);
+ transition: height 0.3s;
+`
+// #endregion
diff --git a/packages/component-manuscript/src/components/ManuscriptLayout.js b/packages/component-manuscript/src/components/ManuscriptLayout.js
index ae4ea0de6..c1289ce08 100644
--- a/packages/component-manuscript/src/components/ManuscriptLayout.js
+++ b/packages/component-manuscript/src/components/ManuscriptLayout.js
@@ -9,6 +9,7 @@ import {
Container,
SideBar,
} from '../atoms'
+import { ManuscriptDetails } from './'
const ManuscriptLayout = ({
currentUser,
@@ -27,6 +28,7 @@ const ManuscriptLayout = ({
<ManuscriptId>{`- ID ${project.customId}`}</ManuscriptId>
</Header>
<ManuscriptHeader journal={journal} project={project} version={version} />
+ <ManuscriptDetails />
</Container>
<SideBar flex={1}>Sidebar</SideBar>
</Root>
diff --git a/packages/component-manuscript/src/components/index.js b/packages/component-manuscript/src/components/index.js
index e2e5b2d91..34e9a94ef 100644
--- a/packages/component-manuscript/src/components/index.js
+++ b/packages/component-manuscript/src/components/index.js
@@ -1 +1,5 @@
+export { default as Files } from './Files'
+export { default as Authors } from './Authors'
+export { default as Expandable } from './Expandable'
export { default as ManuscriptPage } from './ManuscriptPage'
+export { default as ManuscriptDetails } from './ManuscriptDetails'
diff --git a/packages/xpub-faraday/config/default.js b/packages/xpub-faraday/config/default.js
index be3a905e9..3629049fa 100644
--- a/packages/xpub-faraday/config/default.js
+++ b/packages/xpub-faraday/config/default.js
@@ -39,7 +39,7 @@ module.exports = {
'pubsweet-client': {
API_ENDPOINT: '/api',
'login-redirect': '/',
- 'redux-log': true,
+ 'redux-log': false,
theme: process.env.PUBSWEET_THEME,
},
'mail-transport': {
diff --git a/yarn.lock b/yarn.lock
index b3ff38cbf..5405f356e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7340,7 +7340,7 @@ promise@^7.1.1:
dependencies:
asap "~2.0.3"
-prompt@^1.0.0, "prompt@github:flatiron/prompt#1c95d1d8d333b5fbc13fa5f0619f3dcf0d514f87":
+prompt@^1.0.0, prompt@flatiron/prompt#1c95d1d8d333b5fbc13fa5f0619f3dcf0d514f87:
version "1.0.0"
resolved "https://codeload.github.com/flatiron/prompt/tar.gz/1c95d1d8d333b5fbc13fa5f0619f3dcf0d514f87"
dependencies:
--
GitLab