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:
parent
de900eeb39
commit
192afe2ec5
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user