+
diff --git a/src/ui/public/chrome/context.js b/src/ui/public/chrome/context.js
deleted file mode 100644
index 4328d85243ce..000000000000
--- a/src/ui/public/chrome/context.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import _ from 'lodash';
-import ConfigTemplate from 'ui/config_template';
-import uiModules from 'ui/modules';
-
-uiModules
-.get('kibana')
-// TODO: all of this really belongs in the timepicker
-.directive('chromeContext', function (timefilter, globalState) {
-
- var listenForUpdates = _.once(function ($scope) {
- $scope.$listen(timefilter, 'update', function (newVal, oldVal) {
- globalState.time = _.clone(timefilter.time);
- globalState.refreshInterval = _.clone(timefilter.refreshInterval);
- globalState.save();
- });
- });
-
- return {
- link: function ($scope) {
- listenForUpdates($scope);
-
- // chrome is responsible for timepicker ui and state transfer...
- $scope.timefilter = timefilter;
- $scope.toggleRefresh = function () {
- timefilter.refreshInterval.pause = !timefilter.refreshInterval.pause;
- };
- }
- };
-});
-
diff --git a/src/ui/public/chrome/directives/active_http_spinner.html b/src/ui/public/chrome/directives/active_http_spinner.html
deleted file mode 100644
index eac432ce1ee6..000000000000
--- a/src/ui/public/chrome/directives/active_http_spinner.html
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/ui/public/chrome/directives/app_switcher/app_switcher.less b/src/ui/public/chrome/directives/app_switcher/app_switcher.less
index d085c25e0e6e..6965353d0085 100644
--- a/src/ui/public/chrome/directives/app_switcher/app_switcher.less
+++ b/src/ui/public/chrome/directives/app_switcher/app_switcher.less
@@ -54,6 +54,7 @@ body { overflow-x: hidden; }
margin: 0 auto;
background-color: #fff;
+ &.hidden-chrome { left: 0; }
&-panel {
.flex-parent(@shrink: 0);
box-shadow: -4px 0px 3px rgba(0,0,0,0.2);
@@ -84,7 +85,6 @@ body { overflow-x: hidden; }
.app-icon {
float: left;
- filter: invert(100%);
font-weight: bold;
text-align: center;
font-size: 1.7em;
@@ -95,6 +95,11 @@ body { overflow-x: hidden; }
> img {
height: 18px;
margin-top: 8px;
+ filter: invert(100%);
+ }
+ > i {
+ color: #fff;
+ line-height: @app-icon-height
}
}
@@ -128,7 +133,7 @@ body { overflow-x: hidden; }
text-decoration: none;
}
img {
- filter: invert(100%);
+ filter: none;
}
}
diff --git a/src/ui/public/chrome/directives/append_nav_controls.js b/src/ui/public/chrome/directives/append_nav_controls.js
index d37b9c6fe0a7..1433ec065442 100644
--- a/src/ui/public/chrome/directives/append_nav_controls.js
+++ b/src/ui/public/chrome/directives/append_nav_controls.js
@@ -2,12 +2,6 @@ import $ from 'jquery';
import chromeNavControlsRegistry from 'ui/registry/chrome_nav_controls';
import UiModules from 'ui/modules';
-import spinnerHtml from './active_http_spinner.html';
-
-const spinner = {
- name: 'active http requests',
- template: spinnerHtml
-};
export default function (chrome, internals) {
@@ -19,7 +13,7 @@ export default function (chrome, internals) {
const parts = [$element.html()];
const controls = Private(chromeNavControlsRegistry);
- for (const control of [spinner, ...controls.inOrder]) {
+ for (const control of controls.inOrder) {
parts.unshift(
``,
control.template
diff --git a/src/ui/public/chrome/directives/index.js b/src/ui/public/chrome/directives/index.js
index 530646292d38..2523fae1a602 100644
--- a/src/ui/public/chrome/directives/index.js
+++ b/src/ui/public/chrome/directives/index.js
@@ -3,6 +3,7 @@ import 'ui/directives/config';
import './app_switcher';
import kbnChromeProv from './kbn_chrome';
import kbnChromeNavControlsProv from './append_nav_controls';
+import './kbn_loading_indicator';
export default function (chrome, internals) {
kbnChromeProv(chrome, internals);
diff --git a/src/ui/public/chrome/directives/kbn_loading_indicator.js b/src/ui/public/chrome/directives/kbn_loading_indicator.js
new file mode 100644
index 000000000000..1f5967c8b89f
--- /dev/null
+++ b/src/ui/public/chrome/directives/kbn_loading_indicator.js
@@ -0,0 +1,13 @@
+import UiModules from 'ui/modules';
+import angular from 'angular';
+
+const spinnerTemplate = '
';
+
+UiModules
+.get('ui/kibana')
+.directive('kbnLoadingIndicator', function ($compile) {
+ return {
+ restrict: 'E',
+ template: spinnerTemplate,
+ };
+});
diff --git a/src/ui/public/styles/base.less b/src/ui/public/styles/base.less
index 4a97d0d8d407..d2a55ff2b34f 100644
--- a/src/ui/public/styles/base.less
+++ b/src/ui/public/styles/base.less
@@ -146,6 +146,7 @@ a {
.kibana-nav-actions {
margin-left: auto;
+ line-height: 20px;
.button-group > :last-child {
border-radius: 0;
diff --git a/src/ui/public/styles/spinner.less b/src/ui/public/styles/spinner.less
index 514a2c5e2496..cc8d7470a36e 100644
--- a/src/ui/public/styles/spinner.less
+++ b/src/ui/public/styles/spinner.less
@@ -17,6 +17,7 @@
right: 0;
height: 2px;
position: absolute;
+ z-index: 10;
visibility: visible;
display: block;
animation: move 2s linear infinite;
diff --git a/src/ui/public/timepicker/__tests__/toggle.js b/src/ui/public/timepicker/__tests__/toggle.js
new file mode 100644
index 000000000000..6c328cdc0053
--- /dev/null
+++ b/src/ui/public/timepicker/__tests__/toggle.js
@@ -0,0 +1,23 @@
+import expect from 'expect.js';
+import ngMock from 'ng_mock';
+import uiModules from 'ui/modules';
+import $ from 'jquery';
+
+describe('kbnGlobalTimepicker', function () {
+ let compile;
+ beforeEach(() => {
+ ngMock.module('kibana');
+ ngMock.inject(($compile, $rootScope) => {
+ compile = () => {
+ const $el = $('
');
+ $rootScope.$apply();
+ $compile($el)($rootScope);
+ return $el;
+ };
+ });
+ });
+ it('injects the timepicker into the DOM', () => {
+ const $el = compile();
+ expect($el.find('button[ng-click]')).to.have.length(3);
+ });
+});
diff --git a/src/ui/public/timepicker/toggle.html b/src/ui/public/timepicker/kbn_global_timepicker.html
similarity index 100%
rename from src/ui/public/timepicker/toggle.html
rename to src/ui/public/timepicker/kbn_global_timepicker.html
diff --git a/src/ui/public/timepicker/kbn_global_timepicker.js b/src/ui/public/timepicker/kbn_global_timepicker.js
new file mode 100644
index 000000000000..33ff002ea1d1
--- /dev/null
+++ b/src/ui/public/timepicker/kbn_global_timepicker.js
@@ -0,0 +1,29 @@
+import UiModules from 'ui/modules';
+import chromeNavControlsRegistry from 'ui/registry/chrome_nav_controls';
+import { once, clone } from 'lodash';
+
+import toggleHtml from './kbn_global_timepicker.html';
+
+UiModules
+.get('kibana')
+.directive('kbnGlobalTimepicker', (timefilter, globalState, $rootScope) => {
+ const listenForUpdates = once($scope => {
+ $scope.$listen(timefilter, 'update', (newVal, oldVal) => {
+ globalState.time = clone(timefilter.time);
+ globalState.refreshInterval = clone(timefilter.refreshInterval);
+ globalState.save();
+ });
+ });
+
+ return {
+ template: toggleHtml,
+ link: ($scope, $el, attrs) => {
+ listenForUpdates($rootScope);
+
+ $rootScope.timefilter = timefilter;
+ $rootScope.toggleRefresh = () => {
+ timefilter.refreshInterval.pause = !timefilter.refreshInterval.pause;
+ };
+ },
+ };
+});
diff --git a/src/ui/public/timepicker/timepicker.js b/src/ui/public/timepicker/timepicker.js
index 6acde3837e6d..ea5e9c174ffd 100644
--- a/src/ui/public/timepicker/timepicker.js
+++ b/src/ui/public/timepicker/timepicker.js
@@ -8,7 +8,7 @@ import 'ui/directives/inequality';
import 'ui/timepicker/quick_ranges';
import 'ui/timepicker/refresh_intervals';
import 'ui/timepicker/time_units';
-import 'ui/timepicker/toggle';
+import 'ui/timepicker/kbn_global_timepicker';
import uiModules from 'ui/modules';
var module = uiModules.get('ui/timepicker');
var notify = new Notifier({
diff --git a/src/ui/public/timepicker/toggle.js b/src/ui/public/timepicker/toggle.js
deleted file mode 100644
index 2b9bf03fdc6b..000000000000
--- a/src/ui/public/timepicker/toggle.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import UiModules from 'ui/modules';
-import chromeNavControlsRegistry from 'ui/registry/chrome_nav_controls';
-
-import toggleHtml from './toggle.html';
-
-// TODO: the chrome-context directive is currently responsible for several variables
-// on scope used by this template. We need to get rid of that directive and move that
-// logic here
-
-chromeNavControlsRegistry.register(function () {
- return {
- name: 'timepicker toggle',
- order: 100,
- template: toggleHtml
- };
-});