Merge branch 'master' of github.com:jorilallo/atlas into update-slate

2017-12-08 20:22:07 -08:00
parent 466986eabb 1832bc74ad
commit 13b1ab7dca
24 changed files with 289 additions and 151 deletions
--- a/app/components/Actions/Actions.js
+++ b/app/components/Actions/Actions.js
@@ -29,6 +29,10 @@ const Actions = styled(Flex)`
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(20px);
+
+  @media print {
+    display: none;
+  }
 `;

 export default Actions;
--- 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/DropdownMenu/DropdownMenu.js
+++ b/app/components/DropdownMenu/DropdownMenu.js
@@ -96,6 +96,10 @@ const Menu = styled.div`
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.08);
+
+  @media print {
+    display: none;
+  }
 `;

 export default DropdownMenu;
--- a/app/components/Editor/Editor.js
+++ b/app/components/Editor/Editor.js
@@ -227,6 +227,10 @@ const Header = styled(Flex)`
  flex-shrink: 0;
  align-items: flex-end;
  ${({ readOnly }) => !readOnly && 'cursor: text;'};
+
+  @media print {
+    display: none;
+  }
 `;

 const StyledEditor = styled(Editor)`
--- a/app/components/Editor/components/Contents.js
+++ b/app/components/Editor/components/Contents.js
@@ -93,6 +93,10 @@ const Wrapper = styled.div`
  right: 0;
  top: 150px;
  z-index: 100;
+
+  @media print {
+    display: none;
+  }
 `;

 const Anchor = styled.a`
--- a/app/components/Editor/components/Toolbar/BlockToolbar.js
+++ b/app/components/Editor/components/Toolbar/BlockToolbar.js
@@ -197,6 +197,10 @@ const Bar = styled(Flex)`
    left: auto;
    right: -100%;
  }
+
+  @media print {
+    display: none;
+  }
 `;

 const HiddenInput = styled.input`
--- a/app/components/Editor/components/Toolbar/Toolbar.js
+++ b/app/components/Editor/components/Toolbar/Toolbar.js
@@ -153,4 +153,8 @@ const Menu = styled.div`
    transform: translateY(-6px) scale(1);
    opacity: 1;
  `};
+
+  @media print {
+    display: none;
+  }
 `;
--- a/app/components/ErrorBoundary/ErrorBoundary.js
+++ b/app/components/ErrorBoundary/ErrorBoundary.js
@@ -5,8 +5,13 @@ import { observable } from 'mobx';
 import CenteredContent from 'components/CenteredContent';
 import PageTitle from 'components/PageTitle';

+type Props = {
+  children?: ?React.Element<any>,
+};
+
@observer
 class ErrorBoundary extends Component {
+  props: Props;
  @observable error: boolean = false;

  componentDidCatch(error: Error, info: Object) {
@@ -27,9 +32,10 @@ class ErrorBoundary extends Component {
      return (
        <CenteredContent>
          <PageTitle title="Something went wrong" />
-          <h1>Something went wrong</h1>
+          <h1>🛸 Something unexpected happened</h1>
          <p>
-            An unrecoverable error occurred. Please try{' '}
+            An unrecoverable error occurred{window.Bugsnag ||
+              (true && ' and our engineers have been notified')}. Please try{' '}
            <a onClick={this.handleReload}>reloading</a>.
          </p>
        </CenteredContent>
--- a/app/components/Layout/Layout.js
+++ b/app/components/Layout/Layout.js
@@ -124,6 +124,10 @@ const Container = styled(Flex)`
 const Content = styled(Flex)`
  margin-left: ${props => (props.editMode ? 0 : layout.sidebarWidth)};
  transition: margin-left 200ms ease-in-out;
+
+  @media print {
+    margin-left: 0;
+  }
 `;

 export default withRouter(inject('user', 'auth', 'ui', 'documents')(Layout));
--- 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>
@@ -106,6 +90,11 @@ const Container = styled(Flex)`
  width: ${layout.sidebarWidth};
  background: ${color.smoke};
  transition: left 200ms ease-in-out;
+
+  @media print {
+    display: none;
+    left: 0;
+  }
 `;

 const Section = styled(Flex)`
--- 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 (
      <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,7 +256,13 @@ 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;
 `;

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