diff --git a/src/plugins/kibana/public/discover/index.js b/src/plugins/kibana/public/discover/index.js index 21b2e6a082945..a530fe3ca1edd 100644 --- a/src/plugins/kibana/public/discover/index.js +++ b/src/plugins/kibana/public/discover/index.js @@ -7,6 +7,9 @@ define(function (require, module, exports) { require('plugins/kibana/discover/controllers/discover'); require('plugins/kibana/discover/styles/main.less'); + require('ui/styles/forward/taskbar'); + require('ui/styles/forward/timefilter'); + // preload require('ui/doc_table/components/table_row'); diff --git a/src/plugins/kibana/public/kibana.js b/src/plugins/kibana/public/kibana.js index 2a9e8f1204c30..2d059cc972c81 100644 --- a/src/plugins/kibana/public/kibana.js +++ b/src/plugins/kibana/public/kibana.js @@ -36,7 +36,7 @@ chrome .setNavBackground('#222222') .setTabDefaults({ resetWhenActive: true, - lastUrlStore: window.sessionStorage, + lastUrlStore: window.sessionStore, activeIndicatorColor: '#656a76' }) .setTabs([ diff --git a/src/ui/public/autoload/modules.js b/src/ui/public/autoload/modules.js index 0dd221c552451..1fca071de7e50 100644 --- a/src/ui/public/autoload/modules.js +++ b/src/ui/public/autoload/modules.js @@ -1,6 +1,5 @@ require('angular'); require('ui/chrome'); -require('ui/chrome/context'); require('ui/bind'); require('ui/bound_to_config_obj'); require('ui/config'); diff --git a/src/ui/public/chrome/chrome.html b/src/ui/public/chrome/chrome.html index 1bcd60e37e528..58291c0efc6ba 100644 --- a/src/ui/public/chrome/chrome.html +++ b/src/ui/public/chrome/chrome.html @@ -57,12 +57,5 @@ config-close="appSwitcherTemplate.close"> - - -
diff --git a/src/ui/public/chrome/context.js b/src/ui/public/chrome/context.js deleted file mode 100644 index 2202f7900311d..0000000000000 --- a/src/ui/public/chrome/context.js +++ /dev/null @@ -1,36 +0,0 @@ -define(function (require) { - var _ = require('lodash'); - var ConfigTemplate = require('ui/ConfigTemplate'); - - require('ui/modules') - .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.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; - }; - } - }; - }); - -}); diff --git a/src/ui/public/chrome/directives/append_nav_controls.js b/src/ui/public/chrome/directives/append_nav_controls.js deleted file mode 100644 index 1433ec0654428..0000000000000 --- a/src/ui/public/chrome/directives/append_nav_controls.js +++ /dev/null @@ -1,28 +0,0 @@ -import $ from 'jquery'; - -import chromeNavControlsRegistry from 'ui/registry/chrome_nav_controls'; -import UiModules from 'ui/modules'; - -export default function (chrome, internals) { - - UiModules - .get('kibana') - .directive('kbnChromeAppendNavControls', function (Private) { - return { - template: function ($element) { - const parts = [$element.html()]; - const controls = Private(chromeNavControlsRegistry); - - for (const control of controls.inOrder) { - parts.unshift( - ``, - control.template - ); - } - - return parts.join('\n'); - } - }; - }); - -} diff --git a/src/ui/public/chrome/directives/index.js b/src/ui/public/chrome/directives/index.js index 530646292d388..38b17a098daff 100644 --- a/src/ui/public/chrome/directives/index.js +++ b/src/ui/public/chrome/directives/index.js @@ -2,9 +2,7 @@ import 'ui/directives/config'; import './app_switcher'; import kbnChromeProv from './kbn_chrome'; -import kbnChromeNavControlsProv from './append_nav_controls'; export default function (chrome, internals) { kbnChromeProv(chrome, internals); - kbnChromeNavControlsProv(chrome, internals); } diff --git a/src/ui/public/registry/chrome_nav_controls.js b/src/ui/public/registry/chrome_nav_controls.js deleted file mode 100644 index 77093938ac804..0000000000000 --- a/src/ui/public/registry/chrome_nav_controls.js +++ /dev/null @@ -1,6 +0,0 @@ -define(function (require) { - return require('ui/registry/_registry')({ - name: 'chromeNavControls', - order: ['order'] - }); -}); diff --git a/src/ui/public/styles/forward/taskbar.less b/src/ui/public/styles/forward/taskbar.less new file mode 100644 index 0000000000000..5ba5b564786c7 --- /dev/null +++ b/src/ui/public/styles/forward/taskbar.less @@ -0,0 +1,25 @@ +kbn-taskbar { + display: flex; + flex-direction: column; + background: #c2c2c2; + color: #454545; + + > .controls { + flex: 0 0 auto; + display: flex; + align-items: center; + + > * { + flex: 0 0 auto; + } + + > .spacer { + flex: 1 1 auto; + } + + button { + background: transparent; + padding: 3px 5px; + } + } +} diff --git a/src/ui/public/styles/forward/timefilter.less b/src/ui/public/styles/forward/timefilter.less new file mode 100644 index 0000000000000..d84171c86dd6f --- /dev/null +++ b/src/ui/public/styles/forward/timefilter.less @@ -0,0 +1,4 @@ +kbn-timefilter-toggle { + display: flex; + flex-direction: row; +} diff --git a/src/ui/public/timefilter/directive/timefilter_config.html b/src/ui/public/timefilter/directive/timefilter_config.html new file mode 100644 index 0000000000000..65b8689cbc92c --- /dev/null +++ b/src/ui/public/timefilter/directive/timefilter_config.html @@ -0,0 +1,6 @@ + + diff --git a/src/ui/public/timefilter/directive/timefilter_config.js b/src/ui/public/timefilter/directive/timefilter_config.js new file mode 100644 index 0000000000000..0ebd5b8bcf448 --- /dev/null +++ b/src/ui/public/timefilter/directive/timefilter_config.js @@ -0,0 +1,16 @@ +import UiModules from 'ui/modules'; + +import timefilterConfigHtml from './timefilter_config.html'; + +UiModules +.get('kibana') +.directive('kbnTimefilterConfig', function () { + return { + restrict: 'E', + template: timefilterConfigHtml, + controllerAs: 'timefilter', + controller: function (timefilter) { + return timefilter; + } + }; +}); diff --git a/src/ui/public/chrome/config/filter.html b/src/ui/public/timefilter/directive/timefilter_config_filter.html similarity index 100% rename from src/ui/public/chrome/config/filter.html rename to src/ui/public/timefilter/directive/timefilter_config_filter.html diff --git a/src/ui/public/timefilter/directive/timefilter_config_interval.html b/src/ui/public/timefilter/directive/timefilter_config_interval.html new file mode 100644 index 0000000000000..d41a601709709 --- /dev/null +++ b/src/ui/public/timefilter/directive/timefilter_config_interval.html @@ -0,0 +1,7 @@ + + diff --git a/src/ui/public/timefilter/directive/timefilter_toggle.html b/src/ui/public/timefilter/directive/timefilter_toggle.html new file mode 100644 index 0000000000000..23c47bbf13749 --- /dev/null +++ b/src/ui/public/timefilter/directive/timefilter_toggle.html @@ -0,0 +1,30 @@ +
+ +
+ +
+ + +
+ +
+ +
diff --git a/src/ui/public/timefilter/directive/timefilter_toggle.js b/src/ui/public/timefilter/directive/timefilter_toggle.js new file mode 100644 index 0000000000000..27e68b339043f --- /dev/null +++ b/src/ui/public/timefilter/directive/timefilter_toggle.js @@ -0,0 +1,56 @@ +import clone from 'lodash'; + +import UiModules from 'ui/modules'; +import toggleHtml from './timefilter_toggle.html'; +import ConfigTemplate from 'ui/ConfigTemplate'; +import 'ui/timefilter'; + +UiModules +.get('kibana') +.directive('kbnTimefilterToggle', function () { + return { + restrict: 'E', + template: toggleHtml, + controllerAs: 'toggle', + controller: function ($scope, timefilter, globalState) { + + $scope.$listen(timefilter, 'update', function (newVal, oldVal) { + globalState.time = clone(timefilter.time); + globalState.refreshInterval = clone(timefilter.refreshInterval); + globalState.save(); + }); + + this.timefilter = timefilter; + + this.enabled = function () { + return timefilter.enabled; + }; + + this.toggleRefresh = function () { + return timefilter.refreshInterval.pause = !timefilter.refreshInterval.pause; + }; + + this.refreshSet = function () { + return timefilter.refreshInterval.value > 0; + }; + + this.refreshPaused = function () { + return !!timefilter.refreshInterval.pause; + }; + + this.isOpenTo = function (name) { + return timefilter.configTemplate.is(name); + }; + + this.isOpen = function () { + return !!timefilter.configTemplate.current; + }; + + this.toggleFilterTemplate = function (name) { + return timefilter.configTemplate.toggle(name); + }; + + + } + }; +}); diff --git a/src/ui/public/timefilter/timefilter.js b/src/ui/public/timefilter/timefilter.js index cc81cf813daca..9548c806f85f6 100644 --- a/src/ui/public/timefilter/timefilter.js +++ b/src/ui/public/timefilter/timefilter.js @@ -1,4 +1,6 @@ define(function (require) { + var ConfigTemplate = require('ui/ConfigTemplate'); + require('ui/routes') .addSetupWork(function (timefilter) { return timefilter.init(); @@ -60,6 +62,11 @@ define(function (require) { }); }); + self.configTemplate = new ConfigTemplate({ + filter: require('./directive/timefilter_config_filter.html'), + interval: require('./directive/timefilter_config_interval.html'), + }); + $rootScope.$$timefilter = self; $rootScope.$watchMulti([ diff --git a/src/ui/public/timepicker/timepicker.js b/src/ui/public/timepicker/timepicker.js index 1c07adf8a9b74..fd9b58f98f272 100644 --- a/src/ui/public/timepicker/timepicker.js +++ b/src/ui/public/timepicker/timepicker.js @@ -14,7 +14,8 @@ define(function (require) { require('ui/timepicker/quick_ranges'); require('ui/timepicker/refresh_intervals'); require('ui/timepicker/time_units'); - require('ui/timepicker/toggle'); + require('ui/timefilter/directive/timefilter_toggle'); + require('ui/timefilter/directive/timefilter_config'); module.directive('kbnTimepicker', function (quickRanges, timeUnits, refreshIntervals) { return { diff --git a/src/ui/public/timepicker/toggle.html b/src/ui/public/timepicker/toggle.html deleted file mode 100644 index 6c4b59b6f6ece..0000000000000 --- a/src/ui/public/timepicker/toggle.html +++ /dev/null @@ -1,33 +0,0 @@ - diff --git a/src/ui/public/timepicker/toggle.js b/src/ui/public/timepicker/toggle.js deleted file mode 100644 index 2b9bf03fdc6be..0000000000000 --- 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 - }; -}); From 9124e1f0aba766e41ecb11c5c372ad067930b4d7 Mon Sep 17 00:00:00 2001 From: spalger Date: Tue, 26 Jan 2016 00:09:15 -0700 Subject: [PATCH 04/14] [taskbar] create ui/taskbar module --- src/plugins/kibana/public/discover/index.js | 3 +-- .../{styles/forward => taskbar/styles}/taskbar.less | 12 +++++++++++- src/ui/public/taskbar/taskbar.js | 2 ++ 3 files changed, 14 insertions(+), 3 deletions(-) rename src/ui/public/{styles/forward => taskbar/styles}/taskbar.less (62%) create mode 100644 src/ui/public/taskbar/taskbar.js diff --git a/src/plugins/kibana/public/discover/index.js b/src/plugins/kibana/public/discover/index.js index a530fe3ca1edd..8f9af79567aba 100644 --- a/src/plugins/kibana/public/discover/index.js +++ b/src/plugins/kibana/public/discover/index.js @@ -6,8 +6,7 @@ define(function (require, module, exports) { require('plugins/kibana/discover/components/field_chooser/field_chooser'); require('plugins/kibana/discover/controllers/discover'); require('plugins/kibana/discover/styles/main.less'); - - require('ui/styles/forward/taskbar'); + require('ui/taskbar'); require('ui/styles/forward/timefilter'); // preload diff --git a/src/ui/public/styles/forward/taskbar.less b/src/ui/public/taskbar/styles/taskbar.less similarity index 62% rename from src/ui/public/styles/forward/taskbar.less rename to src/ui/public/taskbar/styles/taskbar.less index 5ba5b564786c7..f7fb224a3c7d0 100644 --- a/src/ui/public/styles/forward/taskbar.less +++ b/src/ui/public/taskbar/styles/taskbar.less @@ -1,3 +1,5 @@ +@basic-padding: 3px 5px; + kbn-taskbar { display: flex; flex-direction: column; @@ -19,7 +21,15 @@ kbn-taskbar { button { background: transparent; - padding: 3px 5px; + padding: @basic-padding; + } + + kbn-taskbar-search { + padding: @basic-padding; + &, div, form { + display: flex; + flex: 1 1 auto; + } } } } diff --git a/src/ui/public/taskbar/taskbar.js b/src/ui/public/taskbar/taskbar.js new file mode 100644 index 0000000000000..fb2e21d202593 --- /dev/null +++ b/src/ui/public/taskbar/taskbar.js @@ -0,0 +1,2 @@ +require('./search'); +require('./styles/taskbar.less'); From 15e09bc94b1d84fe9b5f7bc324a78d027e3f10bd Mon Sep 17 00:00:00 2001 From: spalger Date: Tue, 26 Jan 2016 00:09:45 -0700 Subject: [PATCH 05/14] [taskbar/search] implement in discover --- .../discover/directives/discover_search.js | 8 -------- src/plugins/kibana/public/discover/index.html | 12 +++++++----- .../public/taskbar/search/search.html} | 10 +++++----- src/ui/public/taskbar/search/search.js | 18 ++++++++++++++++++ 4 files changed, 30 insertions(+), 18 deletions(-) delete mode 100644 src/plugins/kibana/public/discover/directives/discover_search.js rename src/{plugins/kibana/public/discover/directives/discover_search.html => ui/public/taskbar/search/search.html} (60%) create mode 100644 src/ui/public/taskbar/search/search.js diff --git a/src/plugins/kibana/public/discover/directives/discover_search.js b/src/plugins/kibana/public/discover/directives/discover_search.js deleted file mode 100644 index d7d2052b69b59..0000000000000 --- a/src/plugins/kibana/public/discover/directives/discover_search.js +++ /dev/null @@ -1,8 +0,0 @@ -require('ui/modules') -.get('kibana') -.directive('discoverSearch', function () { - return { - restrict: 'E', - template: require('./discover_search.html') - }; -}); diff --git a/src/plugins/kibana/public/discover/index.html b/src/plugins/kibana/public/discover/index.html index 7c692f18f3b51..c16b4cf0f0403 100644 --- a/src/plugins/kibana/public/discover/index.html +++ b/src/plugins/kibana/public/discover/index.html @@ -1,7 +1,12 @@
-
{{opts.savedSearch.id}}
+
+ {{opts.savedSearch.id}} + {{opts.savedSearch.id ? '-' : ''}} + {{(hits || 0) | number:0}} + +
diff --git a/src/plugins/kibana/public/discover/directives/discover_search.html b/src/ui/public/taskbar/search/search.html similarity index 60% rename from src/plugins/kibana/public/discover/directives/discover_search.html rename to src/ui/public/taskbar/search/search.html index ae69765b5566c..d3310c790a443 100644 --- a/src/plugins/kibana/public/discover/directives/discover_search.html +++ b/src/ui/public/taskbar/search/search.html @@ -1,18 +1,18 @@ -
-
+ +
+ ng-class="form.$invalid ? 'has-error' : ''">
diff --git a/src/ui/public/taskbar/search/search.js b/src/ui/public/taskbar/search/search.js new file mode 100644 index 0000000000000..98f3d7b2cbdef --- /dev/null +++ b/src/ui/public/taskbar/search/search.js @@ -0,0 +1,18 @@ +import UiModules from 'ui/modules'; + +UiModules +.get('kibana') +.directive('kbnTaskbarSearch', function () { + return { + restrict: 'E', + scope: { + onSubmit: '&', + historyId: '@', + ngModel: '=' + }, + template: require('./search.html'), + bindToController: true, + controllerAs: 'search', + controller() {} + }; +}); From 26158547182c347841d936051a382940f6ce5bc5 Mon Sep 17 00:00:00 2001 From: spalger Date: Tue, 26 Jan 2016 11:26:15 -0700 Subject: [PATCH 06/14] [css] added high-level selector for kbn-forward transition --- src/ui/views/chrome.jade | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/views/chrome.jade b/src/ui/views/chrome.jade index 646b9bd329a45..f6c3f729d9b0c 100644 --- a/src/ui/views/chrome.jade +++ b/src/ui/views/chrome.jade @@ -4,7 +4,7 @@ block vars doctype html -html(lang='en') +html(lang='en', id='kbn-forward') head meta(charset='utf-8') meta(http-equiv='X-UA-Compatible', content='IE=edge,chrome=1') From a503b5253229b99262ff88d52151fa9bc8c9dca0 Mon Sep 17 00:00:00 2001 From: = <=> Date: Tue, 26 Jan 2016 11:49:26 -0700 Subject: [PATCH 07/14] setting up initial work for new design in LESS --- src/plugins/kibana/public/discover/index.js | 1 - src/ui/public/autoload/styles.js | 1 + src/ui/public/styles/forward/kbn_taskbar.less | 3 +++ src/ui/public/styles/forward/main.less | 12 ++++++++++++ 4 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 src/ui/public/styles/forward/kbn_taskbar.less create mode 100644 src/ui/public/styles/forward/main.less diff --git a/src/plugins/kibana/public/discover/index.js b/src/plugins/kibana/public/discover/index.js index 8f9af79567aba..f3a72e9f09c4e 100644 --- a/src/plugins/kibana/public/discover/index.js +++ b/src/plugins/kibana/public/discover/index.js @@ -7,7 +7,6 @@ define(function (require, module, exports) { require('plugins/kibana/discover/controllers/discover'); require('plugins/kibana/discover/styles/main.less'); require('ui/taskbar'); - require('ui/styles/forward/timefilter'); // preload require('ui/doc_table/components/table_row'); diff --git a/src/ui/public/autoload/styles.js b/src/ui/public/autoload/styles.js index 040094a9ce921..caca9e5c6fb9d 100644 --- a/src/ui/public/autoload/styles.js +++ b/src/ui/public/autoload/styles.js @@ -1,2 +1,3 @@ const context = require.context('../styles', false, /[\/\\](?!mixins|variables|_|\.)[^\/\\]+\.less/); context.keys().forEach(key => context(key)); +require('ui/styles/forward/main.less'); \ No newline at end of file diff --git a/src/ui/public/styles/forward/kbn_taskbar.less b/src/ui/public/styles/forward/kbn_taskbar.less new file mode 100644 index 0000000000000..ec19183017cf8 --- /dev/null +++ b/src/ui/public/styles/forward/kbn_taskbar.less @@ -0,0 +1,3 @@ +kbn-taskbar { + color: blue; +} \ No newline at end of file diff --git a/src/ui/public/styles/forward/main.less b/src/ui/public/styles/forward/main.less new file mode 100644 index 0000000000000..a7cb58652b4cb --- /dev/null +++ b/src/ui/public/styles/forward/main.less @@ -0,0 +1,12 @@ +// ID only exists to hook into for this CSS override project. Gives us +// much higher chance of specificity so we don't have to use !important +// too much +#kbn-forward { + + @import "./kbn_taskbar"; + //@import "./timefilter"; + + + + +} From ef3b64b8f2ae385090e06d89ac81b23dfdcf3a88 Mon Sep 17 00:00:00 2001 From: spalger Date: Tue, 26 Jan 2016 12:42:15 -0700 Subject: [PATCH 08/14] [kibana] re-enable lastUrlStorage --- src/plugins/kibana/public/kibana.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/kibana/public/kibana.js b/src/plugins/kibana/public/kibana.js index 2d059cc972c81..2a9e8f1204c30 100644 --- a/src/plugins/kibana/public/kibana.js +++ b/src/plugins/kibana/public/kibana.js @@ -36,7 +36,7 @@ chrome .setNavBackground('#222222') .setTabDefaults({ resetWhenActive: true, - lastUrlStore: window.sessionStore, + lastUrlStore: window.sessionStorage, activeIndicatorColor: '#656a76' }) .setTabs([ From b21c035f62d518fa4e12b95d44d330f333b366a5 Mon Sep 17 00:00:00 2001 From: spalger Date: Tue, 26 Jan 2016 13:53:26 -0700 Subject: [PATCH 09/14] [discover] include multiple control groups, not taskbars --- src/plugins/kibana/public/discover/index.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/plugins/kibana/public/discover/index.html b/src/plugins/kibana/public/discover/index.html index c16b4cf0f0403..efa30cc8f4e67 100644 --- a/src/plugins/kibana/public/discover/index.html +++ b/src/plugins/kibana/public/discover/index.html @@ -54,8 +54,7 @@ - - +
From 674752ad8e919f6fc3e099af07377dd2f66e81aa Mon Sep 17 00:00:00 2001 From: = <=> Date: Tue, 26 Jan 2016 14:45:30 -0700 Subject: [PATCH 10/14] color and spacing of kbn taskbar --- src/ui/public/styles/forward/kbn_taskbar.less | 33 +++++++++++++++++-- src/ui/public/styles/forward/main.less | 2 +- 2 files changed, 32 insertions(+), 3 deletions(-) diff --git a/src/ui/public/styles/forward/kbn_taskbar.less b/src/ui/public/styles/forward/kbn_taskbar.less index ec19183017cf8..d7609dd2e8d47 100644 --- a/src/ui/public/styles/forward/kbn_taskbar.less +++ b/src/ui/public/styles/forward/kbn_taskbar.less @@ -1,3 +1,32 @@ kbn-taskbar { - color: blue; -} \ No newline at end of file + padding: 7px; + color: yellow; + + > .controls { + // background-color: red; + + button { + background-color: blue; + border-radius: 0; + padding-left: 10px; + padding-right: 10px; + } + + > span:first-of-type button { + background-color: orange; + } + } + + + kbn-taskbar-search { + padding: 0; + + input.form-control { + border: none; + } + + } + + + +} diff --git a/src/ui/public/styles/forward/main.less b/src/ui/public/styles/forward/main.less index a7cb58652b4cb..6bcf4989e784a 100644 --- a/src/ui/public/styles/forward/main.less +++ b/src/ui/public/styles/forward/main.less @@ -4,7 +4,7 @@ #kbn-forward { @import "./kbn_taskbar"; - //@import "./timefilter"; + @import "./timefilter"; From 3dc6a1d9576196077155468346bfaf15cb98a15c Mon Sep 17 00:00:00 2001 From: spalger Date: Tue, 26 Jan 2016 18:42:18 -0700 Subject: [PATCH 11/14] [taskbar] re-work the taskbar into components --- src/plugins/kibana/public/discover/index.html | 78 ++++++++----------- src/ui/public/ConfigTemplate.js | 4 + src/ui/public/chrome/chrome.html | 2 +- src/ui/public/directives/config.js | 2 +- src/ui/public/taskbar/taskbar.js | 26 ++++++- .../public/taskbar/{styles => }/taskbar.less | 31 +++++--- src/ui/public/taskbar/taskbar_button.js | 35 +++++++++ src/ui/public/taskbar/taskbar_config.js | 24 ++++++ .../public/taskbar/taskbar_config_toggle.js | 33 ++++++++ .../taskbar/taskbar_inject_timefilter.js | 13 ++++ .../{search/search.js => taskbar_search.js} | 4 +- .../taskbar/taskbar_timefilter_toggle.js | 44 +++++++++++ .../taskbar_search.html} | 0 .../templates/taskbar_timefilter_config.html} | 1 + .../taskbar_timefilter_config_interval.html} | 1 + .../templates/taskbar_timefilter_toggle.html | 20 +++++ .../directive/timefilter_config.html | 6 -- .../timefilter/directive/timefilter_config.js | 16 ---- .../directive/timefilter_toggle.html | 30 ------- .../timefilter/directive/timefilter_toggle.js | 56 ------------- src/ui/public/timefilter/timefilter.js | 7 -- src/ui/public/timepicker/timepicker.js | 2 - 22 files changed, 256 insertions(+), 179 deletions(-) rename src/ui/public/taskbar/{styles => }/taskbar.less (54%) create mode 100644 src/ui/public/taskbar/taskbar_button.js create mode 100644 src/ui/public/taskbar/taskbar_config.js create mode 100644 src/ui/public/taskbar/taskbar_config_toggle.js create mode 100644 src/ui/public/taskbar/taskbar_inject_timefilter.js rename src/ui/public/taskbar/{search/search.js => taskbar_search.js} (81%) create mode 100644 src/ui/public/taskbar/taskbar_timefilter_toggle.js rename src/ui/public/taskbar/{search/search.html => templates/taskbar_search.html} (100%) rename src/ui/public/{timefilter/directive/timefilter_config_filter.html => taskbar/templates/taskbar_timefilter_config.html} (85%) rename src/ui/public/{timefilter/directive/timefilter_config_interval.html => taskbar/templates/taskbar_timefilter_config_interval.html} (85%) create mode 100644 src/ui/public/taskbar/templates/taskbar_timefilter_toggle.html delete mode 100644 src/ui/public/timefilter/directive/timefilter_config.html delete mode 100644 src/ui/public/timefilter/directive/timefilter_config.js delete mode 100644 src/ui/public/timefilter/directive/timefilter_toggle.html delete mode 100644 src/ui/public/timefilter/directive/timefilter_toggle.js diff --git a/src/plugins/kibana/public/discover/index.html b/src/plugins/kibana/public/discover/index.html index efa30cc8f4e67..69d18529f9f8c 100644 --- a/src/plugins/kibana/public/discover/index.html +++ b/src/plugins/kibana/public/discover/index.html @@ -1,59 +1,45 @@
- +
-
- {{opts.savedSearch.id}} - {{opts.savedSearch.id ? '-' : ''}} - {{(hits || 0) | number:0}} - +
+
+ {{opts.savedSearch.id}} + {{opts.savedSearch.id ? '-' : ''}} + {{(hits || 0) | number:0}} + +
-
- - - - - - - - - - - - - {{timepicker.text}} + + + +
- - +
diff --git a/src/ui/public/ConfigTemplate.js b/src/ui/public/ConfigTemplate.js index 3b8307ab8481a..b1b8829012c86 100644 --- a/src/ui/public/ConfigTemplate.js +++ b/src/ui/public/ConfigTemplate.js @@ -29,6 +29,10 @@ define(function (require) { template.toString = function () { return template.current; }; + + template.add = function (name, template) { + templates[name] = template; + }; } return ConfigTemplate; diff --git a/src/ui/public/chrome/chrome.html b/src/ui/public/chrome/chrome.html index 58291c0efc6ba..a8e996c10e957 100644 --- a/src/ui/public/chrome/chrome.html +++ b/src/ui/public/chrome/chrome.html @@ -54,7 +54,7 @@ + config-close="appSwitcherTemplate.close()">
diff --git a/src/ui/public/directives/config.js b/src/ui/public/directives/config.js index a8f69b28ca5e7..6b111442c6082 100644 --- a/src/ui/public/directives/config.js +++ b/src/ui/public/directives/config.js @@ -21,7 +21,7 @@ define(function (require) { restrict: 'E', scope: { configTemplate: '=', - configClose: '=', + configClose: '&', configSubmit: '=', configObject: '=' }, diff --git a/src/ui/public/taskbar/taskbar.js b/src/ui/public/taskbar/taskbar.js index fb2e21d202593..d86195c585b2f 100644 --- a/src/ui/public/taskbar/taskbar.js +++ b/src/ui/public/taskbar/taskbar.js @@ -1,2 +1,24 @@ -require('./search'); -require('./styles/taskbar.less'); +import UiModules from 'ui/modules'; + +import './taskbar.less'; +import './taskbar_button'; +import './taskbar_config_toggle'; +import './taskbar_config'; +import './taskbar_search'; +import './taskbar_timefilter_toggle'; +import './taskbar_inject_timefilter'; + +UiModules +.get('kibana') +.directive('kbnTaskbar', function () { + return { + restrict: 'E', + scope: { + configTemplate: '=', + configObject: '=' + }, + bindToController: true, + controllerAs: 'taskbar', + controller() {} + }; +}); diff --git a/src/ui/public/taskbar/styles/taskbar.less b/src/ui/public/taskbar/taskbar.less similarity index 54% rename from src/ui/public/taskbar/styles/taskbar.less rename to src/ui/public/taskbar/taskbar.less index f7fb224a3c7d0..a66799305a2b9 100644 --- a/src/ui/public/taskbar/styles/taskbar.less +++ b/src/ui/public/taskbar/taskbar.less @@ -10,26 +10,35 @@ kbn-taskbar { flex: 0 0 auto; display: flex; align-items: center; + justify-content: space-between; - > * { + > .task-group { flex: 0 0 auto; - } - - > .spacer { - flex: 1 1 auto; + display: flex; + align-items: center; } button { background: transparent; padding: @basic-padding; } + } - kbn-taskbar-search { - padding: @basic-padding; - &, div, form { - display: flex; - flex: 1 1 auto; - } + &-config-toggle { + &.active { + background-color: blue; + } + } + + &-search { + padding: @basic-padding; + &, div, form { + display: flex; + flex: 1 1 auto; } } + + .input-group { + display: flex; + } } diff --git a/src/ui/public/taskbar/taskbar_button.js b/src/ui/public/taskbar/taskbar_button.js new file mode 100644 index 0000000000000..11a73344fb0cf --- /dev/null +++ b/src/ui/public/taskbar/taskbar_button.js @@ -0,0 +1,35 @@ +import UiModules from 'ui/modules'; + +UiModules +.get('kibana') +.directive('kbnTaskbarButton', function () { + return { + restrict: 'E', + require: '^kbnTaskbar', + scope: { + description: '@', + ngClass: '=?', + ariaHasPopup: '=?', + ariaExpanded: '=?' + }, + transclude: true, + controllerAs: 'button', + bindToController: true, + controller() {}, + link($scope, $el, $attr, taskbar) { + $scope.taskbar = taskbar; + }, + template:` + + + + ` + }; +}); diff --git a/src/ui/public/taskbar/taskbar_config.js b/src/ui/public/taskbar/taskbar_config.js new file mode 100644 index 0000000000000..31896c2f685f5 --- /dev/null +++ b/src/ui/public/taskbar/taskbar_config.js @@ -0,0 +1,24 @@ +import UiModules from 'ui/modules'; + +UiModules +.get('kibana') +.directive('kbnTaskbarConfig', function () { + return { + restrict: 'E', + require: '^kbnTaskbar', + scope: {}, + controllerAs: 'config', + bindToController: true, + link($scope, $el, $attr, taskbar) { + $scope.taskbar = taskbar; + }, + controller() {}, + template:` + + + ` + }; +}); diff --git a/src/ui/public/taskbar/taskbar_config_toggle.js b/src/ui/public/taskbar/taskbar_config_toggle.js new file mode 100644 index 0000000000000..41ca56a295d03 --- /dev/null +++ b/src/ui/public/taskbar/taskbar_config_toggle.js @@ -0,0 +1,33 @@ +import UiModules from 'ui/modules'; + +UiModules +.get('kibana') +.directive('kbnTaskbarConfigToggle', function () { + return { + restrict: 'E', + require: '^kbnTaskbar', + scope: { + templateName: '@', + description: '@', + }, + transclude: true, + controllerAs: 'configToggle', + bindToController: true, + controller() {}, + link($scope, $el, $attr, taskbar) { + $scope.taskbar = taskbar; + $scope.$watch('taskbar.configTemplate.is(configToggle.templateName)', function (active) { + $el.toggleClass('active', active); + }); + }, + template:` + + + + ` + }; +}); diff --git a/src/ui/public/taskbar/taskbar_inject_timefilter.js b/src/ui/public/taskbar/taskbar_inject_timefilter.js new file mode 100644 index 0000000000000..e3b10ea0259fa --- /dev/null +++ b/src/ui/public/taskbar/taskbar_inject_timefilter.js @@ -0,0 +1,13 @@ +import UiModules from 'ui/modules'; + +UiModules +.get('kibana') +.directive('kbnTaskbarInjectTimefilter', function (timefilter) { + return { + restrict: 'A', + priority: 100, + controller($scope) { + $scope.timefilter = timefilter; + } + }; +}); diff --git a/src/ui/public/taskbar/search/search.js b/src/ui/public/taskbar/taskbar_search.js similarity index 81% rename from src/ui/public/taskbar/search/search.js rename to src/ui/public/taskbar/taskbar_search.js index 98f3d7b2cbdef..d2291cb1bb757 100644 --- a/src/ui/public/taskbar/search/search.js +++ b/src/ui/public/taskbar/taskbar_search.js @@ -1,5 +1,7 @@ import UiModules from 'ui/modules'; +import template from './templates/taskbar_search.html'; + UiModules .get('kibana') .directive('kbnTaskbarSearch', function () { @@ -10,7 +12,7 @@ UiModules historyId: '@', ngModel: '=' }, - template: require('./search.html'), + template, bindToController: true, controllerAs: 'search', controller() {} diff --git a/src/ui/public/taskbar/taskbar_timefilter_toggle.js b/src/ui/public/taskbar/taskbar_timefilter_toggle.js new file mode 100644 index 0000000000000..44a6bba044c79 --- /dev/null +++ b/src/ui/public/taskbar/taskbar_timefilter_toggle.js @@ -0,0 +1,44 @@ +import { clone } from 'lodash'; +import UiModules from 'ui/modules'; + +import taskbarTimefilterToggleHtml from './templates/taskbar_timefilter_toggle.html'; +import timefilterConfigHtml from './templates/taskbar_timefilter_config.html'; +import timefilterConfigIntervalHtml from './templates/taskbar_timefilter_config_interval.html'; + +UiModules +.get('kibana') +.directive('kbnTaskbarTimefilterToggle', function (timefilter, globalState) { + return { + restrict: 'E', + require: '^kbnTaskbar', + template: taskbarTimefilterToggleHtml, + + controllerAs: 'toggle', + controller() { + this.init = (taskbar, timefilter) => { + this.enabled = () => timefilter.enabled; + this.toggleRefresh = () => timefilter.refreshInterval.pause = !timefilter.refreshInterval.pause; + this.refreshSet = () => timefilter.refreshInterval.value > 0; + this.refreshPaused = () => !!timefilter.refreshInterval.pause; + this.isOpenTo = (name) => taskbar.configTemplate.is(name); + this.isOpen = () => !!taskbar.configTemplate.current; + this.toggleFilterTemplate = (name) => taskbar.configTemplate.toggle(name); + + taskbar.configTemplate.add('timefilterInterval', timefilterConfigIntervalHtml); + taskbar.configTemplate.add('timefilterFilter', timefilterConfigHtml); + }; + }, + + link($scope, $attr, $el, taskbar) { + $scope.timefilter = timefilter; + $scope.taskbar = taskbar; + $scope.toggle.init(taskbar, timefilter); + + $scope.$listen(timefilter, 'update', function (newVal, oldVal) { + globalState.time = clone(timefilter.time); + globalState.refreshInterval = clone(timefilter.refreshInterval); + globalState.save(); + }); + }, + }; +}); diff --git a/src/ui/public/taskbar/search/search.html b/src/ui/public/taskbar/templates/taskbar_search.html similarity index 100% rename from src/ui/public/taskbar/search/search.html rename to src/ui/public/taskbar/templates/taskbar_search.html diff --git a/src/ui/public/timefilter/directive/timefilter_config_filter.html b/src/ui/public/taskbar/templates/taskbar_timefilter_config.html similarity index 85% rename from src/ui/public/timefilter/directive/timefilter_config_filter.html rename to src/ui/public/taskbar/templates/taskbar_timefilter_config.html index 71a3dd32645ef..c82dd2464173c 100644 --- a/src/ui/public/timefilter/directive/timefilter_config_filter.html +++ b/src/ui/public/taskbar/templates/taskbar_timefilter_config.html @@ -1,4 +1,5 @@ + + + + + Auto-refresh + {{timefilter.refreshInterval.display}} + + + + + + diff --git a/src/ui/public/timefilter/directive/timefilter_config.html b/src/ui/public/timefilter/directive/timefilter_config.html deleted file mode 100644 index 65b8689cbc92c..0000000000000 --- a/src/ui/public/timefilter/directive/timefilter_config.html +++ /dev/null @@ -1,6 +0,0 @@ - - diff --git a/src/ui/public/timefilter/directive/timefilter_config.js b/src/ui/public/timefilter/directive/timefilter_config.js deleted file mode 100644 index 0ebd5b8bcf448..0000000000000 --- a/src/ui/public/timefilter/directive/timefilter_config.js +++ /dev/null @@ -1,16 +0,0 @@ -import UiModules from 'ui/modules'; - -import timefilterConfigHtml from './timefilter_config.html'; - -UiModules -.get('kibana') -.directive('kbnTimefilterConfig', function () { - return { - restrict: 'E', - template: timefilterConfigHtml, - controllerAs: 'timefilter', - controller: function (timefilter) { - return timefilter; - } - }; -}); diff --git a/src/ui/public/timefilter/directive/timefilter_toggle.html b/src/ui/public/timefilter/directive/timefilter_toggle.html deleted file mode 100644 index 23c47bbf13749..0000000000000 --- a/src/ui/public/timefilter/directive/timefilter_toggle.html +++ /dev/null @@ -1,30 +0,0 @@ -
- -
- -
- - -
- -
- -
diff --git a/src/ui/public/timefilter/directive/timefilter_toggle.js b/src/ui/public/timefilter/directive/timefilter_toggle.js deleted file mode 100644 index 27e68b339043f..0000000000000 --- a/src/ui/public/timefilter/directive/timefilter_toggle.js +++ /dev/null @@ -1,56 +0,0 @@ -import clone from 'lodash'; - -import UiModules from 'ui/modules'; -import toggleHtml from './timefilter_toggle.html'; -import ConfigTemplate from 'ui/ConfigTemplate'; -import 'ui/timefilter'; - -UiModules -.get('kibana') -.directive('kbnTimefilterToggle', function () { - return { - restrict: 'E', - template: toggleHtml, - controllerAs: 'toggle', - controller: function ($scope, timefilter, globalState) { - - $scope.$listen(timefilter, 'update', function (newVal, oldVal) { - globalState.time = clone(timefilter.time); - globalState.refreshInterval = clone(timefilter.refreshInterval); - globalState.save(); - }); - - this.timefilter = timefilter; - - this.enabled = function () { - return timefilter.enabled; - }; - - this.toggleRefresh = function () { - return timefilter.refreshInterval.pause = !timefilter.refreshInterval.pause; - }; - - this.refreshSet = function () { - return timefilter.refreshInterval.value > 0; - }; - - this.refreshPaused = function () { - return !!timefilter.refreshInterval.pause; - }; - - this.isOpenTo = function (name) { - return timefilter.configTemplate.is(name); - }; - - this.isOpen = function () { - return !!timefilter.configTemplate.current; - }; - - this.toggleFilterTemplate = function (name) { - return timefilter.configTemplate.toggle(name); - }; - - - } - }; -}); diff --git a/src/ui/public/timefilter/timefilter.js b/src/ui/public/timefilter/timefilter.js index 9548c806f85f6..cc81cf813daca 100644 --- a/src/ui/public/timefilter/timefilter.js +++ b/src/ui/public/timefilter/timefilter.js @@ -1,6 +1,4 @@ define(function (require) { - var ConfigTemplate = require('ui/ConfigTemplate'); - require('ui/routes') .addSetupWork(function (timefilter) { return timefilter.init(); @@ -62,11 +60,6 @@ define(function (require) { }); }); - self.configTemplate = new ConfigTemplate({ - filter: require('./directive/timefilter_config_filter.html'), - interval: require('./directive/timefilter_config_interval.html'), - }); - $rootScope.$$timefilter = self; $rootScope.$watchMulti([ diff --git a/src/ui/public/timepicker/timepicker.js b/src/ui/public/timepicker/timepicker.js index fd9b58f98f272..23bd3b1da5eff 100644 --- a/src/ui/public/timepicker/timepicker.js +++ b/src/ui/public/timepicker/timepicker.js @@ -14,8 +14,6 @@ define(function (require) { require('ui/timepicker/quick_ranges'); require('ui/timepicker/refresh_intervals'); require('ui/timepicker/time_units'); - require('ui/timefilter/directive/timefilter_toggle'); - require('ui/timefilter/directive/timefilter_config'); module.directive('kbnTimepicker', function (quickRanges, timeUnits, refreshIntervals) { return { From 3447f3a8232e05dc07901734b8b6e7dcc81c865e Mon Sep 17 00:00:00 2001 From: spalger Date: Tue, 26 Jan 2016 19:03:22 -0700 Subject: [PATCH 12/14] [taskbar] pass the config objects name to --- src/ui/public/directives/config.js | 10 +++++++--- src/ui/public/taskbar/taskbar.js | 4 +++- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/ui/public/directives/config.js b/src/ui/public/directives/config.js index 6b111442c6082..e651f1fcc0fe3 100644 --- a/src/ui/public/directives/config.js +++ b/src/ui/public/directives/config.js @@ -23,13 +23,17 @@ define(function (require) { configTemplate: '=', configClose: '&', configSubmit: '=', - configObject: '=' + configObject: '=', + configName: '@?', }, link: function ($scope, element, attr) { var tmpScope = $scope.$new(); - $scope.$watch('configObject', function (newVal) { - $scope[attr.configObject] = $scope.configObject; + $scope.$watchMulti([ + 'configObject', + 'configName' + ], function () { + $scope[$scope.configName || attr.configObject] = $scope.configObject; }); var wrapTmpl = function (tmpl) { diff --git a/src/ui/public/taskbar/taskbar.js b/src/ui/public/taskbar/taskbar.js index d86195c585b2f..4dcc39148cf40 100644 --- a/src/ui/public/taskbar/taskbar.js +++ b/src/ui/public/taskbar/taskbar.js @@ -19,6 +19,8 @@ UiModules }, bindToController: true, controllerAs: 'taskbar', - controller() {} + controller($attrs) { + this.configObjectName = $attrs.configObjectName || $attrs.configObject; + } }; }); From f32ac1f2bb5635192732d26f7f2d81bd29973c4a Mon Sep 17 00:00:00 2001 From: spalger Date: Tue, 26 Jan 2016 19:03:40 -0700 Subject: [PATCH 13/14] [taskbar/*] remove inline templates --- src/ui/public/taskbar/taskbar_button.js | 15 +++------------ src/ui/public/taskbar/taskbar_config.js | 10 +++------- src/ui/public/taskbar/taskbar_config_toggle.js | 12 +++--------- .../public/taskbar/templates/taskbar_button.html | 10 ++++++++++ .../public/taskbar/templates/taskbar_config.html | 6 ++++++ .../taskbar/templates/taskbar_config_toggle.html | 7 +++++++ 6 files changed, 32 insertions(+), 28 deletions(-) create mode 100644 src/ui/public/taskbar/templates/taskbar_button.html create mode 100644 src/ui/public/taskbar/templates/taskbar_config.html create mode 100644 src/ui/public/taskbar/templates/taskbar_config_toggle.html diff --git a/src/ui/public/taskbar/taskbar_button.js b/src/ui/public/taskbar/taskbar_button.js index 11a73344fb0cf..0c8c6662eb0bc 100644 --- a/src/ui/public/taskbar/taskbar_button.js +++ b/src/ui/public/taskbar/taskbar_button.js @@ -1,5 +1,7 @@ import UiModules from 'ui/modules'; +import taskbarButtonHtml from './templates/taskbar_button.html'; + UiModules .get('kibana') .directive('kbnTaskbarButton', function () { @@ -19,17 +21,6 @@ UiModules link($scope, $el, $attr, taskbar) { $scope.taskbar = taskbar; }, - template:` - - - - ` + template: taskbarButtonHtml }; }); diff --git a/src/ui/public/taskbar/taskbar_config.js b/src/ui/public/taskbar/taskbar_config.js index 31896c2f685f5..c56b608c2899d 100644 --- a/src/ui/public/taskbar/taskbar_config.js +++ b/src/ui/public/taskbar/taskbar_config.js @@ -1,5 +1,7 @@ import UiModules from 'ui/modules'; +import taskbarConfigHtml from './templates/taskbar_config.html'; + UiModules .get('kibana') .directive('kbnTaskbarConfig', function () { @@ -13,12 +15,6 @@ UiModules $scope.taskbar = taskbar; }, controller() {}, - template:` - - - ` + template: taskbarConfigHtml }; }); diff --git a/src/ui/public/taskbar/taskbar_config_toggle.js b/src/ui/public/taskbar/taskbar_config_toggle.js index 41ca56a295d03..7f6148078e4d4 100644 --- a/src/ui/public/taskbar/taskbar_config_toggle.js +++ b/src/ui/public/taskbar/taskbar_config_toggle.js @@ -1,5 +1,7 @@ import UiModules from 'ui/modules'; +import taskbarConfigToggleHtml from './templates/taskbar_config_toggle.html'; + UiModules .get('kibana') .directive('kbnTaskbarConfigToggle', function () { @@ -20,14 +22,6 @@ UiModules $el.toggleClass('active', active); }); }, - template:` - - - - ` + template: taskbarConfigToggleHtml }; }); diff --git a/src/ui/public/taskbar/templates/taskbar_button.html b/src/ui/public/taskbar/templates/taskbar_button.html new file mode 100644 index 0000000000000..a7b143b01bda2 --- /dev/null +++ b/src/ui/public/taskbar/templates/taskbar_button.html @@ -0,0 +1,10 @@ + + + diff --git a/src/ui/public/taskbar/templates/taskbar_config.html b/src/ui/public/taskbar/templates/taskbar_config.html new file mode 100644 index 0000000000000..641c0775b77c9 --- /dev/null +++ b/src/ui/public/taskbar/templates/taskbar_config.html @@ -0,0 +1,6 @@ + + diff --git a/src/ui/public/taskbar/templates/taskbar_config_toggle.html b/src/ui/public/taskbar/templates/taskbar_config_toggle.html new file mode 100644 index 0000000000000..4399cb607afb6 --- /dev/null +++ b/src/ui/public/taskbar/templates/taskbar_config_toggle.html @@ -0,0 +1,7 @@ + + + From ed604f8123b65e3955f2bf9b1870a7793d8b19bd Mon Sep 17 00:00:00 2001 From: = <=> Date: Wed, 27 Jan 2016 16:33:29 -0700 Subject: [PATCH 14/14] taskbar css works now except for some inner panels and typeahead isnt showing --- src/plugins/kibana/public/discover/index.html | 2 +- src/ui/public/directives/config.js | 2 +- src/ui/public/partials/nav_config.html | 8 -- .../styles/forward/bootstrap_overrides.less | 3 + src/ui/public/styles/forward/kbn_taskbar.less | 120 ++++++++++++++++-- src/ui/public/styles/forward/main.less | 66 +++++++++- src/ui/public/taskbar/taskbar.js | 6 +- src/ui/public/taskbar/taskbar.less | 6 - src/ui/public/timepicker/timepicker.html | 24 +--- 9 files changed, 183 insertions(+), 54 deletions(-) delete mode 100644 src/ui/public/partials/nav_config.html create mode 100644 src/ui/public/styles/forward/bootstrap_overrides.less diff --git a/src/plugins/kibana/public/discover/index.html b/src/plugins/kibana/public/discover/index.html index 69d18529f9f8c..7c379fe243863 100644 --- a/src/plugins/kibana/public/discover/index.html +++ b/src/plugins/kibana/public/discover/index.html @@ -1,6 +1,6 @@
-
+
{{opts.savedSearch.id}} diff --git a/src/ui/public/directives/config.js b/src/ui/public/directives/config.js index e651f1fcc0fe3..f15c24438bca0 100644 --- a/src/ui/public/directives/config.js +++ b/src/ui/public/directives/config.js @@ -62,7 +62,7 @@ define(function (require) { '
' + wrapTmpl(tmpl) + '
' + - ' ' + + ' ' + '
' + '
' + '' diff --git a/src/ui/public/partials/nav_config.html b/src/ui/public/partials/nav_config.html deleted file mode 100644 index f57b0dcb7ef19..0000000000000 --- a/src/ui/public/partials/nav_config.html +++ /dev/null @@ -1,8 +0,0 @@ -
- -
- -
- -
-
diff --git a/src/ui/public/styles/forward/bootstrap_overrides.less b/src/ui/public/styles/forward/bootstrap_overrides.less new file mode 100644 index 0000000000000..924093d26c5c5 --- /dev/null +++ b/src/ui/public/styles/forward/bootstrap_overrides.less @@ -0,0 +1,3 @@ +.nav-pills > li { + .toggle-item(@color-gold); +} \ No newline at end of file diff --git a/src/ui/public/styles/forward/kbn_taskbar.less b/src/ui/public/styles/forward/kbn_taskbar.less index d7609dd2e8d47..211002b9ec341 100644 --- a/src/ui/public/styles/forward/kbn_taskbar.less +++ b/src/ui/public/styles/forward/kbn_taskbar.less @@ -1,32 +1,128 @@ kbn-taskbar { - padding: 7px; - color: yellow; + background-color: @color-gray-bg; + font-size: 1.4rem; + font-weight: 600; - > .controls { - // background-color: red; + > .controls.primary { + + .task-group:first-child { + margin-left: 10px; + } button { - background-color: blue; border-radius: 0; - padding-left: 10px; - padding-right: 10px; - } + padding: 5px 10px; + box-shadow: none; - > span:first-of-type button { - background-color: orange; + &:focus, + &:hover { + outline: 0; + color: @color-gray-6; + } } + } + // "Auto-refresh" & "Last 15 Minutes" + kbn-taskbar-config-toggle.active { + button { + background-color: @color-gray-bg-light; + } + } kbn-taskbar-search { - padding: 0; - + padding: 10px; + padding-top: 0; // Reduce padding on top when config-open is not set (see below) input.form-control { border: none; } + button[type="submit"] { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + padding: 0 8px; + background-color: @color-gray-3; + color: #fff; + &:focus { + outline: 0; + background-color: @color-gray-4; + } + } + } + // Add padding-top to kbn-taskbar-search when config is open + &.config-open { + kbn-taskbar-search { + padding-top: 10px; + } + } + +} + + + +kbn-taskbar-config { + + .config { + background-color: transparent; + box-shadow: none; + background-color: @color-gray-bg-light; + + // There's more than one of these nested in this section + .container-fluid { + background-color: transparent; + padding: 0; + } + + } + + .config-close { + background-color: transparent; + box-shadow: none; + width: auto; + position: absolute; + right: 0; + bottom: 0; + color: @color-gray-6; + padding: 20px 10px 8px 20px; + } + + .kbn-timepicker .row { + margin: 0 auto; + margin-top: 1.5em; + max-width: 1200px; + } + + .kbn-timepicker [kbn-time-input] { + text-align: center; + } + + .kbn-timepicker-modes { + text-transform: capitalize; + } + + .kbn-timepicker-section { + float: left; + width: 200px; + padding-right: 30px; + + li { + margin-top: 2px; // only needed if we keep the border on hover effect + .toggle-item(@color-gold); + } + } + + .kbn-refresh-section { + float: left; + padding: 0px 15px; + } + + .kbn-timepicket-alert { + width: 100px; + } } + + diff --git a/src/ui/public/styles/forward/main.less b/src/ui/public/styles/forward/main.less index 6bcf4989e784a..38250a70a5b6c 100644 --- a/src/ui/public/styles/forward/main.less +++ b/src/ui/public/styles/forward/main.less @@ -1,12 +1,72 @@ +// Basic Colors +@color-gold: #FBCE47; + +// Shades of Gray +@color-gray-1: #F6F6F6; +@color-gray-2: #E4E4E4; +@color-gray-3: #BEBEBE; +@color-gray-4: #9C9C9C; +@color-gray-5: #5A5A5A; +@color-gray-6: #2D2D2D; + +// Gray Context +@color-gray-bg-light: @color-gray-1; +@color-gray-bg: @color-gray-2; + +// Text +@default-text-color: @color-gray-5; +@anchor-color: #328CAA; + + +.highlight-text { + +} + + +.toggle-item(@color) { + display: block; + a { + display: block; + color: inherit; + padding: 3px 8px; + border: 1px solid transparent; + border-radius: 4px; + &:hover { + background-color: transparent; + border: 1px solid @color; + } + } + &.active a { + color: inherit; + background-color: @color; + padding: 3px 10px; + } +} + + + // ID only exists to hook into for this CSS override project. Gives us // much higher chance of specificity so we don't have to use !important // too much #kbn-forward { - @import "./kbn_taskbar"; - @import "./timefilter"; + body { + color: @default-text-color; + } + // A new default style for anchors + a { + color: @anchor-color; + &:hover { + color: red; // temp until Jurgen gets a color + } + } + + + @import "./bootstrap_overrides"; + @import "./kbn_taskbar"; + @import "./timefilter"; -} +} \ No newline at end of file diff --git a/src/ui/public/taskbar/taskbar.js b/src/ui/public/taskbar/taskbar.js index 4dcc39148cf40..d1e09fd60c783 100644 --- a/src/ui/public/taskbar/taskbar.js +++ b/src/ui/public/taskbar/taskbar.js @@ -19,8 +19,12 @@ UiModules }, bindToController: true, controllerAs: 'taskbar', - controller($attrs) { + controller($attrs, $scope, $element) { this.configObjectName = $attrs.configObjectName || $attrs.configObject; + + $scope.$watch('taskbar.configTemplate.current', (template) => { + $element.toggleClass('config-open', !!template); + }); } }; }); diff --git a/src/ui/public/taskbar/taskbar.less b/src/ui/public/taskbar/taskbar.less index a66799305a2b9..efcb4c1a74027 100644 --- a/src/ui/public/taskbar/taskbar.less +++ b/src/ui/public/taskbar/taskbar.less @@ -24,12 +24,6 @@ kbn-taskbar { } } - &-config-toggle { - &.active { - background-color: blue; - } - } - &-search { padding: @basic-padding; &, div, form { diff --git a/src/ui/public/timepicker/timepicker.html b/src/ui/public/timepicker/timepicker.html index f1af4b4fbe6fb..425d37661e3e1 100644 --- a/src/ui/public/timepicker/timepicker.html +++ b/src/ui/public/timepicker/timepicker.html @@ -1,29 +1,9 @@
- -
-
+
    @@ -45,7 +25,7 @@
      -
    • +