From b9c58d88dc381dc096a66bc9eadcc6489cf70588 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Mon, 4 Feb 2019 16:48:27 +0100
Subject: [PATCH] basic layout

---
 .../AddPanelWidget/AddPanelWidget.tsx         | 29 ++++++++++---------
 .../AddPanelWidget/_AddPanelWidget.scss       | 22 +++++++++++++-
 public/sass/base/_icons.scss                  |  2 +-
 3 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx b/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
index 8c1ab93cec1..7a9767666c0 100644
--- a/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
+++ b/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
@@ -125,13 +125,20 @@ export class AddPanelWidget extends React.Component<Props, State> {
     dashboard.removePanel(this.props.panel);
   };
 
+  renderOptionLink = (icon, text, onClick) => {
+    return (
+      <div>
+        <a href="#" onClick={onClick} className="add-panel-widget__link btn-inverse">
+          <div className="add-panel-widget__icon">
+            <i className={`gicon gicon-${icon}`} />
+          </div>
+          <span>{text}</span>
+        </a>
+      </div>
+    );
+  };
+
   render() {
-    let addCopyButton;
-
-    if (this.state.copiedPanelPlugins.length === 1) {
-      addCopyButton = this.copyButton(this.state.copiedPanelPlugins[0]);
-    }
-
     return (
       <div className="panel-container add-panel-widget-container">
         <div className="add-panel-widget">
@@ -142,13 +149,9 @@ export class AddPanelWidget extends React.Component<Props, State> {
             </button>
           </div>
           <div className="add-panel-widget__btn-container">
-            <button className="btn-success btn btn-large" onClick={this.onCreateNewPanel}>
-              Edit Panel
-            </button>
-            {addCopyButton}
-            <button className="btn-inverse btn" onClick={this.onCreateNewRow}>
-              Add Row
-            </button>
+            {this.renderOptionLink('queries', 'Add query', this.onCreateNewPanel)}
+            {this.renderOptionLink('visualization', 'Choose Panel type', this.onCreateNewPanel)}
+            {this.renderOptionLink('queries', 'Convert to row', this.onCreateNewRow)}
           </div>
         </div>
       </div>
diff --git a/public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss b/public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss
index 5a1cbee4b44..587daa2703f 100644
--- a/public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss
+++ b/public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss
@@ -26,6 +26,26 @@
   }
 }
 
+.add-panel-widget__link {
+  display: block;
+  margin: 0 8px;
+  width: 130px;
+  text-align: center;
+  padding: 8px 0;
+}
+
+.add-panel-widget__icon {
+  margin-bottom: 8px;
+
+  .gicon {
+    color: white;
+    height: 44px;
+    width: 53px;
+    position: relative;
+    left: 5px;
+  }
+}
+
 .add-panel-widget__close {
   margin-left: auto;
   background-color: transparent;
@@ -39,7 +59,7 @@
   justify-content: center;
   align-items: center;
   height: 100%;
-  flex-direction: column;
+  flex-direction: row;
 
   .btn {
     margin-bottom: 10px;
diff --git a/public/sass/base/_icons.scss b/public/sass/base/_icons.scss
index a60259ac0f2..a2649b31fcd 100644
--- a/public/sass/base/_icons.scss
+++ b/public/sass/base/_icons.scss
@@ -212,7 +212,7 @@
   padding-right: 5px;
 }
 
-.panel-editor-tabs {
+.panel-editor-tabs, .add-panel-widget__icon {
   .gicon-advanced-active {
     background-image: url('../img/icons_#{$theme-name}_theme/icon_advanced_active.svg');
   }