From c54ae5d1240aee69631f1a408144aa5f245eda25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 9 Nov 2018 11:33:33 -0800
Subject: [PATCH] improve dropdown pane connetion to tab toolbar

---
 .../dashboard/dashgrid/DataSourcePicker.tsx   |  1 -
 .../dashboard/dashgrid/EditorTabBody.tsx      |  6 ++---
 .../dashboard/dashgrid/QueriesTab.tsx         |  5 ++--
 .../dashboard/dashgrid/VisualizationTab.tsx   |  4 ++-
 .../dashboard/dashgrid/VizTypePicker.tsx      |  1 -
 public/sass/components/_viz_editor.scss       | 27 ++++++++++---------
 6 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/DataSourcePicker.tsx b/public/app/features/dashboard/dashgrid/DataSourcePicker.tsx
index d8fb1b9d48e..c40ca753a8e 100644
--- a/public/app/features/dashboard/dashgrid/DataSourcePicker.tsx
+++ b/public/app/features/dashboard/dashgrid/DataSourcePicker.tsx
@@ -78,7 +78,6 @@ export class DataSourcePicker extends PureComponent<Props, State> {
     return (
       <>
         <div className="cta-form__bar">
-          <div className="cta-form__bar-header">Select data source</div>
           {this.renderFilters()}
           <div className="gf-form--grow" />
         </div>
diff --git a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
index f7ba511f086..2a2ff020d23 100644
--- a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
+++ b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
@@ -51,8 +51,8 @@ export class EditorTabBody extends PureComponent<Props, State> {
   renderButton(view: EditorToolBarView) {
     return (
       <div className="nav-buttons" key={view.title}>
-        <button className="btn navbar-button">
-          <i className={view.icon} /> {view.title}
+        <button className="btn navbar-button" onClick={() => this.onToggleToolBarView(view)}>
+          {view.icon && <i className={view.icon} />} {view.title}
         </button>
       </div>
     );
@@ -62,7 +62,7 @@ export class EditorTabBody extends PureComponent<Props, State> {
     return (
       <div className="editor-toolbar-view">
         <button className="editor-toolbar-view__close" onClick={this.onCloseOpenView}>
-          <i className="fa fa-remove" />
+          <i className="fa fa-chevron-up" />
         </button>
         {view.render()}
       </div>
diff --git a/public/app/features/dashboard/dashgrid/QueriesTab.tsx b/public/app/features/dashboard/dashgrid/QueriesTab.tsx
index 873924737e7..be8ffe30666 100644
--- a/public/app/features/dashboard/dashgrid/QueriesTab.tsx
+++ b/public/app/features/dashboard/dashgrid/QueriesTab.tsx
@@ -55,18 +55,17 @@ export class QueriesTab extends PureComponent<Props> {
 
     const queryInspector = {
       title: 'Query Inspector',
-      icon: 'fa fa-lightbulb-o',
       render: () => <h2>hello</h2>,
     };
 
     const dsHelp = {
-      title: 'Help',
+      title: '',
       icon: 'fa fa-question',
       render: () => <h2>hello</h2>,
     };
 
     return (
-      <EditorTabBody main={currentDataSource} toolbarItems={[dsHelp, queryInspector]}>
+      <EditorTabBody main={currentDataSource} toolbarItems={[queryInspector, dsHelp]}>
         <div ref={element => (this.element = element)} style={{ width: '100%' }} />
       </EditorTabBody>
     );
diff --git a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
index ad20ed514af..a7eaaca0760 100644
--- a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
+++ b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
@@ -36,12 +36,14 @@ export class VisualizationTab extends PureComponent<Props> {
   };
 
   render() {
-    const { plugin, onTypeChanged } = this.props;
+    const { plugin } = this.props;
 
     const panelSelection = {
       title: plugin.name,
       imgSrc: plugin.info.logos.small,
       render: () => {
+        // the needs to be scoped inside this closure
+        const { plugin, onTypeChanged } = this.props;
         return <VizTypePicker current={plugin} onTypeChanged={onTypeChanged} />;
       },
     };
diff --git a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx b/public/app/features/dashboard/dashgrid/VizTypePicker.tsx
index bd4895514ad..035ed7c5fed 100644
--- a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx
+++ b/public/app/features/dashboard/dashgrid/VizTypePicker.tsx
@@ -81,7 +81,6 @@ export class VizTypePicker extends PureComponent<Props, State> {
     return (
       <>
         <div className="cta-form__bar">
-          <div className="cta-form__bar-header">Select visualization</div>
           {this.renderFilters()}
           <div className="gf-form--grow" />
         </div>
diff --git a/public/sass/components/_viz_editor.scss b/public/sass/components/_viz_editor.scss
index 371fcd49cb7..bd9f52047fa 100644
--- a/public/sass/components/_viz_editor.scss
+++ b/public/sass/components/_viz_editor.scss
@@ -85,9 +85,7 @@
   }
 
   &--selected {
-    .viz-picker__item-name {
-      color: $text-color;
-    }
+    box-shadow: 0 0 12px #ff4d00;
   }
 }
 
@@ -171,10 +169,12 @@
   display: flex;
   align-content: center;
   align-items: center;
-  background: linear-gradient(90deg, #292a2d, black);
-  padding: 7px 30px 7px 20px;
+  background: $page-header-bg;
   box-shadow: 0 0 20px black;
+  padding: 7px 30px 7px 20px;
   cursor: pointer;
+  position: relative;
+  z-index: 1;
 }
 
 .edit-section__selected {
@@ -208,14 +208,15 @@
 }
 
 .panel-editor-tabs {
-  z-index: 1;
+  position: relative;
+  z-index: 2;
   box-shadow: $page-header-shadow;
   border-bottom: 1px solid $page-header-border-color;
   padding: 0 $dashboard-padding;
   @include clearfix();
 
   .active.gf-tabs-link {
-    background: #242427;
+    background: $input-label-bg;
   }
 }
 
@@ -231,6 +232,7 @@
   i {
     font-size: 120%;
   }
+
   &:hover {
     color: $text-color-strong;
   }
@@ -238,11 +240,10 @@
 
 .editor-toolbar-view {
   position: relative;
-  padding: 10px 20px;
+  padding: 20px 20px;
   background-color: $empty-list-cta-bg;
-  border-top: 3px solid $orange;
-  margin: 0 100px;
-  margin-bottom: 20px;
+  top: -45px;
+  margin: 0 30px 20px 0px;
 }
 
 .editor-toolbar-view__close {
@@ -250,8 +251,8 @@
   padding: 4px 8px 4px 9px;
   border: none;
   position: absolute;
-  right: 9px;
-  top: 7px;
+  right: 15px;
+  top: 20px;
   font-size: $font-size-md;
 
   &:hover {