From 4674c10203623c602897ab413f8e8bd4bb46e0cf Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Mon, 6 Aug 2018 23:22:20 -0700 Subject: [PATCH] Empty state language improvemnts --- app/components/DocumentPreview/DocumentPreview.js | 2 +- app/components/Heading.js | 13 +++++++++++++ app/menus/DocumentMenu.js | 3 +-- app/models/Document.js | 5 +++++ app/scenes/Collection.js | 10 +--------- app/scenes/CollectionNew.js | 2 +- app/scenes/Document/Document.js | 2 +- app/scenes/Drafts.js | 5 +++-- app/scenes/Starred.js | 7 ++++--- 9 files changed, 30 insertions(+), 19 deletions(-) create mode 100644 app/components/Heading.js diff --git a/app/components/DocumentPreview/DocumentPreview.js b/app/components/DocumentPreview/DocumentPreview.js index 302983dc8..f1d64ea9e 100644 --- a/app/components/DocumentPreview/DocumentPreview.js +++ b/app/components/DocumentPreview/DocumentPreview.js @@ -152,7 +152,7 @@ class DocumentPreview extends React.Component { > - {document.publishedAt && ( + {!document.isDraft && ( <Actions> {document.starred ? ( <StyledStar onClick={this.unstar} solid /> diff --git a/app/components/Heading.js b/app/components/Heading.js new file mode 100644 index 000000000..c12670dc5 --- /dev/null +++ b/app/components/Heading.js @@ -0,0 +1,13 @@ +// @flow +import styled from 'styled-components'; + +const Heading = styled.h1` + display: flex; + + svg { + margin-left: -6px; + margin-right: 2px; + } +`; + +export default Heading; diff --git a/app/menus/DocumentMenu.js b/app/menus/DocumentMenu.js index 1ecec5fca..026891b47 100644 --- a/app/menus/DocumentMenu.js +++ b/app/menus/DocumentMenu.js @@ -70,11 +70,10 @@ class DocumentMenu extends React.Component<Props> { render() { const { document, label, className, showPrint } = this.props; - const isDraft = !document.publishedAt; return ( <DropdownMenu label={label || <MoreIcon />} className={className}> - {!isDraft && ( + {!document.isDraft && ( <React.Fragment> {document.pinned ? ( <DropdownMenuItem onClick={this.handleUnpin}> diff --git a/app/models/Document.js b/app/models/Document.js index e0a5a9b3c..883effcf2 100644 --- a/app/models/Document.js +++ b/app/models/Document.js @@ -74,6 +74,11 @@ class Document extends BaseModel { return []; } + @computed + get isDraft(): boolean { + return !this.publishedAt; + } + @computed get isEmpty(): boolean { // Check if the document title has been modified and user generated content exists diff --git a/app/scenes/Collection.js b/app/scenes/Collection.js index eed719328..1de8ea2a5 100644 --- a/app/scenes/Collection.js +++ b/app/scenes/Collection.js @@ -15,6 +15,7 @@ import Collection from 'models/Collection'; import Search from 'scenes/Search'; import CollectionMenu from 'menus/CollectionMenu'; import Actions, { Action, Separator } from 'components/Actions'; +import Heading from 'components/Heading'; import CenteredContent from 'components/CenteredContent'; import { ListPlaceholder } from 'components/LoadingPlaceholder'; import Button from 'components/Button'; @@ -184,15 +185,6 @@ const TinyPinIcon = styled(PinIcon)` opacity: 0.8; `; -const Heading = styled.h1` - display: flex; - - svg { - margin-left: -6px; - margin-right: 6px; - } -`; - const Wrapper = styled(Flex)` margin: 10px 0; `; diff --git a/app/scenes/CollectionNew.js b/app/scenes/CollectionNew.js index 866507df1..104539534 100644 --- a/app/scenes/CollectionNew.js +++ b/app/scenes/CollectionNew.js @@ -56,7 +56,7 @@ class CollectionNew extends React.Component<Props> { return ( <form onSubmit={this.handleSubmit}> <HelpText> - Collections are for grouping your Outline. They work best when + Collections are for grouping your knowledge base. They work best when organized around a topic or internal team — Product or Engineering for example. </HelpText> diff --git a/app/scenes/Document/Document.js b/app/scenes/Document/Document.js index 667eab1e7..f1cddbc35 100644 --- a/app/scenes/Document/Document.js +++ b/app/scenes/Document/Document.js @@ -304,7 +304,7 @@ class DocumentScene extends React.Component<Props> { {!isShare && ( <Header document={document} - isDraft={!document.publishedAt} + isDraft={document.isDraft} isEditing={this.isEditing} isSaving={this.isSaving} isPublishing={this.isPublishing} diff --git a/app/scenes/Drafts.js b/app/scenes/Drafts.js index 152a10935..2e471b0b7 100644 --- a/app/scenes/Drafts.js +++ b/app/scenes/Drafts.js @@ -3,6 +3,7 @@ import * as React from 'react'; import { observer, inject } from 'mobx-react'; import { NewDocumentIcon } from 'outline-icons'; +import Heading from 'components/Heading'; import CenteredContent from 'components/CenteredContent'; import { ListPlaceholder } from 'components/LoadingPlaceholder'; import Empty from 'components/Empty'; @@ -30,9 +31,9 @@ class Drafts extends React.Component<Props> { return ( <CenteredContent column auto> <PageTitle title="Drafts" /> - <h1>Drafts</h1> + <Heading>Drafts</Heading> {showLoading && <ListPlaceholder />} - {showEmpty && <Empty>No drafts yet.</Empty>} + {showEmpty && <Empty>You’ve not got any drafts at the moment.</Empty>} <DocumentList documents={drafts} showCollection /> <Actions align="center" justify="flex-end"> <Action> diff --git a/app/scenes/Starred.js b/app/scenes/Starred.js index 8ca84972f..2ccb9e312 100644 --- a/app/scenes/Starred.js +++ b/app/scenes/Starred.js @@ -1,12 +1,13 @@ // @flow import * as React from 'react'; import { observer, inject } from 'mobx-react'; -import { NewDocumentIcon } from 'outline-icons'; +import { NewDocumentIcon, StarredIcon } from 'outline-icons'; import CenteredContent from 'components/CenteredContent'; import { ListPlaceholder } from 'components/LoadingPlaceholder'; import Empty from 'components/Empty'; import PageTitle from 'components/PageTitle'; +import Heading from 'components/Heading'; import DocumentList from 'components/DocumentList'; import NewDocumentMenu from 'menus/NewDocumentMenu'; import Actions, { Action } from 'components/Actions'; @@ -30,9 +31,9 @@ class Starred extends React.Component<Props> { return ( <CenteredContent column auto> <PageTitle title="Starred" /> - <h1>Starred</h1> + <Heading>Starred</Heading> {showLoading && <ListPlaceholder />} - {showEmpty && <Empty>No starred documents yet.</Empty>} + {showEmpty && <Empty>You’ve not starred any documents yet.</Empty>} <DocumentList documents={starred} /> <Actions align="center" justify="flex-end"> <Action>