diff --git a/frontend/components/Layout/Layout.js b/frontend/components/Layout/Layout.js index 79f85039..e87ab136 100644 --- a/frontend/components/Layout/Layout.js +++ b/frontend/components/Layout/Layout.js @@ -35,16 +35,12 @@ type Props = { title?: ?React.Element, auth: AuthStore, ui: UiStore, - search: ?boolean, notifications?: React.Element, }; @observer class Layout extends React.Component { props: Props; - - static defaultProps = { - search: true, - }; + scrollable: ?HTMLDivElement; @keydown(['/', 't']) goToSearch(ev) { @@ -81,6 +77,20 @@ type Props = { 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() { const { auth, documents, ui } = this.props; const { user, team } = auth; @@ -115,7 +125,7 @@ type Props = { /> - + Home @@ -132,6 +142,7 @@ type Props = { history={this.props.history} activeDocument={documents.active} onCreateCollection={this.handleCreateCollection} + activeDocumentRef={this.scrollToActiveDocument} /> diff --git a/frontend/components/Layout/components/SidebarCollections.js b/frontend/components/Layout/components/SidebarCollections.js index 3dbec12d..8bd83eb5 100644 --- a/frontend/components/Layout/components/SidebarCollections.js +++ b/frontend/components/Layout/components/SidebarCollections.js @@ -20,7 +20,8 @@ type Props = { history: Object, collections: CollectionsStore, activeDocument: ?Document, - onCreateCollection: Function, + onCreateCollection: () => void, + activeDocumentRef: HTMLElement => void, ui: UiStore, }; @@ -28,7 +29,13 @@ type Props = { props: Props; render() { - const { history, collections, activeDocument, ui } = this.props; + const { + history, + collections, + activeDocument, + ui, + activeDocumentRef, + } = this.props; return ( @@ -39,6 +46,7 @@ type Props = { history={history} collection={collection} activeDocument={activeDocument} + activeDocumentRef={activeDocumentRef} ui={ui} /> ))} @@ -62,7 +70,13 @@ type Props = { }; render() { - const { history, collection, activeDocument, ui } = this.props; + const { + history, + collection, + activeDocument, + ui, + activeDocumentRef, + } = this.props; return ( ( void, depth: number, }; -const DocumentLink = observer((props: DocumentLinkProps) => { - const { document, activeDocument, depth } = props; +const DocumentLink = observer( + ({ + document, + activeDocument, + activeDocumentRef, + depth, + }: DocumentLinkProps) => { + const isActiveDocument = + activeDocument && activeDocument.id === document.id; + const showChildren = + activeDocument && + (activeDocument.pathToDocument + .map(entry => entry.id) + .includes(document.id) || + isActiveDocument); - const showChildren = - activeDocument && - (activeDocument.pathToDocument - .map(entry => entry.id) - .includes(document.id) || - activeDocument.id === document.id); - - return ( - - - 0} - expanded={showChildren} + - {document.title} - - + 0} + expanded={showChildren} + > + {document.title} + + - {showChildren && - - {document.children && - document.children.map(childDocument => ( - - ))} - } - - ); -}); + {showChildren && + + {document.children && + document.children.map(childDocument => ( + + ))} + } + + ); + } +); const CollectionAction = styled.a` color: ${color.slate}; diff --git a/frontend/components/Layout/components/SidebarLink.js b/frontend/components/Layout/components/SidebarLink.js index 95d7fe57..08b7f0fc 100644 --- a/frontend/components/Layout/components/SidebarLink.js +++ b/frontend/components/Layout/components/SidebarLink.js @@ -20,7 +20,7 @@ const styleComponent = component => styled(component)` width: 100%; overflow: hidden; text-overflow: ellipsis; - margin: 5px 0; + padding: 5px 0; margin-left: ${({ hasChildren }) => (hasChildren ? '-20px;' : '0')}; color: ${color.slateDark}; font-size: 15px; diff --git a/frontend/components/Scrollable/Scrollable.js b/frontend/components/Scrollable/Scrollable.js index 526cc29e..536c2a24 100644 --- a/frontend/components/Scrollable/Scrollable.js +++ b/frontend/components/Scrollable/Scrollable.js @@ -1,18 +1,11 @@ // @flow -import React, { Component } from 'react'; import styled from 'styled-components'; -const Scroll = styled.div` +const Scrollable = styled.div` height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; `; -class Scrollable extends Component { - render() { - return ; - } -} - export default Scrollable;