From 825cac38b4796ba60bab4bd4b9afc2d7977d79a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 13 Oct 2017 17:01:38 +0200
Subject: [PATCH] ux: minor fixes

---
 .../dashboard/dashgrid/DashboardPanel.tsx     |  2 +
 .../dashboard/dashgrid/DashboardRow.tsx       | 42 +++++++++++++++++++
 .../app/features/dashboard/dashnav/dashnav.ts |  2 +-
 public/sass/components/_navbar.scss           | 34 ---------------
 4 files changed, 45 insertions(+), 35 deletions(-)
 create mode 100644 public/app/features/dashboard/dashgrid/DashboardRow.tsx

diff --git a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
index 33f30b7188b..11f06113617 100644
--- a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
@@ -31,6 +31,8 @@ export class DashboardPanel extends React.Component<DashboardPanelProps, any> {
     }
   }
 
+
+
   render() {
     return (
       <div ref={element => this.element = element} />
diff --git a/public/app/features/dashboard/dashgrid/DashboardRow.tsx b/public/app/features/dashboard/dashgrid/DashboardRow.tsx
new file mode 100644
index 00000000000..8b6aaf45722
--- /dev/null
+++ b/public/app/features/dashboard/dashgrid/DashboardRow.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import {PanelModel} from '../panel_model';
+
+export interface DashboardRowProps {
+  panel: PanelModel;
+}
+
+export class DashboardPanel extends React.Component<DashboardRowProps, any> {
+  constructor(props) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.openSettings = this.openSettings.bind(this);
+  }
+
+  toggle() {}
+
+  openSettings() {}
+
+  render() {
+    return (
+      <div>
+        <div className="dashboard-row__center">
+          <div className="dashboard-row__actions-left">
+            <i className="fa fa-chevron-down" />
+            <i className="fa fa-chevron-right" />
+          </div>
+          <a className="dashboard-row__title pointer" onClick={this.toggle}>
+            <span className="dashboard-row__title-text">{this.props.panel.title}</span>
+          </a>
+          <div className="dashboard-row__actions-right">
+            <a className="pointer" onClick={this.openSettings}>
+              <i className="fa fa-cog" />
+            </a>
+          </div>
+        </div>
+        <div className="dashboard-row__panel_count">(0 hidden panels)</div>
+        <div className="dashboard-row__drag grid-drag-handle" />
+      </div>
+    );
+  }
+}
diff --git a/public/app/features/dashboard/dashnav/dashnav.ts b/public/app/features/dashboard/dashnav/dashnav.ts
index 89d961c55d1..6aa8c1a0c7e 100644
--- a/public/app/features/dashboard/dashnav/dashnav.ts
+++ b/public/app/features/dashboard/dashnav/dashnav.ts
@@ -148,7 +148,7 @@ export class DashNavCtrl {
     addPanel() {
       this.dashboard.addPanel({
         type: 'graph',
-        gridPos: {x: 0, y: 0, w: 12, h: 7},
+        gridPos: {x: 0, y: 0, w: 12, h: 9},
         title: 'New Graph',
       });
     }
diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss
index 8456af7b152..ab1cba4fd23 100644
--- a/public/sass/components/_navbar.scss
+++ b/public/sass/components/_navbar.scss
@@ -62,40 +62,6 @@
   background-color: $navbarLinkBackgroundActive;
 }
 
-.navbar-page-btn {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  display: block;
-  margin: 0;
-  color: darken($link-color, 5%);
-  font-size: $font-size-lg;
-  padding: 1rem 1rem 0.75rem 1rem;
-  min-height:: $navbarHeight;
-
-  .fa-caret-down {
-    font-size: 60%;
-    padding-left: 0.2rem;
-  }
-
-  .icon-gf {
-    position: relative;
-    top: 2px;
-    font-size: 20px;
-    line-height: 8px;
-    margin-right: 0.5rem;
-  }
-
-  > img {
-    max-width: 27px;
-    max-height: 27px;
-  }
-
-  &--search {
-    padding: 1rem 1.5rem 0.75rem 1.5rem;
-  }
-}
-
 .navbar-page-btn {
   text-overflow: ellipsis;
   overflow: hidden;