edit mode styling

This commit is contained in:
Torkel Ödegaard 2018-11-22 12:19:52 +01:00
parent d70dfd5fd7
commit 1b92bc62cb
2 changed files with 13 additions and 3 deletions

View File

@ -20,6 +20,7 @@ export interface EditorToolBarView {
interface State {
openView?: EditorToolBarView;
test: boolean;
}
export class EditorTabBody extends PureComponent<Props, State> {
@ -28,9 +29,14 @@ export class EditorTabBody extends PureComponent<Props, State> {
this.state = {
openView: null,
test: false,
};
}
componentDidMount() {
this.setState({ test: true });
}
onToggleToolBarView = (item: EditorToolBarView) => {
this.setState({
openView: item === this.state.openView ? null : item,
@ -96,7 +102,7 @@ export class EditorTabBody extends PureComponent<Props, State> {
render() {
const { children, toolbarItems, main, heading } = this.props;
const { openView } = this.state;
const { openView, test } = this.state;
return (
<>
<div className="toolbar">
@ -110,7 +116,11 @@ export class EditorTabBody extends PureComponent<Props, State> {
<FadeIn in={openView !== null} duration={200}>
<div className="panel-editor__toolbar-view">{openView && this.renderOpenView(openView)}</div>
</FadeIn>
<div className="panel-editor__content">{children}</div>
<div className="panel-editor__content">
<FadeIn in={test} duration={50}>
{children}
</FadeIn>
</div>
</CustomScrollbar>
</div>
</>

View File

@ -238,7 +238,7 @@ export class QueriesTab extends PureComponent<Props, State> {
};
return (
<EditorTabBody heading="Queries" main={dsInformation} toolbarItems={[queryInspector, dsHelp, options]}>
<EditorTabBody heading="Queries" main={dsInformation} toolbarItems={[options, queryInspector, dsHelp]}>
<div ref={element => (this.element = element)} style={{ width: '100%' }} />
</EditorTabBody>
);