diff --git a/app/components/component-manuscripts/src/Manuscript.jsx b/app/components/component-manuscripts/src/Manuscript.jsx
index 7034584511e8654dd3aff2ddf5822e24bef365b5..69fe81c28b91fc51d30c1d800777f1e4e84bf1e2 100644
--- a/app/components/component-manuscripts/src/Manuscript.jsx
+++ b/app/components/component-manuscripts/src/Manuscript.jsx
@@ -13,7 +13,7 @@ import {
UserInfo,
SuccessStatus,
ErrorStatus,
- NormalStatus
+ NormalStatus,
} from './style'
import { convertTimestampToDate } from '../../../shared/time-formatting'
@@ -25,8 +25,7 @@ const DELETE_MANUSCRIPT = gql`
}
`
-
-const Status = ({status}) => {
+const Status = ({ status }) => {
if (status === 'accepted') {
return <SuccessStatus>{status}</SuccessStatus>
} else if (status === 'rejected') {
@@ -41,7 +40,7 @@ const User = ({ manuscript }) => {
return (
<Row>
<Cell>
- { manuscript.meta && manuscript.meta.title }
+ {manuscript.meta && manuscript.meta.title}
{/* <UserCombo>
<UserAvatar manuscript={manuscript} />
<UserInfo>
@@ -51,13 +50,20 @@ const User = ({ manuscript }) => {
</UserCombo> */}
</Cell>
<Cell>{convertTimestampToDate(manuscript.created)}</Cell>
- <Cell><Status status={manuscript.status}/></Cell>
+ <Cell>
+ <Status status={manuscript.status} />
+ </Cell>
+ <Cell>
+ { manuscript.submitter && manuscript.submitter.username }
+ </Cell>
<LastCell>
<Action to={`/journal/versions/${manuscript.id}/manuscript`}>
- View
- </Action>
+ View
+ </Action>
- <Action onClick={() => deleteManuscript({ variables: { id: manuscript.id } })}>
+ <Action
+ onClick={() => deleteManuscript({ variables: { id: manuscript.id } })}
+ >
Delete
</Action>
</LastCell>
diff --git a/app/components/component-manuscripts/src/Manuscripts.jsx b/app/components/component-manuscripts/src/Manuscripts.jsx
index 8db11a44a4f277070999fed09c648c7101ceeea3..35f82ecbc2a8ec980435f035a5d5c4c64f9b5c67 100644
--- a/app/components/component-manuscripts/src/Manuscripts.jsx
+++ b/app/components/component-manuscripts/src/Manuscripts.jsx
@@ -1,10 +1,11 @@
import React, { useState } from 'react'
import gql from 'graphql-tag'
import { useQuery } from '@apollo/react-hooks'
-import { Heading } from '@pubsweet/ui'
+
import Manuscript from './Manuscript'
-import { Container, Table, Header, Caret, Carets } from './style'
+import { Container, Table, Header, Content, PageHeading } from './style'
+import { Carets, CaretUp, CaretDown } from '../../shared'
import Spinner from '../../shared/Spinner'
import Pagination from '../../shared/Pagination'
@@ -25,44 +26,15 @@ const GET_MANUSCRIPTS = gql`
created
updated
status
+ submitter {
+ username
+ profilePicture
+ }
}
}
}
`
-const CaretUp = ({ active }) => (
- <Caret
- aria-hidden="true"
- className=""
- data-icon="caret-up"
- fill="currentColor"
- focusable="false"
- height="1em"
- viewBox="0 0 100 100"
- width="1em"
- active={active}
- >
- <path d="M50 17L100.229 67.25H-0.229473L50 17Z" />
- </Caret>
-)
-
-
-const CaretDown = ({ active }) => (
- <Caret
- active={active}
- aria-hidden="true"
- className=""
- data-icon="caret-down"
- fill="currentColor"
- focusable="false"
- height="1em"
- viewBox="0 0 100 100"
- width="1em"
- >
- <path d="M50 84L-0.229473 33.75L100.229 33.75L50 84Z" />
- </Caret>
-)
-
const Manuscripts = () => {
const SortHeader = ({ thisSortName, children }) => {
const changeSort = () => {
@@ -117,14 +89,15 @@ const Manuscripts = () => {
return (
<Container>
- <Heading level={1}>Manuscripts</Heading>
+ <PageHeading level={1}>Manuscripts</PageHeading>
+ <Content>
<Table>
<Header>
<tr>
<SortHeader thisSortName="meta:title">Title</SortHeader>
- <SortHeader thisSortName="created">Created</SortHeader>
+ <SortHeader thisSortName="created">Submitted</SortHeader>
<SortHeader thisSortName="status">Status</SortHeader>
- <SortHeader thisSortName="authors">Authors</SortHeader>
+ <SortHeader thisSortName="submitterId">Author</SortHeader>
<th />
</tr>
</Header>
@@ -140,6 +113,7 @@ const Manuscripts = () => {
setPage={setPage}
totalCount={totalCount}
/>
+ </Content>
</Container>
)
}
diff --git a/app/components/component-manuscripts/src/style.js b/app/components/component-manuscripts/src/style.js
index 6e2ee3eceef24155aa1b60750511fa8199d2ae6c..141d4c4b08d4dd713ed6d73d73f38cf8e27c62a5 100644
--- a/app/components/component-manuscripts/src/style.js
+++ b/app/components/component-manuscripts/src/style.js
@@ -1,5 +1,5 @@
import styled, { css } from 'styled-components'
-import { Action } from '@pubsweet/ui'
+import { Action, Heading } from '@pubsweet/ui'
import { th, grid } from '@pubsweet/ui-toolkit'
export const Table = styled.table`
@@ -7,17 +7,30 @@ export const Table = styled.table`
border-radius: ${th('borderRadius')};
border-collapse: collapse;
font-size: ${th('fontSizeBaseSmall')};
-
+ overflow: hidden;
td {
- width: 33%;
+ width: 25%;
}
`
+
+export const PageHeading = styled(Heading)`
+ color: ${th('colorText')};
+ margin-bottom: 1rem;
+`
+
+export const Content = styled.div`
+ max-width: 90rem;
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+ background-color: ${th('colorBackground')};
+ border-radius: ${th('borderRadius')};
+`
+
export const Header = styled.thead`
text-align: left;
font-variant: all-small-caps;
border-bottom: 1px solid ${th('colorFurniture')};
- background-color: ${th('colorBackgroundHue')};
+ background-color: ${th('colorSecondaryBackground')};
th {
padding: ${grid(1)} ${grid(3)};
@@ -25,6 +38,7 @@ export const Header = styled.thead`
`
export const Container = styled.div`
+ background: ${th('colorBackgroundHue')};
padding: ${grid(2)};
`
@@ -69,31 +83,6 @@ export const UserInfo = styled.div`
margin-left: ${grid(1)};
`
-export const Caret = styled.svg`
- ${props =>
- props.active
- ? css`
- color: ${th('colorPrimary')};
- `
- : css`
- color: ${th('colorSecondary')};
- `}
-`
-
-export const Carets = styled.span`
- display: inline-flex;
- flex-direction: column;
- align-items: center;
- vertical-align: middle;
- margin-left: ${grid(0.5)};
- svg {
- height: ${grid(1.5)};
- }
- svg:nth-of-type(2) {
- margin-top: ${grid(-0.5)};
- }
-`
-
// TODO: Extract common above
// Specific
diff --git a/app/components/shared/Carets.jsx b/app/components/shared/Carets.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..c5e10e729cf766f1c9d311a9dfd4ef5973197871
--- /dev/null
+++ b/app/components/shared/Carets.jsx
@@ -0,0 +1,60 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+import { grid, th } from '@pubsweet/ui-toolkit'
+
+export const Caret = styled.svg`
+ ${props =>
+ props.active
+ ? css`
+ color: ${th('colorPrimary')};
+ `
+ : css`
+ color: ${th('colorSecondary')};
+ `}
+`
+
+export const Carets = styled.span`
+ display: inline-flex;
+ flex-direction: column;
+ align-items: center;
+ vertical-align: middle;
+ margin-left: ${grid(0.5)};
+ svg {
+ height: ${grid(1.5)};
+ }
+ svg:nth-of-type(2) {
+ margin-top: ${grid(-0.5)};
+ }
+`
+
+export const CaretUp = ({ active }) => (
+ <Caret
+ active={active}
+ aria-hidden="true"
+ className=""
+ data-icon="caret-up"
+ fill="currentColor"
+ focusable="false"
+ height="1em"
+ viewBox="0 0 100 100"
+ width="1em"
+ >
+ <path d="M50 17L100.229 67.25H-0.229473L50 17Z" />
+ </Caret>
+)
+
+export const CaretDown = ({ active }) => (
+ <Caret
+ active={active}
+ aria-hidden="true"
+ className=""
+ data-icon="caret-down"
+ fill="currentColor"
+ focusable="false"
+ height="1em"
+ viewBox="0 0 100 100"
+ width="1em"
+ >
+ <path d="M50 84L-0.229473 33.75L100.229 33.75L50 84Z" />
+ </Caret>
+)
diff --git a/app/components/shared/index.js b/app/components/shared/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..5b6884578fcbce17c5a0b67eb3df082308cb7d24
--- /dev/null
+++ b/app/components/shared/index.js
@@ -0,0 +1,4 @@
+export * from './Carets'
+export * from './Icon'
+export * from './Pagination'
+export * from './Spinner'