From 14326d89f2ae4628bacd99ac9d214ab435f8ef67 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Tue, 31 Oct 2017 22:17:14 -0700 Subject: [PATCH] WIP --- .../Editor/components/BlockInsert.js | 24 +----- .../Editor/components/BlockToolbar.js | 84 +++++++++++++++++++ app/components/Editor/schema.js | 2 + app/components/Icon/CollectionIcon.js | 2 +- app/components/Icon/KeyboardIcon.js | 12 +++ app/components/Icon/OrderedListIcon.js | 2 +- 6 files changed, 103 insertions(+), 23 deletions(-) create mode 100644 app/components/Editor/components/BlockToolbar.js create mode 100644 app/components/Icon/KeyboardIcon.js diff --git a/app/components/Editor/components/BlockInsert.js b/app/components/Editor/components/BlockInsert.js index 8988881a8..63a9288ba 100644 --- a/app/components/Editor/components/BlockInsert.js +++ b/app/components/Editor/components/BlockInsert.js @@ -8,7 +8,6 @@ import { observer } from 'mobx-react'; import styled from 'styled-components'; import { color } from 'shared/styles/constants'; import PlusIcon from 'components/Icon/PlusIcon'; -import BlockMenu from 'menus/BlockMenu'; import type { State } from '../types'; const { transforms } = EditList; @@ -144,26 +143,9 @@ export default class BlockInsert extends Component { return ( - (this.file = ref)} - onChange={this.onChooseImage} - accept="image/*" - /> - } - onPickImage={this.onPickImage} - onInsertList={ev => - this.insertBlock(ev, { - type: 'list-item', - wrapper: 'bulleted-list', - })} - onInsertTodoList={ev => - this.insertBlock(ev, { type: todo, wrapper: 'todo-list' })} - onInsertBreak={ev => - this.insertBlock(ev, { type: rule, append: 'paragraph' })} - onOpen={this.handleMenuOpen} - onClose={this.handleMenuClose} + + this.insertBlock(ev, { type: 'block-toolbar', isVoid: true })} /> diff --git a/app/components/Editor/components/BlockToolbar.js b/app/components/Editor/components/BlockToolbar.js new file mode 100644 index 000000000..08e974a38 --- /dev/null +++ b/app/components/Editor/components/BlockToolbar.js @@ -0,0 +1,84 @@ +// @flow +import React, { Component } from 'react'; +import styled from 'styled-components'; +import Heading1Icon from 'components/Icon/Heading1Icon'; +import Heading2Icon from 'components/Icon/Heading2Icon'; +import ImageIcon from 'components/Icon/ImageIcon'; +import CodeIcon from 'components/Icon/CodeIcon'; +import BulletedListIcon from 'components/Icon/BulletedListIcon'; +import OrderedListIcon from 'components/Icon/OrderedListIcon'; +import HorizontalRuleIcon from 'components/Icon/HorizontalRuleIcon'; +import TodoListIcon from 'components/Icon/TodoListIcon'; +import Flex from 'shared/components/Flex'; +import type { Props } from '../types'; +import { color } from 'shared/styles/constants'; +import ToolbarButton from './Toolbar/components/ToolbarButton'; + +class BlockToolbar extends Component { + props: Props; + + onClickBlock = (ev: SyntheticEvent, type: string) => { + // TODO + }; + + renderBlockButton = (type: string, IconClass: Function) => { + return ( + this.onClickBlock(ev, type)}> + + + ); + }; + + render() { + const { state, node } = this.props; + const active = state.isFocused && state.selection.hasEdgeIn(node); + + return ( + + {this.renderBlockButton('heading1', Heading1Icon)} + {this.renderBlockButton('heading2', Heading2Icon)} + + {this.renderBlockButton('bulleted-list', BulletedListIcon)} + {this.renderBlockButton('ordered-list', OrderedListIcon)} + {this.renderBlockButton('todo-list', TodoListIcon)} + + {this.renderBlockButton('code', CodeIcon)} + {this.renderBlockButton('horizontal-rule', HorizontalRuleIcon)} + {this.renderBlockButton('image', ImageIcon)} + + ); + } +} + +const Separator = styled.div` + height: 100%; + width: 1px; + background: ${color.smokeDark}; + display: inline-block; + margin-left: 10px; +`; + +const Bar = styled(Flex)` + position: relative; + align-items: center; + background: ${color.smoke}; + padding: 10px 0; + height: 44px; + + &:before, + &:after { + content: ""; + position: absolute; + left: -100%; + width: 100%; + height: 44px; + background: ${color.smoke}; + } + + &:after { + left: auto; + right: -100%; + } +`; + +export default BlockToolbar; diff --git a/app/components/Editor/schema.js b/app/components/Editor/schema.js index 2010e4c22..295ae01ae 100644 --- a/app/components/Editor/schema.js +++ b/app/components/Editor/schema.js @@ -16,6 +16,7 @@ import { Heading6, } from './components/Heading'; import Paragraph from './components/Paragraph'; +import BlockToolbar from './components/BlockToolbar'; import type { Props, Node, Transform } from './types'; const createSchema = () => { @@ -30,6 +31,7 @@ const createSchema = () => { }, nodes: { + 'block-toolbar': (props: Props) => , paragraph: (props: Props) => , 'block-quote': (props: Props) => (
{props.children}
diff --git a/app/components/Icon/CollectionIcon.js b/app/components/Icon/CollectionIcon.js index 411d0920f..948ccec65 100644 --- a/app/components/Icon/CollectionIcon.js +++ b/app/components/Icon/CollectionIcon.js @@ -10,7 +10,7 @@ export default function CollectionIcon({ return ( {expanded - ? + ? : } ); diff --git a/app/components/Icon/KeyboardIcon.js b/app/components/Icon/KeyboardIcon.js new file mode 100644 index 000000000..d11264b05 --- /dev/null +++ b/app/components/Icon/KeyboardIcon.js @@ -0,0 +1,12 @@ +// @flow +import React from 'react'; +import Icon from './Icon'; +import type { Props } from './Icon'; + +export default function KeyboardIcon(props: Props) { + return ( + + + + ); +} diff --git a/app/components/Icon/OrderedListIcon.js b/app/components/Icon/OrderedListIcon.js index 855794bea..488520e52 100644 --- a/app/components/Icon/OrderedListIcon.js +++ b/app/components/Icon/OrderedListIcon.js @@ -6,7 +6,7 @@ import type { Props } from './Icon'; export default function OrderedListIcon(props: Props) { return ( - + ); }