Merge pull request #478 from outline/jori/sidebar-fixes

Sidebar fixes and warnings
2017-12-08 20:21:32 -08:00
parent 7af2ff20a8 c9fc437888
commit 1832bc74ad
9 changed files with 78 additions and 70 deletions
--- a/app/components/Collaborators/Collaborators.js
+++ b/app/components/Collaborators/Collaborators.js
@@ -29,8 +29,8 @@ const Collaborators = ({ document }: Props) => {
    <Avatars>
      <StyledTooltip tooltip={tooltip} placement="bottom">
        {collaborators.map(user => (
-          <AvatarWrapper>
-            <Avatar key={user.id} src={user.avatarUrl} />
+          <AvatarWrapper key={user.id}>
+            <Avatar src={user.avatarUrl} />
          </AvatarWrapper>
        ))}
      </StyledTooltip>
--- a/app/components/DocumentPreview/DocumentPreview.js
+++ b/app/components/DocumentPreview/DocumentPreview.js
@@ -98,13 +98,13 @@ class DocumentPreview extends Component {
        <h3>
          <Highlight text={document.title} highlight={highlight} />
          {document.starred ? (
-            <a onClick={this.unstar}>
+            <span onClick={this.unstar}>
              <StyledStar solid />
-            </a>
+            </span>
          ) : (
-            <a onClick={this.star}>
+            <span onClick={this.star}>
              <StyledStar />
-            </a>
+            </span>
          )}
        </h3>
        <PublishingInfo
--- 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 {
        />

        <Flex auto column>
-          <Scrollable innerRef={this.setScrollableRef}>
+          <Scrollable>
            <Section>
              <SidebarLink to="/dashboard" icon={<HomeIcon />}>
                Home
@@ -88,7 +73,6 @@ class Sidebar extends Component {
                history={this.props.history}
                location={this.props.location}
                onCreateCollection={this.handleCreateCollection}
-                activeDocumentRef={this.scrollToActiveDocument}
              />
            </Section>
          </Scrollable>
--- 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';
@@ -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 (
      <Flex column>
@@ -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<void>,
 };

@@ -94,15 +84,32 @@ class CollectionLink extends Component {
    this.dropzoneRef.open();
  };

-  render() {
+  renderDocuments() {
    const {
      history,
      collection,
      activeDocument,
-      ui,
-      activeDocumentRef,
      prefetchDocument,
    } = this.props;
+
+    return (
+      <CollectionChildren column>
+        {collection.documents.map(document => (
+          <DocumentLink
+            key={document.id}
+            history={history}
+            document={document}
+            activeDocument={activeDocument}
+            prefetchDocument={prefetchDocument}
+            depth={0}
+          />
+        ))}
+      </CollectionChildren>
+    );
+  }
+
+  render() {
+    const { history, collection, ui } = this.props;
    const expanded = collection.id === ui.activeCollectionId;

    return (
@@ -119,6 +126,9 @@ class CollectionLink extends Component {
          to={collection.url}
          icon={<CollectionIcon expanded={expanded} color={collection.color} />}
          iconColor={collection.color}
+          expandedContent={this.renderDocuments()}
+          hideExpandToggle
+          expand={expanded}
        >
          <CollectionName justify="space-between">
            {collection.name}
@@ -134,22 +144,6 @@ class CollectionLink extends Component {
              />
            </CollectionAction>
          </CollectionName>
-
-          {expanded && (
-            <Children column>
-              {collection.documents.map(document => (
-                <DocumentLink
-                  key={document.id}
-                  activeDocumentRef={activeDocumentRef}
-                  history={history}
-                  document={document}
-                  activeDocument={activeDocument}
-                  prefetchDocument={prefetchDocument}
-                  depth={0}
-                />
-              ))}
-            </Children>
-          )}
        </SidebarLink>
      </StyledDropToImport>
    );
@@ -206,7 +200,7 @@ const DocumentLink = observer(
            expand={showChildren}
            expandedContent={
              document.children.length ? (
-                <Children column>
+                <DocumentChildren column>
                  {document.children.map(childDocument => (
                    <DocumentLink
                      key={childDocument.id}
@@ -217,7 +211,7 @@ const DocumentLink = observer(
                      depth={depth + 1}
                    />
                  ))}
-                </Children>
+                </DocumentChildren>
              ) : (
                undefined
              )
@@ -235,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};
@@ -262,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);
--- 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 (
      <Flex column>
        <Component
+          iconVisible={showExpandIcon}
          activeStyle={activeStyle}
-          hasChildren={expandedContent}
          onClick={onClick}
          to={to}
          exact
        >
          {icon && <IconWrapper>{icon}</IconWrapper>}
-          {expandedContent && (
+          {showExpandIcon && (
            <StyledGoTo expanded={this.expanded} onClick={this.handleClick} />
          )}
          <Content onClick={this.handleExpand}>{children}</Content>
        </Component>
-        {this.expanded && expandedContent}
+        {/* Collection */ expand && hideExpandToggle && expandedContent}
+        {/* Document */ this.expanded && !hideExpandToggle && expandedContent}
      </Flex>
    );
  }
--- 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;

--- a/app/scenes/Dashboard/Dashboard.js
+++ b/app/scenes/Dashboard/Dashboard.js
@@ -45,12 +45,18 @@ class Dashboard extends Component {
        {showContent ? (
          <span>
            {hasRecentlyViewed && [
-              <Subheading>Recently viewed</Subheading>,
-              <DocumentList documents={documents.recentlyViewed} />,
+              <Subheading key="viewed">Recently viewed</Subheading>,
+              <DocumentList
+                key="viewedDocuments"
+                documents={documents.recentlyViewed}
+              />,
            ]}
            {hasRecentlyEdited && [
-              <Subheading>Recently edited</Subheading>,
-              <DocumentList documents={documents.recentlyEdited} />,
+              <Subheading key="edited">Recently edited</Subheading>,
+              <DocumentList
+                key="editedDocuments"
+                documents={documents.recentlyEdited}
+              />,
            ]}
          </span>
        ) : (
--- 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);
  }

--- 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;