From 7e740547bc42d07ebb89e91640e9b76d2045d15d Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Mon, 11 Jul 2016 18:08:22 -0700 Subject: [PATCH 1/7] Allow user to pin/unpin the sidebar, and store preference in localStorage. - Add "Expand/Collapse" button to sidebar. - Add appSwitcherState service. - Add support for "classes" attribute to app-switcher-link. - Remove animation from sidebar, and no longer expand on hover. - Add default tooltips for sidebar items. Former-commit-id: 3ad02e4e9b3df20a69126301ca5b98b31c991dee --- .../kibana/public/assets/play-circle.svg | 3 +++ src/ui/public/chrome/chrome.html | 16 +++++++++-- src/ui/public/chrome/chrome.js | 2 ++ .../directives/app_switcher/app_switcher.html | 2 +- .../directives/app_switcher/app_switcher.js | 11 +++++++- .../directives/app_switcher/app_switcher.less | 11 +++----- .../__tests__/app-switcher-link.js | 11 ++++++++ .../app_switcher_link/app_switcher_link.html | 4 +-- .../app_switcher_link/app_switcher_link.js | 3 ++- .../app_switcher_link/app_switcher_link.less | 27 ++++++++++++++----- src/ui/public/chrome/directives/kbn_chrome.js | 25 ++++++++++++++++- .../chrome/services/app_switcher_state.js | 16 +++++++++++ src/ui/public/chrome/services/index.js | 1 + src/ui/public/styles/variables/for-theme.less | 2 -- 14 files changed, 111 insertions(+), 23 deletions(-) create mode 100644 src/core_plugins/kibana/public/assets/play-circle.svg create mode 100644 src/ui/public/chrome/services/app_switcher_state.js create mode 100644 src/ui/public/chrome/services/index.js diff --git a/src/core_plugins/kibana/public/assets/play-circle.svg b/src/core_plugins/kibana/public/assets/play-circle.svg new file mode 100644 index 0000000000000..d668d52587b84 --- /dev/null +++ b/src/core_plugins/kibana/public/assets/play-circle.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/ui/public/chrome/chrome.html b/src/ui/public/chrome/chrome.html index 42b78e7ee7f39..f1d7d43cb4897 100644 --- a/src/ui/public/chrome/chrome.html +++ b/src/ui/public/chrome/chrome.html @@ -1,7 +1,10 @@
-
diff --git a/src/ui/public/chrome/chrome.js b/src/ui/public/chrome/chrome.js index 6e7a2b8d6f4bc..5819426d9c833 100644 --- a/src/ui/public/chrome/chrome.js +++ b/src/ui/public/chrome/chrome.js @@ -10,8 +10,10 @@ import 'ui/timefilter'; import 'ui/notify'; import 'ui/private'; import 'ui/promises'; +import 'ui/storage'; import 'ui/directives/kbn_src'; import 'ui/watch_multi'; +import './services'; let chrome = {}; let internals = _.defaults( diff --git a/src/ui/public/chrome/directives/app_switcher/app_switcher.html b/src/ui/public/chrome/directives/app_switcher/app_switcher.html index 7d8291bc26ae5..221ba32ee3ca1 100644 --- a/src/ui/public/chrome/directives/app_switcher/app_switcher.html +++ b/src/ui/public/chrome/directives/app_switcher/app_switcher.html @@ -3,7 +3,7 @@ ng-repeat="link in switcher.shownNavLinks" app-switcher-link-is-active="link.active" app-switcher-link-is-disabled="!switcher.isNavLinkEnabled(link)" - app-switcher-link-tooltip="link.tooltip" + app-switcher-link-tooltip="getTooltip(link)" app-switcher-link-on-click="switcher.ensureNavigation($event, link)" app-switcher-link-href="link.active ? link.url : (link.lastSubUrl || link.url)" app-switcher-link-icon="link.icon" diff --git a/src/ui/public/chrome/directives/app_switcher/app_switcher.js b/src/ui/public/chrome/directives/app_switcher/app_switcher.js index 3181f88d62cdc..072b6abc49c9f 100644 --- a/src/ui/public/chrome/directives/app_switcher/app_switcher.js +++ b/src/ui/public/chrome/directives/app_switcher/app_switcher.js @@ -57,7 +57,7 @@ uiModules restrict: 'E', template: appSwitcherTemplate, controllerAs: 'switcher', - controller($scope, appSwitcherEnsureNavigation) { + controller($scope, appSwitcherEnsureNavigation, appSwitcherState) { // since we render this in an isolate scope we can't "require: ^chrome", but // rather than remove all helpfull checks we can just check here. if (!$scope.chrome || !$scope.chrome.getNavLinks) { @@ -72,6 +72,15 @@ uiModules // links don't cause full-navigation events in certain scenarios // so we force them when needed this.ensureNavigation = appSwitcherEnsureNavigation; + + $scope.getTooltip = link => { + // If the sidebar is open then we don't need to show the title because + // it will already be visible. + if (appSwitcherState.isOpen()) { + return link.tooltip; + } + return link.tooltip ? link.title + ' - ' + link.tooltip : link.title; + }; } }; }); 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 0d22b23c0aa0a..5243082114bdb 100644 --- a/src/ui/public/chrome/directives/app_switcher/app_switcher.less +++ b/src/ui/public/chrome/directives/app_switcher/app_switcher.less @@ -4,7 +4,7 @@ body { overflow-x: hidden; } .app-links-wrapper { - width: @as-open-width; + width: @as-closed-width; position: fixed; left: 0; top: 0; @@ -12,15 +12,14 @@ body { overflow-x: hidden; } z-index: 0; background-color: @app-links-wrapper-background; overflow: hidden; - transition: width @transition-time; - transition-delay: @transition-delay; - &:hover { + &.is-app-links-wrapper-open { + width: @as-open-width; .app-title { display: inline-block; } + .app-wrapper { - transform: translateX(@as-open-width - @as-closed-width); + left: @as-open-width; } } @@ -47,8 +46,6 @@ body { overflow-x: hidden; } .app-wrapper { .real-flex-parent(); position: absolute; - transition: transform @transition-time; - transition-delay: @transition-delay; left: @as-closed-width; top: 0; right: 0; diff --git a/src/ui/public/chrome/directives/app_switcher_link/__tests__/app-switcher-link.js b/src/ui/public/chrome/directives/app_switcher_link/__tests__/app-switcher-link.js index 25768f2072893..e1b922afa4e7b 100644 --- a/src/ui/public/chrome/directives/app_switcher_link/__tests__/app-switcher-link.js +++ b/src/ui/public/chrome/directives/app_switcher_link/__tests__/app-switcher-link.js @@ -28,6 +28,7 @@ describe('appSwitcherLink directive', () => { app-switcher-link-kbn-route="appSwitcherLinkKbnRoute" app-switcher-link-icon="appSwitcherLinkIcon" app-switcher-link-title="appSwitcherLinkTitle" + app-switcher-link-classes="appSwitcherLinkClasses" /> `; @@ -207,5 +208,15 @@ describe('appSwitcherLink directive', () => { expect(link.attr('title')).to.be(attrs.appSwitcherLinkTitle); }); }); + + describe('appSwitcherLinkClasses attribute', () => { + it('is applied to the link', () => { + const attrs = { + appSwitcherLinkClasses: 'new classes', + }; + const element = create(attrs); + expect(element.attr('class')).to.contain(attrs.appSwitcherLinkClasses); + }); + }); }); }); diff --git a/src/ui/public/chrome/directives/app_switcher_link/app_switcher_link.html b/src/ui/public/chrome/directives/app_switcher_link/app_switcher_link.html index 6a7843d0430cf..8b7f06883df62 100644 --- a/src/ui/public/chrome/directives/app_switcher_link/app_switcher_link.html +++ b/src/ui/public/chrome/directives/app_switcher_link/app_switcher_link.html @@ -1,9 +1,9 @@
{ href: '=appSwitcherLinkHref', kbnRoute: '=appSwitcherLinkKbnRoute', icon: '=appSwitcherLinkIcon', - title: '=appSwitcherLinkTitle' + title: '=appSwitcherLinkTitle', + classes: '=appSwitcherLinkClasses', }, template: appSwitcherLinkTemplate, link: scope => { diff --git a/src/ui/public/chrome/directives/app_switcher_link/app_switcher_link.less b/src/ui/public/chrome/directives/app_switcher_link/app_switcher_link.less index c2b84d8376781..1a269f0b6438a 100644 --- a/src/ui/public/chrome/directives/app_switcher_link/app_switcher_link.less +++ b/src/ui/public/chrome/directives/app_switcher_link/app_switcher_link.less @@ -1,7 +1,8 @@ @import (reference) "~ui/styles/variables"; .app-switcher-link { - width: @as-open-width; + position: relative; + width: @as-closed-width; height: @app-icon-height; line-height: @app-line-height; @@ -22,6 +23,10 @@ text-decoration: none; } } + + .is-app-links-wrapper-open & { + width: @as-open-width; + } } .app-switcher-link__anchor { @@ -29,11 +34,8 @@ height: 100%; color: #ebf7fa; - /** - * 1. TODO: Override anchor styles. Fix this by removing a tag styles. - */ &:focus { - color: #ebf7fa; /* 1 */ + color: @white; } } @@ -66,12 +68,25 @@ } .app-switcher-link__title { + display: none; width: calc(@as-open-width - @as-closed-width); - display: inline-block; float: right; font-size: 0.9em; text-align: left; padding-left: 3px; line-height: @app-icon-height; white-space: nowrap; + + .is-app-links-wrapper-open & { + display: inline-block; + } + } + +.app-switcher-link--close { + /** + * 1. Translation accounts for the icon image being slightly off-center. + */ + .app-switcher-link__icon { + transform: translateX(1px) scaleX(-1); /* 1 */ } +} diff --git a/src/ui/public/chrome/directives/kbn_chrome.js b/src/ui/public/chrome/directives/kbn_chrome.js index b2d70eb967d7f..76519a17b8ab3 100644 --- a/src/ui/public/chrome/directives/kbn_chrome.js +++ b/src/ui/public/chrome/directives/kbn_chrome.js @@ -6,7 +6,7 @@ export default function (chrome, internals) { UiModules .get('kibana') - .directive('kbnChrome', function ($rootScope) { + .directive('kbnChrome', function ($rootScope, appSwitcherState) { return { template($el) { const $content = $(require('ui/chrome/chrome.html')); @@ -43,6 +43,29 @@ export default function (chrome, internals) { // and some local values chrome.httpActive = $http.pendingRequests; $scope.notifList = require('ui/notify')._notifs; + + // App switcher functionality. + function updateAppSwitcher(isOpen) { + $scope.appSwitcherButton = { + classes: isOpen ? 'app-switcher-link--close' : undefined, + title: isOpen ? 'Collapse' : 'Expand', + tooltip: isOpen ? 'Collapse side bar' : 'Expand side bar', + }; + } + + $scope.isAppSwitcherOpen = appSwitcherState.isOpen(); + updateAppSwitcher($scope.isAppSwitcherOpen); + + $scope.toggleAppSwitcher = event => { + event.preventDefault(); + $scope.isAppSwitcherOpen = !$scope.isAppSwitcherOpen; + appSwitcherState.setOpen($scope.isAppSwitcherOpen); + updateAppSwitcher($scope.isAppSwitcherOpen); + + // Notify visualizations, e.g. the dashboard, that they should re-render. + $scope.$root.$broadcast('ready:vis'); + }; + return chrome; } }; diff --git a/src/ui/public/chrome/services/app_switcher_state.js b/src/ui/public/chrome/services/app_switcher_state.js new file mode 100644 index 0000000000000..eb23a18966f5e --- /dev/null +++ b/src/ui/public/chrome/services/app_switcher_state.js @@ -0,0 +1,16 @@ + +import modules from 'ui/modules'; +import angular from 'angular'; + +modules.get('kibana') +.service('appSwitcherState', localStorage => { + return { + isOpen: () => { + return localStorage.get('kibana.iAppSwitcherOpen'); + }, + + setOpen: isOpen => { + return localStorage.set('kibana.iAppSwitcherOpen', isOpen); + } + }; +}); diff --git a/src/ui/public/chrome/services/index.js b/src/ui/public/chrome/services/index.js new file mode 100644 index 0000000000000..806b93ae7adac --- /dev/null +++ b/src/ui/public/chrome/services/index.js @@ -0,0 +1 @@ +import './app_switcher_state'; diff --git a/src/ui/public/styles/variables/for-theme.less b/src/ui/public/styles/variables/for-theme.less index 8f49e090bf361..fced987036a10 100644 --- a/src/ui/public/styles/variables/for-theme.less +++ b/src/ui/public/styles/variables/for-theme.less @@ -342,7 +342,5 @@ @as-closed-width: 53px; @app-icon-height: 38px; @app-line-height: 24px; -@transition-time: .35s; -@transition-delay: .25s; @app-links-wrapper-background: #3caed2; @app-links-active-background: #2f99c1; From b33ae03eceb85db31cf6bc473111ada0dbbfcdfa Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Wed, 3 Aug 2016 16:27:53 -0700 Subject: [PATCH 2/7] Remove appSwitcherLinkClasses attribute from appSwitcherLink directive and refactor styles for clarity. Former-commit-id: a8a99cd36f8acb4eab687b407ae73015ab9aabb8 --- src/ui/public/chrome/chrome.html | 2 +- .../app_switcher_link/__tests__/app-switcher-link.js | 11 ----------- .../directives/app_switcher_link/app_switcher_link.js | 1 - .../app_switcher_link/app_switcher_link.less | 4 +++- 4 files changed, 4 insertions(+), 14 deletions(-) diff --git a/src/ui/public/chrome/chrome.html b/src/ui/public/chrome/chrome.html index f1d7d43cb4897..9869e89db577e 100644 --- a/src/ui/public/chrome/chrome.html +++ b/src/ui/public/chrome/chrome.html @@ -33,7 +33,7 @@ { app-switcher-link-kbn-route="appSwitcherLinkKbnRoute" app-switcher-link-icon="appSwitcherLinkIcon" app-switcher-link-title="appSwitcherLinkTitle" - app-switcher-link-classes="appSwitcherLinkClasses" /> `; @@ -208,15 +207,5 @@ describe('appSwitcherLink directive', () => { expect(link.attr('title')).to.be(attrs.appSwitcherLinkTitle); }); }); - - describe('appSwitcherLinkClasses attribute', () => { - it('is applied to the link', () => { - const attrs = { - appSwitcherLinkClasses: 'new classes', - }; - const element = create(attrs); - expect(element.attr('class')).to.contain(attrs.appSwitcherLinkClasses); - }); - }); }); }); diff --git a/src/ui/public/chrome/directives/app_switcher_link/app_switcher_link.js b/src/ui/public/chrome/directives/app_switcher_link/app_switcher_link.js index eebb14434e640..cedbe5c237a34 100644 --- a/src/ui/public/chrome/directives/app_switcher_link/app_switcher_link.js +++ b/src/ui/public/chrome/directives/app_switcher_link/app_switcher_link.js @@ -18,7 +18,6 @@ module.directive('appSwitcherLink', chrome => { kbnRoute: '=appSwitcherLinkKbnRoute', icon: '=appSwitcherLinkIcon', title: '=appSwitcherLinkTitle', - classes: '=appSwitcherLinkClasses', }, template: appSwitcherLinkTemplate, link: scope => { diff --git a/src/ui/public/chrome/directives/app_switcher_link/app_switcher_link.less b/src/ui/public/chrome/directives/app_switcher_link/app_switcher_link.less index 1a269f0b6438a..c601293bbe022 100644 --- a/src/ui/public/chrome/directives/app_switcher_link/app_switcher_link.less +++ b/src/ui/public/chrome/directives/app_switcher_link/app_switcher_link.less @@ -23,8 +23,10 @@ text-decoration: none; } } +} - .is-app-links-wrapper-open & { +.is-app-links-wrapper-open { + .app-switcher-link { width: @as-open-width; } } From 78637a68226f5ece943de7ac20d50fc8893cbb25 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Wed, 3 Aug 2016 16:50:58 -0700 Subject: [PATCH 3/7] Fix data flow to be unidirectional using appSwitcherState service and a rootScope event. Former-commit-id: fd2d5981fd1a38300866a2c4193c3cdc6482b12f --- src/ui/public/chrome/directives/kbn_chrome.js | 21 +++++++++++-------- .../chrome/services/app_switcher_state.js | 6 ++++-- 2 files changed, 16 insertions(+), 11 deletions(-) diff --git a/src/ui/public/chrome/directives/kbn_chrome.js b/src/ui/public/chrome/directives/kbn_chrome.js index 76519a17b8ab3..9f0df4f63925a 100644 --- a/src/ui/public/chrome/directives/kbn_chrome.js +++ b/src/ui/public/chrome/directives/kbn_chrome.js @@ -45,25 +45,28 @@ export default function (chrome, internals) { $scope.notifList = require('ui/notify')._notifs; // App switcher functionality. - function updateAppSwitcher(isOpen) { + function updateAppSwitcher() { + const isOpen = appSwitcherState.isOpen(); + $scope.isAppSwitcherOpen = isOpen; $scope.appSwitcherButton = { classes: isOpen ? 'app-switcher-link--close' : undefined, title: isOpen ? 'Collapse' : 'Expand', tooltip: isOpen ? 'Collapse side bar' : 'Expand side bar', }; + + // Notify visualizations, e.g. the dashboard, that they should re-render. + $scope.$root.$broadcast('ready:vis'); } - $scope.isAppSwitcherOpen = appSwitcherState.isOpen(); - updateAppSwitcher($scope.isAppSwitcherOpen); + updateAppSwitcher(); + + $scope.$root.$on('appSwitcherState:change', () => { + updateAppSwitcher(); + }); $scope.toggleAppSwitcher = event => { event.preventDefault(); - $scope.isAppSwitcherOpen = !$scope.isAppSwitcherOpen; - appSwitcherState.setOpen($scope.isAppSwitcherOpen); - updateAppSwitcher($scope.isAppSwitcherOpen); - - // Notify visualizations, e.g. the dashboard, that they should re-render. - $scope.$root.$broadcast('ready:vis'); + appSwitcherState.setOpen(!appSwitcherState.isOpen()); }; return chrome; diff --git a/src/ui/public/chrome/services/app_switcher_state.js b/src/ui/public/chrome/services/app_switcher_state.js index eb23a18966f5e..7617466d4f0ba 100644 --- a/src/ui/public/chrome/services/app_switcher_state.js +++ b/src/ui/public/chrome/services/app_switcher_state.js @@ -3,14 +3,16 @@ import modules from 'ui/modules'; import angular from 'angular'; modules.get('kibana') -.service('appSwitcherState', localStorage => { +.service('appSwitcherState', (localStorage, $rootScope) => { return { isOpen: () => { return localStorage.get('kibana.iAppSwitcherOpen'); }, setOpen: isOpen => { - return localStorage.set('kibana.iAppSwitcherOpen', isOpen); + localStorage.set('kibana.iAppSwitcherOpen', isOpen); + $rootScope.$broadcast('appSwitcherState:change'); + return isOpen; } }; }); From c0a96fe36da293efb047aee97c203e8f2022ab8f Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Thu, 4 Aug 2016 19:59:12 -0700 Subject: [PATCH 4/7] Remove ready:vis event from kbn_chrome. Replace with appSwitcher:update event. This prevents accidentally triggering handlers that shouldn't be affected by the appSwitcher position. Former-commit-id: 9fbf808c93d41cee97d6497a4998742f6ba1d1a4 --- src/core_plugins/kibana/public/dashboard/directives/grid.js | 1 + src/ui/public/chrome/directives/kbn_chrome.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/core_plugins/kibana/public/dashboard/directives/grid.js b/src/core_plugins/kibana/public/dashboard/directives/grid.js index 99945519a7f23..b6cdc132e384d 100644 --- a/src/core_plugins/kibana/public/dashboard/directives/grid.js +++ b/src/core_plugins/kibana/public/dashboard/directives/grid.js @@ -100,6 +100,7 @@ app.directive('dashboardGrid', function ($compile, Notifier) { safeLayout(); $window.on('resize', safeLayout); $scope.$on('ready:vis', safeLayout); + $scope.$on('appSwitcher:update', safeLayout); } // return the panel object for an element. diff --git a/src/ui/public/chrome/directives/kbn_chrome.js b/src/ui/public/chrome/directives/kbn_chrome.js index 9f0df4f63925a..4ab443982edc3 100644 --- a/src/ui/public/chrome/directives/kbn_chrome.js +++ b/src/ui/public/chrome/directives/kbn_chrome.js @@ -55,7 +55,7 @@ export default function (chrome, internals) { }; // Notify visualizations, e.g. the dashboard, that they should re-render. - $scope.$root.$broadcast('ready:vis'); + $scope.$root.$broadcast('appSwitcher:update'); } updateAppSwitcher(); From b0a67cfa77263f354bd53a1d6665ff913dafaf20 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Thu, 4 Aug 2016 20:17:31 -0700 Subject: [PATCH 5/7] Style the log-in screen to remain unaffected by an expanded side nav. Former-commit-id: 07500a033ef2ef0a9a8602cb4aa14495f120d855 --- .../public/chrome/directives/app_switcher/app_switcher.less | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) 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 5243082114bdb..5e095547f9a82 100644 --- a/src/ui/public/chrome/directives/app_switcher/app_switcher.less +++ b/src/ui/public/chrome/directives/app_switcher/app_switcher.less @@ -54,8 +54,12 @@ body { overflow-x: hidden; } margin: 0 auto; background-color: #fff; + /** + * 1. Dirty, but we need to override the .is-app-links-wrapper-open state + * when we're looking at the log-in screen. + */ &.hidden-chrome { - left: 0; + left: 0 !important; /* 1 */ } .navbar-right { From 6919b47f676e1f385ed94161ec3bab182cf866ab Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Thu, 4 Aug 2016 21:32:33 -0700 Subject: [PATCH 6/7] Refactor kbn_chrome and app_switcher. - Rename app_switcher -> global_nav, and rename associated services and subcomponents accordingly. - Rename chrome.html -> kbn_chrome.html and create kbn_chrome.less. Former-commit-id: 585a84cc9678bb14d1dccb66b40a06d57dfaaf77 --- .../public/dashboard/directives/grid.js | 2 +- src/ui/public/chrome/chrome.html | 57 ---------- .../directives/app_switcher/app_switcher.html | 11 -- .../app_switcher_link/app_switcher_link.js | 35 ------ .../app_switcher/__tests__/app_switcher.js | 2 +- .../global_nav/app_switcher/app_switcher.html | 11 ++ .../app_switcher/app_switcher.js | 10 +- .../directives/global_nav/global_nav.html | 46 ++++++++ .../directives/global_nav/global_nav.js | 51 +++++++++ .../global_nav.less} | 43 ++------ .../__tests__/global_nav_link.js} | 104 +++++++++--------- .../global_nav_link/global_nav_link.html} | 16 +-- .../global_nav_link/global_nav_link.js | 35 ++++++ .../global_nav_link/global_nav_link.less} | 28 ++--- src/ui/public/chrome/directives/index.js | 5 +- .../public/chrome/directives/kbn_chrome.html | 21 ++++ src/ui/public/chrome/directives/kbn_chrome.js | 30 +---- .../public/chrome/directives/kbn_chrome.less | 34 ++++++ .../chrome/services/app_switcher_state.js | 18 --- .../chrome/services/global_nav_state.js | 18 +++ src/ui/public/chrome/services/index.js | 2 +- 21 files changed, 311 insertions(+), 268 deletions(-) delete mode 100644 src/ui/public/chrome/chrome.html delete mode 100644 src/ui/public/chrome/directives/app_switcher/app_switcher.html delete mode 100644 src/ui/public/chrome/directives/app_switcher_link/app_switcher_link.js rename src/ui/public/chrome/directives/{ => global_nav}/app_switcher/__tests__/app_switcher.js (98%) create mode 100644 src/ui/public/chrome/directives/global_nav/app_switcher/app_switcher.html rename src/ui/public/chrome/directives/{ => global_nav}/app_switcher/app_switcher.js (89%) create mode 100644 src/ui/public/chrome/directives/global_nav/global_nav.html create mode 100644 src/ui/public/chrome/directives/global_nav/global_nav.js rename src/ui/public/chrome/directives/{app_switcher/app_switcher.less => global_nav/global_nav.less} (51%) rename src/ui/public/chrome/directives/{app_switcher_link/__tests__/app-switcher-link.js => global_nav/global_nav_link/__tests__/global_nav_link.js} (57%) rename src/ui/public/chrome/directives/{app_switcher_link/app_switcher_link.html => global_nav/global_nav_link/global_nav_link.html} (56%) create mode 100644 src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.js rename src/ui/public/chrome/directives/{app_switcher_link/app_switcher_link.less => global_nav/global_nav_link/global_nav_link.less} (76%) create mode 100644 src/ui/public/chrome/directives/kbn_chrome.html create mode 100644 src/ui/public/chrome/directives/kbn_chrome.less delete mode 100644 src/ui/public/chrome/services/app_switcher_state.js create mode 100644 src/ui/public/chrome/services/global_nav_state.js diff --git a/src/core_plugins/kibana/public/dashboard/directives/grid.js b/src/core_plugins/kibana/public/dashboard/directives/grid.js index b6cdc132e384d..afff8d497bc38 100644 --- a/src/core_plugins/kibana/public/dashboard/directives/grid.js +++ b/src/core_plugins/kibana/public/dashboard/directives/grid.js @@ -100,7 +100,7 @@ app.directive('dashboardGrid', function ($compile, Notifier) { safeLayout(); $window.on('resize', safeLayout); $scope.$on('ready:vis', safeLayout); - $scope.$on('appSwitcher:update', safeLayout); + $scope.$on('globalNav:update', safeLayout); } // return the panel object for an element. diff --git a/src/ui/public/chrome/chrome.html b/src/ui/public/chrome/chrome.html deleted file mode 100644 index 9869e89db577e..0000000000000 --- a/src/ui/public/chrome/chrome.html +++ /dev/null @@ -1,57 +0,0 @@ -
- - - -
-
- - -
-
-
-
diff --git a/src/ui/public/chrome/directives/app_switcher/app_switcher.html b/src/ui/public/chrome/directives/app_switcher/app_switcher.html deleted file mode 100644 index 221ba32ee3ca1..0000000000000 --- a/src/ui/public/chrome/directives/app_switcher/app_switcher.html +++ /dev/null @@ -1,11 +0,0 @@ - - diff --git a/src/ui/public/chrome/directives/app_switcher_link/app_switcher_link.js b/src/ui/public/chrome/directives/app_switcher_link/app_switcher_link.js deleted file mode 100644 index cedbe5c237a34..0000000000000 --- a/src/ui/public/chrome/directives/app_switcher_link/app_switcher_link.js +++ /dev/null @@ -1,35 +0,0 @@ - -import appSwitcherLinkTemplate from './app_switcher_link.html'; -import './app_switcher_link.less'; -import uiModules from 'ui/modules'; - -const module = uiModules.get('kibana'); - -module.directive('appSwitcherLink', chrome => { - return { - restrict: 'E', - replace: true, - scope: { - isActive: '=appSwitcherLinkIsActive', - isDisabled: '=appSwitcherLinkIsDisabled', - tooltip: '=appSwitcherLinkTooltip', - onClick: '&appSwitcherLinkOnClick', - href: '=appSwitcherLinkHref', - kbnRoute: '=appSwitcherLinkKbnRoute', - icon: '=appSwitcherLinkIcon', - title: '=appSwitcherLinkTitle', - }, - template: appSwitcherLinkTemplate, - link: scope => { - scope.getHref = () => { - if (scope.href) { - return scope.href; - } - - if (scope.kbnRoute) { - return chrome.addBasePath(scope.kbnRoute); - } - }; - } - }; -}); diff --git a/src/ui/public/chrome/directives/app_switcher/__tests__/app_switcher.js b/src/ui/public/chrome/directives/global_nav/app_switcher/__tests__/app_switcher.js similarity index 98% rename from src/ui/public/chrome/directives/app_switcher/__tests__/app_switcher.js rename to src/ui/public/chrome/directives/global_nav/app_switcher/__tests__/app_switcher.js index 46cb6fcaf9dd6..3f0dac3370d89 100644 --- a/src/ui/public/chrome/directives/app_switcher/__tests__/app_switcher.js +++ b/src/ui/public/chrome/directives/global_nav/app_switcher/__tests__/app_switcher.js @@ -26,7 +26,7 @@ describe('appSwitcher directive', function () { env = { $scope: $rootScope, - $el: $compile($(''))($rootScope), + $el: $compile($(''))($rootScope), currentHref: href, location: domLocation }; diff --git a/src/ui/public/chrome/directives/global_nav/app_switcher/app_switcher.html b/src/ui/public/chrome/directives/global_nav/app_switcher/app_switcher.html new file mode 100644 index 0000000000000..96eb6fdd3d537 --- /dev/null +++ b/src/ui/public/chrome/directives/global_nav/app_switcher/app_switcher.html @@ -0,0 +1,11 @@ + + diff --git a/src/ui/public/chrome/directives/app_switcher/app_switcher.js b/src/ui/public/chrome/directives/global_nav/app_switcher/app_switcher.js similarity index 89% rename from src/ui/public/chrome/directives/app_switcher/app_switcher.js rename to src/ui/public/chrome/directives/global_nav/app_switcher/app_switcher.js index 072b6abc49c9f..ec63ec406126f 100644 --- a/src/ui/public/chrome/directives/app_switcher/app_switcher.js +++ b/src/ui/public/chrome/directives/global_nav/app_switcher/app_switcher.js @@ -1,7 +1,6 @@ import DomLocationProvider from 'ui/dom_location'; import { parse } from 'url'; import { bindKey } from 'lodash'; -import './app_switcher.less'; import uiModules from 'ui/modules'; import appSwitcherTemplate from './app_switcher.html'; @@ -55,11 +54,12 @@ uiModules .directive('appSwitcher', function () { return { restrict: 'E', + scope: { + chrome: '=', + }, template: appSwitcherTemplate, controllerAs: 'switcher', - controller($scope, appSwitcherEnsureNavigation, appSwitcherState) { - // since we render this in an isolate scope we can't "require: ^chrome", but - // rather than remove all helpfull checks we can just check here. + controller($scope, appSwitcherEnsureNavigation, globalNavState) { if (!$scope.chrome || !$scope.chrome.getNavLinks) { throw new TypeError('appSwitcher directive requires the "chrome" config-object'); } @@ -76,7 +76,7 @@ uiModules $scope.getTooltip = link => { // If the sidebar is open then we don't need to show the title because // it will already be visible. - if (appSwitcherState.isOpen()) { + if (globalNavState.isOpen()) { return link.tooltip; } return link.tooltip ? link.title + ' - ' + link.tooltip : link.title; diff --git a/src/ui/public/chrome/directives/global_nav/global_nav.html b/src/ui/public/chrome/directives/global_nav/global_nav.html new file mode 100644 index 0000000000000..d9751a211dcb8 --- /dev/null +++ b/src/ui/public/chrome/directives/global_nav/global_nav.html @@ -0,0 +1,46 @@ + diff --git a/src/ui/public/chrome/directives/global_nav/global_nav.js b/src/ui/public/chrome/directives/global_nav/global_nav.js new file mode 100644 index 0000000000000..b688982cba511 --- /dev/null +++ b/src/ui/public/chrome/directives/global_nav/global_nav.js @@ -0,0 +1,51 @@ + +import './app_switcher'; +import './global_nav_link'; + +import globalNavTemplate from './global_nav.html'; +import './global_nav.less'; +import uiModules from 'ui/modules'; + +const module = uiModules.get('kibana'); + +module.directive('globalNav', globalNavState => { + return { + restrict: 'E', + replace: true, + scope: { + chrome: '=', + isVisible: '=', + logoBrand: '=', + smallLogoBrand: '=', + appTitle: '=', + }, + template: globalNavTemplate, + link: scope => { + // App switcher functionality. + function updateGlobalNav() { + const isOpen = globalNavState.isOpen(); + scope.isGlobalNavOpen = isOpen; + scope.globalNavToggleButton = { + classes: isOpen ? 'global-nav-link--close' : undefined, + title: isOpen ? 'Collapse' : 'Expand', + tooltipContent: isOpen ? 'Collapse side bar' : 'Expand side bar', + }; + + // Notify visualizations, e.g. the dashboard, that they should re-render. + scope.$root.$broadcast('globalNav:update'); + } + + updateGlobalNav(); + + scope.$root.$on('globalNavState:change', () => { + updateGlobalNav(); + }); + + scope.toggleGlobalNav = event => { + event.preventDefault(); + globalNavState.setOpen(!globalNavState.isOpen()); + }; + + } + }; +}); diff --git a/src/ui/public/chrome/directives/app_switcher/app_switcher.less b/src/ui/public/chrome/directives/global_nav/global_nav.less similarity index 51% rename from src/ui/public/chrome/directives/app_switcher/app_switcher.less rename to src/ui/public/chrome/directives/global_nav/global_nav.less index 5e095547f9a82..8d38a8c26d715 100644 --- a/src/ui/public/chrome/directives/app_switcher/app_switcher.less +++ b/src/ui/public/chrome/directives/global_nav/global_nav.less @@ -1,9 +1,7 @@ -@import (reference) "~ui/styles/mixins"; -@import (reference) "~ui/styles/variables"; -body { overflow-x: hidden; } +@import (reference) "~ui/styles/variables"; -.app-links-wrapper { +.global-nav { width: @as-closed-width; position: fixed; left: 0; @@ -13,11 +11,13 @@ body { overflow-x: hidden; } background-color: @app-links-wrapper-background; overflow: hidden; - &.is-app-links-wrapper-open { + &.is-global-nav-open { width: @as-open-width; + .app-title { display: inline-block; } + + .app-wrapper { left: @as-open-width; } @@ -36,38 +36,9 @@ body { overflow-x: hidden; } background-color: #e8488b; } } +} - .bottom-apps { + .gloal-nav__bottom-links { position: absolute; bottom: 0; } -} - -.app-wrapper { - .real-flex-parent(); - position: absolute; - left: @as-closed-width; - top: 0; - right: 0; - bottom: 0; - z-index: 1; - margin: 0 auto; - background-color: #fff; - - /** - * 1. Dirty, but we need to override the .is-app-links-wrapper-open state - * when we're looking at the log-in screen. - */ - &.hidden-chrome { - left: 0 !important; /* 1 */ - } - - .navbar-right { - margin-right: 0; - } -} - - .app-wrapper-panel { - .flex-parent(@shrink: 0); - box-shadow: -4px 0px 3px rgba(0,0,0,0.2); - } diff --git a/src/ui/public/chrome/directives/app_switcher_link/__tests__/app-switcher-link.js b/src/ui/public/chrome/directives/global_nav/global_nav_link/__tests__/global_nav_link.js similarity index 57% rename from src/ui/public/chrome/directives/app_switcher_link/__tests__/app-switcher-link.js rename to src/ui/public/chrome/directives/global_nav/global_nav_link/__tests__/global_nav_link.js index 25768f2072893..54254736724e4 100644 --- a/src/ui/public/chrome/directives/app_switcher_link/__tests__/app-switcher-link.js +++ b/src/ui/public/chrome/directives/global_nav/global_nav_link/__tests__/global_nav_link.js @@ -2,9 +2,9 @@ import sinon from 'auto-release-sinon'; import ngMock from 'ng_mock'; import expect from 'expect.js'; -import '../app_switcher_link'; +import '../global_nav_link'; -describe('appSwitcherLink directive', () => { +describe('globalNavLink directive', () => { let scope; let $compile; @@ -19,15 +19,15 @@ describe('appSwitcherLink directive', () => { function create(attrs) { const template = ` - `; @@ -42,96 +42,96 @@ describe('appSwitcherLink directive', () => { describe('interface', () => { - describe('appSwitcherLinkIsActive attribute', () => { + describe('isActive attribute', () => { it(`doesn't apply the active class when false`, () => { const element = create({ - appSwitcherLinkIsActive: false, + isActive: false, }); expect(element.hasClass('active')).to.be(false); }); it('applies the active class when true', () => { const element = create({ - appSwitcherLinkIsActive: true, + isActive: true, }); expect(element.hasClass('active')).to.be(true); }); }); - describe('appSwitcherLinkIsDisabled attribute', () => { - it(`doesn't apply the is-app-switcher-link-disabled class when false`, () => { + describe('isDisabled attribute', () => { + it(`doesn't apply the is-global-nav-link-disabled class when false`, () => { const element = create({ - appSwitcherLinkIsDisabled: false, + isDisabled: false, }); - expect(element.hasClass('is-app-switcher-link-disabled')).to.be(false); + expect(element.hasClass('is-global-nav-link-disabled')).to.be(false); }); - it('applies the is-app-switcher-link-disabled class when true', () => { + it('applies the is-global-nav-link-disabled class when true', () => { const element = create({ - appSwitcherLinkIsDisabled: true, + isDisabled: true, }); - expect(element.hasClass('is-app-switcher-link-disabled')).to.be(true); + expect(element.hasClass('is-global-nav-link-disabled')).to.be(true); }); }); - describe('appSwitcherLinkTooltip attribute', () => { + describe('tooltipContent attribute', () => { it('is applied to the tooltip directive', () => { const attrs = { - appSwitcherLinkTooltip: 'hello i am a tooltip', + tooltipContent: 'hello i am a tooltip', }; const element = create(attrs); - expect(element.attr('tooltip')).to.be(attrs.appSwitcherLinkTooltip); + expect(element.attr('tooltip')).to.be(attrs.tooltipContent); }); }); - describe('appSwitcherLinkOnClick attribute', () => { + describe('onClick attribute', () => { it('is called when the link is clicked', () => { const attrs = { - appSwitcherLinkOnClick: sinon.spy(), + onClick: sinon.spy(), }; const element = create(attrs); element.find('[data-test-subj=appLink]').click(); - sinon.assert.called(attrs.appSwitcherLinkOnClick); + sinon.assert.called(attrs.onClick); }); }); - describe('appSwitcherLinkHref attribute', () => { + describe('href attribute', () => { it('is applied to the link', () => { const attrs = { - appSwitcherLinkHref: 'link to a website', + href: 'link to a website', }; const element = create(attrs); const link = element.find('[data-test-subj=appLink]'); - expect(link.attr('href')).to.be(attrs.appSwitcherLinkHref); + expect(link.attr('href')).to.be(attrs.href); }); }); - describe('appSwitcherLinkKbnRoute attribute', () => { + describe('kbnRoute attribute', () => { it(`is applied to the link when href isn't defined`, () => { const attrs = { - appSwitcherLinkKbnRoute: '#test', + kbnRoute: '#test', }; const element = create(attrs); const link = element.find('[data-test-subj=appLink]'); - expect(link.attr('href')).to.be(attrs.appSwitcherLinkKbnRoute); + expect(link.attr('href')).to.be(attrs.kbnRoute); }); it(`isn't applied to the link when href is defined`, () => { const attrs = { - appSwitcherLinkHref: 'link to a website', - appSwitcherLinkKbnRoute: '#test', + href: 'link to a website', + kbnRoute: '#test', }; const element = create(attrs); const link = element.find('[data-test-subj=appLink]'); - expect(link.attr('href')).not.to.be(attrs.appSwitcherLinkKbnRoute); + expect(link.attr('href')).not.to.be(attrs.kbnRoute); }); }); - describe('appSwitcherLinkIcon attribute', () => { + describe('icon attribute', () => { describe('when present', () => { it('displays the img element', () => { const attrs = { - appSwitcherLinkIcon: 'icon url', + icon: 'icon url', }; const element = create(attrs); const img = element.find('img'); @@ -140,7 +140,7 @@ describe('appSwitcherLink directive', () => { it('hides the placeholder', () => { const attrs = { - appSwitcherLinkIcon: 'icon url', + icon: 'icon url', }; const element = create(attrs); const placeholder = element.find('[data-test-subj=appLinkIconPlaceholder]'); @@ -149,18 +149,18 @@ describe('appSwitcherLink directive', () => { it(`is set as the img src`, () => { const attrs = { - appSwitcherLinkIcon: 'icon url', + icon: 'icon url', }; const element = create(attrs); const img = element.find('img'); - expect(img.attr('src')).to.contain(encodeURI(attrs.appSwitcherLinkIcon)); + expect(img.attr('src')).to.contain(encodeURI(attrs.icon)); }); }); describe('when not present', () => { it('hides the img element', () => { const attrs = { - appSwitcherLinkIcon: undefined, + icon: undefined, }; const element = create(attrs); const img = element.find('img'); @@ -169,7 +169,7 @@ describe('appSwitcherLink directive', () => { it('displays the placeholder', () => { const attrs = { - appSwitcherLinkIcon: undefined, + icon: undefined, }; const element = create(attrs); const placeholder = element.find('[data-test-subj=appLinkIconPlaceholder]'); @@ -178,33 +178,33 @@ describe('appSwitcherLink directive', () => { it(`uses the title's first letter as the placeholder`, () => { const attrs = { - appSwitcherLinkIcon: undefined, - appSwitcherLinkTitle: 'Xyz', + icon: undefined, + title: 'Xyz', }; const element = create(attrs); const placeholder = element.find('[data-test-subj=appLinkIconPlaceholder]'); - expect(placeholder.text()).to.contain(attrs.appSwitcherLinkTitle[0]); + expect(placeholder.text()).to.contain(attrs.title[0]); }); }); }); - describe('appSwitcherLinkTitle attribute', () => { + describe('title attribute', () => { it('is displayed', () => { const attrs = { - appSwitcherLinkTitle: 'demo title', + title: 'demo title', }; const element = create(attrs); - const title = element.find('.app-switcher-link__title'); - expect(title.text().trim()).to.be(attrs.appSwitcherLinkTitle); + const title = element.find('.global-nav-link__title'); + expect(title.text().trim()).to.be(attrs.title); }); it('is set as a title attribute on the anchor tag', () => { const attrs = { - appSwitcherLinkTitle: 'demo title', + title: 'demo title', }; const element = create(attrs); const link = element.find('[data-test-subj=appLink]'); - expect(link.attr('title')).to.be(attrs.appSwitcherLinkTitle); + expect(link.attr('title')).to.be(attrs.title); }); }); }); diff --git a/src/ui/public/chrome/directives/app_switcher_link/app_switcher_link.html b/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.html similarity index 56% rename from src/ui/public/chrome/directives/app_switcher_link/app_switcher_link.html rename to src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.html index 8b7f06883df62..9dbc657a3eceb 100644 --- a/src/ui/public/chrome/directives/app_switcher_link/app_switcher_link.html +++ b/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.html @@ -1,35 +1,35 @@
-
+
{{ title[0] }}
-
+
{{ title }}
diff --git a/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.js b/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.js new file mode 100644 index 0000000000000..17c9a0664672d --- /dev/null +++ b/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.js @@ -0,0 +1,35 @@ + +import globalNavLinkTemplate from './global_nav_link.html'; +import './global_nav_link.less'; +import uiModules from 'ui/modules'; + +const module = uiModules.get('kibana'); + +module.directive('globalNavLink', chrome => { + return { + restrict: 'E', + replace: true, + scope: { + isActive: '=', + isDisabled: '=', + tooltipContent: '=', + onClick: '&', + href: '=', + kbnRoute: '=', + icon: '=', + title: '=', + }, + template: globalNavLinkTemplate, + link: scope => { + scope.getHref = () => { + if (scope.href) { + return scope.href; + } + + if (scope.kbnRoute) { + return chrome.addBasePath(scope.kbnRoute); + } + }; + } + }; +}); diff --git a/src/ui/public/chrome/directives/app_switcher_link/app_switcher_link.less b/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.less similarity index 76% rename from src/ui/public/chrome/directives/app_switcher_link/app_switcher_link.less rename to src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.less index c601293bbe022..d14f1b31d1238 100644 --- a/src/ui/public/chrome/directives/app_switcher_link/app_switcher_link.less +++ b/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.less @@ -1,15 +1,15 @@ @import (reference) "~ui/styles/variables"; -.app-switcher-link { +.global-nav-link { position: relative; width: @as-closed-width; height: @app-icon-height; line-height: @app-line-height; - &.is-app-switcher-link-disabled { + &.is-global-nav-link-disabled { opacity: 0.5; - .app-switcher-link__anchor { + .global-nav-link__anchor { cursor: default; } } @@ -18,20 +18,20 @@ &.active { background-color: @app-links-active-background; - .app-switcher-link__anchor { + .global-nav-link__anchor { color: @white; text-decoration: none; } } } -.is-app-links-wrapper-open { - .app-switcher-link { +.is-global-nav-open { + .global-nav-link { width: @as-open-width; } } - .app-switcher-link__anchor { + .global-nav-link__anchor { display: block; height: 100%; color: #ebf7fa; @@ -41,7 +41,7 @@ } } - .app-switcher-link__icon { + .global-nav-link__icon { display: inline-block; width: @as-closed-width; height: @app-icon-height; @@ -53,7 +53,7 @@ /** * This imgae is used to display the icon. */ - .app-switcher-link__icon-image { + .global-nav-link__icon-image { height: 18px; margin-top: 8px; filter: invert(100%); @@ -62,14 +62,14 @@ /** * This placeholder text gets shown if there is no specified icon. */ - .app-switcher-link__icon-placeholder { + .global-nav-link__icon-placeholder { line-height: @app-icon-height; background-position: center; background-size: contain; background-repeat: no-repeat; } - .app-switcher-link__title { + .global-nav-link__title { display: none; width: calc(@as-open-width - @as-closed-width); float: right; @@ -79,16 +79,16 @@ line-height: @app-icon-height; white-space: nowrap; - .is-app-links-wrapper-open & { + .is-global-nav-open & { display: inline-block; } } -.app-switcher-link--close { +.global-nav-link--close { /** * 1. Translation accounts for the icon image being slightly off-center. */ - .app-switcher-link__icon { + .global-nav-link__icon { transform: translateX(1px) scaleX(-1); /* 1 */ } } diff --git a/src/ui/public/chrome/directives/index.js b/src/ui/public/chrome/directives/index.js index 7be137eb52539..3b91849fc78f5 100644 --- a/src/ui/public/chrome/directives/index.js +++ b/src/ui/public/chrome/directives/index.js @@ -1,5 +1,6 @@ -import './app_switcher'; -import './app_switcher_link'; + +import './global_nav'; + import kbnChromeProv from './kbn_chrome'; import kbnChromeNavControlsProv from './append_nav_controls'; import './kbn_loading_indicator'; diff --git a/src/ui/public/chrome/directives/kbn_chrome.html b/src/ui/public/chrome/directives/kbn_chrome.html new file mode 100644 index 0000000000000..051ad5dd2558f --- /dev/null +++ b/src/ui/public/chrome/directives/kbn_chrome.html @@ -0,0 +1,21 @@ +
+ + +
+
+ + +
+
+
+
diff --git a/src/ui/public/chrome/directives/kbn_chrome.js b/src/ui/public/chrome/directives/kbn_chrome.js index 4ab443982edc3..3a839f2b9e6b3 100644 --- a/src/ui/public/chrome/directives/kbn_chrome.js +++ b/src/ui/public/chrome/directives/kbn_chrome.js @@ -1,15 +1,16 @@ import $ from 'jquery'; +import './kbn_chrome.less'; import UiModules from 'ui/modules'; export default function (chrome, internals) { UiModules .get('kibana') - .directive('kbnChrome', function ($rootScope, appSwitcherState) { + .directive('kbnChrome', $rootScope => { return { template($el) { - const $content = $(require('ui/chrome/chrome.html')); + const $content = $(require('./kbn_chrome.html')); const $app = $content.find('.application'); if (internals.rootController) { @@ -44,31 +45,6 @@ export default function (chrome, internals) { chrome.httpActive = $http.pendingRequests; $scope.notifList = require('ui/notify')._notifs; - // App switcher functionality. - function updateAppSwitcher() { - const isOpen = appSwitcherState.isOpen(); - $scope.isAppSwitcherOpen = isOpen; - $scope.appSwitcherButton = { - classes: isOpen ? 'app-switcher-link--close' : undefined, - title: isOpen ? 'Collapse' : 'Expand', - tooltip: isOpen ? 'Collapse side bar' : 'Expand side bar', - }; - - // Notify visualizations, e.g. the dashboard, that they should re-render. - $scope.$root.$broadcast('appSwitcher:update'); - } - - updateAppSwitcher(); - - $scope.$root.$on('appSwitcherState:change', () => { - updateAppSwitcher(); - }); - - $scope.toggleAppSwitcher = event => { - event.preventDefault(); - appSwitcherState.setOpen(!appSwitcherState.isOpen()); - }; - return chrome; } }; diff --git a/src/ui/public/chrome/directives/kbn_chrome.less b/src/ui/public/chrome/directives/kbn_chrome.less new file mode 100644 index 0000000000000..1e3d82bac109d --- /dev/null +++ b/src/ui/public/chrome/directives/kbn_chrome.less @@ -0,0 +1,34 @@ + +@import (reference) "~ui/styles/mixins"; +@import (reference) "~ui/styles/variables"; + +body { overflow-x: hidden; } + +.app-wrapper { + .real-flex-parent(); + position: absolute; + left: @as-closed-width; + top: 0; + right: 0; + bottom: 0; + z-index: 1; + margin: 0 auto; + background-color: #fff; + + /** + * 1. Dirty, but we need to override the .is-global-nav-open state + * when we're looking at the log-in screen. + */ + &.hidden-chrome { + left: 0 !important; /* 1 */ + } + + .navbar-right { + margin-right: 0; + } +} + + .app-wrapper-panel { + .flex-parent(@shrink: 0); + box-shadow: -4px 0px 3px rgba(0,0,0,0.2); + } diff --git a/src/ui/public/chrome/services/app_switcher_state.js b/src/ui/public/chrome/services/app_switcher_state.js deleted file mode 100644 index 7617466d4f0ba..0000000000000 --- a/src/ui/public/chrome/services/app_switcher_state.js +++ /dev/null @@ -1,18 +0,0 @@ - -import modules from 'ui/modules'; -import angular from 'angular'; - -modules.get('kibana') -.service('appSwitcherState', (localStorage, $rootScope) => { - return { - isOpen: () => { - return localStorage.get('kibana.iAppSwitcherOpen'); - }, - - setOpen: isOpen => { - localStorage.set('kibana.iAppSwitcherOpen', isOpen); - $rootScope.$broadcast('appSwitcherState:change'); - return isOpen; - } - }; -}); diff --git a/src/ui/public/chrome/services/global_nav_state.js b/src/ui/public/chrome/services/global_nav_state.js new file mode 100644 index 0000000000000..c236ef35a65ac --- /dev/null +++ b/src/ui/public/chrome/services/global_nav_state.js @@ -0,0 +1,18 @@ + +import modules from 'ui/modules'; +import angular from 'angular'; + +modules.get('kibana') +.service('globalNavState', (localStorage, $rootScope) => { + return { + isOpen: () => { + return localStorage.get('kibana.isGlobalNavOpen'); + }, + + setOpen: isOpen => { + localStorage.set('kibana.isGlobalNavOpen', isOpen); + $rootScope.$broadcast('globalNavState:change'); + return isOpen; + } + }; +}); diff --git a/src/ui/public/chrome/services/index.js b/src/ui/public/chrome/services/index.js index 806b93ae7adac..4bac1c4cc8cdd 100644 --- a/src/ui/public/chrome/services/index.js +++ b/src/ui/public/chrome/services/index.js @@ -1 +1 @@ -import './app_switcher_state'; +import './global_nav_state'; From 66b6472603cb21d9585b42efebdc9885f9c9e023 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Mon, 15 Aug 2016 11:58:26 -0700 Subject: [PATCH 7/7] In app_switcher.js, expose getTooltip on controller instead of scope. Former-commit-id: eb72cb66984684534a0b0ab5b7bf58b55cba2675 --- .../chrome/directives/global_nav/app_switcher/app_switcher.html | 2 +- .../chrome/directives/global_nav/app_switcher/app_switcher.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ui/public/chrome/directives/global_nav/app_switcher/app_switcher.html b/src/ui/public/chrome/directives/global_nav/app_switcher/app_switcher.html index 96eb6fdd3d537..5cfd1b424b526 100644 --- a/src/ui/public/chrome/directives/global_nav/app_switcher/app_switcher.html +++ b/src/ui/public/chrome/directives/global_nav/app_switcher/app_switcher.html @@ -3,7 +3,7 @@ ng-repeat="link in switcher.shownNavLinks" is-active="link.active" is-disabled="!switcher.isNavLinkEnabled(link)" - tooltip-content="getTooltip(link)" + tooltip-content="switcher.getTooltip(link)" on-click="switcher.ensureNavigation($event, link)" href="link.active ? link.url : (link.lastSubUrl || link.url)" icon="link.icon" diff --git a/src/ui/public/chrome/directives/global_nav/app_switcher/app_switcher.js b/src/ui/public/chrome/directives/global_nav/app_switcher/app_switcher.js index ec63ec406126f..202882920f9b9 100644 --- a/src/ui/public/chrome/directives/global_nav/app_switcher/app_switcher.js +++ b/src/ui/public/chrome/directives/global_nav/app_switcher/app_switcher.js @@ -73,7 +73,7 @@ uiModules // so we force them when needed this.ensureNavigation = appSwitcherEnsureNavigation; - $scope.getTooltip = link => { + this.getTooltip = link => { // If the sidebar is open then we don't need to show the title because // it will already be visible. if (globalNavState.isOpen()) {