From be47baf2fdb29da207e7e97ae51fd32a3d28b611 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Thu, 28 Sep 2017 23:18:15 -0700 Subject: [PATCH] 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 dcb48df8..a4ff8c9b 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 00000000..efe24263 --- /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 00000000..8f4954d8 --- /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 1d72cd14..14cd805d 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 37193b8b..7ac3d91d 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 d0b208e9..df0ee9e5 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 de910034..f0c27c53 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 00000000..ff84ecf1 --- /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 00000000..1a6460e7 --- /dev/null +++ b/frontend/scenes/MarkdownShortcuts/index.js @@ -0,0 +1,3 @@ +// @flow +import MarkdownShortcuts from './MarkdownShortcuts'; +export default MarkdownShortcuts;