From 45ec92dc4b88f55c4a2e5e7f38d18cf4688ffb54 Mon Sep 17 00:00:00 2001
From: spalger <spalger@users.noreply.github.com>
Date: Tue, 26 Jan 2016 12:39:23 -0700
Subject: [PATCH] [chrome/appSwitcher] move app switcher to a sidebar

---
 src/ui/public/chrome/chrome.html              | 74 -------------------
 .../directives/app_switcher/app_switcher.html | 26 +++----
 .../directives/app_switcher/app_switcher.js   |  4 +-
 .../directives/app_switcher/app_switcher.less |  8 +-
 .../directives/kbn_chrome/kbn_chrome.html     |  5 ++
 .../directives/{ => kbn_chrome}/kbn_chrome.js |  9 +--
 .../directives/kbn_chrome/kbn_chrome.less     | 73 ++++++++++++++++++
 7 files changed, 100 insertions(+), 99 deletions(-)
 delete mode 100644 src/ui/public/chrome/chrome.html
 create mode 100644 src/ui/public/chrome/directives/kbn_chrome/kbn_chrome.html
 rename src/ui/public/chrome/directives/{ => kbn_chrome}/kbn_chrome.js (85%)
 create mode 100644 src/ui/public/chrome/directives/kbn_chrome/kbn_chrome.less

diff --git a/src/ui/public/chrome/chrome.html b/src/ui/public/chrome/chrome.html
deleted file mode 100644
index 6e5cccbfdd497..0000000000000
--- a/src/ui/public/chrome/chrome.html
+++ /dev/null
@@ -1,74 +0,0 @@
-<kbn-notifications list="notifList"></kbn-notifications>
-<div class="content" chrome-context >
-  <nav
-    ng-style="::{ background: chrome.getNavBackground() }"
-    ng-class="{ show: chrome.getVisible() }"
-    class="hide navbar navbar-inverse navbar-static-top">
-
-    <!-- Mobile navbar -->
-    <div class="navbar-header">
-      <button ng-click="showCollapsed = !showCollapsed" type="button" class="navbar-toggle">
-        <span class="sr-only">Toggle navigation</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </button>
-      <span class="visible-xs">
-        <span ng-if="chrome.getBrand('title')" class="navbar-brand">{{ chrome.getBrand('title') }}</span>
-        <span ng-if="chrome.getActiveTabTitle()" class="navbar-brand">{{ chrome.getActiveTabTitle() }}</span>
-        <span ng-show="chrome.httpActive.length" class="spinner"></span>
-      </span>
-    </div>
-    <!-- /Mobile navbar -->
-
-    <!-- Full navbar -->
-    <div collapse="!showCollapsed" class="navbar-collapse" kbn-chrome-append-nav-controls>
-      <ul class="nav navbar-nav" role="navigation">
-        <li
-          ng-if="chrome.getBrand('logo')"
-          ng-style="{ 'background': chrome.getBrand('logo') }"
-          aria-label="{{ chrome.getAppTitle() }} Logo"
-          class="logo hidden-sm"
-          ></li>
-
-        <li
-          ng-if="chrome.getBrand('smallLogo')"
-          ng-style="{ 'background': chrome.getBrand('smallLogo') }"
-          aria-label="{{ chrome.getAppTitle() }} Logo"
-          class="logo-small visible-sm hidden-xs"
-          ></li>
-
-        <li ng-if="chrome.getBrand('title')" class="navbar-brand">{{ chrome.getBrand('title') }}</li>
-
-        <li ng-repeat="tab in chrome.getTabs()" ng-class="{ active: tab.active }">
-          <a ng-href="{{ tab.href() }}" ng-style="{ 'border-bottom-color': tab.activeIndicatorColor }">
-            {{ tab.title }}
-          </a>
-        </li>
-
-        <li class="to-body" ng-class="{ active: appSwitcherTemplate.is('switcher') }" ng-if="chrome.getShowAppsLink()">
-          <a ng-click="appSwitcherTemplate.toggle('switcher')">
-            <i class="fa fa-th" alt="Show app switcher"></i>
-          </a>
-        </li>
-      </ul>
-    </div>
-    <!-- /Full navbar -->
-  </nav>
-
-  <!-- TODO: These config dropdowns shouldn't be hard coded -->
-  <config
-    config-template="appSwitcherTemplate"
-    config-object="chrome"
-    config-close="appSwitcherTemplate.close">
-  </config>
-
-  <config
-    ng-show="timefilter.enabled"
-    config-template="pickerTemplate"
-    config-object="timefilter"
-    config-close="pickerTemplate.close">
-  </config>
-
-  <div class="application" ng-class="'tab-' + chrome.getActiveTabId('-none-') + ' ' + chrome.getApplicationClasses()" ng-view></div>
-</div>
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 89ae849628bc3..6c4ebc2a2127c 100644
--- a/src/ui/public/chrome/directives/app_switcher/app_switcher.html
+++ b/src/ui/public/chrome/directives/app_switcher/app_switcher.html
@@ -1,18 +1,16 @@
-<div class="app-links">
-  <div
-    class="app-link"
-    ng-repeat="link in switcher.getNavLinks()"
-    ng-class="{ active: link.active }">
+<div
+  class="app-link"
+  ng-repeat="link in switcher.getNavLinks()"
+  ng-class="{ active: link.active }">
 
-    <a
-      ng-click="switcher.ensureNavigation($event, link)"
-      ng-href="{{ link.active ? link.url : (link.lastSubUrl || link.url) }}"
-      data-test-subj="appLink">
+  <a
+    ng-click="switcher.ensureNavigation($event, link)"
+    ng-href="{{ link.active ? link.url : (link.lastSubUrl || link.url) }}"
+    data-test-subj="appLink">
 
-      <div ng-if="link.icon" ng-style="{ 'background-image': 'url(../' + link.icon + ')' }" class="app-icon"></div>
-      <div ng-if="!link.icon" class="app-icon app-icon-missing">{{ link.title[0] }}</div>
+    <div ng-if="link.icon" ng-style="{ 'background-image': 'url(../' + link.icon + ')' }" class="app-icon"></div>
+    <div ng-if="!link.icon" class="app-icon app-icon-missing">{{ link.title[0] }}</div>
 
-      <div class="app-title">{{ link.title }}</div>
-    </a>
-  </div>
+    <div class="app-title">{{ link.title }}</div>
+  </a>
 </div>
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 0ee4e69a9afc3..c3db30c922379 100644
--- a/src/ui/public/chrome/directives/app_switcher/app_switcher.js
+++ b/src/ui/public/chrome/directives/app_switcher/app_switcher.js
@@ -1,7 +1,7 @@
 var parse = require('url').parse;
 var bindKey = require('lodash').bindKey;
 
-require('../app_switcher/app_switcher.less');
+require('./app_switcher.less');
 var DomLocationProvider = require('ui/domLocation');
 
 require('ui/modules')
@@ -39,7 +39,7 @@ require('ui/modules')
     };
   }];
 })
-.directive('appSwitcher', function () {
+.directive('kbnAppSwitcher', function () {
   return {
     restrict: 'E',
     template: require('./app_switcher.html'),
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 95ac50baa310c..3f42fc38b02fd 100644
--- a/src/ui/public/chrome/directives/app_switcher/app_switcher.less
+++ b/src/ui/public/chrome/directives/app_switcher/app_switcher.less
@@ -3,8 +3,10 @@
 @app-icon-size: 48px;
 @app-icon-padding: 10px;
 
-.app-links {
-  text-align: justify;
+kbn-app-switcher {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 
   .app-link {
     display: inline-block;
@@ -52,7 +54,5 @@
         text-decoration: underline;
       }
     }
-
   }
-
 }
diff --git a/src/ui/public/chrome/directives/kbn_chrome/kbn_chrome.html b/src/ui/public/chrome/directives/kbn_chrome/kbn_chrome.html
new file mode 100644
index 0000000000000..048f9420c7124
--- /dev/null
+++ b/src/ui/public/chrome/directives/kbn_chrome/kbn_chrome.html
@@ -0,0 +1,5 @@
+<kbn-notifications list="notifList"></kbn-notifications>
+<div class="content">
+  <kbn-app-switcher></kbn-app-switcher>
+  <kbn-app-container ng-view></kbn-app-container>
+</div>
diff --git a/src/ui/public/chrome/directives/kbn_chrome.js b/src/ui/public/chrome/directives/kbn_chrome/kbn_chrome.js
similarity index 85%
rename from src/ui/public/chrome/directives/kbn_chrome.js
rename to src/ui/public/chrome/directives/kbn_chrome/kbn_chrome.js
index 363a65a8e2768..0b9ef844859bc 100644
--- a/src/ui/public/chrome/directives/kbn_chrome.js
+++ b/src/ui/public/chrome/directives/kbn_chrome/kbn_chrome.js
@@ -2,6 +2,8 @@ import $ from 'jquery';
 
 import UiModules from 'ui/modules';
 import ConfigTemplate from 'ui/ConfigTemplate';
+import kbnChromeHtml from './kbn_chrome.html';
+import './kbn_chrome.less';
 
 export default function (chrome, internals) {
 
@@ -10,8 +12,8 @@ export default function (chrome, internals) {
   .directive('kbnChrome', function ($rootScope) {
     return {
       template($el) {
-        const $content = $(require('ui/chrome/chrome.html'));
-        const $app = $content.find('.application');
+        const $content = $(kbnChromeHtml);
+        const $app = $content.find('kbn-app-container');
 
         if (internals.rootController) {
           $app.attr('ng-controller', internals.rootController);
@@ -46,9 +48,6 @@ export default function (chrome, internals) {
         // and some local values
         $scope.httpActive = $http.pendingRequests;
         $scope.notifList = require('ui/notify')._notifs;
-        $scope.appSwitcherTemplate = new ConfigTemplate({
-          switcher: '<app-switcher></app-switcher>'
-        });
 
         return chrome;
       }
diff --git a/src/ui/public/chrome/directives/kbn_chrome/kbn_chrome.less b/src/ui/public/chrome/directives/kbn_chrome/kbn_chrome.less
new file mode 100644
index 0000000000000..6f99c1fffe3f8
--- /dev/null
+++ b/src/ui/public/chrome/directives/kbn_chrome/kbn_chrome.less
@@ -0,0 +1,73 @@
+@import (reference) "~ui/styles/variables";
+
+@app-icon-size: 48px;
+@app-icon-padding: 10px;
+
+body[kbn-chrome] {
+  > .content {
+    display: flex;
+    flex-direction: row;
+    overflow: hidden;
+
+    kbn-app-container {
+      display: flex;
+      flex: 1 1 auto;
+      flex-direction: column;
+    }
+
+    kbn-app-switcher {
+      flex: 0 0 auto;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .app-link {
+        display: inline-block;
+        vertical-align: top;
+        text-align: left;
+        width: @app-icon-size + (@app-icon-padding * 2);
+        margin: 0px 10px;
+        padding: @app-icon-padding;
+        border-radius: @border-radius-base;
+
+        .app-icon {
+          display: block;
+          height: @app-icon-size;
+          width: @app-icon-size;
+          background-position: center;
+          background-size: contain;
+          border-radius: @border-radius-base;
+          background-color: @gray-light;
+          width: 100%;
+
+          &-missing {
+            text-align: center;
+            font-size: 2.7em;
+            font-weight: bold;
+            font-family: @font-family-sans-serif;
+            color: #fff;
+          }
+        }
+
+        .app-title {
+          color: @text-color;
+          font-size: 0.9em;
+          width: 100%;
+          text-align: center;
+          margin-top: 3px;
+        }
+
+        &:hover .app-title {
+          text-decoration: underline;
+        }
+
+        &.active {
+          background: @gray-lighter;
+          .app-title {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+  }
+}