feat(timepicker): adds arrows to move back and forth in current dashboard

closes #119

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 
 ### Enhancements
 ### Enhancements
 * **InfluxDB**: Changed multi query encoding to work with InfluxDB 0.11 & 0.12, closes [#4533](https://github.com/grafana/grafana/issues/4533)
 * **InfluxDB**: Changed multi query encoding to work with InfluxDB 0.11 & 0.12, closes [#4533](https://github.com/grafana/grafana/issues/4533)
+* **Timepicker**: Add arrows and shortcuts for moving back and forth in current dashboard, closes [#119](https://github.com/grafana/grafana/issues/119)
 
 
 ### Bug fixes
 ### Bug fixes
 * **Postgres**: Fixed page render crash when using postgres, fixes [#4558](https://github.com/grafana/grafana/issues/4558)
 * **Postgres**: Fixed page render crash when using postgres, fixes [#4558](https://github.com/grafana/grafana/issues/4558)

public/app/features/dashboard/timepicker/timepicker.html

 <ul class="nav gf-timepicker-nav">
 <ul class="nav gf-timepicker-nav">
 
 
-	<li class="dashnav-zoom-out" style="padding-top: 2px">
+	<li class="dashnav-move-timeframe" style="padding-top: 2px">
                 <a class='small' ng-click='ctrl.move(-1)'>
                 <a class='small' ng-click='ctrl.move(-1)'>
                         <i class="fa fa-arrow-left"></i>
                         <i class="fa fa-arrow-left"></i>
                 </a>
                 </a>
         </li>
         </li>
-	<li class="dashnav-zoom-out" style="padding-top: 2px">
+	<li class="dashnav-move-timeframe" style="padding-top: 2px">
                 <a class='small' ng-click='ctrl.move(1)'>
                 <a class='small' ng-click='ctrl.move(1)'>
-                        <i class="fa fa-arrow-right"></i> 
+                        <i class="fa fa-arrow-right"></i>
                 </a>
                 </a>
         </li>
         </li>
 	<li class="dashnav-zoom-out" style="padding-top: 2px">
 	<li class="dashnav-zoom-out" style="padding-top: 2px">

public/sass/_old_responsive.scss

@@ -24,6 +24,7 @@
     max-width: 120px;
     max-width: 120px;
   }
   }
   .dashnav-zoom-out,
   .dashnav-zoom-out,
+  .dashnav-move-timeframe,
   .dashnav-action-icons {
   .dashnav-action-icons {
     display: none;
     display: none;
   }
   }
@@ -40,6 +41,11 @@
   .gf-timepicker-nav-btn {
   .gf-timepicker-nav-btn {
     max-width: 120px;
     max-width: 120px;
   }
   }
+
+  .dashnav-move-timeframe {
+    display: none;
+  }
+
   .panel-in-fullscreen {
   .panel-in-fullscreen {
     .dashnav-action-icons {
     .dashnav-action-icons {
       display: none;
       display: none;
@@ -60,6 +66,9 @@
   .dashnav-zoom-out {
   .dashnav-zoom-out {
     display: block;
     display: block;
   }
   }
+  .dashnav-move-timeframe {
+    display: block;
+  }
 }
 }
 
 
 @include media-breakpoint-up(xl) {
 @include media-breakpoint-up(xl) {

public/sass/pages/_dashboard.scss

@@ -96,7 +96,8 @@
   .add-row-panel-hint,
   .add-row-panel-hint,
   .dashnav-refresh-action,
   .dashnav-refresh-action,
   .dashnav-zoom-out,
   .dashnav-zoom-out,
-  .dashnav-action-icons {
+  .dashnav-action-icons,
+  .dashnav-move-timeframe  {
     display: none;
     display: none;
   }
   }