From be7e7fcb406b0dd0bd310d358518fcd38de26b3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Wed, 12 Dec 2018 13:59:19 +0100
Subject: [PATCH] things are working

---
 .../dashboard/dashgrid/VisualizationTab.tsx   | 42 ++++++++++++-------
 .../dashboard/dashgrid/VizTypePicker.tsx      | 16 ++++++-
 public/sass/_variables.dark.scss              |  3 +-
 public/sass/_variables.light.scss             |  1 +
 public/sass/components/_buttons.scss          |  1 +
 public/sass/components/_panel_editor.scss     | 18 ++++----
 6 files changed, 57 insertions(+), 24 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
index 29dc218e174..42023d9de35 100644
--- a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
+++ b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
@@ -7,6 +7,7 @@ import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoa
 // Components
 import { EditorTabBody } from './EditorTabBody';
 import { VizTypePicker } from './VizTypePicker';
+import { FadeIn } from 'app/core/components/Animations/FadeIn';
 
 // Types
 import { PanelModel } from '../panel_model';
@@ -105,7 +106,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
       template +=
         `
       <div class="form-section" ng-cloak>` +
-        (i > 0 ? `<div class="form-section__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') +
+        (i > -1 ? `<div class="form-section__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') +
         `<div class="form-section__body">
           <panel-editor-tab editor-tab="ctrl.editorTabs[${i}]" ctrl="ctrl"></panel-editor-tab>
         </div>
@@ -139,6 +140,10 @@ export class VisualizationTab extends PureComponent<Props, State> {
     this.setState({ isVizPickerOpen: true });
   };
 
+  onCloseVizPicker = () => {
+    this.setState({ isVizPickerOpen: false });
+  };
+
   onSearchQueryChange = evt => {
     const value = evt.target.value;
     this.setState({
@@ -152,17 +157,19 @@ export class VisualizationTab extends PureComponent<Props, State> {
 
     if (this.state.isVizPickerOpen) {
       return (
-        <label className="gf-form--has-input-icon">
-          <input
-            type="text"
-            className="gf-form-input width-13"
-            placeholder=""
-            onChange={this.onSearchQueryChange}
-            value={searchQuery}
-            ref={elem => elem && elem.focus()}
-          />
-          <i className="gf-form-input-icon fa fa-search" />
-        </label>
+        <>
+          <label className="gf-form--has-input-icon">
+            <input
+              type="text"
+              className="gf-form-input width-13"
+              placeholder=""
+              onChange={this.onSearchQueryChange}
+              value={searchQuery}
+              ref={elem => elem && elem.focus()}
+            />
+            <i className="gf-form-input-icon fa fa-search" />
+          </label>
+        </>
       );
     } else {
       return (
@@ -193,9 +200,14 @@ export class VisualizationTab extends PureComponent<Props, State> {
     return (
       <EditorTabBody heading="Visualization" renderToolbar={this.renderToolbar} toolbarItems={[panelHelp]}>
         <>
-          {isVizPickerOpen && (
-            <VizTypePicker current={plugin} onTypeChanged={this.onTypeChanged} searchQuery={searchQuery} />
-          )}
+          <FadeIn in={isVizPickerOpen} duration={200} unmountOnExit={true}>
+            <VizTypePicker
+              current={plugin}
+              onTypeChanged={this.onTypeChanged}
+              searchQuery={searchQuery}
+              onClose={this.onCloseVizPicker}
+            />
+          </FadeIn>
           {this.renderPanelOptions()}
         </>
       </EditorTabBody>
diff --git a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx b/public/app/features/dashboard/dashgrid/VizTypePicker.tsx
index 211890d9c03..e9f8d895e40 100644
--- a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx
+++ b/public/app/features/dashboard/dashgrid/VizTypePicker.tsx
@@ -9,6 +9,7 @@ export interface Props {
   current: PanelPlugin;
   onTypeChanged: (newType: PanelPlugin) => void;
   searchQuery: string;
+  onClose: () => void;
 }
 
 export class VizTypePicker extends PureComponent<Props> {
@@ -61,10 +62,23 @@ export class VizTypePicker extends PureComponent<Props> {
   };
 
   render() {
+    const { onClose } = this.props;
     const filteredPluginList = this.getFilteredPluginList();
 
     return (
-      <div className="viz-picker">{filteredPluginList.map((plugin, index) => this.renderVizPlugin(plugin, index))}</div>
+      <div className="form-section">
+        <div className="form-section__header">
+          <span>Type selection</span>
+          <button className="btn btn-link" onClick={onClose}>
+            <i className="fa fa-remove" />
+          </button>
+        </div>
+        <div className="form-section__body">
+          <div className="viz-picker">
+            {filteredPluginList.map((plugin, index) => this.renderVizPlugin(plugin, index))}
+          </div>
+        </div>
+      </div>
     );
   }
 }
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index ca9e1a38249..7e76fc841d5 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -271,7 +271,7 @@ $menu-dropdown-shadow: 5px 5px 20px -5px $black;
 $tab-border-color: $dark-4;
 
 // Toolbar
-$toolbar-bg: $black;
+$toolbar-bg: $input-bg;
 
 // Pagination
 // -------------------------
@@ -375,6 +375,7 @@ $checkbox-color: $dark-1;
 //Panel Edit
 // -------------------------
 $panel-editor-shadow: 0 0 20px black;
+$panel-editor-border: 1px solid $dark-3;
 $panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black);
 $panel-editor-toolbar-view-bg: $black;
 $panel-editor-viz-item-shadow: 0 0 8px $dark-5;
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index dd84b7af869..657e9eb3509 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -384,6 +384,7 @@ $checkbox-color: $gray-7;
 //Panel Edit
 // -------------------------
 $panel-editor-shadow: 2px 2px 8px $gray-3;
+$panel-editor-border: 1px solid $dark-4;
 $panel-editor-side-menu-shadow: drop-shadow(0 0 2px $gray-3);
 $panel-editor-toolbar-view-bg: $white;
 $panel-editor-viz-item-shadow: 0 0 4px $gray-3;
diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss
index 27055551b4b..4e032d7b9d1 100644
--- a/public/sass/components/_buttons.scss
+++ b/public/sass/components/_buttons.scss
@@ -78,6 +78,7 @@
 
 .btn-link {
   color: $btn-link-color;
+  background: transparent;
 }
 
 // Set the backgrounds
diff --git a/public/sass/components/_panel_editor.scss b/public/sass/components/_panel_editor.scss
index 898139afd3a..e2dbbc6f532 100644
--- a/public/sass/components/_panel_editor.scss
+++ b/public/sass/components/_panel_editor.scss
@@ -34,8 +34,8 @@
   flex-grow: 1;
   background: $page-bg;
   margin: 0 20px 0 84px;
-  border-left: 2px solid $orange;
   border-radius: 3px;
+  border: $panel-editor-border;
   box-shadow: $panel-editor-shadow;
 }
 
@@ -133,17 +133,14 @@
 }
 
 .viz-picker {
-  background: $panel-editor-toolbar-view-bg;
   display: flex;
   flex-wrap: wrap;
-  margin: -40px -20px;
-  margin-bottom: 13px;
-  padding: 20px;
+  margin-bottom: 40px;
 }
 
 .viz-picker__item {
-  background: $panel-editor-viz-item-bg;
-  border: $panel-editor-viz-item-border;
+  background: $panel-bg;
+  border: $panel-border;
   border-radius: 3px;
   height: 100px;
   width: 150px;
@@ -323,6 +320,13 @@
   margin-bottom: 20px;
   background: $input-label-bg;
   border-radius: 3px;
+  position: relative;
+
+  .btn {
+    position: absolute;
+    right: 0;
+    top: 2px;
+  }
 }
 
 .form-section__body {