From 7490513038e58d9742f35af4a225ac4dead3b62c Mon Sep 17 00:00:00 2001
From: Jure Triglav <juretriglav@gmail.com>
Date: Wed, 15 Jul 2020 17:10:08 +0200
Subject: [PATCH] feat: improve dashboard design
---
.../src/components/Dashboard.js | 52 +++++-----
.../src/components/Reviews.js | 3 +-
.../src/components/sections/EditorItem.js | 19 ++--
.../src/components/sections/OwnerItem.js | 24 ++---
.../src/components/sections/ReviewerItem.js | 96 +++++++++----------
.../src/components/sections/VersionTitle.js | 2 +-
.../component-dashboard/src/style.js | 13 ++-
7 files changed, 104 insertions(+), 105 deletions(-)
diff --git a/app/components/component-dashboard/src/components/Dashboard.js b/app/components/component-dashboard/src/components/Dashboard.js
index 883e7824ed..4edda6a4ee 100644
--- a/app/components/component-dashboard/src/components/Dashboard.js
+++ b/app/components/component-dashboard/src/components/Dashboard.js
@@ -1,11 +1,17 @@
import React from 'react'
import { useQuery, useMutation } from '@apollo/react-hooks'
-import { Action, Button } from '@pubsweet/ui'
+import { Action, Button, Icon } from '@pubsweet/ui'
// import Authorize from 'pubsweet-client/src/helpers/Authorize'
import queries from '../graphql/queries/'
import mutations from '../graphql/mutations/'
-import { Container, Section, Heading, Content } from '../style'
+import {
+ Container,
+ Section,
+ Heading,
+ Content,
+ HeadingWithAction,
+} from '../style'
import EditorItem from './sections/EditorItem'
import OwnerItem from './sections/OwnerItem'
import ReviewerItem from './sections/ReviewerItem'
@@ -65,9 +71,12 @@ const Dashboard = ({ history, ...props }) => {
return (
<Container>
- <Button onClick={() => history.push('/journal/newSubmission')} primary>
- New submission
- </Button>
+ <HeadingWithAction>
+ <Heading>Dashboard</Heading>
+ <Button onClick={() => history.push('/journal/newSubmission')} primary>
+ {/* <Icon>plus</Icon> */}＋ New submission
+ </Button>
+ </HeadingWithAction>
{!dashboard.length && <Section>Nothing to do at the moment.</Section>}
{/* <Authorize object={dashboard} operation="can view my submission section"> */}
@@ -76,8 +85,8 @@ const Dashboard = ({ history, ...props }) => {
<SectionHeader>
<Title>My Submissions</Title>
</SectionHeader>
- <SectionRow>
- {dashboard.map(submission => (
+ {dashboard.map(submission => (
+ <SectionRow key={`submission-${submission.id}`}>
<OwnerItem
deleteManuscript={() =>
// eslint-disable-next-line no-alert
@@ -85,11 +94,10 @@ const Dashboard = ({ history, ...props }) => {
'Are you sure you want to delete this submission?',
) && deleteManuscript({ variables: { id: submission.id } })
}
- key={`submission-${submission.id}`}
version={submission}
/>
- ))}
- </SectionRow>
+ </SectionRow>
+ ))}
</SectionContent>
) : null}
{/* </Authorize>
@@ -99,16 +107,17 @@ const Dashboard = ({ history, ...props }) => {
<SectionHeader>
<Title>To Review</Title>
</SectionHeader>
- <SectionRow>
- {dashboard.map(review => (
+
+ {dashboard.map(review => (
+ <SectionRow key={review.id}>
<ReviewerItem
currentUser={currentUser}
key={review.id}
reviewerRespond={reviewerRespond}
version={review}
/>
- ))}
- </SectionRow>
+ </SectionRow>
+ ))}
</SectionContent>
) : null}
{/* </Authorize> */}
@@ -117,16 +126,13 @@ const Dashboard = ({ history, ...props }) => {
{dashboard.length > 0 ? (
<SectionContent>
<SectionHeader>
- <Title>My Manuscripts</Title>
+ <Title>Manuscripts I'm editor of</Title>
</SectionHeader>
- <SectionRow>
- {dashboard.map(manuscript => (
- <EditorItem
- key={`manuscript-${manuscript.id}`}
- version={manuscript}
- />
- ))}
- </SectionRow>
+ {dashboard.map(manuscript => (
+ <SectionRow key={`manuscript-${manuscript.id}`}>
+ <EditorItem version={manuscript} />
+ </SectionRow>
+ ))}
</SectionContent>
) : null}
{/* </Authorize> */}
diff --git a/app/components/component-dashboard/src/components/Reviews.js b/app/components/component-dashboard/src/components/Reviews.js
index 78b9284e52..5a70702a70 100644
--- a/app/components/component-dashboard/src/components/Reviews.js
+++ b/app/components/component-dashboard/src/components/Reviews.js
@@ -7,10 +7,9 @@ import { th } from '@pubsweet/ui-toolkit'
const Root = styled.div`
display: inline-flex;
- justify-content: flex-end;
+ // justify-content: flex-end;
margin-bottom: 0.6em;
margin-top: 0.3em;
- padding-left: 1.5em;
font-family: ${th('fontReviewer')};
font-size: 0.9em;
diff --git a/app/components/component-dashboard/src/components/sections/EditorItem.js b/app/components/component-dashboard/src/components/sections/EditorItem.js
index 04f0c0ebc0..a5b965f2c5 100644
--- a/app/components/component-dashboard/src/components/sections/EditorItem.js
+++ b/app/components/component-dashboard/src/components/sections/EditorItem.js
@@ -3,8 +3,7 @@ import React from 'react'
import styled from 'styled-components'
// import Authorize from 'pubsweet-client/src/helpers/Authorize'
import { Action, ActionGroup } from '@pubsweet/ui'
-import { Item, Header, Body } from '../../style'
-import Status from '../Status'
+import { Item, Header, Body, StatusBadge } from '../../style'
import Meta from '../metadata/Meta'
import MetadataSections from '../metadata/MetadataSections'
import MetadataType from '../metadata/MetadataType'
@@ -61,9 +60,9 @@ const getSubmitedDate = version =>
const EditorItem = ({ version }) => (
// <Authorize object={[version]} operation="can view my manuscripts section">
- <Item>
- <Header>
- <Status status={version.status} />
+ <>
+ <Item>
+ <StatusBadge minimal status={version.status} />
<Meta>
<MetadataStreamLined
streamlinedReview={getDeclarationsObject(
@@ -83,16 +82,16 @@ const EditorItem = ({ version }) => (
openPeerReview={getDeclarationsObject(version, 'openPeerReview')}
/>
</Meta>
- </Header>
- <Body>
+ </Item>
+ <Item>
<VersionTitleLink id={version.id} page="decisions" version={version}>
<VersionTitle version={version} />
</VersionTitleLink>
<EditorItemLinks version={version} />
- </Body>
-
+ </Item>
<Reviews version={version} />
- </Item>
+ </>
+
// </Authorize>
)
diff --git a/app/components/component-dashboard/src/components/sections/OwnerItem.js b/app/components/component-dashboard/src/components/sections/OwnerItem.js
index 34b903ff95..0fb2012fcb 100644
--- a/app/components/component-dashboard/src/components/sections/OwnerItem.js
+++ b/app/components/component-dashboard/src/components/sections/OwnerItem.js
@@ -4,17 +4,10 @@ import { pickBy } from 'lodash'
import { Action, ActionGroup } from '@pubsweet/ui'
// import Authorize from 'pubsweet-client/src/helpers/Authorize'
-import { Item, Header, Body } from '../../style'
-import Status from '../Status'
+import { Item, Header, Body, StatusBadge } from '../../style'
import VersionTitle from './VersionTitle'
const OwnerItem = ({ version, journals, deleteManuscript }) => {
- const itemHeader = (
- <Header>
- <Status status={version.status} />
- </Header>
- )
-
const baseLink = `/journal/versions/${version.id}`
const submitLink = `${baseLink}/submit`
const manuscriptLink = `${baseLink}/manuscript`
@@ -53,18 +46,15 @@ const OwnerItem = ({ version, journals, deleteManuscript }) => {
// </Authorize>
)
- const body = (
- <Body>
- <VersionTitle version={version} />
- {actions}
- </Body>
- )
-
return (
// <Authorize object={[version]} operation="can view my submission section">
<Item>
- {itemHeader}
- {body}
+ <div>
+ {' '}
+ <StatusBadge minimal status={version.status} />
+ <VersionTitle version={version} />
+ </div>
+ {actions}
</Item>
// </Authorize>
)
diff --git a/app/components/component-dashboard/src/components/sections/ReviewerItem.js b/app/components/component-dashboard/src/components/sections/ReviewerItem.js
index 3e5070037c..344c1bfaae 100644
--- a/app/components/component-dashboard/src/components/sections/ReviewerItem.js
+++ b/app/components/component-dashboard/src/components/sections/ReviewerItem.js
@@ -49,59 +49,57 @@ const ReviewerItem = ({ version, journals, currentUser, reviewerRespond }) => {
// operation="can view review section"
// >
<Item>
- <Body>
- <VersionTitle version={version} />
+ <VersionTitle version={version} />
- {(status === 'accepted' || status === 'completed') && (
- <Links>
- <LinkContainer>
- <JournalLink id={version.id} page="reviews" version={version}>
- {status === 'completed' ? 'Completed' : 'Do Review'}
- </JournalLink>
- </LinkContainer>
- </Links>
- )}
+ {(status === 'accepted' || status === 'completed') && (
+ <Links>
+ <LinkContainer>
+ <JournalLink id={version.id} page="reviews" version={version}>
+ {status === 'completed' ? 'Completed' : 'Do Review'}
+ </JournalLink>
+ </LinkContainer>
+ </Links>
+ )}
- {status === 'invited' && (
- <Actions>
- <ActionContainer>
- <Button
- data-testid="accept-review"
- onClick={() => {
- reviewerRespond({
- variables: {
- currentUserId: currentUser.id,
- action: 'accepted',
- teamId: team.id,
- },
- })
- }}
- >
- accept
- </Button>
- </ActionContainer>
+ {status === 'invited' && (
+ <Actions>
+ <ActionContainer>
+ <Button
+ data-testid="accept-review"
+ onClick={() => {
+ reviewerRespond({
+ variables: {
+ currentUserId: currentUser.id,
+ action: 'accepted',
+ teamId: team.id,
+ },
+ })
+ }}
+ >
+ accept
+ </Button>
+ </ActionContainer>
- <Divider separator="|" />
+ <Divider separator="|" />
- <ActionContainer>
- <Button
- onClick={() => {
- reviewerRespond({
- variables: {
- currentUserId: currentUser.id,
- action: 'rejected',
- teamId: team.id,
- },
- })
- }}
- >
- reject
- </Button>
- </ActionContainer>
- </Actions>
- )}
- {status === 'rejected' && 'rejected'}
- </Body>
+ <ActionContainer>
+ <Button
+ onClick={() => {
+ reviewerRespond({
+ variables: {
+ currentUserId: currentUser.id,
+ action: 'rejected',
+ teamId: team.id,
+ },
+ })
+ }}
+ >
+ reject
+ </Button>
+ </ActionContainer>
+ </Actions>
+ )}
+ {status === 'rejected' && 'rejected'}
</Item>
// </Authorize>
)
diff --git a/app/components/component-dashboard/src/components/sections/VersionTitle.js b/app/components/component-dashboard/src/components/sections/VersionTitle.js
index d51d00964a..b45042c777 100644
--- a/app/components/component-dashboard/src/components/sections/VersionTitle.js
+++ b/app/components/component-dashboard/src/components/sections/VersionTitle.js
@@ -3,7 +3,7 @@ import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
const Root = styled.div`
- font-size: ${th('fontSizeHeading4')};
+ // font-size: ${th('fontSizeHeading4')};
line-height: ${th('lineHeightHeading4')};
`
diff --git a/app/components/component-dashboard/src/style.js b/app/components/component-dashboard/src/style.js
index 8ff8cd0af4..da125ae71d 100644
--- a/app/components/component-dashboard/src/style.js
+++ b/app/components/component-dashboard/src/style.js
@@ -1,8 +1,6 @@
import styled from 'styled-components'
import { th, grid } from '@pubsweet/ui-toolkit'
-// TODO -- why two divs?
-
export { Container, Section, Content } from '../../shared'
const Actions = styled.div``
@@ -13,6 +11,8 @@ const ActionContainer = styled.div`
export { Actions, ActionContainer }
const Item = styled.div`
+ display: grid;
+ grid-template-columns: 1fr auto;
margin-bottom: calc(${th('gridUnit') * 4});
`
@@ -65,7 +65,14 @@ const Heading = styled.div`
font-family: ${th('fontReading')};
font-size: ${th('fontSizeHeading3')};
line-height: ${th('lineHeightHeading3')};
- margin: 0 0 ${grid(3)} 0;
`
export { Page, Heading }
+
+export const HeadingWithAction = styled.div`
+ display: grid;
+ grid-template-columns: 1fr auto;
+ align-items: center;
+`
+
+export { StatusBadge } from '../../shared'
--
GitLab