diff --git a/src/components/UI/theme.css b/src/components/UI/theme.css index 4aed59be..e4f0ea10 100644 --- a/src/components/UI/theme.css +++ b/src/components/UI/theme.css @@ -44,3 +44,9 @@ .depth { box-shadow: var(--shadowColor) 0 1px 6px; } + +.clearfix:after { + content: ''; + display: table; + clear: both; +} diff --git a/src/components/Widgets/MarkdownControlElements/Toolbar/Toolbar.css b/src/components/Widgets/MarkdownControlElements/Toolbar/Toolbar.css index c6e68169..140e59ba 100644 --- a/src/components/Widgets/MarkdownControlElements/Toolbar/Toolbar.css +++ b/src/components/Widgets/MarkdownControlElements/Toolbar/Toolbar.css @@ -1,15 +1,12 @@ @import "../../../UI/theme"; .Toolbar { + composes: clearfix; z-index: 1000; - list-style: none; - display: inline-block; } .Toggle { - position: absolute; - top: 0; - right: 0; + float: right; & button { font-size: 12px; diff --git a/src/components/Widgets/MarkdownControlElements/Toolbar/Toolbar.js b/src/components/Widgets/MarkdownControlElements/Toolbar/Toolbar.js index 8db160e5..c40ee0ad 100644 --- a/src/components/Widgets/MarkdownControlElements/Toolbar/Toolbar.js +++ b/src/components/Widgets/MarkdownControlElements/Toolbar/Toolbar.js @@ -19,24 +19,24 @@ export default class Toolbar extends React.Component { constructor(props) { super(props); this.state = { - openPlugin: null, + activePlugin: null, }; } - handlePlugin(plugin) { + handlePluginFormDisplay(plugin) { return (e) => { e.preventDefault(); - this.setState({ openPlugin: plugin }); + this.setState({ activePlugin: plugin }); }; } - handleSubmit = (plugin, pluginData) => { + handlePluginFormSubmit = (plugin, pluginData) => { this.props.onSubmit(plugin, pluginData); - this.setState({ openPlugin: null }); + this.setState({ activePlugin: null }); }; - handleCancel = (e) => { - this.setState({ openPlugin: null }); + handlePluginFormCancel = (e) => { + this.setState({ activePlugin: null }); }; render() { @@ -54,7 +54,7 @@ export default class Toolbar extends React.Component { getAsset, } = this.props; - const { openPlugin } = this.state; + const { activePlugin } = this.state; return (