make markdown toggle purpose more obvious

The "< >" button on the toolbar should format selected
text as code, but its serving as a visual mode toggle.
This commit switches out the code icon for a text label,
and moves it to the right side of the rich text toolbar.
This commit is contained in:
Shawn Erquhart 2017-03-29 16:28:49 -04:00
parent de900eeb39
commit 192afe2ec5
2 changed files with 18 additions and 2 deletions

View File

@ -21,3 +21,15 @@
}
}
.Toggle {
position: absolute;
top: 0;
right: 0;
& .Button button {
font-size: 12px;
text-transform: uppercase;
padding-top: 10px;
padding-bottom: 8px;
}
}

View File

@ -7,11 +7,15 @@ function button(label, icon, action, active) {
const classNames = List([styles.Button]);
return (<li className={(active ? classNames.push(styles.ButtonActive) : classNames).join(' ')}>
<button className={styles[label]} onClick={action} title={label}>
<Icon type={icon} />
{ icon ? <Icon type={icon} /> : 'Toggle Markdown' }
</button>
</li>);
}
function toggle(...args) {
return <div className={styles.Toggle}>{button(...args)}</div>;
}
function Toolbar(props) {
const { onH1, onH2, onBold, onItalic, onLink, onToggleMode, rawMode } = props;
return (
@ -21,7 +25,7 @@ function Toolbar(props) {
{button('Bold', 'bold', onBold)}
{button('Italic', 'italic', onItalic)}
{button('Link', 'link', onLink)}
{button('View Code', 'code', onToggleMode, rawMode)}
{toggle('View Code', null, onToggleMode, rawMode)}
</ul>
);
}