Icons for hover menu

This commit is contained in:
Cássio Zen 2016-08-03 12:02:10 -03:00
parent 246861a310
commit d7c7ba4cdc

View File

@ -4,6 +4,7 @@ import Portal from 'react-portal';
import position from 'selection-position'; import position from 'selection-position';
import Markdown from 'slate-markdown-serializer'; import Markdown from 'slate-markdown-serializer';
import { DEFAULT_NODE, NODES, MARKS } from './MarkdownControlElements/localRenderers'; import { DEFAULT_NODE, NODES, MARKS } from './MarkdownControlElements/localRenderers';
import { Icon } from '../UI';
import styles from './MarkdownControl.css'; import styles from './MarkdownControl.css';
const markdown = new Markdown(); const markdown = new Markdown();
@ -166,13 +167,13 @@ class MarkdownControl extends React.Component {
return ( return (
<Portal isOpened={isOpen} onOpen={this.handleOpen}> <Portal isOpened={isOpen} onOpen={this.handleOpen}>
<div className={`${styles.menu} ${styles.hoverMenu}`}> <div className={`${styles.menu} ${styles.hoverMenu}`}>
{this.renderMarkButton('bold', 'b')} {this.renderMarkButton('bold', 'bold')}
{this.renderMarkButton('italic', 'i')} {this.renderMarkButton('italic', 'italic')}
{this.renderMarkButton('code', 'code')} {this.renderMarkButton('code', 'code')}
{this.renderBlockButton('heading1', 'h1')} {this.renderBlockButton('heading1', 'h1')}
{this.renderBlockButton('heading2', 'h2')} {this.renderBlockButton('heading2', 'h2')}
{this.renderBlockButton('block-quote', 'blockquote')} {this.renderBlockButton('block-quote', 'quote-left')}
{this.renderBlockButton('bulleted-list', 'ul')} {this.renderBlockButton('bulleted-list', 'list-bullet')}
</div> </div>
</Portal> </Portal>
); );
@ -184,7 +185,7 @@ class MarkdownControl extends React.Component {
return ( return (
<span className={styles.button} onMouseDown={onMouseDown} data-active={isActive}> <span className={styles.button} onMouseDown={onMouseDown} data-active={isActive}>
{icon} <Icon type={icon}/>
</span> </span>
); );
} }
@ -195,7 +196,7 @@ class MarkdownControl extends React.Component {
return ( return (
<span className={styles.button} onMouseDown={onMouseDown} data-active={isActive}> <span className={styles.button} onMouseDown={onMouseDown} data-active={isActive}>
<span>{icon}</span> <Icon type={icon}/>
</span> </span>
); );
} }