Move keyboard shortcuts to modal. Add ? shortcut

frontend/components/HtmlContent/HtmlContent.js

@@ -0,0 +1,84 @@
+// @flow
+import styled from 'styled-components';
+
+const HtmlContent = styled.div`
+  h1, h2, h3, h4, h5, h6 {
+    :global {
+      .anchor {
+        visibility: hidden;
+        color: ;
+      }
+    }
+
+    &:hover {
+      :global {
+        .anchor {
+          visibility: visible;
+        }
+      }
+    }
+  }
+
+  ul {
+    padding-left: 1.5em;
+
+    ul {
+      margin: 0;
+    }
+  }
+
+  blockquote {
+    font-style: italic;
+    border-left: 2px solid $lightGray;
+    padding-left: 0.8em;
+  }
+
+  table {
+    width: 100%;
+    overflow: auto;
+    display: block;
+    border-spacing: 0;
+    border-collapse: collapse;
+
+    thead, tbody {
+      width: 100%;
+    }
+
+    thead {
+      tr {
+        border-bottom: 2px solid $lightGray;
+      }
+    }
+
+    tbody {
+      tr {
+        border-bottom: 1px solid $lightGray;
+      }
+    }
+
+    tr {
+      background-color: #fff;
+
+      // &:nth-child(2n) {
+      //   background-color: #f8f8f8;
+      // }
+    }
+
+    th, td {
+      text-align: left;
+      border: 1px 0 solid $lightGray;
+      padding: 5px 20px 5px 0;
+
+      &:last-child {
+        padding-right: 0;
+        width: 100%;
+      }
+    }
+
+    th {
+      font-weight: bold;
+    }
+  }
+`;
+
+export default HtmlContent;

frontend/components/HtmlContent/index.js

@@ -0,0 +1,3 @@
+// @flow
+import HtmlContent from './HtmlContent';
+export default HtmlContent;

frontend/components/KeyboardShortcuts/KeyboardShortcuts.js

@@ -0,0 +1,23 @@
+// @flow
+import React from 'react';
+import Flex from 'components/Flex';
+import HelpText from 'components/HelpText';
+import HtmlContent from 'components/HtmlContent';
+import flatpages from 'static/flatpages';
+import { convertToMarkdown } from 'utils/markdown';
+
+const htmlContent = convertToMarkdown(flatpages.keyboard);
+
+function KeyboardShortcuts() {
+  return (
+    <Flex column>
+      <HelpText>
+        Abstract is designed to be super fast. All of your usual keyboard
+        shortcuts work here.
+      </HelpText>
+      <HtmlContent dangerouslySetInnerHTML={{ __html: htmlContent }} />
+    </Flex>
+  );
+}
+
+export default KeyboardShortcuts;

frontend/components/KeyboardShortcuts/index.js

@@ -0,0 +1,3 @@
+// @flow
+import KeyboardShortcuts from './KeyboardShortcuts';
+export default KeyboardShortcuts;

frontend/components/Layout/Layout.js

@@ -12,6 +12,7 @@ import { color, layout } from 'styles/constants';
 import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
 import { LoadingIndicatorBar } from 'components/LoadingIndicator';
 import Scrollable from 'components/Scrollable';
+import KeyboardShortcuts from 'components/KeyboardShortcuts';
 import Avatar from 'components/Avatar';
 import Modal from 'components/Modal';
 import AddIcon from 'components/Icon/AddIcon';
@@ -41,8 +42,8 @@ type Props = {
 
 @observer class Layout extends React.Component {
   props: Props;
-  state: { createCollectionModalOpen: boolean };
-  state = { createCollectionModalOpen: false };
+  state: { modal?: string };
+  state = { modal: undefined };
 
   static defaultProps = {
     search: true,
@@ -54,7 +55,7 @@ type Props = {
       _.defer(() => this.props.history.push('/search'));
   }
 
-  @keydown(['d'])
+  @keydown('d')
   dashboard() {
     if (this.props.auth.authenticated)
       _.defer(() => this.props.history.push('/'));
@@ -64,12 +65,17 @@ type Props = {
     this.props.auth.logout(() => this.props.history.push('/'));
   };
 
+  @keydown('shift+/')
+  handleOpenKeyboardShortcuts() {
+    this.setState({ modal: 'keyboard-shortcuts' });
+  }
+
   handleCreateCollection = () => {
-    this.setState({ createCollectionModalOpen: true });
+    this.setState({ modal: 'create-collection' });
   };
 
   handleCloseModal = () => {
-    this.setState({ createCollectionModalOpen: false });
+    this.setState({ modal: undefined });
   };
 
   render() {
@@ -103,11 +109,9 @@ type Props = {
                   <MenuLink to="/settings">
                     <MenuItem>Settings</MenuItem>
                   </MenuLink>
-                  <MenuLink to="/keyboard-shortcuts">
-                    <MenuItem>
+                  <MenuItem onClick={this.handleOpenKeyboardShortcuts}>
                     Keyboard shortcuts
                   </MenuItem>
-                  </MenuLink>
                   <MenuLink to="/developers">
                     <MenuItem>API</MenuItem>
                   </MenuLink>
@@ -145,7 +149,7 @@ type Props = {
           </Content>
         </Flex>
         <Modal
-          isOpen={this.state.createCollectionModalOpen}
+          isOpen={this.state.modal === 'create-collection'}
           onRequestClose={this.handleCloseModal}
           title="Create a collection"
         >
@@ -155,6 +159,13 @@ type Props = {
             onCollectionCreated={this.handleCloseModal}
           />
         </Modal>
+        <Modal
+          isOpen={this.state.modal === 'keyboard-shortcuts'}
+          onRequestClose={this.handleCloseModal}
+          title="Keyboard shortcuts"
+        >
+          <KeyboardShortcuts />
+        </Modal>
       </Container>
     );
   }

frontend/components/Modal/Modal.js

@@ -53,6 +53,7 @@ const StyledModal = styled(ReactModal)`
   left: 0;
   bottom: 0;
   right: 0;
+  z-index: 100;
   display: flex;
   justify-content: center;
   align-items: flex-start;

frontend/index.js

@@ -82,9 +82,6 @@ const Auth = ({ children }: AuthProps) => {
 };
 
 const notFoundSearch = () => <Search notFound />;
-const KeyboardShortcuts = () => (
-  <Flatpage title="Keyboard shortcuts" content={flatpages.keyboard} />
-);
 const Api = () => <Flatpage title="API" content={flatpages.api} />;
 const DocumentNew = () => <Document newDocument />;
 const RedirectDocument = ({ match }: { match: Object }) => (
@@ -125,12 +122,6 @@ render(
                   <Route exact path="/search" component={Search} />
                   <Route exact path="/search/:query" component={Search} />
                   <Route exact path="/settings" component={Settings} />
-
-                  <Route
-                    exact
-                    path="/keyboard-shortcuts"
-                    component={KeyboardShortcuts}
-                  />
                   <Route exact path="/developers" component={Api} />
 
                   <Route path="/404" component={Error404} />

frontend/scenes/Flatpage/Flatpage.js

@@ -1,8 +1,8 @@
 // @flow
 import React from 'react';
 import { observer } from 'mobx-react';
-import styled from 'styled-components';
 import CenteredContent from 'components/CenteredContent';
+import HtmlContent from 'components/HtmlContent';
 import PageTitle from 'components/PageTitle';
 
 import { convertToMarkdown } from 'utils/markdown';
@@ -28,88 +28,4 @@ type Props = {
   }
 }
 
-const HtmlContent = styled.div`
-  h1, h2, h3, h4, h5, h6 {
-    :global {
-      .anchor {
-        visibility: hidden;
-        color: ;
-      }
-    }
-
-    &:hover {
-      :global {
-        .anchor {
-          visibility: visible;
-        }
-      }
-    }
-  }
-
-  ul {
-    padding-left: 1.5em;
-
-    ul {
-      margin: 0;
-    }
-  }
-
-  // pre {
-  //   box-shadow: 1px 1px 1px #f5f5f5;
-  // }
-
-  blockquote {
-    font-style: italic;
-    border-left: 2px solid $lightGray;
-    padding-left: 0.8em;
-  }
-
-  table {
-    width: 100%;
-    overflow: auto;
-    display: block;
-    border-spacing: 0;
-    border-collapse: collapse;
-
-    thead, tbody {
-      width: 100%;
-    }
-
-    thead {
-      tr {
-        border-bottom: 2px solid $lightGray;
-      }
-    }
-
-    tbody {
-      tr {
-        border-bottom: 1px solid $lightGray;
-      }
-    }
-
-    tr {
-      background-color: #fff;
-
-      // &:nth-child(2n) {
-      //   background-color: #f8f8f8;
-      // }
-    }
-
-    th, td {
-      text-align: left;
-      border: 1px 0 solid $lightGray;
-      padding: 5px 20px 5px 0;
-
-      &:last-child {
-        padding-right: 0;
-        width: 100%;
-      }
-    }
-
-    th {
-      font-weight: bold;
-    }
-  }
-`;
-
 export default Flatpage;

frontend/static/flatpages/keyboard.md

@@ -1,5 +1,3 @@
-# Keyboard shortcuts
-
 - `Cmd+/` - Toggle navigation tree
 - `Cmd+Enter` - Save document
 - `Cmd+Esc` - Cancel edit