From 1b92bc62cbdbe2cabdd2c43bd1ae198f9cdeb57d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Thu, 22 Nov 2018 12:19:52 +0100
Subject: [PATCH] edit mode styling

---
 .../features/dashboard/dashgrid/EditorTabBody.tsx  | 14 ++++++++++++--
 .../app/features/dashboard/dashgrid/QueriesTab.tsx |  2 +-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
index 02404a917e6..6228cbe6691 100644
--- a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
+++ b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
@@ -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>
       </>
diff --git a/public/app/features/dashboard/dashgrid/QueriesTab.tsx b/public/app/features/dashboard/dashgrid/QueriesTab.tsx
index 5ce178c7931..cba631fb141 100644
--- a/public/app/features/dashboard/dashgrid/QueriesTab.tsx
+++ b/public/app/features/dashboard/dashgrid/QueriesTab.tsx
@@ -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>
     );