Closes #146
This commit is contained in:
@ -35,16 +35,12 @@ type Props = {
|
|||||||
title?: ?React.Element<any>,
|
title?: ?React.Element<any>,
|
||||||
auth: AuthStore,
|
auth: AuthStore,
|
||||||
ui: UiStore,
|
ui: UiStore,
|
||||||
search: ?boolean,
|
|
||||||
notifications?: React.Element<any>,
|
notifications?: React.Element<any>,
|
||||||
};
|
};
|
||||||
|
|
||||||
@observer class Layout extends React.Component {
|
@observer class Layout extends React.Component {
|
||||||
props: Props;
|
props: Props;
|
||||||
|
scrollable: ?HTMLDivElement;
|
||||||
static defaultProps = {
|
|
||||||
search: true,
|
|
||||||
};
|
|
||||||
|
|
||||||
@keydown(['/', 't'])
|
@keydown(['/', 't'])
|
||||||
goToSearch(ev) {
|
goToSearch(ev) {
|
||||||
@ -81,6 +77,20 @@ type Props = {
|
|||||||
this.props.ui.setActiveModal('collection-edit');
|
this.props.ui.setActiveModal('collection-edit');
|
||||||
};
|
};
|
||||||
|
|
||||||
|
setScrollableRef = ref => {
|
||||||
|
this.scrollable = ref;
|
||||||
|
};
|
||||||
|
|
||||||
|
scrollToActiveDocument = ref => {
|
||||||
|
const scrollable = this.scrollable;
|
||||||
|
if (!ref || !scrollable) return;
|
||||||
|
|
||||||
|
const container = scrollable.getBoundingClientRect();
|
||||||
|
const bounds = ref.getBoundingClientRect();
|
||||||
|
const scrollTop = bounds.top + container.top;
|
||||||
|
scrollable.scrollTop = scrollTop;
|
||||||
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { auth, documents, ui } = this.props;
|
const { auth, documents, ui } = this.props;
|
||||||
const { user, team } = auth;
|
const { user, team } = auth;
|
||||||
@ -115,7 +125,7 @@ type Props = {
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<Flex auto column>
|
<Flex auto column>
|
||||||
<Scrollable>
|
<Scrollable innerRef={this.setScrollableRef}>
|
||||||
<LinkSection>
|
<LinkSection>
|
||||||
<SidebarLink to="/dashboard">
|
<SidebarLink to="/dashboard">
|
||||||
<Icon type="Home" /> Home
|
<Icon type="Home" /> Home
|
||||||
@ -132,6 +142,7 @@ type Props = {
|
|||||||
history={this.props.history}
|
history={this.props.history}
|
||||||
activeDocument={documents.active}
|
activeDocument={documents.active}
|
||||||
onCreateCollection={this.handleCreateCollection}
|
onCreateCollection={this.handleCreateCollection}
|
||||||
|
activeDocumentRef={this.scrollToActiveDocument}
|
||||||
/>
|
/>
|
||||||
</LinkSection>
|
</LinkSection>
|
||||||
</Scrollable>
|
</Scrollable>
|
||||||
|
@ -20,7 +20,8 @@ type Props = {
|
|||||||
history: Object,
|
history: Object,
|
||||||
collections: CollectionsStore,
|
collections: CollectionsStore,
|
||||||
activeDocument: ?Document,
|
activeDocument: ?Document,
|
||||||
onCreateCollection: Function,
|
onCreateCollection: () => void,
|
||||||
|
activeDocumentRef: HTMLElement => void,
|
||||||
ui: UiStore,
|
ui: UiStore,
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -28,7 +29,13 @@ type Props = {
|
|||||||
props: Props;
|
props: Props;
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { history, collections, activeDocument, ui } = this.props;
|
const {
|
||||||
|
history,
|
||||||
|
collections,
|
||||||
|
activeDocument,
|
||||||
|
ui,
|
||||||
|
activeDocumentRef,
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Flex column>
|
<Flex column>
|
||||||
@ -39,6 +46,7 @@ type Props = {
|
|||||||
history={history}
|
history={history}
|
||||||
collection={collection}
|
collection={collection}
|
||||||
activeDocument={activeDocument}
|
activeDocument={activeDocument}
|
||||||
|
activeDocumentRef={activeDocumentRef}
|
||||||
ui={ui}
|
ui={ui}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
@ -62,7 +70,13 @@ type Props = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { history, collection, activeDocument, ui } = this.props;
|
const {
|
||||||
|
history,
|
||||||
|
collection,
|
||||||
|
activeDocument,
|
||||||
|
ui,
|
||||||
|
activeDocumentRef,
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledDropToImport
|
<StyledDropToImport
|
||||||
@ -94,6 +108,7 @@ type Props = {
|
|||||||
{collection.documents.map(document => (
|
{collection.documents.map(document => (
|
||||||
<DocumentLink
|
<DocumentLink
|
||||||
key={document.id}
|
key={document.id}
|
||||||
|
activeDocumentRef={activeDocumentRef}
|
||||||
history={history}
|
history={history}
|
||||||
document={document}
|
document={document}
|
||||||
activeDocument={activeDocument}
|
activeDocument={activeDocument}
|
||||||
@ -111,21 +126,32 @@ type DocumentLinkProps = {
|
|||||||
document: NavigationNode,
|
document: NavigationNode,
|
||||||
history: Object,
|
history: Object,
|
||||||
activeDocument: ?Document,
|
activeDocument: ?Document,
|
||||||
|
activeDocumentRef: HTMLElement => void,
|
||||||
depth: number,
|
depth: number,
|
||||||
};
|
};
|
||||||
|
|
||||||
const DocumentLink = observer((props: DocumentLinkProps) => {
|
const DocumentLink = observer(
|
||||||
const { document, activeDocument, depth } = props;
|
({
|
||||||
|
document,
|
||||||
|
activeDocument,
|
||||||
|
activeDocumentRef,
|
||||||
|
depth,
|
||||||
|
}: DocumentLinkProps) => {
|
||||||
|
const isActiveDocument =
|
||||||
|
activeDocument && activeDocument.id === document.id;
|
||||||
const showChildren =
|
const showChildren =
|
||||||
activeDocument &&
|
activeDocument &&
|
||||||
(activeDocument.pathToDocument
|
(activeDocument.pathToDocument
|
||||||
.map(entry => entry.id)
|
.map(entry => entry.id)
|
||||||
.includes(document.id) ||
|
.includes(document.id) ||
|
||||||
activeDocument.id === document.id);
|
isActiveDocument);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Flex column key={document.id}>
|
<Flex
|
||||||
|
column
|
||||||
|
key={document.id}
|
||||||
|
innerRef={isActiveDocument ? activeDocumentRef : undefined}
|
||||||
|
>
|
||||||
<DropToImport
|
<DropToImport
|
||||||
history={history}
|
history={history}
|
||||||
documentId={document.id}
|
documentId={document.id}
|
||||||
@ -155,7 +181,8 @@ const DocumentLink = observer((props: DocumentLinkProps) => {
|
|||||||
</Children>}
|
</Children>}
|
||||||
</Flex>
|
</Flex>
|
||||||
);
|
);
|
||||||
});
|
}
|
||||||
|
);
|
||||||
|
|
||||||
const CollectionAction = styled.a`
|
const CollectionAction = styled.a`
|
||||||
color: ${color.slate};
|
color: ${color.slate};
|
||||||
|
@ -20,7 +20,7 @@ const styleComponent = component => styled(component)`
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
margin: 5px 0;
|
padding: 5px 0;
|
||||||
margin-left: ${({ hasChildren }) => (hasChildren ? '-20px;' : '0')};
|
margin-left: ${({ hasChildren }) => (hasChildren ? '-20px;' : '0')};
|
||||||
color: ${color.slateDark};
|
color: ${color.slateDark};
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
|
@ -1,18 +1,11 @@
|
|||||||
// @flow
|
// @flow
|
||||||
import React, { Component } from 'react';
|
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
|
||||||
const Scroll = styled.div`
|
const Scrollable = styled.div`
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
class Scrollable extends Component {
|
|
||||||
render() {
|
|
||||||
return <Scroll {...this.props} />;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Scrollable;
|
export default Scrollable;
|
||||||
|
Reference in New Issue
Block a user