diff --git a/frontend/components/HtmlContent/HtmlContent.js b/frontend/components/HtmlContent/HtmlContent.js
new file mode 100644
index 000000000..8f670b9a3
--- /dev/null
+++ b/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;
diff --git a/frontend/components/HtmlContent/index.js b/frontend/components/HtmlContent/index.js
new file mode 100644
index 000000000..2ecb47b95
--- /dev/null
+++ b/frontend/components/HtmlContent/index.js
@@ -0,0 +1,3 @@
+// @flow
+import HtmlContent from './HtmlContent';
+export default HtmlContent;
diff --git a/frontend/components/KeyboardShortcuts/KeyboardShortcuts.js b/frontend/components/KeyboardShortcuts/KeyboardShortcuts.js
new file mode 100644
index 000000000..c8aa58b5a
--- /dev/null
+++ b/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 (
+
+
+ Atlas is designed to be super fast and easy to use.
+ All of your usual keyboard shortcuts work here.
+
+
+
+ );
+}
+
+export default KeyboardShortcuts;
diff --git a/frontend/components/KeyboardShortcuts/index.js b/frontend/components/KeyboardShortcuts/index.js
new file mode 100644
index 000000000..ad40fe588
--- /dev/null
+++ b/frontend/components/KeyboardShortcuts/index.js
@@ -0,0 +1,3 @@
+// @flow
+import KeyboardShortcuts from './KeyboardShortcuts';
+export default KeyboardShortcuts;
diff --git a/frontend/components/Layout/Layout.js b/frontend/components/Layout/Layout.js
index be587ec88..919891943 100644
--- a/frontend/components/Layout/Layout.js
+++ b/frontend/components/Layout/Layout.js
@@ -12,6 +12,7 @@ import { color, layout } from 'styles/constants';
import { DropdownMenu, DropdownMenuItem } 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 = {
Settings
-
-
- Keyboard shortcuts
-
-
+
API
@@ -147,7 +151,7 @@ type Props = {
@@ -157,6 +161,13 @@ type Props = {
onCollectionCreated={this.handleCloseModal}
/>
+
+
+
);
}
diff --git a/frontend/components/Modal/Modal.js b/frontend/components/Modal/Modal.js
index 50e5bdb02..66110f0ec 100644
--- a/frontend/components/Modal/Modal.js
+++ b/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;
diff --git a/frontend/index.js b/frontend/index.js
index 31ac2a65d..0fbe170e5 100644
--- a/frontend/index.js
+++ b/frontend/index.js
@@ -82,9 +82,6 @@ const Auth = ({ children }: AuthProps) => {
};
const notFoundSearch = () => ;
-const KeyboardShortcuts = () => (
-
-);
const Api = () => ;
const DocumentNew = () => ;
const RedirectDocument = ({ match }: { match: Object }) => (
@@ -125,12 +122,6 @@ render(
-
-
diff --git a/frontend/scenes/Flatpage/Flatpage.js b/frontend/scenes/Flatpage/Flatpage.js
index e901c97ff..b23538088 100644
--- a/frontend/scenes/Flatpage/Flatpage.js
+++ b/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;
diff --git a/frontend/static/flatpages/keyboard.md b/frontend/static/flatpages/keyboard.md
index 576f05228..e433a4198 100644
--- a/frontend/static/flatpages/keyboard.md
+++ b/frontend/static/flatpages/keyboard.md
@@ -1,5 +1,3 @@
-# Keyboard shortcuts
-
- `Cmd+/` - Toggle navigation tree
- `Cmd+Enter` - Save document
- `Cmd+Esc` - Cancel edit