From 3ab54270198f898573ed5e197f73799af9ed31e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Tue, 12 Apr 2016 12:39:59 -0400
Subject: [PATCH] fix(timepicker): fixed issues and added some polish to
 timepicker shift back/forward buttons

---
 .../dashboard/timepicker/timepicker.html      | 22 ++++++---------
 public/app/partials/help_modal.html           | 28 +++++++++----------
 public/sass/components/_timepicker.scss       | 12 ++++++++
 3 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/public/app/features/dashboard/timepicker/timepicker.html b/public/app/features/dashboard/timepicker/timepicker.html
index 49e2dac27c0..c2a777b68d6 100644
--- a/public/app/features/dashboard/timepicker/timepicker.html
+++ b/public/app/features/dashboard/timepicker/timepicker.html
@@ -1,19 +1,13 @@
 <ul class="nav gf-timepicker-nav">
 
-	<li class="dashnav-move-timeframe" style="padding-top: 2px">
-                <a class='small' ng-click='ctrl.move(-1)'>
-                        <i class="fa fa-arrow-left"></i>
-                </a>
-        </li>
-	<li class="dashnav-move-timeframe" style="padding-top: 2px">
-                <a class='small' ng-click='ctrl.move(1)'>
-                        <i class="fa fa-arrow-right"></i>
-                </a>
-        </li>
-	<li class="dashnav-zoom-out" style="padding-top: 2px">
-		<a class='small' ng-click='ctrl.zoom(2)'>
-			Zoom Out
-		</a>
+	<li class="dashnav-move-timeframe gf-timepicker-time-control" bs-tooltip="'Shift time backward <br> (left-arrow key)'" data-placement="bottom">
+		<a ng-click='ctrl.move(-1)'><i class="fa fa-chevron-left"></i></a>
+	</li>
+	<li class="dashnav-zoom-out gf-timepicker-time-control" bs-tooltip="'Time range zoom in <br> CTRL+Z'" data-placement="bottom">
+		<a ng-click='ctrl.zoom(2)'>Zoom Out</a></li>
+	</li>
+	<li class="dashnav-move-timeframe gf-timepicker-time-control" bs-tooltip="'Shift time forward <br> (right-arrow key)'" data-placement="bottom">
+		<a ng-click='ctrl.move(1)'><i class="fa fa-chevron-right"></i></a>
 	</li>
 
 	<li>
diff --git a/public/app/partials/help_modal.html b/public/app/partials/help_modal.html
index 7ec2f39d7de..6a8c888bda3 100644
--- a/public/app/partials/help_modal.html
+++ b/public/app/partials/help_modal.html
@@ -29,21 +29,21 @@
 				<td>Refresh (Fetches new data and rerenders panels)</td>
 			</tr>
 			<tr>
-                                <td><span class="label label-info">&lt;</span></td>
-                                <td>Shift time backward</td>
-                        </tr>
+				<td><span class="label label-info">left arrow key</span></td>
+				<td>Shift time backward</td>
+			</tr>
 			<tr>
-                                <td><span class="label label-info">&gt;</span></td>
-                                <td>Shift time forward</td>
-                        </tr>
+				<td><span class="label label-info">right arrow key</span></td>
+				<td>Shift time forward</td>
+			</tr>
 			<tr>
 				<td><span class="label label-info">CTRL+S</span></td>
 				<td>Save dashboard</td>
 			</tr>
-      <tr>
-        <td><span class="label label-info">CTRL+E</span></td>
-        <td>Export dashboard</td>
-      </tr>
+			<tr>
+				<td><span class="label label-info">CTRL+E</span></td>
+				<td>Export dashboard</td>
+			</tr>
 			<tr>
 				<td><span class="label label-info">CTRL+H</span></td>
 				<td>Hide row controls</td>
@@ -52,10 +52,10 @@
 				<td><span class="label label-info">CTRL+Z</span></td>
 				<td>Zoom out</td>
 			</tr>
-      <tr>
-        <td><span class="label label-info">CTRL+I</span></td>
-        <td>Quick snapshot</td>
-      </tr>
+			<tr>
+				<td><span class="label label-info">CTRL+I</span></td>
+				<td>Quick snapshot</td>
+			</tr>
 			<tr>
 				<td><span class="label label-info">CTRL+O</span></td>
 				<td>Enable/Disable shared graph crosshair</td>
diff --git a/public/sass/components/_timepicker.scss b/public/sass/components/_timepicker.scss
index 776c69a6fac..8bfbdef4cff 100644
--- a/public/sass/components/_timepicker.scss
+++ b/public/sass/components/_timepicker.scss
@@ -115,3 +115,15 @@
   @extend .fa;
   @extend .fa-chevron-left;
 }
+
+.gf-timepicker-time-control {
+  font-size: $font-size-sm;
+  a {
+    padding: 18px 7px 13px !important;
+  }
+}
+
+.dashnav-move-timeframe  {
+  position: relative;
+  top: 1px;
+}