From 553095692cbd8e6358ed1a82187cebf2500dce40 Mon Sep 17 00:00:00 2001 From: Jori Lallo Date: Tue, 5 Dec 2017 00:15:34 -0800 Subject: [PATCH 1/4] Clear active collection if navigating out of it directly Fixes #474 --- app/scenes/Collection/Collection.js | 4 ++++ app/scenes/Document/Document.js | 2 +- app/stores/UiStore.js | 5 +++++ 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/app/scenes/Collection/Collection.js b/app/scenes/Collection/Collection.js index 9375ac37a..74bc1b4a5 100644 --- a/app/scenes/Collection/Collection.js +++ b/app/scenes/Collection/Collection.js @@ -49,6 +49,10 @@ class CollectionScene extends Component { } } + componentWillUnmount() { + this.props.ui.clearActiveCollection(); + } + loadContent = async (id: string) => { const { collections } = this.props; diff --git a/app/scenes/Document/Document.js b/app/scenes/Document/Document.js index 084d96f68..da430b8ef 100644 --- a/app/scenes/Document/Document.js +++ b/app/scenes/Document/Document.js @@ -63,7 +63,7 @@ class DocumentScene extends Component { @observable notFound = false; @observable moveModalOpen: boolean = false; - componentWillMount() { + componentDidMount() { this.loadDocument(this.props); } diff --git a/app/stores/UiStore.js b/app/stores/UiStore.js index 3fc05269d..09e42feb9 100644 --- a/app/stores/UiStore.js +++ b/app/stores/UiStore.js @@ -35,6 +35,11 @@ class UiStore { this.activeCollectionId = collection.id; }; + @action + clearActiveCollection = (): void => { + this.activeCollectionId = undefined; + }; + @action clearActiveDocument = (): void => { this.activeDocumentId = undefined; From 5a0f3d027afcf4da4f04ab1686a9df8e55f8194b Mon Sep 17 00:00:00 2001 From: Jori Lallo Date: Tue, 5 Dec 2017 00:16:05 -0800 Subject: [PATCH 2/4] Remove sidebar scrolling Fixes #473 --- app/components/Sidebar/Sidebar.js | 18 +----------------- .../Sidebar/components/Collections.js | 14 +------------- 2 files changed, 2 insertions(+), 30 deletions(-) diff --git a/app/components/Sidebar/Sidebar.js b/app/components/Sidebar/Sidebar.js index 348d7dcaa..d337d4220 100644 --- a/app/components/Sidebar/Sidebar.js +++ b/app/components/Sidebar/Sidebar.js @@ -29,7 +29,6 @@ type Props = { @observer class Sidebar extends Component { props: Props; - scrollable: ?HTMLDivElement; handleCreateCollection = () => { this.props.ui.setActiveModal('collection-new'); @@ -39,20 +38,6 @@ class Sidebar extends Component { 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, ui } = this.props; const { user, team } = auth; @@ -71,7 +56,7 @@ class Sidebar extends Component { /> - +
}> Home @@ -88,7 +73,6 @@ class Sidebar extends Component { history={this.props.history} location={this.props.location} onCreateCollection={this.handleCreateCollection} - activeDocumentRef={this.scrollToActiveDocument} />
diff --git a/app/components/Sidebar/components/Collections.js b/app/components/Sidebar/components/Collections.js index b09e365b9..dcafa20ee 100644 --- a/app/components/Sidebar/components/Collections.js +++ b/app/components/Sidebar/components/Collections.js @@ -27,7 +27,6 @@ type Props = { collections: CollectionsStore, documents: DocumentsStore, onCreateCollection: () => void, - activeDocumentRef: HTMLElement => void, ui: UiStore, }; @@ -36,14 +35,7 @@ class Collections extends Component { props: Props; render() { - const { - history, - location, - collections, - ui, - activeDocumentRef, - documents, - } = this.props; + const { history, location, collections, ui, documents } = this.props; return ( @@ -55,7 +47,6 @@ class Collections extends Component { location={location} collection={collection} activeDocument={documents.active} - activeDocumentRef={activeDocumentRef} prefetchDocument={documents.prefetchDocument} ui={ui} /> @@ -79,7 +70,6 @@ type CollectionLinkProps = { collection: Collection, ui: UiStore, activeDocument: ?Document, - activeDocumentRef: HTMLElement => void, prefetchDocument: (id: string) => Promise, }; @@ -100,7 +90,6 @@ class CollectionLink extends Component { collection, activeDocument, ui, - activeDocumentRef, prefetchDocument, } = this.props; const expanded = collection.id === ui.activeCollectionId; @@ -140,7 +129,6 @@ class CollectionLink extends Component { {collection.documents.map(document => ( Date: Tue, 5 Dec 2017 01:22:22 -0800 Subject: [PATCH 3/4] Fixed React warnings --- app/components/Collaborators/Collaborators.js | 4 ++-- app/components/DocumentPreview/DocumentPreview.js | 8 ++++---- app/scenes/Dashboard/Dashboard.js | 14 ++++++++++---- 3 files changed, 16 insertions(+), 10 deletions(-) diff --git a/app/components/Collaborators/Collaborators.js b/app/components/Collaborators/Collaborators.js index d7eaf16e2..88b88cfb4 100644 --- a/app/components/Collaborators/Collaborators.js +++ b/app/components/Collaborators/Collaborators.js @@ -29,8 +29,8 @@ const Collaborators = ({ document }: Props) => { {collaborators.map(user => ( - - + + ))} diff --git a/app/components/DocumentPreview/DocumentPreview.js b/app/components/DocumentPreview/DocumentPreview.js index 244162aa1..ae7e089c7 100644 --- a/app/components/DocumentPreview/DocumentPreview.js +++ b/app/components/DocumentPreview/DocumentPreview.js @@ -98,13 +98,13 @@ class DocumentPreview extends Component {

{document.starred ? ( - + - + ) : ( - + - + )}

{hasRecentlyViewed && [ - Recently viewed, - , + Recently viewed, + , ]} {hasRecentlyEdited && [ - Recently edited, - , + Recently edited, + , ]} ) : ( From c9fc437888ae2cd865dc4da1e51892203a40ea96 Mon Sep 17 00:00:00 2001 From: Jori Lallo Date: Tue, 5 Dec 2017 21:09:15 -0800 Subject: [PATCH 4/4] Fixes --- .../Sidebar/components/Collections.js | 58 +++++++++++-------- .../Sidebar/components/SidebarLink.js | 21 +++++-- 2 files changed, 50 insertions(+), 29 deletions(-) diff --git a/app/components/Sidebar/components/Collections.js b/app/components/Sidebar/components/Collections.js index dcafa20ee..0ad66df5a 100644 --- a/app/components/Sidebar/components/Collections.js +++ b/app/components/Sidebar/components/Collections.js @@ -5,7 +5,7 @@ import { observer, inject } from 'mobx-react'; import type { Location } from 'react-router-dom'; import Flex from 'shared/components/Flex'; import styled from 'styled-components'; -import { color, fontWeight } from 'shared/styles/constants'; +import { color } from 'shared/styles/constants'; import Header from './Header'; import SidebarLink from './SidebarLink'; @@ -84,14 +84,32 @@ class CollectionLink extends Component { this.dropzoneRef.open(); }; - render() { + renderDocuments() { const { history, collection, activeDocument, - ui, prefetchDocument, } = this.props; + + return ( + + {collection.documents.map(document => ( + + ))} + + ); + } + + render() { + const { history, collection, ui } = this.props; const expanded = collection.id === ui.activeCollectionId; return ( @@ -108,6 +126,9 @@ class CollectionLink extends Component { to={collection.url} icon={} iconColor={collection.color} + expandedContent={this.renderDocuments()} + hideExpandToggle + expand={expanded} > {collection.name} @@ -123,21 +144,6 @@ class CollectionLink extends Component { /> - - {expanded && ( - - {collection.documents.map(document => ( - - ))} - - )} ); @@ -194,7 +200,7 @@ const DocumentLink = observer( expand={showChildren} expandedContent={ document.children.length ? ( - + {document.children.map(childDocument => ( ))} - + ) : ( undefined ) @@ -223,7 +229,7 @@ const CollectionName = styled(Flex)` padding: 0 0 4px; `; -const CollectionAction = styled.a` +const CollectionAction = styled.span` position: absolute; right: 0; color: ${color.slate}; @@ -250,10 +256,14 @@ const StyledDropToImport = styled(DropToImport)` } `; -const Children = styled(Flex)` +const CollectionChildren = styled(Flex)` + margin-top: -4px; + margin-left: 36px; +`; + +const DocumentChildren = styled(Flex)` + margin-top: -4px; margin-left: 12px; - font-weight: ${fontWeight.regular}; - color: ${color.slateDark}; `; export default inject('collections', 'ui', 'documents')(Collections); diff --git a/app/components/Sidebar/components/SidebarLink.js b/app/components/Sidebar/components/SidebarLink.js index fe43ff2d2..d52b8dd5a 100644 --- a/app/components/Sidebar/components/SidebarLink.js +++ b/app/components/Sidebar/components/SidebarLink.js @@ -33,7 +33,7 @@ const StyledNavLink = styled(NavLink)` overflow: hidden; text-overflow: ellipsis; padding: 4px 0; - margin-left: ${({ hasChildren }) => (hasChildren ? '-20px;' : '0')}; + margin-left: ${({ iconVisible }) => (iconVisible ? '-20px;' : '0')}; color: ${color.slateDark}; font-size: 15px; cursor: pointer; @@ -52,6 +52,7 @@ type Props = { icon?: React$Element<*>, expand?: boolean, expandedContent?: React$Element<*>, + hideExpandToggle?: boolean, iconColor?: string, }; @@ -81,25 +82,35 @@ class SidebarLink extends Component { }; render() { - const { icon, children, onClick, to, expandedContent } = this.props; + const { + icon, + children, + onClick, + to, + expandedContent, + expand, + hideExpandToggle, + } = this.props; const Component = to ? StyledNavLink : StyledDiv; + const showExpandIcon = expandedContent && !hideExpandToggle; return ( {icon && {icon}} - {expandedContent && ( + {showExpandIcon && ( )} {children} - {this.expanded && expandedContent} + {/* Collection */ expand && hideExpandToggle && expandedContent} + {/* Document */ this.expanded && !hideExpandToggle && expandedContent} ); }