Merge pull request elastic#7723 from cjcenizal/7467/pin-sidebar-funct…

…ionality

[7467] Add "Collapse/Expand" button to sidebar.

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('globalNav:update', safeLayout);
       }
 
       // return the panel object for an element.

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(

src/ui/public/chrome/directives/app_switcher/__tests__/app_switcher.js → 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($('<app-switcher>'))($rootScope),
+        $el: $compile($('<app-switcher chrome="chrome">'))($rootScope),
         currentHref: href,
         location: domLocation
       };

src/ui/public/chrome/directives/global_nav/app_switcher/app_switcher.html

@@ -0,0 +1,11 @@
+
+<global-nav-link
+  ng-repeat="link in switcher.shownNavLinks"
+  is-active="link.active"
+  is-disabled="!switcher.isNavLinkEnabled(link)"
+  tooltip-content="switcher.getTooltip(link)"
+  on-click="switcher.ensureNavigation($event, link)"
+  href="link.active ? link.url : (link.lastSubUrl || link.url)"
+  icon="link.icon"
+  title="link.title"
+></global-nav-link>

src/ui/public/chrome/directives/app_switcher/app_switcher.js → 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) {
-      // 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');
       }
@@ -72,6 +72,15 @@ uiModules
       // links don't cause full-navigation events in certain scenarios
       // so we force them when needed
       this.ensureNavigation = appSwitcherEnsureNavigation;
+
+      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()) {
+          return link.tooltip;
+        }
+        return link.tooltip ? link.title + ' - ' + link.tooltip : link.title;
+      };
     }
   };
 });

src/ui/public/chrome/directives/global_nav/global_nav.html

@@ -0,0 +1,46 @@
+<nav
+  class="global-nav"
+  ng-class="{'is-global-nav-open': isGlobalNavOpen}"
+  ng-show="isVisible"
+>
+  <!-- Logo -->
+  <li
+    ng-if="!logoBrand && !smallLogoBrand"
+    aria-label="{{ appTitle }} Logo"
+    class="logo kibana"
+  ></li>
+
+  <li
+    ng-if="logoBrand"
+    ng-style="{ 'background': logoBrand }"
+    aria-label="{{ appTitle }} Logo"
+    class="logo hidden-sm"
+  ></li>
+
+  <li
+    ng-if="smallLogoBrand"
+    ng-style="{ 'background': smallLogoBrand }"
+    aria-label="{{ appTitle }} Logo"
+    class="logo-small visible-sm hidden-xs"
+  ></li>
+
+  <!-- Main apps -->
+  <app-switcher
+    chrome="chrome"
+  ></app-switcher>
+
+  <!-- Bottom button -->
+  <div class="gloal-nav__bottom-links">
+    <div class="chrome-actions" kbn-chrome-append-nav-controls></div>
+
+    <!-- Open/close sidebar -->
+    <global-nav-link
+      class="{{ globalNavToggleButton.classes }}"
+      tooltip-content="globalNavToggleButton.tooltipContent"
+      on-click="toggleGlobalNav($event)"
+      icon="'/plugins/kibana/assets/play-circle.svg'"
+      title="globalNavToggleButton.title"
+    ></global-nav-link>
+  </div>
+
+</nav>

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());
+      };
+
+    }
+  };
+});

src/ui/public/chrome/directives/global_nav/global_nav.less

@@ -0,0 +1,44 @@
+
+@import (reference) "~ui/styles/variables";
+
+.global-nav {
+  width: @as-closed-width;
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 0;
+  background-color: @app-links-wrapper-background;
+  overflow: hidden;
+
+  &.is-global-nav-open {
+    width: @as-open-width;
+
+    .app-title {
+      display: inline-block;
+    }
+
+    + .app-wrapper {
+      left: @as-open-width;
+    }
+  }
+
+  .logo-small,
+  .logo {
+    height: 70px;
+    width: @as-open-width;
+    list-style-type: none;
+    &.kibana {
+      background-image: url("~ui/images/kibana.svg");
+      background-position: 6px 10px;
+      background-size: 140px 50px;
+      background-repeat: no-repeat;
+      background-color: #e8488b;
+    }
+  }
+}
+
+  .gloal-nav__bottom-links {
+    position: absolute;
+    bottom: 0;
+  }