fix(timepicker): fixed issues and added some polish to timepicker shift back/forward buttons

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>

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>

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;
+}