diff --git a/packages/components-faraday/src/components/Dashboard/AuthorTooltip.js b/packages/components-faraday/src/components/Dashboard/AuthorTooltip.js new file mode 100644 index 0000000000000000000000000000000000000000..f358015aaee5ecee846d6933bb72840e48e82682 --- /dev/null +++ b/packages/components-faraday/src/components/Dashboard/AuthorTooltip.js @@ -0,0 +1,79 @@ +import React from 'react' +import { th } from '@pubsweet/ui' +import { Tooltip } from 'react-tippy' +import styled, { ThemeProvider } from 'styled-components' + +import theme from '../../../../xpub-faraday/app/theme' + +const AuthorTooltip = ({ + authorName, + email, + affiliation, + isSubmitting, + isCorresponding, +}) => ( + <ThemeProvider theme={theme}> + <TooltipRoot> + <TooltipRow> + <AuthorName>{authorName}</AuthorName> + {isSubmitting && <SpecialAuthor>Submitting Author</SpecialAuthor>} + {isCorresponding && + !isSubmitting && <SpecialAuthor>Corresponding Author</SpecialAuthor>} + </TooltipRow> + <TooltipRow> + <AuthorDetails>{email}</AuthorDetails> + </TooltipRow> + <TooltipRow> + <AuthorDetails>{affiliation}</AuthorDetails> + </TooltipRow> + </TooltipRoot> + </ThemeProvider> +) + +const TooltipComponent = ({ children, ...rest }) => ( + <Tooltip arrow html={<AuthorTooltip {...rest} />} position="bottom"> + {children} + </Tooltip> +) + +export default TooltipComponent + +// #region styled-components +const TooltipRoot = styled.div` + align-items: flex-start; + display: flex; + flex-direction: column; + justify-content: center; + padding: 10px 15px; +` + +const TooltipRow = styled.div` + align-items: center; + display: flex; + justify-content: flex-start; + margin: 3px 0; +` + +const AuthorName = styled.span` + color: ${th('colorSecondary')}; + font-family: ${th('fontHeading')}; + font-size: ${th('fontSizeBase')}; +` + +const AuthorDetails = styled.span` + color: ${th('colorSecondary')}; + font-family: ${th('fontReading')}; + font-size: ${th('fontSizeBaseSmall')}; +` + +const SpecialAuthor = styled.span` + background-color: ${th('colorBackground')}; + color: ${th('colorTextPlaceholder')}; + font-family: ${th('fontInterface')}; + font-size: ${th('fontSizeBaseSmall')}; + font-weight: bold; + margin-left: 5px; + padding: 0 5px; +` + +// #endregion diff --git a/packages/components-faraday/src/components/Dashboard/DashboardCard.js b/packages/components-faraday/src/components/Dashboard/DashboardCard.js index 2b46b32e36fcb1d966afc745f01469b97d695256..383ed9b933f7aed39566d1cd74d464f20beda681 100644 --- a/packages/components-faraday/src/components/Dashboard/DashboardCard.js +++ b/packages/components-faraday/src/components/Dashboard/DashboardCard.js @@ -11,7 +11,7 @@ import { import ZipFiles from './ZipFiles' import { parseVersion, parseJournalIssue, mapStatusToLabel } from './../utils' -import { EditorInChiefActions, HandlingEditorActions } from './' +import { EditorInChiefActions, HandlingEditorActions, AuthorTooltip } from './' import { InviteReviewers } from '../Reviewers/' const DashboardCard = ({ @@ -113,6 +113,7 @@ const DashboardCard = ({ {version.authors.map( ( { + affiliation, firstName, lastName, middleName, @@ -123,14 +124,23 @@ const DashboardCard = ({ index, arr, ) => ( - <Author key={email}> - <AuthorName> - {firstName} {middleName} {lastName} - </AuthorName> - {isSubmitting && <AuthorStatus>SA</AuthorStatus>} - {isCorresponding && <AuthorStatus>CA</AuthorStatus>} - {arr.length - 1 === index ? '' : ','} - </Author> + <AuthorTooltip + affiliation={affiliation} + authorName={`${firstName} ${lastName}`} + email={email} + isCorresponding={isCorresponding} + isSubmitting={isSubmitting} + key={email} + > + <Author> + <AuthorName> + {firstName} {middleName} {lastName} + </AuthorName> + {isSubmitting && <AuthorStatus>SA</AuthorStatus>} + {isCorresponding && <AuthorStatus>CA</AuthorStatus>} + {arr.length - 1 === index ? '' : ','} + </Author> + </AuthorTooltip> ), )} </AuthorList> diff --git a/packages/components-faraday/src/components/Dashboard/index.js b/packages/components-faraday/src/components/Dashboard/index.js index fd1d1ddd05c5826cea309e27508df4680be1539d..5a7f6d53ae65aeaee03f11006c8035101351c72f 100644 --- a/packages/components-faraday/src/components/Dashboard/index.js +++ b/packages/components-faraday/src/components/Dashboard/index.js @@ -1,5 +1,6 @@ import DashboardPage from './DashboardPage' +export { default as AuthorTooltip } from './AuthorTooltip' export { default as EditorInChiefActions } from './EditorInChiefActions' export { default as HandlingEditorActions } from './HandlingEditorActions' diff --git a/packages/xpub-faraday/app/app.js b/packages/xpub-faraday/app/app.js index 0988df482437853ff3bbe0ee9f20354238071b85..d390b0b6b0d3371cc56a8a379d9082bafce8c542 100644 --- a/packages/xpub-faraday/app/app.js +++ b/packages/xpub-faraday/app/app.js @@ -1,5 +1,6 @@ import React from 'react' import ReactDOM from 'react-dom' +import 'react-tippy/dist/tippy.css' import { AppContainer } from 'react-hot-loader' import createHistory from 'history/createBrowserHistory'