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>
-                      Keyboard shortcuts
-                    </MenuItem>
-                  </MenuLink>
+                  <MenuItem onClick={this.handleOpenKeyboardShortcuts}>
+                    Keyboard shortcuts
+                  </MenuItem>
                   <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;