Merge pull request #6198 from jbudz/design/timepicker

[design] Remove top nav

src/plugins/kibana/public/dashboard/index.html

@@ -45,9 +45,9 @@
         ng-click="configTemplate.toggle('options');">
         <span>Options</span>
       </button>
+      <div class="chrome-actions"kbn-chrome-append-nav-controls></div>
     </div>
   </navbar>
-
   <config config-template="configTemplate" config-object="opts"></config>
 
   <navbar ng-show="chrome.getVisible()" name="dashboard-search">

src/plugins/kibana/public/dashboard/index.js

@@ -105,7 +105,9 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
         load: require('plugins/kibana/dashboard/partials/load_dashboard.html'),
         share: require('plugins/kibana/dashboard/partials/share.html'),
         pickVis: require('plugins/kibana/dashboard/partials/pick_visualization.html'),
-        options: require('plugins/kibana/dashboard/partials/options.html')
+        options: require('plugins/kibana/dashboard/partials/options.html'),
+        filter: require('ui/chrome/config/filter.html'),
+        interval: require('ui/chrome/config/interval.html')
       });
 
       $scope.refresh = _.bindKey(courier, 'fetch');
@@ -239,7 +241,8 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
         ui: $state.options,
         save: $scope.save,
         addVis: $scope.addVis,
-        addSearch: $scope.addSearch
+        addSearch: $scope.addSearch,
+        timefilter: $scope.timefilter
       };
 
       init();

src/plugins/kibana/public/discover/controllers/discover.js

@@ -96,16 +96,17 @@ app.controller('discover', function ($scope, config, courier, $route, $window, N
   $scope.toggleInterval = function () {
     $scope.showInterval = !$scope.showInterval;
   };
-
   // config panel templates
   $scope.configTemplate = new ConfigTemplate({
     load: require('plugins/kibana/discover/partials/load_search.html'),
     save: require('plugins/kibana/discover/partials/save_search.html'),
-    share: require('plugins/kibana/discover/partials/share_search.html')
+    share: require('plugins/kibana/discover/partials/share_search.html'),
+    filter: require('ui/chrome/config/filter.html'),
+    interval: require('ui/chrome/config/interval.html')
   });
-
   $scope.timefilter = timefilter;
 
+
   // the saved savedSearch
   const savedSearch = $route.current.locals.savedSearch;
   $scope.$on('$destroy', savedSearch.destroy);
@@ -147,7 +148,8 @@ app.controller('discover', function ($scope, config, courier, $route, $window, N
     index: $scope.indexPattern.id,
     timefield: $scope.indexPattern.timeFieldName,
     savedSearch: savedSearch,
-    indexPatternList: $route.current.locals.ip.list
+    indexPatternList: $route.current.locals.ip.list,
+    timefilter: $scope.timefilter
   };
 
   const init = _.once(function () {

src/plugins/kibana/public/discover/index.html

@@ -39,9 +39,14 @@
         ng-click="configTemplate.toggle('share');">
         <span>Share</span>
       </button>
+    <div class="chrome-actions" kbn-chrome-append-nav-controls></div>
     </div>
   </navbar>
-  <config config-template="configTemplate" config-object="opts" config-close="configClose"></config>
+  <config
+    config-template="configTemplate"
+    config-object="opts"
+    config-close="configClose"
+  ></config>
   <navbar name="discover-search">
     <form role="form" class="fill inline-form" ng-submit="fetch()" name="discoverSearch">
       <div class="typeahead" kbn-typeahead="discover">

src/plugins/kibana/public/visualize/editor/editor.html

@@ -39,13 +39,13 @@
         aria-label="Refresh">
         <span>Refresh</span>
       </button>
+      <div class="chrome-actions"kbn-chrome-append-nav-controls></div>
     </div>
   </navbar>
-
   <config
     ng-if="chrome.getVisible()"
     config-template="configTemplate"
-    config-object="conf">
+    config-object="opts">
   </config>
 
   <navbar ng-if="chrome.getVisible()" name="visualize-search">

src/plugins/kibana/public/visualize/editor/editor.js

@@ -85,6 +85,8 @@ uiModules
     save: require('plugins/kibana/visualize/editor/panels/save.html'),
     load: require('plugins/kibana/visualize/editor/panels/load.html'),
     share: require('plugins/kibana/visualize/editor/panels/share.html'),
+    filter: require('ui/chrome/config/filter.html'),
+    interval: require('ui/chrome/config/interval.html')
   });
 
   if (savedVis.id) {
@@ -125,8 +127,8 @@ uiModules
     $scope.editableVis = editableVis;
     $scope.state = $state;
     $scope.uiState = $state.makeStateful('uiState');
-
-    $scope.conf = _.pick($scope, 'doSave', 'savedVis', 'shareData');
+    $scope.timefilter = timefilter;
+    $scope.opts = _.pick($scope, 'doSave', 'savedVis', 'shareData', 'timefilter');
     $scope.configTemplate = configTemplate;
 
     editableVis.listeners.click = vis.listeners.click = filterBarClickHandler($state);

src/plugins/kibana/public/visualize/editor/panels/load.html

@@ -1 +1 @@
-<saved-object-finder type="visualizations"></saved-object-finder>
+<saved-object-finder type="visualizations"></saved-object-finder>

src/plugins/kibana/public/visualize/editor/panels/save.html

@@ -1,7 +1,7 @@
-<form role="form" ng-submit="conf.doSave()">
+<form role="form" ng-submit="opts.doSave()">
   <div class="form-group">
     <label for="visTitle">Title</label>
-    <input class="form-control" input-focus="select" type="text" name="visTitle" ng-model="conf.savedVis.title" required>
+    <input class="form-control" input-focus="select" type="text" name="visTitle" ng-model="opts.savedVis.title" required>
   </div>
   <button type="submit" class="btn btn-primary">Save</button>
-</form>
+</form>

src/plugins/kibana/public/visualize/editor/panels/share.html

@@ -1,4 +1,4 @@
 <share
   object-type="visualization"
-  object-id="{{conf.savedVis.id}}">
+  object-id="{{opts.savedVis.id}}">
 </share>

src/ui/public/chrome/chrome.html

@@ -45,50 +45,6 @@
   <div class="app-wrapper">
     <div class="app-wrapper-panel">
       <kbn-notifications list="notifList"></kbn-notifications>
-      <nav
-        ng-style="::{ background: chrome.getNavBackground() }"
-        ng-class="{ show: chrome.getVisible() }"
-        class="hide navbar navbar-inverse navbar-static-top">
-
-        <!-- Mobile navbar -->
-        <div class="navbar-header">
-          <button ng-click="showCollapsed = !showCollapsed" type="button" class="navbar-toggle">
-            <span class="sr-only">Toggle navigation</span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-          </button>
-          <span class="visible-xs">
-            <span ng-if="chrome.getBrand('title')" class="navbar-brand">{{ chrome.getBrand('title') }}</span>
-            <span ng-if="chrome.getActiveTabTitle()" class="navbar-brand">{{ chrome.getActiveTabTitle() }}</span>
-            <span ng-show="chrome.httpActive.length" class="spinner"></span>
-          </span>
-        </div>
-        <!-- /Mobile navbar -->
-
-        <!-- Full navbar -->
-        <div collapse="!showCollapsed" class="navbar-collapse" kbn-chrome-append-nav-controls>
-          <ul class="nav navbar-nav" role="navigation">
-
-            <li ng-if="chrome.getBrand('title')" class="navbar-brand">{{ chrome.getBrand('title') }}</li>
-
-            <li ng-repeat="tab in chrome.getTabs()" ng-class="{ active: tab.active }">
-              <a ng-href="{{ tab.href() }}" ng-style="{ 'border-bottom-color': tab.activeIndicatorColor }">
-                {{ tab.title }}
-              </a>
-            </li>
-          </ul>
-        </div>
-        <!-- /Full navbar -->
-      </nav>
-
-      <config
-        ng-show="timefilter.enabled"
-        config-template="pickerTemplate"
-        config-object="timefilter"
-        config-close="pickerTemplate.close">
-      </config>
-
       <div class="application" ng-class="'tab-' + chrome.getActiveTabId('-none-') + ' ' + chrome.getApplicationClasses()" ng-view></div>
     </div>
   </div>

src/ui/public/chrome/config/filter.html

@@ -1,7 +1,7 @@
 <kbn-timepicker
-  from="timefilter.time.from"
-  to="timefilter.time.to"
-  mode="timefilter.time.mode"
+  from="opts.timefilter.time.from"
+  to="opts.timefilter.time.to"
+  mode="opts.timefilter.time.mode"
   active-tab="'filter'"
-  interval="timefilter.refreshInterval">
+  interval="opts.timefilter.refreshInterval">
 </kbn-timepicker>

src/ui/public/chrome/config/interval.html

@@ -1,7 +1,7 @@
 <kbn-timepicker
-  from="timefilter.time.from"
-  to="timefilter.time.to"
-  mode="timefilter.time.mode"
+  from="opts.timefilter.time.from"
+  to="opts.timefilter.time.to"
+  mode="opts.timefilter.time.mode"
   active-tab="'interval'"
-  interval="timefilter.refreshInterval">
+  interval="opts.timefilter.refreshInterval">
 </kbn-timepicker>

src/ui/public/chrome/context.js

@@ -21,11 +21,6 @@ uiModules
 
       // chrome is responsible for timepicker ui and state transfer...
       $scope.timefilter = timefilter;
-      $scope.pickerTemplate = new ConfigTemplate({
-        filter: require('ui/chrome/config/filter.html'),
-        interval: require('ui/chrome/config/interval.html')
-      });
-
       $scope.toggleRefresh = function () {
         timefilter.refreshInterval.pause = !timefilter.refreshInterval.pause;
       };

src/ui/public/styles/navbar.less

@@ -46,6 +46,9 @@ navbar {
       color: @navbar-default-link-active-color;
       background-color: @navbar-default-link-active-bg;
       box-shadow: none;
+      &:focus {
+        outline: none;
+      }
     }
 
     &[disabled] {

src/ui/public/styles/variables/bootstrap-mods.less

@@ -411,8 +411,8 @@
 
 
 //== Pills
-@nav-pills-active-link-hover-bg:                  @component-active-bg;
-@nav-pills-active-link-hover-color:               @component-active-color;
+@nav-pills-active-link-hover-bg:                  @kibanaYellow1;
+@nav-pills-active-link-hover-color:               @kibanaGray1;
 @nav-pills-border-radius:                   @border-radius-base;
 
 //== Pagination

src/ui/public/timepicker/toggle.html

@@ -1,33 +1,33 @@
 <ul ng-show="timefilter.enabled" class="nav navbar-nav navbar-right navbar-timepicker">
   <li>
-    <a
+    <button
       ng-click="toggleRefresh()"
       ng-show="timefilter.refreshInterval.value > 0">
-
       <i class="fa" ng-class="timefilter.refreshInterval.pause ? 'fa-play' : 'fa-pause'"></i>
-    </a>
+    </button>
   </li>
 
   <li
-    ng-class="{active: pickerTemplate.is('interval') }"
-    ng-show="timefilter.refreshInterval.value > 0 || !!pickerTemplate.current"
+    ng-show="timefilter.refreshInterval.value > 0 || !!configTemplate.current"
     class="to-body">
 
-    <a ng-click="pickerTemplate.toggle('interval')" class="navbar-timepicker-auto-refresh-desc">
+    <button ng-click="configTemplate.toggle('interval')"
+    ng-class="{active: configTemplate.is('interval') }"
+    class="navbar-timepicker-auto-refresh-desc">
       <span ng-show="timefilter.refreshInterval.value === 0"><i class="fa fa-repeat"></i> Auto-refresh</span>
       <span ng-show="timefilter.refreshInterval.value > 0">{{timefilter.refreshInterval.display}}</span>
-    </a>
+    </button>
 
   </li>
 
-  <li class="to-body" ng-class="{active: pickerTemplate.is('filter')}">
-    <a
-      ng-click="pickerTemplate.toggle('filter')"
+  <li class="to-body" >
+    <button ng-class="{active: configTemplate.is('filter')}"
+      ng-click="configTemplate.toggle('filter')"
       aria-haspopup="true"
       aria-expanded="false"
       class="navbar-timepicker-time-desc">
       <i aria-hidden="true" class="fa fa-clock-o"></i>
       <pretty-duration from="timefilter.time.from" to="timefilter.time.to"></pretty-duration>
-    </a>
+    </button>
   </li>
 </ul>

test/functional/apps/discover/_shared_links.js

@@ -51,6 +51,11 @@ define(function (require) {
           common.debug('setAbsoluteRange');
           return headerPage.setAbsoluteRange(fromTime, toTime);
         })
+        .then(function () {
+          //After hiding the time picker, we need to wait for
+          //the refresh button to hide before clicking the share button
+          return common.sleep(1000);
+        })
         .catch(common.handleError(this));
       });
 

test/support/pages/discover_page.js

@@ -28,7 +28,7 @@ define(function (require) {
 
     getTimespanText: function getTimespanText() {
       return thisTime
-      .findByCssSelector('a.navbar-timepicker-time-desc pretty-duration.ng-isolate-scope')
+      .findByCssSelector('.navbar-timepicker-time-desc pretty-duration')
       .getVisibleText();
     },
 

test/support/pages/header_page.js

@@ -148,7 +148,7 @@ define(function (require) {
       var self = this;
       return this.remote
       .setFindTimeout(defaultTimeout * 10)
-      .findByCssSelector('span.spinner.ng-hide');
+      .findByCssSelector('.navbar-text.ng-hide .spinner');
     }
 
   };