Merge pull request #710 from outline/breadcrumb

Parent Breadcrumb
2018-07-01 12:08:56 -07:00
parent 7780efce0e f41e186da3
commit 73d6238b4c
8 changed files with 345 additions and 174 deletions
--- a/app/components/Actions/Actions.js
+++ b/app/components/Actions/Actions.js
@@ -7,6 +7,7 @@ export const Action = styled(Flex)`
  justify-content: center;
  align-items: center;
  padding: 0 0 0 12px;
+  font-size: 15px;

  a {
    color: ${props => props.theme.text};
@@ -28,7 +29,7 @@ const Actions = styled(Flex)`
  left: 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.9);
-  padding: 16px;
+  padding: 12px;
  -webkit-backdrop-filter: blur(20px);

  @media print {
@@ -37,8 +38,7 @@ const Actions = styled(Flex)`

  ${breakpoint('tablet')`
    left: auto;
-    padding: ${props => props.theme.vpadding} ${props =>
-    props.theme.hpadding} 8px 8px;
+    padding: 24px;
  `};
 `;

--- a/app/components/Collaborators/Collaborators.js
+++ b/app/components/Collaborators/Collaborators.js
@@ -31,22 +31,21 @@ const Collaborators = ({ document }: Props) => {

  return (
    <Avatars>
-      <StyledTooltip tooltip={tooltip} placement="bottom">
-        {collaborators.map(user => (
-          <AvatarWrapper key={user.id}>
+      {collaborators.map(user => (
+        <Tooltip
+          tooltip={collaborators.length > 1 ? user.name : tooltip}
+          placement="bottom"
+          key={user.id}
+        >
+          <AvatarWrapper>
            <Avatar src={user.avatarUrl} />
          </AvatarWrapper>
-        ))}
-      </StyledTooltip>
+        </Tooltip>
+      ))}
    </Avatars>
  );
 };

-const StyledTooltip = styled(Tooltip)`
-  display: flex;
-  flex-direction: row-reverse;
-`;
-
 const AvatarWrapper = styled.div`
  width: 24px;
  height: 24px;
--- a/app/components/Sidebar/Sidebar.js
+++ b/app/components/Sidebar/Sidebar.js
@@ -59,7 +59,7 @@ const Container = styled(Flex)`
  background: ${props => props.theme.smoke};
  transition: left 100ms ease-out;
  margin-left: ${props => (props.mobileSidebarVisible ? 0 : '-100%')};
-  z-index: 1;
+  z-index: 2;

  @media print {
    display: none;
@@ -101,7 +101,7 @@ const Toggle = styled.a`
  left: ${props => (props.mobileSidebarVisible ? 'auto' : 0)};
  right: ${props => (props.mobileSidebarVisible ? 0 : 'auto')};
  z-index: 1;
-  margin: 16px;
+  margin: 12px;

  ${breakpoint('tablet')`
    display: none;
--- a/app/models/Document.js
+++ b/app/models/Document.js
@@ -8,7 +8,7 @@ import UiStore from 'stores/UiStore';
 import parseTitle from '../../shared/utils/parseTitle';
 import unescape from '../../shared/utils/unescape';

-import type { User } from 'types';
+import type { NavigationNode, User } from 'types';
 import BaseModel from './BaseModel';
 import Collection from './Collection';

@@ -52,17 +52,11 @@ class Document extends BaseModel {
  }

  @computed
-  get pathToDocument(): Array<{ id: string, title: string }> {
+  get pathToDocument(): NavigationNode[] {
    let path;
    const traveler = (nodes, previousPath) => {
      nodes.forEach(childNode => {
-        const newPath = [
-          ...previousPath,
-          {
-            id: childNode.id,
-            title: childNode.title,
-          },
-        ];
+        const newPath = [...previousPath, childNode];
        if (childNode.id === this.id) {
          path = newPath;
          return;
--- a/app/scenes/Document/Document.js
+++ b/app/scenes/Document/Document.js
@@ -21,7 +21,7 @@ import { uploadFile } from 'utils/uploadFile';
 import isInternalUrl from 'utils/isInternalUrl';

 import Document from 'models/Document';
-import Actions from './components/Actions';
+import Header from './components/Header';
 import DocumentMove from './components/DocumentMove';
 import UiStore from 'stores/UiStore';
 import AuthStore from 'stores/AuthStore';
@@ -278,7 +278,7 @@ class DocumentScene extends React.Component<Props> {
            <LoadingState />
          </CenteredContent>
        ) : (
-          <Flex justify="center" auto>
+          <Container justify="center" column auto>
            {this.isEditing && (
              <React.Fragment>
                <Prompt
@@ -288,6 +288,20 @@ class DocumentScene extends React.Component<Props> {
                <Prompt when={this.isUploading} message={UPLOADING_WARNING} />
              </React.Fragment>
            )}
+            {document &&
+              !isShare && (
+                <Header
+                  document={document}
+                  isDraft={!document.publishedAt}
+                  isEditing={this.isEditing}
+                  isSaving={this.isSaving}
+                  isPublishing={this.isPublishing}
+                  savingIsDisabled={!document.allowSave}
+                  history={this.props.history}
+                  onDiscard={this.onDiscard}
+                  onSave={this.onSave}
+                />
+              )}
            <MaxWidth column auto>
              <Editor
                titlePlaceholder="Start with a title…"
@@ -306,21 +320,7 @@ class DocumentScene extends React.Component<Props> {
                toc
              />
            </MaxWidth>
-            {document &&
-              !isShare && (
-                <Actions
-                  document={document}
-                  isDraft={!document.publishedAt}
-                  isEditing={this.isEditing}
-                  isSaving={this.isSaving}
-                  isPublishing={this.isPublishing}
-                  savingIsDisabled={!document.allowSave}
-                  history={this.props.history}
-                  onDiscard={this.onDiscard}
-                  onSave={this.onSave}
-                />
-              )}
-          </Flex>
+          </Container>
        )}
      </Container>
    );
@@ -328,13 +328,14 @@ class DocumentScene extends React.Component<Props> {
 }

 const MaxWidth = styled(Flex)`
-  padding: 0 20px;
+  padding: 0 16px;
  max-width: 100vw;
+  width: 100%;
  height: 100%;

  ${breakpoint('tablet')`	
-    padding: 0;
-    margin: 60px;
+    padding: 0 24px;
+    margin: 60px auto;
    max-width: 46em;
  `};
 `;
--- a/app/scenes/Document/components/Actions.js
+++ b/app/scenes/Document/components/Actions.js
@@ -1,130 +0,0 @@
-// @flow
-import * as React from 'react';
-import styled from 'styled-components';
-import { NewDocumentIcon } from 'outline-icons';
-import Document from 'models/Document';
-import { documentEditUrl, documentNewUrl } from 'utils/routeHelpers';
-
-import DocumentMenu from 'menus/DocumentMenu';
-import Collaborators from 'components/Collaborators';
-import Actions, { Action, Separator } from 'components/Actions';
-
-type Props = {
-  document: Document,
-  isDraft: boolean,
-  isEditing: boolean,
-  isSaving: boolean,
-  isPublishing: boolean,
-  savingIsDisabled: boolean,
-  onDiscard: () => *,
-  onSave: ({
-    done?: boolean,
-    publish?: boolean,
-    autosave?: boolean,
-  }) => *,
-  history: Object,
-};
-
-class DocumentActions extends React.Component<Props> {
-  handleNewDocument = () => {
-    this.props.history.push(documentNewUrl(this.props.document));
-  };
-
-  handleEdit = () => {
-    this.props.history.push(documentEditUrl(this.props.document));
-  };
-
-  handleSave = () => {
-    this.props.onSave({ done: true });
-  };
-
-  handlePublish = () => {
-    this.props.onSave({ done: true, publish: true });
-  };
-
-  render() {
-    const {
-      document,
-      isEditing,
-      isDraft,
-      isPublishing,
-      isSaving,
-      savingIsDisabled,
-    } = this.props;
-
-    return (
-      <Actions align="center" justify="flex-end" readOnly={!isEditing}>
-        {!isDraft && !isEditing && <Collaborators document={document} />}
-        {isDraft && (
-          <Action>
-            <Link
-              onClick={this.handlePublish}
-              title="Publish document (Cmd+Enter)"
-              disabled={savingIsDisabled}
-              highlight
-            >
-              {isPublishing ? 'Publishing…' : 'Publish'}
-            </Link>
-          </Action>
-        )}
-        {isEditing && (
-          <React.Fragment>
-            <Action>
-              <Link
-                onClick={this.handleSave}
-                title="Save changes (Cmd+Enter)"
-                disabled={savingIsDisabled}
-                isSaving={isSaving}
-                highlight={!isDraft}
-              >
-                {isSaving && !isPublishing ? 'Saving…' : 'Save'}
-              </Link>
-            </Action>
-            {isDraft && <Separator />}
-          </React.Fragment>
-        )}
-        {!isEditing && (
-          <Action>
-            <a onClick={this.handleEdit}>Edit</a>
-          </Action>
-        )}
-        {isEditing && (
-          <Action>
-            <a onClick={this.props.onDiscard}>
-              {document.hasPendingChanges ? 'Discard' : 'Done'}
-            </a>
-          </Action>
-        )}
-        {!isEditing && (
-          <Action>
-            <DocumentMenu document={document} showPrint />
-          </Action>
-        )}
-        {!isEditing &&
-          !isDraft && (
-            <React.Fragment>
-              <Separator />
-              <Action>
-                <a onClick={this.handleNewDocument}>
-                  <NewDocumentIcon />
-                </a>
-              </Action>
-            </React.Fragment>
-          )}
-      </Actions>
-    );
-  }
-}
-
-const Link = styled.a`
-  display: flex;
-  align-items: center;
-  font-weight: ${props => (props.highlight ? 500 : 'inherit')};
-  color: ${props =>
-    props.highlight ? `${props.theme.primary} !important` : 'inherit'};
-  opacity: ${props => (props.disabled ? 0.5 : 1)};
-  pointer-events: ${props => (props.disabled ? 'none' : 'auto')};
-  cursor: ${props => (props.disabled ? 'default' : 'pointer')};
-`;
-
-export default DocumentActions;
--- a/app/scenes/Document/components/Breadcrumb.js
+++ b/app/scenes/Document/components/Breadcrumb.js
@@ -0,0 +1,76 @@
+// @flow
+import * as React from 'react';
+import { observer, inject } from 'mobx-react';
+import breakpoint from 'styled-components-breakpoint';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+import { CollectionIcon, GoToIcon } from 'outline-icons';
+
+import Document from 'models/Document';
+import CollectionsStore from 'stores/CollectionsStore';
+import { collectionUrl } from 'utils/routeHelpers';
+import Flex from 'shared/components/Flex';
+
+type Props = {
+  document: Document,
+  collections: CollectionsStore,
+};
+
+const Breadcrumb = observer(({ document, collections }: Props) => {
+  const path = document.pathToDocument.slice(0, -1);
+  const collection =
+    collections.getById(document.collection.id) || document.collection;
+
+  return (
+    <Wrapper justify="flex-start" align="center">
+      <CollectionName to={collectionUrl(collection.id)}>
+        <CollectionIcon color={collection.color} />{' '}
+        <span>{collection.name}</span>
+      </CollectionName>
+      {path.map(n => (
+        <React.Fragment>
+          <Slash /> <Crumb to={n.url}>{n.title}</Crumb>
+        </React.Fragment>
+      ))}
+    </Wrapper>
+  );
+});
+
+const Wrapper = styled(Flex)`
+  width: 33.3%;
+  display: none;
+
+  ${breakpoint('tablet')`	
+    display: flex;
+  `};
+`;
+
+const Slash = styled(GoToIcon)`
+  flex-shrink: 0;
+  opacity: 0.25;
+`;
+
+const Crumb = styled(Link)`
+  color: ${props => props.theme.text};
+  font-size: 15px;
+  height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+const CollectionName = styled(Link)`
+  display: flex;
+  flex-shrink: 0;
+  color: ${props => props.theme.text};
+  font-size: 15px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+`;
+
+export default inject('collections')(Breadcrumb);
--- a/app/scenes/Document/components/Header.js
+++ b/app/scenes/Document/components/Header.js
@@ -0,0 +1,231 @@
+// @flow
+import * as React from 'react';
+import { throttle } from 'lodash';
+import { observable } from 'mobx';
+import { observer } from 'mobx-react';
+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 Flex from 'shared/components/Flex';
+import Breadcrumb from './Breadcrumb';
+import DocumentMenu from 'menus/DocumentMenu';
+import Collaborators from 'components/Collaborators';
+import { Action, Separator } from 'components/Actions';
+
+type Props = {
+  document: Document,
+  isDraft: boolean,
+  isEditing: boolean,
+  isSaving: boolean,
+  isPublishing: boolean,
+  savingIsDisabled: boolean,
+  onDiscard: () => *,
+  onSave: ({
+    done?: boolean,
+    publish?: boolean,
+    autosave?: boolean,
+  }) => *,
+  history: Object,
+};
+
+@observer
+class Header extends React.Component<Props> {
+  @observable isScrolled = false;
+
+  componentDidMount() {
+    window.addEventListener('scroll', this.handleScroll);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.handleScroll);
+  }
+
+  updateIsScrolled = () => {
+    this.isScrolled = window.scrollY > 75;
+  };
+
+  handleScroll = throttle(this.updateIsScrolled, 50);
+
+  handleNewDocument = () => {
+    this.props.history.push(documentNewUrl(this.props.document));
+  };
+
+  handleEdit = () => {
+    this.props.history.push(documentEditUrl(this.props.document));
+  };
+
+  handleSave = () => {
+    this.props.onSave({ done: true });
+  };
+
+  handlePublish = () => {
+    this.props.onSave({ done: true, publish: true });
+  };
+
+  handleClickTitle = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  render() {
+    const {
+      document,
+      isEditing,
+      isDraft,
+      isPublishing,
+      isSaving,
+      savingIsDisabled,
+    } = this.props;
+
+    return (
+      <Actions
+        align="center"
+        justify="space-between"
+        readOnly={!isEditing}
+        isCompact={this.isScrolled}
+      >
+        <Breadcrumb document={document} />
+        <Title isHidden={!this.isScrolled} onClick={this.handleClickTitle}>
+          {document.title}
+        </Title>
+        <Wrapper align="center" justify="flex-end">
+          {!isDraft && !isEditing && <Collaborators document={document} />}
+          {isSaving &&
+            !isPublishing && (
+              <Action>
+                <Status>Saving…</Status>
+              </Action>
+            )}
+          {isDraft && (
+            <Action>
+              <Link
+                onClick={this.handlePublish}
+                title="Publish document (Cmd+Enter)"
+                disabled={savingIsDisabled}
+                highlight
+              >
+                {isPublishing ? 'Publishing…' : 'Publish'}
+              </Link>
+            </Action>
+          )}
+          {isEditing && (
+            <React.Fragment>
+              <Action>
+                <Link
+                  onClick={this.handleSave}
+                  title="Save changes (Cmd+Enter)"
+                  disabled={savingIsDisabled}
+                  isSaving={isSaving}
+                  highlight={!isDraft}
+                >
+                  {isDraft ? 'Save Draft' : 'Done'}
+                </Link>
+              </Action>
+            </React.Fragment>
+          )}
+          {!isEditing && (
+            <Action>
+              <Link onClick={this.handleEdit}>Edit</Link>
+            </Action>
+          )}
+          {isEditing &&
+            !isSaving &&
+            document.hasPendingChanges && (
+              <Action>
+                <Link onClick={this.props.onDiscard}>Discard</Link>
+              </Action>
+            )}
+          {!isEditing && (
+            <Action>
+              <DocumentMenu document={document} showPrint />
+            </Action>
+          )}
+          {!isEditing &&
+            !isDraft && (
+              <React.Fragment>
+                <Separator />
+                <Action>
+                  <a onClick={this.handleNewDocument}>
+                    <NewDocumentIcon />
+                  </a>
+                </Action>
+              </React.Fragment>
+            )}
+        </Wrapper>
+      </Actions>
+    );
+  }
+}
+
+const Status = styled.div`
+  color: ${props => props.theme.slate};
+`;
+
+const Wrapper = styled(Flex)`
+  width: 100%;
+  align-self: flex-end;
+
+  ${breakpoint('tablet')`	
+    width: 33.3%;
+  `};
+`;
+
+const Actions = styled(Flex)`
+  position: sticky;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1;
+  background: rgba(255, 255, 255, 0.9);
+  border-bottom: 1px solid
+    ${props => (props.isCompact ? props.theme.smoke : 'transparent')};
+  padding: 12px;
+  transition: padding 100ms ease-out;
+  -webkit-backdrop-filter: blur(20px);
+
+  @media print {
+    display: none;
+  }
+
+  ${breakpoint('tablet')`
+    padding: ${props => (props.isCompact ? '12px' : `24px 24px 0`)};
+  `};
+`;
+
+const Title = styled.div`
+  font-size: 16px;
+  font-weight: 600;
+  text-align: center;
+  justify-content: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  transition: opacity 100ms ease-in-out;
+  opacity: ${props => (props.isHidden ? '0' : '1')};
+  cursor: ${props => (props.isHidden ? 'default' : 'pointer')};
+  display: none;
+  width: 0;
+
+  ${breakpoint('tablet')`	
+    display: block;
+    width: 33.3%;
+  `};
+`;
+
+const Link = styled.a`
+  display: flex;
+  align-items: center;
+  font-weight: ${props => (props.highlight ? 500 : 'inherit')};
+  color: ${props =>
+    props.highlight ? `${props.theme.primary} !important` : 'inherit'};
+  opacity: ${props => (props.disabled ? 0.5 : 1)};
+  pointer-events: ${props => (props.disabled ? 'none' : 'auto')};
+  cursor: ${props => (props.disabled ? 'default' : 'pointer')};
+`;
+
+export default Header;