diff --git a/frontend/components/Editor/plugins/KeyboardShortcuts.js b/frontend/components/Editor/plugins/KeyboardShortcuts.js index e9e150655..fb1f448c8 100644 --- a/frontend/components/Editor/plugins/KeyboardShortcuts.js +++ b/frontend/components/Editor/plugins/KeyboardShortcuts.js @@ -22,6 +22,11 @@ export default function KeyboardShortcuts() { return this.toggleMark(state, 'underlined'); case 'd': return this.toggleMark(state, 'deleted'); + case 'k': + return state + .transform() + .wrapInline({ type: 'link', data: { href: '' } }) + .apply(); default: return null; } diff --git a/frontend/components/HelpText/HelpText.js b/frontend/components/HelpText/HelpText.js index dcb48df84..a4ff8c9b3 100644 --- a/frontend/components/HelpText/HelpText.js +++ b/frontend/components/HelpText/HelpText.js @@ -3,6 +3,7 @@ import styled from 'styled-components'; import { color } from 'styles/constants'; const HelpText = styled.p` + margin-top: 0; color: ${color.slateDark}; `; diff --git a/frontend/components/Key/index.js b/frontend/components/Key/index.js new file mode 100644 index 000000000..efe24263a --- /dev/null +++ b/frontend/components/Key/index.js @@ -0,0 +1,3 @@ +// @flow +import Key from './key'; +export default Key; diff --git a/frontend/components/Key/key.js b/frontend/components/Key/key.js new file mode 100644 index 000000000..8f4954d8c --- /dev/null +++ b/frontend/components/Key/key.js @@ -0,0 +1,19 @@ +// @flow +import styled from 'styled-components'; +import { color } from 'styles/constants'; + +const Key = styled.kbd` + display: inline-block; + padding: 4px 6px; + font: 11px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; + line-height: 10px; + color: ${color.text}; + vertical-align: middle; + background-color: ${color.smokeLight}; + border: solid 1px ${color.slateLight}; + border-bottom-color: ${color.slate}; + border-radius: 3px; + box-shadow: inset 0 -1px 0 ${color.slate}; +`; + +export default Key; diff --git a/frontend/components/Layout/Layout.js b/frontend/components/Layout/Layout.js index 1d72cd14a..79f85039f 100644 --- a/frontend/components/Layout/Layout.js +++ b/frontend/components/Layout/Layout.js @@ -69,7 +69,7 @@ type Props = { } @keydown('shift+/') - goToOpenKeyboardShortcuts() { + openKeyboardShortcuts() { this.props.ui.setActiveModal('keyboard-shortcuts'); } diff --git a/frontend/components/Modal/Modal.js b/frontend/components/Modal/Modal.js index d0b208e93..92dc4db66 100644 --- a/frontend/components/Modal/Modal.js +++ b/frontend/components/Modal/Modal.js @@ -18,7 +18,7 @@ type Props = { const Modal = ({ children, isOpen, - title = 'Untitled Modal', + title = 'Untitled', onRequestClose, ...rest }: Props) => { @@ -61,7 +61,8 @@ const StyledModal = styled(ReactModal)` overflow-x: hidden; overflow-y: auto; background: white; - padding: 15vh 2rem 2rem + padding: 13vh 2rem 2rem; + outline: none; `; const Close = styled.a` diff --git a/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js b/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js index 8aeb5f606..afb42649b 100644 --- a/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js +++ b/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js @@ -1,23 +1,117 @@ // @flow import React from 'react'; +import styled from 'styled-components'; +import Key from 'components/Key'; 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. + All of your usual keyboard shortcuts work here, and there + {"'"} + s Markdown too. - + +

Navigation

+ + e + + + m + + + / or t + + + d + + + + / + + + +

Editor

+ + + Enter + + + S + + + Esc + + + + b + + + i + + + u + + + d + + + k + + + z + + + Shift + z + + + +

Markdown

+ + # Space + + ## Space + + ### Space + + + 1. Space + + - Space + + [ ] Space + + > Space + + --- + + {'```'} + + + _italic_ + + **bold** + + ~~strikethrough~~ + + {'`code`'} + +
); } +const List = styled.dl` + width: 100%; + overflow: hidden; + padding: 0; + margin: 0 +`; + +const Keys = styled.dt` + float: left; + width: 25%; + padding: 0 0 4px; + margin: 0 +`; + +const Label = styled.dd` + float: left; + width: 75%; + padding: 0 0 4px; + margin: 0 +`; + export default KeyboardShortcuts; diff --git a/frontend/static/flatpages/index.js b/frontend/static/flatpages/index.js index 731dd6b70..3b1fe70f0 100644 --- a/frontend/static/flatpages/index.js +++ b/frontend/static/flatpages/index.js @@ -1,8 +1,6 @@ // @flow import api from './api.md'; -import keyboard from './keyboard.md'; export default { api, - keyboard, }; diff --git a/frontend/static/flatpages/keyboard.md b/frontend/static/flatpages/keyboard.md deleted file mode 100644 index 56e604a0c..000000000 --- a/frontend/static/flatpages/keyboard.md +++ /dev/null @@ -1,9 +0,0 @@ -- `Cmd+Enter` - Save and exit document editor -- `Cmd+s` - Save document and continue editing -- `Cmd+Esc` - Cancel edit -- `/` or `t` - Jump to search -- `d` - Jump to dashboard -- `c` - Compose within a collection -- `e` - Edit document -- `m` - Move document -- `?` - This guide diff --git a/frontend/styles/base.css b/frontend/styles/base.css index 27eabf039..d7d50a1f2 100644 --- a/frontend/styles/base.css +++ b/frontend/styles/base.css @@ -137,3 +137,7 @@ hr { .activeDropZone a { color: #FFF !important; } + +.ReactModal__Body--open { + overflow: hidden; +}