From 4d60b79717b5b86b56c84f4a652878c96837b261 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Thu, 28 Sep 2017 22:49:31 -0700 Subject: [PATCH 1/6] Improve shortcut styling --- .../KeyboardShortcuts/KeyboardShortcuts.js | 71 +++++++++++++++++-- frontend/static/flatpages/index.js | 2 - frontend/static/flatpages/keyboard.md | 9 --- 3 files changed, 65 insertions(+), 17 deletions(-) delete mode 100644 frontend/static/flatpages/keyboard.md diff --git a/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js b/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js index 8aeb5f606..de9100343 100644 --- a/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js +++ b/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js @@ -1,12 +1,9 @@ // @flow import React from 'react'; +import styled from 'styled-components'; +import { color } from 'styles/constants'; 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 ( @@ -15,9 +12,71 @@ function KeyboardShortcuts() { Atlas is designed to be super fast and easy to use. All of your usual keyboard shortcuts work here. - + + Cmd + Enter + + + Cmd + S + + + Cmd + Esc + + + e + + + m + + + / or t + + + d + + + d + + + ? + + ); } +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 +`; + +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 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 From be47baf2fdb29da207e7e97ae51fd32a3d28b611 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Thu, 28 Sep 2017 23:18:15 -0700 Subject: [PATCH 2/6] Add MarkdownShortcuts --- frontend/components/HelpText/HelpText.js | 1 + frontend/components/Key/index.js | 3 + frontend/components/Key/key.js | 19 +++++ frontend/components/Layout/Layout.js | 2 +- .../components/Layout/components/Modals.js | 4 ++ frontend/components/Modal/Modal.js | 3 +- .../KeyboardShortcuts/KeyboardShortcuts.js | 19 +---- .../MarkdownShortcuts/MarkdownShortcuts.js | 71 +++++++++++++++++++ frontend/scenes/MarkdownShortcuts/index.js | 3 + 9 files changed, 105 insertions(+), 20 deletions(-) create mode 100644 frontend/components/Key/index.js create mode 100644 frontend/components/Key/key.js create mode 100644 frontend/scenes/MarkdownShortcuts/MarkdownShortcuts.js create mode 100644 frontend/scenes/MarkdownShortcuts/index.js 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..14cd805d7 100644 --- a/frontend/components/Layout/Layout.js +++ b/frontend/components/Layout/Layout.js @@ -70,7 +70,7 @@ type Props = { @keydown('shift+/') goToOpenKeyboardShortcuts() { - this.props.ui.setActiveModal('keyboard-shortcuts'); + this.props.ui.setActiveModal('markdown-shortcuts'); } handleCreateCollection = () => { diff --git a/frontend/components/Layout/components/Modals.js b/frontend/components/Layout/components/Modals.js index 37193b8b1..7ac3d91df 100644 --- a/frontend/components/Layout/components/Modals.js +++ b/frontend/components/Layout/components/Modals.js @@ -8,6 +8,7 @@ import CollectionEdit from 'scenes/CollectionEdit'; import CollectionDelete from 'scenes/CollectionDelete'; import DocumentDelete from 'scenes/DocumentDelete'; import KeyboardShortcuts from 'scenes/KeyboardShortcuts'; +import MarkdownShortcuts from 'scenes/MarkdownShortcuts'; import Settings from 'scenes/Settings'; @observer class Modals extends Component { @@ -51,6 +52,9 @@ import Settings from 'scenes/Settings'; + + + diff --git a/frontend/components/Modal/Modal.js b/frontend/components/Modal/Modal.js index d0b208e93..df0ee9e53 100644 --- a/frontend/components/Modal/Modal.js +++ b/frontend/components/Modal/Modal.js @@ -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 de9100343..f0c27c53b 100644 --- a/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js +++ b/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js @@ -1,7 +1,7 @@ // @flow import React from 'react'; import styled from 'styled-components'; -import { color } from 'styles/constants'; +import Key from 'components/Key'; import Flex from 'components/Flex'; import HelpText from 'components/HelpText'; @@ -34,9 +34,6 @@ function KeyboardShortcuts() { d - d - - ? @@ -65,18 +62,4 @@ const Label = styled.dd` margin: 0 `; -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 KeyboardShortcuts; diff --git a/frontend/scenes/MarkdownShortcuts/MarkdownShortcuts.js b/frontend/scenes/MarkdownShortcuts/MarkdownShortcuts.js new file mode 100644 index 000000000..ff84ecf1d --- /dev/null +++ b/frontend/scenes/MarkdownShortcuts/MarkdownShortcuts.js @@ -0,0 +1,71 @@ +// @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'; + +function MarkdownShortcuts() { + return ( + + + Know a little markdown syntax? You + {"'"} + re going to love all of the markdown + shortcuts built right into the Atlas editor. + + + # 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 MarkdownShortcuts; diff --git a/frontend/scenes/MarkdownShortcuts/index.js b/frontend/scenes/MarkdownShortcuts/index.js new file mode 100644 index 000000000..1a6460e75 --- /dev/null +++ b/frontend/scenes/MarkdownShortcuts/index.js @@ -0,0 +1,3 @@ +// @flow +import MarkdownShortcuts from './MarkdownShortcuts'; +export default MarkdownShortcuts; From d015d37f53f0af3f97a9aa3cac377f41f40f8b65 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Thu, 28 Sep 2017 23:22:09 -0700 Subject: [PATCH 3/6] Add shortcut --- frontend/components/Layout/Layout.js | 7 ++++++- frontend/components/Layout/components/Modals.js | 2 +- frontend/components/Modal/Modal.js | 2 +- frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js | 3 +++ 4 files changed, 11 insertions(+), 3 deletions(-) diff --git a/frontend/components/Layout/Layout.js b/frontend/components/Layout/Layout.js index 14cd805d7..f72064a7b 100644 --- a/frontend/components/Layout/Layout.js +++ b/frontend/components/Layout/Layout.js @@ -69,7 +69,12 @@ type Props = { } @keydown('shift+/') - goToOpenKeyboardShortcuts() { + openKeyboardShortcuts() { + this.props.ui.setActiveModal('keyboard-shortcuts'); + } + + @keydown('shift+3') + openMarkdownShortcuts() { this.props.ui.setActiveModal('markdown-shortcuts'); } diff --git a/frontend/components/Layout/components/Modals.js b/frontend/components/Layout/components/Modals.js index 7ac3d91df..3d14bf025 100644 --- a/frontend/components/Layout/components/Modals.js +++ b/frontend/components/Layout/components/Modals.js @@ -52,7 +52,7 @@ import Settings from 'scenes/Settings'; - + diff --git a/frontend/components/Modal/Modal.js b/frontend/components/Modal/Modal.js index df0ee9e53..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) => { diff --git a/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js b/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js index f0c27c53b..c4cd1df0c 100644 --- a/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js +++ b/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js @@ -36,6 +36,9 @@ function KeyboardShortcuts() { ? + + # + ); From 6b5fef49546ece7eabbaf8beaf1264c07e38de9e Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Sat, 30 Sep 2017 19:59:08 -0700 Subject: [PATCH 4/6] Combine modals --- frontend/components/Layout/Layout.js | 5 -- .../components/Layout/components/Modals.js | 4 -- .../KeyboardShortcuts/KeyboardShortcuts.js | 69 ++++++++++++++---- .../MarkdownShortcuts/MarkdownShortcuts.js | 71 ------------------- frontend/scenes/MarkdownShortcuts/index.js | 3 - frontend/styles/base.css | 4 ++ 6 files changed, 61 insertions(+), 95 deletions(-) delete mode 100644 frontend/scenes/MarkdownShortcuts/MarkdownShortcuts.js delete mode 100644 frontend/scenes/MarkdownShortcuts/index.js diff --git a/frontend/components/Layout/Layout.js b/frontend/components/Layout/Layout.js index f72064a7b..79f85039f 100644 --- a/frontend/components/Layout/Layout.js +++ b/frontend/components/Layout/Layout.js @@ -73,11 +73,6 @@ type Props = { this.props.ui.setActiveModal('keyboard-shortcuts'); } - @keydown('shift+3') - openMarkdownShortcuts() { - this.props.ui.setActiveModal('markdown-shortcuts'); - } - handleCreateCollection = () => { this.props.ui.setActiveModal('collection-new'); }; diff --git a/frontend/components/Layout/components/Modals.js b/frontend/components/Layout/components/Modals.js index 3d14bf025..37193b8b1 100644 --- a/frontend/components/Layout/components/Modals.js +++ b/frontend/components/Layout/components/Modals.js @@ -8,7 +8,6 @@ import CollectionEdit from 'scenes/CollectionEdit'; import CollectionDelete from 'scenes/CollectionDelete'; import DocumentDelete from 'scenes/DocumentDelete'; import KeyboardShortcuts from 'scenes/KeyboardShortcuts'; -import MarkdownShortcuts from 'scenes/MarkdownShortcuts'; import Settings from 'scenes/Settings'; @observer class Modals extends Component { @@ -52,9 +51,6 @@ import Settings from 'scenes/Settings'; - - - diff --git a/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js b/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js index c4cd1df0c..037b05a12 100644 --- a/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js +++ b/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js @@ -10,18 +10,13 @@ function KeyboardShortcuts() { 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

- Cmd + Enter - - - Cmd + S - - - Cmd + Esc - - e @@ -36,9 +31,59 @@ function KeyboardShortcuts() { ? + - # - +

Editor

+ + Cmd + Enter + + Cmd + S + + Cmd + Esc + + + Cmd + b + + Cmd + i + + Cmd + u + + Cmd + z + + Cmd + Shift + z + + + +

Markdown

+ + # Space + + ## Space + + ### Space + + + 1. Space + + - Space + + [ ] Space + + > Space + + --- + + {'```'} + + + _italic_ + + **bold** + + ~~strikethrough~~ + + {'`code`'} + ); diff --git a/frontend/scenes/MarkdownShortcuts/MarkdownShortcuts.js b/frontend/scenes/MarkdownShortcuts/MarkdownShortcuts.js deleted file mode 100644 index ff84ecf1d..000000000 --- a/frontend/scenes/MarkdownShortcuts/MarkdownShortcuts.js +++ /dev/null @@ -1,71 +0,0 @@ -// @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'; - -function MarkdownShortcuts() { - return ( - - - Know a little markdown syntax? You - {"'"} - re going to love all of the markdown - shortcuts built right into the Atlas editor. - - - # 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 MarkdownShortcuts; diff --git a/frontend/scenes/MarkdownShortcuts/index.js b/frontend/scenes/MarkdownShortcuts/index.js deleted file mode 100644 index 1a6460e75..000000000 --- a/frontend/scenes/MarkdownShortcuts/index.js +++ /dev/null @@ -1,3 +0,0 @@ -// @flow -import MarkdownShortcuts from './MarkdownShortcuts'; -export default MarkdownShortcuts; 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; +} From 76d0597e9705081cc1010e940311c1837fe26d44 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Sat, 30 Sep 2017 20:53:17 -0700 Subject: [PATCH 5/6] Add cmd+k to insert link --- frontend/components/Editor/plugins/KeyboardShortcuts.js | 5 +++++ frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js | 4 ++++ 2 files changed, 9 insertions(+) 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/scenes/KeyboardShortcuts/KeyboardShortcuts.js b/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js index 037b05a12..bbae9e861 100644 --- a/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js +++ b/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js @@ -48,6 +48,10 @@ function KeyboardShortcuts() { Cmd + u + Cmd + d + + Cmd + k + Cmd + z Cmd + Shift + z From 379975253a78e2873b6fd417628db951a46a4be9 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Sat, 30 Sep 2017 21:12:09 -0700 Subject: [PATCH 6/6] Correct symbol --- .../KeyboardShortcuts/KeyboardShortcuts.js | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js b/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js index bbae9e861..afb42649b 100644 --- a/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js +++ b/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js @@ -29,32 +29,32 @@ function KeyboardShortcuts() { d - ? + ⌘ + /

Editor

- Cmd + Enter + ⌘ + Enter - Cmd + S + ⌘ + S - Cmd + Esc + ⌘ + Esc - Cmd + b + ⌘ + b - Cmd + i + ⌘ + i - Cmd + u + ⌘ + u - Cmd + d + ⌘ + d - Cmd + k + ⌘ + k - Cmd + z + ⌘ + z - Cmd + Shift + z + ⌘ + Shift + z