Clarify where new document will be created from document header
This commit is contained in:
parent
2238d1a7fd
commit
738dce8c06
|
@ -0,0 +1,48 @@
|
|||
// @flow
|
||||
import * as React from 'react';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import { MoreIcon } from 'outline-icons';
|
||||
|
||||
import { newDocumentUrl } from 'utils/routeHelpers';
|
||||
import Document from 'models/Document';
|
||||
import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
|
||||
|
||||
type Props = {
|
||||
label?: React.Node,
|
||||
history: Object,
|
||||
document: Document,
|
||||
};
|
||||
|
||||
class NewChildDocumentMenu extends React.Component<Props> {
|
||||
handleNewDocument = () => {
|
||||
const { history, document } = this.props;
|
||||
history.push(newDocumentUrl(document.collection));
|
||||
};
|
||||
|
||||
handleNewChild = () => {
|
||||
const { history, document } = this.props;
|
||||
history.push(
|
||||
`${document.collection.url}/new?parentDocument=${document.id}`
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { label, document, history, ...rest } = this.props;
|
||||
const { collection } = document;
|
||||
|
||||
return (
|
||||
<DropdownMenu label={label || <MoreIcon />} {...rest}>
|
||||
<DropdownMenuItem onClick={this.handleNewChild}>
|
||||
New child document
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={this.handleNewDocument}>
|
||||
<span>
|
||||
New document in <strong>{collection.name}</strong>
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withRouter(NewChildDocumentMenu);
|
|
@ -7,11 +7,12 @@ import styled from 'styled-components';
|
|||
import breakpoint from 'styled-components-breakpoint';
|
||||
import { NewDocumentIcon } from 'outline-icons';
|
||||
import Document from 'models/Document';
|
||||
import { documentEditUrl, documentNewUrl } from 'utils/routeHelpers';
|
||||
import { documentEditUrl } from 'utils/routeHelpers';
|
||||
|
||||
import Flex from 'shared/components/Flex';
|
||||
import Breadcrumb from './Breadcrumb';
|
||||
import DocumentMenu from 'menus/DocumentMenu';
|
||||
import NewChildDocumentMenu from 'menus/NewChildDocumentMenu';
|
||||
import DocumentShare from 'scenes/DocumentShare';
|
||||
import Modal from 'components/Modal';
|
||||
import Collaborators from 'components/Collaborators';
|
||||
|
@ -52,10 +53,6 @@ class Header extends React.Component<Props> {
|
|||
|
||||
handleScroll = throttle(this.updateIsScrolled, 50);
|
||||
|
||||
handleNewDocument = () => {
|
||||
this.props.history.push(documentNewUrl(this.props.document));
|
||||
};
|
||||
|
||||
handleEdit = () => {
|
||||
this.props.history.push(documentEditUrl(this.props.document));
|
||||
};
|
||||
|
@ -181,9 +178,10 @@ class Header extends React.Component<Props> {
|
|||
<React.Fragment>
|
||||
<Separator />
|
||||
<Action>
|
||||
<a onClick={this.handleNewDocument}>
|
||||
<NewDocumentIcon />
|
||||
</a>
|
||||
<NewChildDocumentMenu
|
||||
document={document}
|
||||
label={<NewDocumentIcon />}
|
||||
/>
|
||||
</Action>
|
||||
</React.Fragment>
|
||||
)}
|
||||
|
|
Reference in New Issue