wip: changes

public/app/features/dashboard/dashgrid/EditorTabBody.tsx

@@ -5,7 +5,7 @@ import { FadeIn } from 'app/core/components/Animations/FadeIn';
 interface Props {
 interface Props {
   children: JSX.Element;
   children: JSX.Element;
   heading: string;
   heading: string;
-  renderToolbar?: () => JSX.Element | JSX.Element[];
+  renderToolbar?: () => JSX.Element;
   toolbarItems?: EditorToolBarView[];
   toolbarItems?: EditorToolBarView[];
 }
 }
 
 
@@ -106,8 +106,12 @@ export class EditorTabBody extends PureComponent<Props, State> {
         <div className="toolbar">
         <div className="toolbar">
           <div className="toolbar__heading">{heading}</div>
           <div className="toolbar__heading">{heading}</div>
           {renderToolbar && renderToolbar()}
           {renderToolbar && renderToolbar()}
-          <div className="gf-form--grow" />
-          {toolbarItems.map(item => this.renderButton(item))}
+          {toolbarItems.length > 0 && (
+            <>
+              <div className="gf-form--grow" />
+              {toolbarItems.map(item => this.renderButton(item))}
+            </>
+          )}
         </div>
         </div>
         <div className="panel-editor__scroll">
         <div className="panel-editor__scroll">
           <CustomScrollbar autoHide={false}>
           <CustomScrollbar autoHide={false}>

public/app/features/dashboard/dashgrid/VisualizationTab.tsx

@@ -169,6 +169,10 @@ export class VisualizationTab extends PureComponent<Props, State> {
             />
             />
             <i className="gf-form-input-icon fa fa-search" />
             <i className="gf-form-input-icon fa fa-search" />
           </label>
           </label>
+          <div className="flex-grow" />
+          <button className="btn btn-link" onClick={this.onCloseVizPicker}>
+            <i className="fa fa-chevron-up" />
+          </button>
         </>
         </>
       );
       );
     } else {
     } else {
@@ -183,14 +187,17 @@ export class VisualizationTab extends PureComponent<Props, State> {
   };
   };
 
 
   onTypeChanged = (plugin: PanelPlugin) => {
   onTypeChanged = (plugin: PanelPlugin) => {
-    // this.setState({ isVizPickerOpen: false });
-    this.props.onTypeChanged(plugin);
+    if (plugin.id === this.props.plugin.id) {
+      this.setState({ isVizPickerOpen: false });
+    } else {
+      this.props.onTypeChanged(plugin);
+    }
   };
   };
 
 
   render() {
   render() {
     const { plugin } = this.props;
     const { plugin } = this.props;
     const { isVizPickerOpen, searchQuery } = this.state;
     const { isVizPickerOpen, searchQuery } = this.state;
-    const toolbarItems: EditorToolBarView = [];
+    const toolbarItems: EditorToolBarView[] = [];
 
 
     if (!isVizPickerOpen) {
     if (!isVizPickerOpen) {
       toolbarItems.push({
       toolbarItems.push({

public/app/features/dashboard/dashgrid/VizTypePicker.tsx

@@ -62,7 +62,6 @@ export class VizTypePicker extends PureComponent<Props> {
   };
   };
 
 
   render() {
   render() {
-    const { onClose } = this.props;
     const filteredPluginList = this.getFilteredPluginList();
     const filteredPluginList = this.getFilteredPluginList();
 
 
     return (
     return (

public/sass/_variables.dark.scss

@@ -271,7 +271,7 @@ $menu-dropdown-shadow: 5px 5px 20px -5px $black;
 $tab-border-color: $dark-4;
 $tab-border-color: $dark-4;
 
 
 // Toolbar
 // Toolbar
-$toolbar-bg: $input-bg;
+$toolbar-bg: $input-black;
 
 
 // Pagination
 // Pagination
 // -------------------------
 // -------------------------
@@ -377,12 +377,12 @@ $checkbox-color: $dark-1;
 $panel-editor-shadow: 0 0 20px black;
 $panel-editor-shadow: 0 0 20px black;
 $panel-editor-border: 1px solid $dark-3;
 $panel-editor-border: 1px solid $dark-3;
 $panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black);
 $panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black);
-$panel-editor-toolbar-view-bg: $black;
+$panel-editor-toolbar-view-bg: $input-black;
 $panel-editor-viz-item-shadow: 0 0 8px $dark-5;
 $panel-editor-viz-item-shadow: 0 0 8px $dark-5;
 $panel-editor-viz-item-border: 1px solid $dark-5;
 $panel-editor-viz-item-border: 1px solid $dark-5;
 $panel-editor-viz-item-shadow-hover: 0 0 4px $blue;
 $panel-editor-viz-item-shadow-hover: 0 0 4px $blue;
 $panel-editor-viz-item-border-hover: 1px solid $blue;
 $panel-editor-viz-item-border-hover: 1px solid $blue;
-$panel-editor-viz-item-bg: $black;
+$panel-editor-viz-item-bg: $input-black;
 $panel-editor-tabs-line-color: #e3e3e3;
 $panel-editor-tabs-line-color: #e3e3e3;
 $panel-editor-viz-item-bg-hover: darken($blue, 47%);
 $panel-editor-viz-item-bg-hover: darken($blue, 47%);
 $panel-editor-viz-item-bg-hover-active: darken($orange, 45%);
 $panel-editor-viz-item-bg-hover-active: darken($orange, 45%);

public/sass/components/_panel_editor.scss

@@ -35,7 +35,6 @@
   background: $page-bg;
   background: $page-bg;
   margin: 0 20px 0 84px;
   margin: 0 20px 0 84px;
   border-radius: 3px;
   border-radius: 3px;
-  border: $panel-editor-border;
   box-shadow: $panel-editor-shadow;
   box-shadow: $panel-editor-shadow;
 }
 }
 
 
@@ -134,7 +133,7 @@
 
 
 .viz-picker {
 .viz-picker {
   background: $toolbar-bg;
   background: $toolbar-bg;
-  margin: -40px -20px 40px 106px;
+  margin: -40px -20px 40px -20px;
   padding: 20px;
   padding: 20px;
   position: relative;
   position: relative;
 }
 }

public/sass/utils/_utils.scss

@@ -83,6 +83,10 @@ button.close {
   position: absolute;
   position: absolute;
 }
 }
 
 
+.flex-grow {
+  flex-grow: 1;
+}
+
 .center-vh {
 .center-vh {
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;