From 690ad665c50b865a516a5fc726624134e52ead6b Mon Sep 17 00:00:00 2001
From: Bogdan Cochior <bogdan.cochior@thinslices.com>
Date: Tue, 4 Sep 2018 17:37:04 +0300
Subject: [PATCH] fix(visual): title, manuscript card improvements
---
.../src/ManuscriptCard.js | 26 ++++++++++-------
.../src/ReviewerBreakdown.js | 4 +--
.../component-faraday-ui/src/TextTooltip.js | 28 +++++++++++++++++++
.../component-faraday-ui/src/TextTooltip.md | 9 ++++++
packages/component-faraday-ui/src/index.js | 1 +
.../components/Dashboard/DashboardItems.js | 3 +-
6 files changed, 58 insertions(+), 13 deletions(-)
create mode 100644 packages/component-faraday-ui/src/TextTooltip.js
create mode 100644 packages/component-faraday-ui/src/TextTooltip.md
diff --git a/packages/component-faraday-ui/src/ManuscriptCard.js b/packages/component-faraday-ui/src/ManuscriptCard.js
index 58e999304..0b8520fe6 100644
--- a/packages/component-faraday-ui/src/ManuscriptCard.js
+++ b/packages/component-faraday-ui/src/ManuscriptCard.js
@@ -13,6 +13,7 @@ import {
Item,
IconButton,
ActionLink,
+ TextTooltip,
AuthorTagList,
ReviewerBreakdown,
} from './'
@@ -38,7 +39,9 @@ const ManuscriptCard = ({
<Root data-test-id={`fragment-${fragmentId}`} onClick={onCardClick}>
<MainContainer>
<Row alignItems="center" justify="space-between">
- <H3>{title}</H3>
+ <TextTooltip title={title}>
+ <H3>{title}</H3>
+ </TextTooltip>
<Tag data-test-id="fragment-status" status>
{visibleStatus}
</Tag>
@@ -52,17 +55,11 @@ const ManuscriptCard = ({
<Text customId mr={1}>{`ID ${customId}`}</Text>
{submitted && (
<DateParser humanizeThreshold={0} timestamp={submitted}>
- {timestamp => (
- <Text mr={3} secondary>
- Submitted on {timestamp}
- </Text>
- )}
+ {timestamp => <Text mr={3}>Submitted on {timestamp}</Text>}
</DateParser>
)}
- <H4>{manuscriptType.label || type}</H4>
- <Text ml={1} secondary>
- {journal}
- </Text>
+ <Text>{manuscriptType.label || type}</Text>
+ <Text ml={1}>{journal}</Text>
</Row>
<Row alignItems="center" justify="flex-start" mb={1}>
<H4>Handling editor</H4>
@@ -127,10 +124,19 @@ const MainContainer = styled.div`
flex-direction: column;
padding: calc(${th('gridUnit')} * 2);
padding-bottom: ${th('gridUnit')};
+ width: 100%;
${Row} {
+ [data-tooltipped] {
+ overflow: hidden;
+ }
${H3} {
margin-bottom: 0;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ padding-right: ${th('gridUnit')};
+ flex: 11;
}
}
`
diff --git a/packages/component-faraday-ui/src/ReviewerBreakdown.js b/packages/component-faraday-ui/src/ReviewerBreakdown.js
index 5c0d5a9e5..6c64361e6 100644
--- a/packages/component-faraday-ui/src/ReviewerBreakdown.js
+++ b/packages/component-faraday-ui/src/ReviewerBreakdown.js
@@ -45,7 +45,7 @@ export default compose(
<Fragment>
{!!label && <Label>{label}</Label>}
{reviewerInvitations.length ? (
- <Text secondary>
+ <Text>
{`${reviewerInvitations.length} invited, ${
report.accepted
} agreed, ${report.declined} declined, ${
@@ -53,7 +53,7 @@ export default compose(
} submitted`}
</Text>
) : (
- <Text secondary> {`${reviewerInvitations.length} invited`}</Text>
+ <Text> {`${reviewerInvitations.length} invited`}</Text>
)}
</Fragment>
)
diff --git a/packages/component-faraday-ui/src/TextTooltip.js b/packages/component-faraday-ui/src/TextTooltip.js
new file mode 100644
index 000000000..e8e45dcc3
--- /dev/null
+++ b/packages/component-faraday-ui/src/TextTooltip.js
@@ -0,0 +1,28 @@
+import React, { Fragment } from 'react'
+import 'react-tippy/dist/tippy.css'
+import { Tooltip } from 'react-tippy'
+import { ThemeProvider, withTheme } from 'styled-components'
+import { Text, Row } from 'pubsweet-component-faraday-ui'
+
+const TitleTooltip = ({ theme = {}, title = '' }) => (
+ <ThemeProvider theme={theme}>
+ <Fragment>
+ <Row mt={1}>
+ <Text>{title}</Text>
+ </Row>
+ </Fragment>
+ </ThemeProvider>
+)
+
+const TextTooltip = ({ theme = {}, children, ...rest }) => (
+ <Tooltip
+ arrow
+ html={<TitleTooltip theme={theme} {...rest} />}
+ position="bottom"
+ theme="light"
+ >
+ {children}
+ </Tooltip>
+)
+
+export default withTheme(TextTooltip)
diff --git a/packages/component-faraday-ui/src/TextTooltip.md b/packages/component-faraday-ui/src/TextTooltip.md
new file mode 100644
index 000000000..695a1627d
--- /dev/null
+++ b/packages/component-faraday-ui/src/TextTooltip.md
@@ -0,0 +1,9 @@
+Wrap component with simple tooltip
+
+```js
+const title = 'β-Carboline Silver Compound Binding Studies with Human Serum Albumin: A Comprehensive Multispectroscopic Analysis and Molecular Modeling Study'
+
+;<TextTooltip title={title}>
+ <div>{title}</div>
+</TextTooltip>
+```
diff --git a/packages/component-faraday-ui/src/index.js b/packages/component-faraday-ui/src/index.js
index 04e061da8..1d0b23bd1 100644
--- a/packages/component-faraday-ui/src/index.js
+++ b/packages/component-faraday-ui/src/index.js
@@ -32,6 +32,7 @@ export { default as Text } from './Text'
export { default as Textarea } from './Textarea'
export { default as WizardAuthors } from './WizardAuthors'
export { default as WizardFiles } from './WizardFiles'
+export { default as TextTooltip } from './TextTooltip'
export * from './manuscriptDetails'
export * from './contextualBoxes'
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardItems.js b/packages/components-faraday/src/components/Dashboard/DashboardItems.js
index b43ac4287..1239e6fa8 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardItems.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardItems.js
@@ -2,6 +2,7 @@ import React from 'react'
import { H3 } from '@pubsweet/ui'
import { get, has } from 'lodash'
import styled from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
import { withRouter } from 'react-router-dom'
import { ManuscriptCard, Row } from 'pubsweet-component-faraday-ui'
import { compose, setDisplayName, withHandlers } from 'recompose'
@@ -53,7 +54,7 @@ export default compose(
// #region styles
const Root = styled.div`
- height: calc(100vh - 204px);
+ height: calc(100vh - ${th('gridUnit')} * 21);
overflow-y: auto;
overflow-x: hidden;
div[open] {
--
GitLab