fix(timepicker): fixed for viewing auto refresh submenu when timpicker selection…

fix(timepicker): fixed for viewing auto refresh submenu when timpicker selection is set to Today, fixes #2552

public/app/panels/timepicker/module.html

@@ -27,15 +27,16 @@
 					<i class="fa fa-caret-down"></i>
 					<i class="fa fa-caret-down"></i>
 				</a>
 				</a>
 
 
-				<ul class="dropdown-menu">
+				<!-- lacy load this -->
+				<ul class="dropdown-menu" ng-if="time_options" >
 					<li bindonce ng-repeat='option in time_options'>
 					<li bindonce ng-repeat='option in time_options'>
 						<a ng-click="setRelativeFilter(option)" bo-text="option.text"></a>
 						<a ng-click="setRelativeFilter(option)" bo-text="option.text"></a>
           </li>
           </li>
 
 
           <!-- Auto refresh submenu -->
           <!-- Auto refresh submenu -->
-          <li class="dropdown-submenu">
+					<li class="dropdown-submenu">
             <a href="#">Auto-Refresh</a>
             <a href="#">Auto-Refresh</a>
-            <ul class="dropdown-menu">
+            <ul class="dropdown-menu" ng-class="{'dropdown-submenu-left': refreshMenuLeftSide}">
               <li>
               <li>
                 <a ng-click="timeSrv.set_interval(false)">Off</a>
                 <a ng-click="timeSrv.set_interval(false)">Off</a>
               </li>
               </li>

public/app/panels/timepicker/module.js

@@ -86,6 +86,8 @@ function (angular, app, _, moment, kbn) {
         }
         }
         return option;
         return option;
       });
       });
+
+      $scope.refreshMenuLeftSide = $scope.time.rangeString.length < 10;
     };
     };
 
 
     $scope.customTime = function() {
     $scope.customTime = function() {

public/css/less/overrides.less

@@ -583,11 +583,19 @@ code, pre {
 }
 }
 
 
 .dropdown-menu {
 .dropdown-menu {
+  min-width: 140px;
   > li > a {
   > li > a {
-    padding: 3px 10px;
+    padding: 3px 20px 3px 15px;
     i {
     i {
       padding-right: 5px;
       padding-right: 5px;
       color: @linkColorDisabled;
       color: @linkColorDisabled;
     }
     }
   }
   }
 }
 }
+
+.dropdown-submenu>.dropdown-menu.dropdown-submenu-left {
+  left: auto;
+  right: 100%;
+  margin-left: 0;
+  margin-right: -1px;
+}