Commit 3a48f2f4 authored by Yannis Barlas's avatar Yannis Barlas

fix(dashboard): display title correctly with styled (italics etc.)

parent 72192d38
......@@ -13,22 +13,30 @@ const Wrapper = styled.div`
margin-bottom: ${th('gridUnit')};
`
const ActionsWrapper = styled.div`
flex-shrink: 0;
`
const Actions = props => {
const { articleId, deleteArticle, status } = props
const isEditable = isEditableByAuthor(status)
return (
<ActionGroup>
<Action to={`/article/${articleId}`}>
{isEditable ? 'Edit' : 'View Article'}
</Action>
{isEditable && (
<Action onClick={() => deleteArticle({ variables: { id: articleId } })}>
Delete
<ActionsWrapper>
<ActionGroup>
<Action to={`/article/${articleId}`}>
{isEditable ? 'Edit' : 'View Article'}
</Action>
)}
</ActionGroup>
{isEditable && (
<Action
onClick={() => deleteArticle({ variables: { id: articleId } })}
>
Delete
</Action>
)}
</ActionGroup>
</ActionsWrapper>
)
}
......
......@@ -17,10 +17,16 @@ const EditorToolRow = styled.div`
display: flex;
`
const ActionsWrapper = styled.div`
flex-shrink: 0;
`
const Actions = ({ articleId }) => (
<ActionGroup>
<Action to={`/article/${articleId}`}>Go to Article</Action>
</ActionGroup>
<ActionsWrapper>
<ActionGroup>
<Action to={`/article/${articleId}`}>Go to Article</Action>
</ActionGroup>
</ActionsWrapper>
)
const EditorSectionItem = props => {
......
......@@ -16,6 +16,10 @@ const RejectNotification = styled.div`
text-transform: uppercase;
`
const ActionsWrapper = styled.div`
flex-shrink: 0;
`
const ReviewerSectionItem = props => {
const {
handleInvitation,
......@@ -30,17 +34,19 @@ const ReviewerSectionItem = props => {
const onInvitationClick = action => handleInvitation(articleId, action)
const InvitationActions = (
<ActionGroup>
<Action onClick={() => openReviewerPreviewModal(articleId)}>
Preview
</Action>
<Action onClick={() => onInvitationClick('accept')}>
Accept Invitation
</Action>
<Action onClick={() => onInvitationClick('reject')}>
Reject Invitation
</Action>
</ActionGroup>
<ActionsWrapper>
<ActionGroup>
<Action onClick={() => openReviewerPreviewModal(articleId)}>
Preview
</Action>
<Action onClick={() => onInvitationClick('accept')}>
Accept Invitation
</Action>
<Action onClick={() => onInvitationClick('reject')}>
Reject Invitation
</Action>
</ActionGroup>
</ActionsWrapper>
)
const ReviewLink = (
......
......@@ -4,28 +4,43 @@ import React from 'react'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
import { AbstractEditor } from 'xpub-edit'
const stripHTML = html => {
const tmp = document.createElement('DIV')
tmp.innerHTML = html
return tmp.textContent || tmp.innerText || ''
}
const isHTMLNotEmpty = html => stripHTML(html).length > 0
const Wrapper = styled.div`
align-items: center;
border-left: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
display: flex;
margin-bottom: calc(${th('gridUnit')});
> div:first-child {
flex-grow: 1;
}
`
const Title = styled.div`
flex: 1;
const Title = styled(AbstractEditor)`
border: 0;
font-family: ${th('fontReading')};
font-size: ${th('fontSizeHeading4')};
line-height: ${th('lineHeightHeading4')};
margin-left: ${th('gridUnit')};
margin: 0 0 0 ${th('gridUnit')};
padding: 0;
`
const SectionItem = props => {
const { rightComponent, title } = props
const titleValue = isHTMLNotEmpty(title) ? title : 'Untitled'
return (
<Wrapper>
<Title>{title || 'Untitled'}</Title>
<Title readonly value={titleValue || 'Untitled'} />
{rightComponent}
</Wrapper>
)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment