Add MarkdownShortcuts
This commit is contained in:
parent
4d60b79717
commit
be47baf2fd
|
@ -3,6 +3,7 @@ import styled from 'styled-components';
|
|||
import { color } from 'styles/constants';
|
||||
|
||||
const HelpText = styled.p`
|
||||
margin-top: 0;
|
||||
color: ${color.slateDark};
|
||||
`;
|
||||
|
||||
|
|
|
@ -0,0 +1,3 @@
|
|||
// @flow
|
||||
import Key from './key';
|
||||
export default Key;
|
|
@ -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;
|
|
@ -70,7 +70,7 @@ type Props = {
|
|||
|
||||
@keydown('shift+/')
|
||||
goToOpenKeyboardShortcuts() {
|
||||
this.props.ui.setActiveModal('keyboard-shortcuts');
|
||||
this.props.ui.setActiveModal('markdown-shortcuts');
|
||||
}
|
||||
|
||||
handleCreateCollection = () => {
|
||||
|
|
|
@ -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';
|
|||
<Modal name="keyboard-shortcuts" title="Keyboard shortcuts">
|
||||
<KeyboardShortcuts />
|
||||
</Modal>
|
||||
<Modal name="markdown-shortcuts" title="Markdown shortcuts">
|
||||
<MarkdownShortcuts />
|
||||
</Modal>
|
||||
<Modal name="settings" title="Settings">
|
||||
<Settings />
|
||||
</Modal>
|
||||
|
|
|
@ -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`
|
||||
|
|
|
@ -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() {
|
|||
<Keys><Key>d</Key></Keys>
|
||||
<Label>Jump to dashboard</Label>
|
||||
|
||||
<Keys><Key>d</Key></Keys>
|
||||
<Label>Jump to dashboard</Label>
|
||||
|
||||
<Keys><Key>?</Key></Keys>
|
||||
<Label>Open this guide</Label>
|
||||
</List>
|
||||
|
@ -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;
|
||||
|
|
|
@ -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 (
|
||||
<Flex column>
|
||||
<HelpText>
|
||||
Know a little markdown syntax? You
|
||||
{"'"}
|
||||
re going to love all of the markdown
|
||||
shortcuts built right into the Atlas editor.
|
||||
</HelpText>
|
||||
<List>
|
||||
<Keys><Key>#</Key> <Key>Space</Key></Keys>
|
||||
<Label>Large header</Label>
|
||||
<Keys><Key>##</Key> <Key>Space</Key></Keys>
|
||||
<Label>Medium header</Label>
|
||||
<Keys><Key>###</Key> <Key>Space</Key></Keys>
|
||||
<Label>Small header</Label>
|
||||
|
||||
<Keys><Key>1.</Key> <Key>Space</Key></Keys>
|
||||
<Label>Numbered list</Label>
|
||||
<Keys><Key>-</Key> <Key>Space</Key></Keys>
|
||||
<Label>Bulleted list</Label>
|
||||
<Keys><Key>[ ]</Key> <Key>Space</Key></Keys>
|
||||
<Label>Todo list</Label>
|
||||
<Keys><Key>></Key> <Key>Space</Key></Keys>
|
||||
<Label>Blockquote</Label>
|
||||
<Keys><Key>---</Key></Keys>
|
||||
<Label>Horizontal divider</Label>
|
||||
<Keys><Key>{'```'}</Key></Keys>
|
||||
<Label>Code block</Label>
|
||||
<Keys>_italic_</Keys>
|
||||
<Label>Italic</Label>
|
||||
<Keys>**bold**</Keys>
|
||||
<Label>Bold</Label>
|
||||
<Keys>~~strikethrough~~</Keys>
|
||||
<Label>Strikethrough</Label>
|
||||
<Keys>{'`code`'}</Keys>
|
||||
<Label>Inline code</Label>
|
||||
</List>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
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;
|
|
@ -0,0 +1,3 @@
|
|||
// @flow
|
||||
import MarkdownShortcuts from './MarkdownShortcuts';
|
||||
export default MarkdownShortcuts;
|
Reference in New Issue