feat: document menu available in sidebar (#986)

* feat: document menu available in sidebar

* fix: more accessible blue

* feat: accessible blue
feat: clearer new doc button
closes #983

* lint

app/components/Actions.js

@@ -19,7 +19,7 @@ export const Action = styled(Flex)`
 export const Separator = styled.div`
   margin-left: 12px;
   width: 1px;
-  height: 20px;
+  height: 28px;
   background: ${props => props.theme.divider};
 `;
 

app/components/Button.js

@@ -13,11 +13,10 @@ const RealButton = styled.button`
   color: ${props => props.theme.buttonText};
   box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px;
   border-radius: 4px;
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 500;
-  height: ${props => (props.small ? 24 : 36)}px;
+  height: 32px;
   text-decoration: none;
-  text-transform: uppercase;
   flex-shrink: 0;
   outline: none;
   cursor: pointer;
@@ -39,7 +38,7 @@ const RealButton = styled.button`
   &:disabled {
     cursor: default;
     pointer-events: none;
-    color: ${props => props.theme.textTertiary};
+    color: ${props => props.theme.white50};
   }
 
   ${props =>
@@ -58,6 +57,10 @@ const RealButton = styled.button`
       background: ${darken(0.05, props.theme.buttonNeutralBackground)};
       border: 1px solid ${darken(0.15, props.theme.buttonNeutralBackground)};
     }
+
+    &:disabled {
+      color: ${props.theme.textTertiary};
+    }
   `} ${props =>
       props.danger &&
       `
@@ -80,15 +83,13 @@ const Label = styled.span`
 
 const Inner = styled.span`
   display: flex;
-  padding: 0 ${props => (props.small ? 8 : 12)}px;
+  padding: 0 8px;
-  padding-right: ${props => (props.disclosure ? 2 : props.small ? 8 : 12)}px;
+  padding-right: ${props => (props.disclosure ? 2 : 8)}px;
-  line-height: ${props => (props.small ? 24 : 28)}px;
+  line-height: ${props => (props.hasIcon ? 24 : 32)}px;
   justify-content: center;
   align-items: center;
 
-  ${props =>
+  ${props => props.hasIcon && 'padding-left: 4px;'};
-    props.hasIcon &&
-    (props.small ? 'padding-left: 6px;' : 'padding-left: 8px;')};
 `;
 
 export type Props = {
@@ -97,7 +98,6 @@ export type Props = {
   icon?: React.Node,
   className?: string,
   children?: React.Node,
-  small?: boolean,
   disclosure?: boolean,
 };
 
@@ -107,15 +107,14 @@ export default function Button({
   children,
   value,
   disclosure,
-  small,
   ...rest
 }: Props) {
   const hasText = children !== undefined || value !== undefined;
   const hasIcon = icon !== undefined;
 
   return (
-    <RealButton small={small} type={type} {...rest}>
+    <RealButton type={type} {...rest}>
-      <Inner hasIcon={hasIcon} small={small} disclosure={disclosure}>
+      <Inner hasIcon={hasIcon} disclosure={disclosure}>
         {hasIcon && icon}
         {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
         {disclosure && <ExpandedIcon />}

app/components/Collaborators.js

@@ -60,9 +60,8 @@ class Collaborators extends React.Component<Props> {
       <Avatars>
         {overflow > 0 && <More>+{overflow}</More>}
         {mostRecentViewers.map(({ lastViewedAt, user }) => (
-          <React.Fragment>
+          <React.Fragment key={user.id}>
             <AvatarPile
-              key={user.id}
               tooltip={
                 <TooltipCentered>
                   <strong>{user.name}</strong>
@@ -76,6 +75,7 @@ class Collaborators extends React.Component<Props> {
                 <Avatar
                   src={user.avatarUrl}
                   onClick={() => this.handleOpenProfile(user.id)}
+                  size={32}
                 />
               </Viewer>
             </AvatarPile>
@@ -87,9 +87,8 @@ class Collaborators extends React.Component<Props> {
           </React.Fragment>
         ))}
         {collaborators.map(user => (
-          <React.Fragment>
+          <React.Fragment key={user.id}>
             <AvatarPile
-              key={user.id}
               tooltip={
                 <TooltipCentered>
                   <strong>{user.name}</strong>
@@ -105,6 +104,7 @@ class Collaborators extends React.Component<Props> {
                 <Avatar
                   src={user.avatarUrl}
                   onClick={() => this.handleOpenProfile(user.id)}
+                  size={32}
                 />
               </Collaborator>
             </AvatarPile>
@@ -133,14 +133,14 @@ const AvatarPile = styled(Tooltip)`
 `;
 
 const Viewer = styled.div`
-  width: 24px;
+  width: 32px;
-  height: 24px;
+  height: 32px;
   opacity: 0.75;
 `;
 
 const Collaborator = styled.div`
-  width: 24px;
+  width: 32px;
-  height: 24px;
+  height: 32px;
 `;
 
 const More = styled.div`

app/components/DropdownMenu/DropdownMenu.js

@@ -119,7 +119,7 @@ const Label = styled(Flex).attrs({
 `;
 
 const Position = styled.div`
-  position: absolute;
+  position: fixed;
   ${({ left }) => (left !== undefined ? `left: ${left}px` : '')};
   ${({ right }) => (right !== undefined ? `right: ${right}px` : '')};
   top: ${({ top }) => top}px;

app/components/Sidebar/components/CollectionLink.js

@@ -7,6 +7,7 @@ import Collection from 'models/Collection';
 import Document from 'models/Document';
 import CollectionMenu from 'menus/CollectionMenu';
 import UiStore from 'stores/UiStore';
+import DocumentsStore from 'stores/DocumentsStore';
 import SidebarLink from './SidebarLink';
 import DocumentLink from './DocumentLink';
 import DropToImport from 'components/DropToImport';
@@ -15,6 +16,7 @@ import Flex from 'shared/components/Flex';
 type Props = {
   collection: Collection,
   ui: UiStore,
+  documents: DocumentsStore,
   activeDocument: ?Document,
   prefetchDocument: (id: string) => *,
 };
@@ -24,7 +26,13 @@ class CollectionLink extends React.Component<Props> {
   @observable menuOpen = false;
 
   render() {
-    const { collection, activeDocument, prefetchDocument, ui } = this.props;
+    const {
+      collection,
+      documents,
+      activeDocument,
+      prefetchDocument,
+      ui,
+    } = this.props;
     const expanded = collection.id === ui.activeCollectionId;
 
     return (
@@ -54,6 +62,7 @@ class CollectionLink extends React.Component<Props> {
           exact={false}
           menu={
             <CollectionMenu
+              position="left"
               collection={collection}
               onOpen={() => (this.menuOpen = true)}
               onClose={() => (this.menuOpen = false)}
@@ -61,10 +70,11 @@ class CollectionLink extends React.Component<Props> {
           }
         >
           <Flex column>
-            {collection.documents.map(document => (
+            {collection.documents.map(node => (
               <DocumentLink
-                key={document.id}
+                key={node.id}
-                document={document}
+                node={node}
+                documents={documents}
                 collection={collection}
                 activeDocument={activeDocument}
                 prefetchDocument={prefetchDocument}

app/components/Sidebar/components/Collections.js

@@ -49,6 +49,7 @@ class Collections extends React.Component<Props> {
         {collections.orderedData.map(collection => (
           <CollectionLink
             key={collection.id}
+            documents={documents}
             collection={collection}
             activeDocument={documents.active}
             prefetchDocument={documents.prefetchDocument}

app/components/Sidebar/components/DocumentLink.js

@@ -1,16 +1,21 @@
 // @flow
 import * as React from 'react';
 import { observer } from 'mobx-react';
+import { observable } from 'mobx';
 import styled from 'styled-components';
 import Document from 'models/Document';
+import DocumentMenu from 'menus/DocumentMenu';
 import SidebarLink from './SidebarLink';
 import DropToImport from 'components/DropToImport';
+import Fade from 'components/Fade';
 import Collection from 'models/Collection';
+import DocumentsStore from 'stores/DocumentsStore';
 import Flex from 'shared/components/Flex';
 import { type NavigationNode } from 'types';
 
 type Props = {
-  document: NavigationNode,
+  node: NavigationNode,
+  documents: DocumentsStore,
   collection?: Collection,
   activeDocument: ?Document,
   activeDocumentRef?: (?HTMLElement) => *,
@@ -20,17 +25,20 @@ type Props = {
 
 @observer
 class DocumentLink extends React.Component<Props> {
+  @observable menuOpen = false;
+
   handleMouseEnter = (ev: SyntheticEvent<*>) => {
-    const { document, prefetchDocument } = this.props;
+    const { node, prefetchDocument } = this.props;
 
     ev.stopPropagation();
     ev.preventDefault();
-    prefetchDocument(document.id);
+    prefetchDocument(node.id);
   };
 
   render() {
     const {
-      document,
+      node,
+      documents,
       collection,
       activeDocument,
       activeDocumentRef,
@@ -38,44 +46,60 @@ class DocumentLink extends React.Component<Props> {
       depth,
     } = this.props;
 
-    const isActiveDocument =
+    const isActiveDocument = activeDocument && activeDocument.id === node.id;
-      activeDocument && activeDocument.id === document.id;
     const showChildren = !!(
       activeDocument &&
       collection &&
       (collection
         .pathToDocument(activeDocument)
         .map(entry => entry.id)
-        .includes(document.id) ||
+        .includes(node.id) ||
         isActiveDocument)
     );
-    const hasChildren = !!document.children.length;
+    const hasChildren = !!node.children.length;
+    const document = documents.get(node.id);
 
     return (
       <Flex
         column
-        key={document.id}
+        key={node.id}
         ref={isActiveDocument ? activeDocumentRef : undefined}
         onMouseEnter={this.handleMouseEnter}
       >
-        <DropToImport documentId={document.id} activeClassName="activeDropZone">
+        <DropToImport documentId={node.id} activeClassName="activeDropZone">
           <SidebarLink
             to={{
-              pathname: document.url,
+              pathname: node.url,
-              state: { title: document.title },
+              state: { title: node.title },
             }}
             expanded={showChildren}
-            label={document.title}
+            label={node.title}
             depth={depth}
             exact={false}
+            menuOpen={this.menuOpen}
+            menu={
+              document ? (
+                <Fade>
+                  <DocumentMenu
+                    position="left"
+                    document={document}
+                    onOpen={() => (this.menuOpen = true)}
+                    onClose={() => (this.menuOpen = false)}
+                  />
+                </Fade>
+              ) : (
+                undefined
+              )
+            }
           >
             {hasChildren && (
               <DocumentChildren column>
-                {document.children.map(childDocument => (
+                {node.children.map(childNode => (
                   <DocumentLink
-                    key={childDocument.id}
+                    key={childNode.id}
                     collection={collection}
-                    document={childDocument}
+                    node={childNode}
+                    documents={documents}
                     activeDocument={activeDocument}
                     prefetchDocument={prefetchDocument}
                     depth={depth + 1}

app/components/Sidebar/components/SidebarLink.js

@@ -76,7 +76,7 @@ class SidebarLink extends React.Component<Props> {
     };
 
     return (
-      <Wrapper menuOpen={menuOpen} column>
+      <Wrapper column>
         <StyledNavLink
           activeStyle={activeStyle}
           style={active ? activeStyle : this.style}
@@ -92,9 +92,9 @@ class SidebarLink extends React.Component<Props> {
             )}
             {label}
           </Label>
+          {menu && <Action menuOpen={menuOpen}>{menu}</Action>}
         </StyledNavLink>
         {this.expanded && children}
-        {menu && <Action>{menu}</Action>}
       </Wrapper>
     );
   }
@@ -107,23 +107,8 @@ const IconWrapper = styled.span`
   height: 24px;
 `;
 
-const StyledNavLink = styled(NavLink)`
-  display: flex;
-  position: relative;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding: 4px 16px;
-  border-radius: 4px;
-  color: ${props => props.theme.sidebarText};
-  font-size: 15px;
-  cursor: pointer;
-
-  &:hover {
-    color: ${props => props.theme.text};
-  }
-`;
-
 const Action = styled.span`
+  display: ${props => (props.menuOpen ? 'inline' : 'none')};
   position: absolute;
   top: 4px;
   right: 4px;
@@ -140,11 +125,19 @@ const Action = styled.span`
   }
 `;
 
-const Wrapper = styled(Flex)`
+const StyledNavLink = styled(NavLink)`
+  display: flex;
   position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 4px 16px;
+  border-radius: 4px;
+  color: ${props => props.theme.sidebarText};
+  font-size: 15px;
+  cursor: pointer;
 
-  > ${Action} {
+  &:hover {
-    display: ${props => (props.menuOpen ? 'inline' : 'none')};
+    color: ${props => props.theme.text};
   }
 
   &:hover {
@@ -154,6 +147,10 @@ const Wrapper = styled(Flex)`
   }
 `;
 
+const Wrapper = styled(Flex)`
+  position: relative;
+`;
+
 const Label = styled.div`
   position: relative;
   width: 100%;

app/menus/CollectionMenu.js

@@ -18,12 +18,13 @@ import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
 
 type Props = {
   label?: React.Node,
-  onOpen?: () => *,
+  position?: 'left' | 'right' | 'center',
-  onClose?: () => *,
   ui: UiStore,
   documents: DocumentsStore,
   collection: Collection,
   history: Object,
+  onOpen?: () => void,
+  onClose?: () => void,
 };
 
 @observer
@@ -88,7 +89,7 @@ class CollectionMenu extends React.Component<Props> {
   };
 
   render() {
-    const { collection, label, onOpen, onClose } = this.props;
+    const { collection, label, position, onOpen, onClose } = this.props;
 
     return (
       <React.Fragment>
@@ -112,6 +113,7 @@ class CollectionMenu extends React.Component<Props> {
           label={label || <MoreIcon />}
           onOpen={onOpen}
           onClose={onClose}
+          position={position}
         >
           {collection && (
             <React.Fragment>

app/menus/DocumentMenu.js

@@ -20,12 +20,15 @@ type Props = {
   ui: UiStore,
   auth: AuthStore,
   label?: React.Node,
+  position?: 'left' | 'right' | 'center',
   document: Document,
   collections: CollectionStore,
   className: string,
   showPrint?: boolean,
   showToggleEmbeds?: boolean,
   showPin?: boolean,
+  onOpen?: () => void,
+  onClose?: () => void,
 };
 
 @observer
@@ -102,7 +105,17 @@ class DocumentMenu extends React.Component<Props> {
   render() {
     if (this.redirectTo) return <Redirect to={this.redirectTo} push />;
 
-    const { document, label, className, showPrint, showPin, auth } = this.props;
+    const {
+      document,
+      position,
+      label,
+      className,
+      showPrint,
+      showPin,
+      auth,
+      onOpen,
+      onClose,
+    } = this.props;
     const canShareDocuments = auth.team && auth.team.sharing;
 
     if (document.isArchived) {
@@ -119,7 +132,13 @@ class DocumentMenu extends React.Component<Props> {
     }
 
     return (
-      <DropdownMenu label={label || <MoreIcon />} className={className}>
+      <DropdownMenu
+        label={label || <MoreIcon />}
+        className={className}
+        position={position}
+        onOpen={onOpen}
+        onClose={onClose}
+      >
         {!document.isDraft ? (
           <React.Fragment>
             {showPin &&

app/menus/NewDocumentMenu.js

@@ -3,11 +3,12 @@ import * as React from 'react';
 import { observable } from 'mobx';
 import { inject, observer } from 'mobx-react';
 import { Redirect } from 'react-router-dom';
-import { MoreIcon, CollectionIcon, PrivateCollectionIcon } from 'outline-icons';
+import { PlusIcon, CollectionIcon, PrivateCollectionIcon } from 'outline-icons';
 
 import { newDocumentUrl } from 'utils/routeHelpers';
 import CollectionsStore from 'stores/CollectionsStore';
 import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
+import Button from 'components/Button';
 
 type Props = {
   label?: React.Node,
@@ -41,7 +42,13 @@ class NewDocumentMenu extends React.Component<Props> {
 
     return (
       <DropdownMenu
-        label={label || <MoreIcon />}
+        label={
+          label || (
+            <Button icon={<PlusIcon />} small>
+              New doc
+            </Button>
+          )
+        }
         onOpen={this.onOpen}
         {...rest}
       >

app/scenes/Collection.js

@@ -9,6 +9,7 @@ import {
   CollectionIcon,
   PrivateCollectionIcon,
   NewDocumentIcon,
+  PlusIcon,
   PinIcon,
 } from 'outline-icons';
 import RichMarkdownEditor from 'rich-markdown-editor';
@@ -103,13 +104,13 @@ class CollectionScene extends React.Component<Props> {
     return (
       <Actions align="center" justify="flex-end">
         <Action>
-          <CollectionMenu collection={this.collection} />
+          <Button onClick={this.onNewDocument} icon={<PlusIcon />}>
+            New doc
+          </Button>
         </Action>
         <Separator />
         <Action>
-          <a onClick={this.onNewDocument}>
+          <CollectionMenu collection={this.collection} />
-            <NewDocumentIcon />
-          </a>
         </Action>
       </Actions>
     );

app/scenes/Dashboard.js

@@ -2,7 +2,6 @@
 import * as React from 'react';
 import { Switch, Route } from 'react-router-dom';
 import { observer, inject } from 'mobx-react';
-import { NewDocumentIcon } from 'outline-icons';
 
 import DocumentsStore from 'stores/DocumentsStore';
 import AuthStore from 'stores/AuthStore';
@@ -67,7 +66,7 @@ class Dashboard extends React.Component<Props> {
         </Switch>
         <Actions align="center" justify="flex-end">
           <Action>
-            <NewDocumentMenu label={<NewDocumentIcon />} />
+            <NewDocumentMenu />
           </Action>
         </Actions>
       </CenteredContent>

app/scenes/Document/components/Header.js

@@ -6,7 +6,7 @@ import { observer, inject } from 'mobx-react';
 import { Redirect } from 'react-router-dom';
 import styled from 'styled-components';
 import breakpoint from 'styled-components-breakpoint';
-import { NewDocumentIcon } from 'outline-icons';
+import { EditIcon, PlusIcon } from 'outline-icons';
 import { transparentize, darken } from 'polished';
 import Document from 'models/Document';
 import AuthStore from 'stores/AuthStore';
@@ -182,12 +182,33 @@ class Header extends React.Component<Props> {
           )}
           {canEdit && (
             <Action>
-              <Button onClick={this.handleEdit} neutral small>
+              <Button
+                icon={<EditIcon />}
+                onClick={this.handleEdit}
+                neutral
+                small
+              >
                 Edit
               </Button>
             </Action>
           )}
+          {canEdit &&
+            !isDraft && (
+              <Action>
+                <NewChildDocumentMenu
+                  document={document}
+                  label={
+                    <Button icon={<PlusIcon />} neutral>
+                      New doc
+                    </Button>
+                  }
+                />
+              </Action>
+            )}
+
           {!isEditing && (
+            <React.Fragment>
+              <Separator />
               <Action>
                 <DocumentMenu
                   document={document}
@@ -195,17 +216,6 @@ class Header extends React.Component<Props> {
                   showPrint
                 />
               </Action>
-          )}
-          {canEdit &&
-            !isDraft && (
-              <React.Fragment>
-                <Separator />
-                <Action>
-                  <NewChildDocumentMenu
-                    document={document}
-                    label={<NewDocumentIcon />}
-                  />
-                </Action>
             </React.Fragment>
           )}
         </Wrapper>

app/scenes/Drafts.js

@@ -1,7 +1,6 @@
 // @flow
 import * as React from 'react';
 import { observer, inject } from 'mobx-react';
-import { NewDocumentIcon } from 'outline-icons';
 
 import Heading from 'components/Heading';
 import CenteredContent from 'components/CenteredContent';
@@ -44,7 +43,7 @@ class Drafts extends React.Component<Props> {
         )}
         <Actions align="center" justify="flex-end">
           <Action>
-            <NewDocumentMenu label={<NewDocumentIcon />} />
+            <NewDocumentMenu />
           </Action>
         </Actions>
       </CenteredContent>

app/scenes/Starred.js

@@ -1,7 +1,6 @@
 // @flow
 import * as React from 'react';
 import { observer, inject } from 'mobx-react';
-import { NewDocumentIcon } from 'outline-icons';
 
 import CenteredContent from 'components/CenteredContent';
 import { ListPlaceholder } from 'components/LoadingPlaceholder';
@@ -64,7 +63,7 @@ class Starred extends React.Component<Props> {
         {showLoading && <ListPlaceholder />}
         <Actions align="center" justify="flex-end">
           <Action>
-            <NewDocumentMenu label={<NewDocumentIcon />} />
+            <NewDocumentMenu />
           </Action>
         </Actions>
       </CenteredContent>

app/scenes/UserProfile.js

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import { inject, observer } from 'mobx-react';
 import { Link } from 'react-router-dom';
+import { EditIcon } from 'outline-icons';
 import Flex from 'shared/components/Flex';
 import HelpText from 'components/HelpText';
 import Modal from 'components/Modal';
@@ -50,7 +51,7 @@ class UserProfile extends React.Component<Props> {
             {user.isSuspended && <Badge>Suspended</Badge>}
             {isCurrentUser && (
               <Edit>
-                <Button to="/settings" as={Link} small neutral>
+                <Button to="/settings" as={Link} icon={<EditIcon />} neutral>
                   Edit Profile
                 </Button>
               </Edit>

shared/styles/theme.js

@@ -16,11 +16,12 @@ const colors = {
 
   white: '#FFF',
   white10: 'rgba(255, 255, 255, 0.1)',
+  white50: 'rgba(255, 255, 255, 0.5)',
   black: '#000',
   black05: 'rgba(0, 0, 0, 0.05)',
   black10: 'rgba(0, 0, 0, 0.1)',
   black50: 'rgba(0, 0, 0, 0.50)',
-  primary: '#1AB6FF',
+  primary: '#0366d6',
   yellow: '#FBCA04',
   warmGrey: '#EDF2F7',
 
@@ -47,6 +48,9 @@ export const base = {
   fontWeight: 400,
   backgroundTransition: 'background 100ms ease-in-out',
   zIndex: 100,
+
+  buttonBackground: colors.primary,
+  buttonText: colors.white,
 };
 
 export const light = {
@@ -80,8 +84,6 @@ export const light = {
   tableSelected: colors.primary,
   tableSelectedBackground: '#E5F7FF',
 
-  buttonBackground: colors.lightBlack,
-  buttonText: colors.white,
   buttonNeutralBackground: colors.white,
   buttonNeutralText: colors.almostBlack,
 
@@ -131,8 +133,6 @@ export const dark = {
   tableSelected: colors.primary,
   tableSelectedBackground: '#002333',
 
-  buttonBackground: colors.white,
-  buttonText: colors.lightBlack,
   buttonNeutralBackground: colors.almostBlack,
   buttonNeutralText: colors.white,