Merge branch 'master' into tommoor-patch-1

frontend/components/DropdownMenu/DropdownMenu.js

@@ -2,22 +2,11 @@
 import React from 'react';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
+import keydown from 'react-keydown';
 import styled from 'styled-components';
 import Flex from 'components/Flex';
 import { color } from 'styles/constants';
-
-type MenuItemProps = {
-  onClick?: Function,
-  children?: React.Element<any>,
-};
-
-const DropdownMenuItem = ({ onClick, children }: MenuItemProps) => {
-  return (
-    <MenuItem onClick={onClick}>
-      {children}
-    </MenuItem>
-  );
-};
+import { fadeAndScaleIn } from 'styles/animations';
 
 type DropdownMenuProps = {
   label: React.Element<any>,
@@ -27,22 +16,30 @@ type DropdownMenuProps = {
 
 @observer class DropdownMenu extends React.Component {
   props: DropdownMenuProps;
-  @observable menuOpen: boolean = false;
+  @observable open: boolean = false;
 
   handleClick = () => {
-    this.menuOpen = !this.menuOpen;
+    this.open = !this.open;
+  };
+
+  @keydown('esc')
+  handleEscape() {
+    this.open = false;
+  }
+
+  handleClickOutside = (ev: SyntheticEvent) => {
+    ev.stopPropagation();
+    this.open = false;
   };
 
   render() {
     return (
       <MenuContainer onClick={this.handleClick}>
-        {this.menuOpen && <Backdrop />}
-
+        {this.open && <Backdrop onClick={this.handleClickOutside} />}
         <Label>
           {this.props.label}
         </Label>
-
-        {this.menuOpen &&
+        {this.open &&
           <Menu style={this.props.style}>
             {this.props.children}
           </Menu>}
@@ -73,40 +70,18 @@ const MenuContainer = styled.div`
 `;
 
 const Menu = styled.div`
+  animation: ${fadeAndScaleIn} 250ms ease;
+  transform-origin: 75% 0;
+
   position: absolute;
   right: 0;
   z-index: 1000;
-  border: 1px solid #eee;
-  background-color: #fff;
+  border: ${color.slateLight};
+  background: ${color.white};
+  border-radius: 2px;
   min-width: 160px;
+  overflow: hidden;
+  box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 4px 8px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.08);
 `;
 
-const MenuItem = styled.div`
-  margin: 0;
-  padding: 5px 10px;
-  height: 32px;
-
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-  border-left: 2px solid transparent;
-
-  color: ${color.text};
-
-  span {
-    margin-top: 2px;
-  }
-
-  a {
-    text-decoration: none;
-    color: ${color.text};
-    width: 100%;
-  }
-
-  &:hover {
-    border-left: 2px solid ${color.primary};
-  }
-`;
-
-export { DropdownMenu, DropdownMenuItem };
+export default DropdownMenu;

frontend/components/DropdownMenu/DropdownMenuItem.js

@@ -0,0 +1,43 @@
+// @flow
+import React from 'react';
+import styled from 'styled-components';
+import { color } from 'styles/constants';
+
+const DropdownMenuItem = ({
+  onClick,
+  children,
+}: {
+  onClick?: Function,
+  children?: React.Element<any>,
+}) => {
+  return (
+    <MenuItem onClick={onClick}>
+      {children}
+    </MenuItem>
+  );
+};
+
+const MenuItem = styled.div`
+  margin: 0;
+  padding: 5px 10px;
+  height: 32px;
+
+  color: ${color.slateDark};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  font-size: 15px;
+
+  a {
+    text-decoration: none;
+    width: 100%;
+  }
+
+  &:hover {
+    color: ${color.white};
+    background: ${color.primary};
+  }
+`;
+
+export default DropdownMenuItem;

frontend/components/DropdownMenu/index.js

@@ -1,2 +1,3 @@
 // @flow
-export { DropdownMenu, DropdownMenuItem } from './DropdownMenu';
+export { default as DropdownMenu } from './DropdownMenu';
+export { default as DropdownMenuItem } from './DropdownMenuItem';

frontend/components/Layout/Layout.js

@@ -1,31 +1,26 @@
 // @flow
 import React from 'react';
-import { Link, withRouter } from 'react-router-dom';
+import { withRouter } from 'react-router-dom';
 import Helmet from 'react-helmet';
 import styled from 'styled-components';
 import { observer, inject } from 'mobx-react';
-import { observable } from 'mobx';
-import _ from 'lodash';
 import keydown from 'react-keydown';
 import Flex from 'components/Flex';
 import { color, layout } from 'styles/constants';
 import { documentEditUrl, homeUrl, searchUrl } from 'utils/routeHelpers';
-import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
 
 import Avatar from 'components/Avatar';
 import { LoadingIndicatorBar } from 'components/LoadingIndicator';
 import Scrollable from 'components/Scrollable';
-import Modal from 'components/Modal';
 import Icon from 'components/Icon';
-import CollectionNew from 'scenes/CollectionNew';
-import CollectionEdit from 'scenes/CollectionEdit';
-import KeyboardShortcuts from 'scenes/KeyboardShortcuts';
-import Settings from 'scenes/Settings';
+import CollectionMenu from 'menus/CollectionMenu';
+import AccountMenu from 'menus/AccountMenu';
 
 import SidebarCollection from './components/SidebarCollection';
 import SidebarCollectionList from './components/SidebarCollectionList';
 import SidebarLink from './components/SidebarLink';
 import HeaderBlock from './components/HeaderBlock';
+import Modals from './components/Modals';
 
 import AuthStore from 'stores/AuthStore';
 import UiStore from 'stores/UiStore';
@@ -52,8 +47,6 @@ type Props = {
     search: true,
   };
 
-  @observable modal = null;
-
   @keydown(['/', 't'])
   goToSearch(ev) {
     ev.preventDefault();
@@ -76,37 +69,21 @@ type Props = {
     this.props.history.push(documentEditUrl(activeDocument));
   }
 
-  handleLogout = () => {
-    this.props.auth.logout(() => this.props.history.push('/'));
-  };
-
   @keydown('shift+/')
   goToOpenKeyboardShortcuts() {
-    this.modal = 'keyboard-shortcuts';
+    this.props.ui.setActiveModal('keyboard-shortcuts');
   }
 
-  handleOpenKeyboardShortcuts = () => {
-    this.goToOpenKeyboardShortcuts();
-  };
-
-  handleOpenSettings = () => {
-    this.modal = 'settings';
-  };
-
   handleCreateCollection = () => {
-    this.modal = 'create-collection';
+    this.props.ui.setActiveModal('collection-new');
   };
 
   handleEditCollection = () => {
-    this.modal = 'edit-collection';
-  };
-
-  handleCloseModal = () => {
-    this.modal = null;
+    this.props.ui.setActiveModal('collection-edit');
   };
 
   render() {
-    const { auth, documents, collections, history, ui } = this.props;
+    const { auth, documents, collections, ui } = this.props;
     const { user, team } = auth;
 
     return (
@@ -130,29 +107,15 @@ type Props = {
             user &&
             team &&
             <Sidebar column editMode={ui.editMode}>
-              <DropdownMenu
-                style={{ marginRight: 10, marginTop: -10 }}
+              <AccountMenu
                 label={
                   <HeaderBlock user={user} team={team}>
                     <Avatar src={user.avatarUrl} />
                   </HeaderBlock>
                 }
-              >
-                <DropdownMenuItem onClick={this.handleOpenSettings}>
-                  Settings
-                </DropdownMenuItem>
-                <DropdownMenuItem onClick={this.handleOpenKeyboardShortcuts}>
-                  Keyboard shortcuts
-                </DropdownMenuItem>
-                <MenuLink to="/developers">
-                  <DropdownMenuItem>API</DropdownMenuItem>
-                </MenuLink>
-                <DropdownMenuItem onClick={this.handleLogout}>
-                  Logout
-                </DropdownMenuItem>
-              </DropdownMenu>
+              />
 
-              <Flex column>
+              <Flex auto column>
                 <Scrollable>
                   <LinkSection>
                     <SidebarLink to="/dashboard">
@@ -167,8 +130,8 @@ type Props = {
                   </LinkSection>
                   <LinkSection>
                     {collections.active
-                      ? <CollectionAction onClick={this.handleEditCollection}>
-                          <Icon type="MoreHorizontal" />
+                      ? <CollectionAction>
+                          <CollectionMenu collection={collections.active} />
                         </CollectionAction>
                       : <CollectionAction onClick={this.handleCreateCollection}>
                           <Icon type="PlusCircle" />
@@ -189,44 +152,7 @@ type Props = {
             {this.props.children}
           </Content>
         </Flex>
-        <Modal
-          isOpen={this.modal === 'create-collection'}
-          onRequestClose={this.handleCloseModal}
-          title="Create a collection"
-        >
-          <CollectionNew
-            collections={collections}
-            history={history}
-            onSubmit={this.handleCloseModal}
-          />
-        </Modal>
-        <Modal
-          isOpen={this.modal === 'edit-collection'}
-          onRequestClose={this.handleCloseModal}
-          title="Edit collection"
-        >
-          {collections.active &&
-            <CollectionEdit
-              collection={collections.active}
-              collections={collections}
-              history={history}
-              onSubmit={this.handleCloseModal}
-            />}
-        </Modal>
-        <Modal
-          isOpen={this.modal === 'keyboard-shortcuts'}
-          onRequestClose={this.handleCloseModal}
-          title="Keyboard shortcuts"
-        >
-          <KeyboardShortcuts />
-        </Modal>
-        <Modal
-          isOpen={this.modal === 'settings'}
-          onRequestClose={this.handleCloseModal}
-          title="Settings"
-        >
-          <Settings />
-        </Modal>
+        <Modals ui={ui} />
       </Container>
     );
   }
@@ -255,10 +181,6 @@ const Content = styled(Flex)`
   transition: margin-left 200ms ease-in-out;
 `;
 
-const MenuLink = styled(Link)`
-  color: ${color.text};
-`;
-
 const Sidebar = styled(Flex)`
   position: fixed;
   top: 0;

frontend/components/Layout/components/Modals.js

@@ -0,0 +1,62 @@
+// @flow
+import React, { Component } from 'react';
+import { observer } from 'mobx-react';
+import BaseModal from 'components/Modal';
+import UiStore from 'stores/UiStore';
+import CollectionNew from 'scenes/CollectionNew';
+import CollectionEdit from 'scenes/CollectionEdit';
+import CollectionDelete from 'scenes/CollectionDelete';
+import DocumentDelete from 'scenes/DocumentDelete';
+import KeyboardShortcuts from 'scenes/KeyboardShortcuts';
+import Settings from 'scenes/Settings';
+
+@observer class Modals extends Component {
+  props: {
+    ui: UiStore,
+  };
+
+  handleClose = () => {
+    this.props.ui.clearActiveModal();
+  };
+
+  render() {
+    const { activeModalName, activeModalProps } = this.props.ui;
+
+    const Modal = ({ name, children, ...rest }) => {
+      return (
+        <BaseModal
+          isOpen={activeModalName === name}
+          onRequestClose={this.handleClose}
+          {...rest}
+        >
+          {React.cloneElement(children, activeModalProps)}
+        </BaseModal>
+      );
+    };
+
+    return (
+      <span>
+        <Modal name="collection-new" title="Create a collection">
+          <CollectionNew onSubmit={this.handleClose} />
+        </Modal>
+        <Modal name="collection-edit" title="Edit collection">
+          <CollectionEdit onSubmit={this.handleClose} />
+        </Modal>
+        <Modal name="collection-delete" title="Delete collection">
+          <CollectionDelete onSubmit={this.handleClose} />
+        </Modal>
+        <Modal name="document-delete" title="Delete document">
+          <DocumentDelete onSubmit={this.handleClose} />
+        </Modal>
+        <Modal name="keyboard-shortcuts" title="Keyboard shortcuts">
+          <KeyboardShortcuts />
+        </Modal>
+        <Modal name="settings" title="Settings">
+          <Settings />
+        </Modal>
+      </span>
+    );
+  }
+}
+
+export default Modals;

frontend/components/Scrollable/Scrollable.js

@@ -6,7 +6,6 @@ const Scroll = styled.div`
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
-  transform: translateZ(0);
   -webkit-overflow-scrolling: touch;
 `;