Dropdown menu refactors

frontend/components/DropdownMenu/DropdownMenu.js

@@ -2,6 +2,7 @@
 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';
@@ -15,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>}

frontend/components/DropdownMenu/DropdownMenuItem.js

@@ -22,6 +22,7 @@ const MenuItem = styled.div`
   padding: 5px 10px;
   height: 32px;
 
+  color: ${color.slateDark};
   display: flex;
   justify-content: space-between;
   align-items: center;

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('create-collection');
   };
 
   handleEditCollection = () => {
-    this.modal = 'edit-collection';
-  };
-
-  handleCloseModal = () => {
-    this.modal = null;
+    this.props.ui.setActiveModal('edit-collection');
   };
 
   render() {
-    const { auth, documents, collections, history, ui } = this.props;
+    const { auth, documents, collections, ui } = this.props;
     const { user, team } = auth;
 
     return (
@@ -130,27 +107,13 @@ 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>
                 <Scrollable>
@@ -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,58 @@
+// @flow
+import React, { Component } from 'react';
+import { observer } from 'mobx-react';
+import Modal from 'components/Modal';
+import UiStore from 'stores/UiStore';
+import CollectionNew from 'scenes/CollectionNew';
+import CollectionEdit from 'scenes/CollectionEdit';
+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;
+
+    return (
+      <span>
+        <Modal
+          isOpen={activeModalName === 'create-collection'}
+          onRequestClose={this.handleClose}
+          title="Create a collection"
+        >
+          <CollectionNew onSubmit={this.handleClose} {...activeModalProps} />
+        </Modal>
+        <Modal
+          isOpen={activeModalName === 'edit-collection'}
+          onRequestClose={this.handleClose}
+          title="Edit collection"
+        >
+          <CollectionEdit onSubmit={this.handleClose} {...activeModalProps} />
+        </Modal>
+        <Modal
+          isOpen={activeModalName === 'keyboard-shortcuts'}
+          onRequestClose={this.handleClose}
+          title="Keyboard shortcuts"
+        >
+          <KeyboardShortcuts />
+        </Modal>
+        <Modal
+          isOpen={activeModalName === 'settings'}
+          onRequestClose={this.handleClose}
+          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;
 `;
 

frontend/menus/AccountMenu.js

@@ -0,0 +1,53 @@
+// @flow
+import React, { Component } from 'react';
+import { Link, withRouter } from 'react-router-dom';
+import { inject, observer } from 'mobx-react';
+import UiStore from 'stores/UiStore';
+import AuthStore from 'stores/AuthStore';
+import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
+
+@observer class AccountMenu extends Component {
+  props: {
+    label?: React$Element<any>,
+    history: Object,
+    ui: UiStore,
+    auth: AuthStore,
+  };
+
+  handleOpenKeyboardShortcuts = () => {
+    this.props.ui.setActiveModal('keyboard-shortcuts');
+  };
+
+  handleOpenSettings = () => {
+    this.props.ui.setActiveModal('settings');
+  };
+
+  handleLogout = () => {
+    this.props.auth.logout();
+    this.props.history.push('/');
+  };
+
+  render() {
+    return (
+      <DropdownMenu
+        style={{ marginRight: 10, marginTop: -10 }}
+        label={this.props.label}
+      >
+        <DropdownMenuItem onClick={this.handleOpenSettings}>
+          Settings
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={this.handleOpenKeyboardShortcuts}>
+          Keyboard shortcuts
+        </DropdownMenuItem>
+        <Link to="/developers">
+          <DropdownMenuItem>API documentation</DropdownMenuItem>
+        </Link>
+        <DropdownMenuItem onClick={this.handleLogout}>
+          Logout
+        </DropdownMenuItem>
+      </DropdownMenu>
+    );
+  }
+}
+
+export default withRouter(inject('ui', 'auth')(AccountMenu));

frontend/menus/CollectionMenu.js

@@ -0,0 +1,43 @@
+// @flow
+import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom';
+import { inject, observer } from 'mobx-react';
+import Collection from 'models/Collection';
+import UiStore from 'stores/UiStore';
+import Icon from 'components/Icon';
+import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
+
+@observer class CollectionMenu extends Component {
+  props: {
+    label?: React$Element<any>,
+    history: Object,
+    ui: UiStore,
+    collection: Collection,
+  };
+
+  onEdit = () => {
+    const { collection } = this.props;
+    this.props.ui.setActiveModal('edit-collection', { collection });
+  };
+
+  onDelete = () => {
+    const { collection } = this.props;
+    this.props.ui.setActiveModal('delete-collection', { collection });
+  };
+
+  render() {
+    const { collection, label } = this.props;
+    const { allowDelete } = collection;
+
+    return (
+      <DropdownMenu label={label || <Icon type="MoreHorizontal" />}>
+        {collection &&
+          <DropdownMenuItem onClick={this.onEdit}>Edit</DropdownMenuItem>}
+        {allowDelete &&
+          <DropdownMenuItem onClick={this.onDelete}>Delete</DropdownMenuItem>}
+      </DropdownMenu>
+    );
+  }
+}
+
+export default withRouter(inject('ui')(CollectionMenu));

frontend/menus/DocumentMenu.js

@@ -1,19 +1,19 @@
 // @flow
 import React, { Component } from 'react';
-import get from 'lodash/get';
 import { withRouter } from 'react-router-dom';
-import { observer } from 'mobx-react';
+import { inject, observer } from 'mobx-react';
 import Document from 'models/Document';
+import UiStore from 'stores/UiStore';
 import Icon from 'components/Icon';
 import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
 
-type Props = {
-  history: Object,
-  document: Document,
-};
-
-@observer class Menu extends Component {
-  props: Props;
+@observer class DocumentMenu extends Component {
+  props: {
+    ui: UiStore,
+    label?: React$Element<any>,
+    history: Object,
+    document: Document,
+  };
 
   onCreateDocument = () => {
     this.props.history.push(`${this.props.document.collection.url}/new`);
@@ -23,19 +23,9 @@ type Props = {
     this.props.history.push(`${this.props.document.url}/new`);
   };
 
-  onDelete = async () => {
-    let msg;
-    if (get(this.props, 'document.collection.type') === 'atlas') {
-      msg =
-        "Are you sure you want to delete this document and all it's child documents (if any)?";
-    } else {
-      msg = 'Are you sure you want to delete this document?';
-    }
-
-    if (confirm(msg)) {
-      await this.props.document.delete();
-      this.props.history.push(this.props.document.collection.url);
-    }
+  onDelete = () => {
+    const { document } = this.props;
+    this.props.ui.setActiveModal('delete-document', { document });
   };
 
   onExport = () => {
@@ -43,11 +33,11 @@ type Props = {
   };
 
   render() {
-    const collection = this.props.document.collection;
-    const allowDelete = this.props.document.allowDelete;
+    const { document, label } = this.props;
+    const { collection, allowDelete } = document;
 
     return (
-      <DropdownMenu label={<Icon type="MoreHorizontal" />} top right>
+      <DropdownMenu label={label || <Icon type="MoreHorizontal" />}>
         {collection &&
           <DropdownMenuItem onClick={this.onCreateDocument}>
             New document
@@ -60,4 +50,4 @@ type Props = {
   }
 }
 
-export default withRouter(Menu);
+export default withRouter(inject('ui')(DocumentMenu));

frontend/models/Collection.js

@@ -32,6 +32,10 @@ class Collection extends BaseModel {
       : this.url;
   }
 
+  @computed get allowDelete(): boolean {
+    return true;
+  }
+
   /* Actions */
 
   @action fetch = async () => {

frontend/scenes/Document/Document.js

@@ -10,7 +10,7 @@ import { color, layout } from 'styles/constants';
 import Document from 'models/Document';
 import UiStore from 'stores/UiStore';
 import DocumentsStore from 'stores/DocumentsStore';
-import Menu from './components/Menu';
+import DocumentMenu from 'menus/DocumentMenu';
 import SaveAction from './components/SaveAction';
 import LoadingPlaceholder from 'components/LoadingPlaceholder';
 import Editor from 'components/Editor';
@@ -222,10 +222,12 @@ type Props = {
                           Edit
                         </a>}
                   </HeaderAction>
+                  {isEditing &&
+                    <HeaderAction>
+                      <a onClick={this.onCancel}>Cancel</a>
+                    </HeaderAction>}
                   <HeaderAction>
-                    {isEditing
-                      ? <a onClick={this.onCancel}>Cancel</a>
-                      : <Menu document={document} />}
+                    <DocumentMenu document={document} />
                   </HeaderAction>
                   {!isEditing && <Separator />}
                   <HeaderAction>

frontend/stores/AuthStore.js

@@ -30,10 +30,9 @@ class AuthStore {
 
   /* Actions */
 
-  @action logout = (cb: Function) => {
+  @action logout = () => {
     this.user = null;
     this.token = null;
-    cb();
   };
 
   @action getOauthState = () => {

frontend/stores/UiStore.js

@@ -3,12 +3,23 @@ import { observable, action } from 'mobx';
 import Document from 'models/Document';
 
 class UiStore {
+  @observable activeModalName: ?string;
+  @observable activeModalProps: ?Object;
   @observable activeDocumentId: ?string;
   @observable activeCollectionId: ?string;
   @observable progressBarVisible: boolean = false;
   @observable editMode: boolean = false;
 
   /* Actions */
+  @action setActiveModal = (name: string, props: ?Object): void => {
+    this.activeModalName = name;
+    this.activeModalProps = props;
+  };
+
+  @action clearActiveModal = (): void => {
+    this.activeModalName = undefined;
+    this.activeModalProps = undefined;
+  };
 
   @action setActiveDocument = (document: Document): void => {
     this.activeDocumentId = document.id;