Merge pull request #4548 from w33ble/custom-navbar

fix navbar color customization

src/plugins/appSwitcher/public/appSwitcher.js

@@ -3,7 +3,10 @@ require('plugins/appSwitcher/appSwitcher.less');
 var kibanaLogoUrl = require('ui/images/kibana.png');
 
 require('ui/chrome')
-.setLogo('url(' + kibanaLogoUrl + ') left no-repeat', true)
+.setBrand({
+  'logo': 'url(' + kibanaLogoUrl + ') left no-repeat',
+  'smallLogo': 'url(' + kibanaLogoUrl + ') left no-repeat'
+})
 .setShowAppsLink(false)
 .setTabs([
   {

src/plugins/kibana/public/dashboard/components/panel/panel.html

@@ -2,10 +2,10 @@
   <div class="panel-heading">
     <span class="panel-title">{{savedObj.title}}</span>
     <div class="btn-group">
-      <a aria-label="Edit" ng-show="!chrome.embedded && editUrl" ng-href="{{editUrl}}">
+      <a aria-label="Edit" ng-show="chrome.getVisible() && editUrl" ng-href="{{editUrl}}">
         <i aria-hidden="true" class="fa fa-pencil"></i>
       </a>
-      <a aria-label="Remove" ng-show="!chrome.embedded" ng-click="remove()">
+      <a aria-label="Remove" ng-show="chrome.getVisible()" ng-click="remove()">
         <i aria-hidden="true" class="fa fa-times"></i>
       </a>
     </div>

src/plugins/kibana/public/dashboard/index.html

@@ -1,5 +1,5 @@
 <div dashboard-app class="app-container dashboard-container">
-  <navbar ng-show="!chrome.embedded">
+  <navbar ng-show="chrome.getVisible()">
     <span class="name" ng-if="dash.id" bindonce bo-bind="dash.title" tooltip="{{dash.title}}"></span>
 
     <form name="queryInput"

src/plugins/kibana/public/kibana.js

@@ -12,7 +12,10 @@ require('ui/routes')
 });
 
 require('ui/chrome')
-.setLogo('url(' + kibanaLogoUrl + ') left no-repeat', true)
+.setBrand({
+  'logo': 'url(' + kibanaLogoUrl + ') left no-repeat',
+  'smallLogo': 'url(' + kibanaLogoUrl + ') left no-repeat'
+})
 .setNavBackground('#222222')
 .setTabDefaults({
   resetWhenActive: true,

src/plugins/kibana/public/visualize/editor/editor.html

@@ -1,6 +1,6 @@
 <div ng-controller="VisEditor" class="vis-editor vis-type-{{ vis.type.name }}">
 
-  <navbar ng-if="!chrome.embedded">
+  <navbar ng-if="chrome.getVisible()">
     <div class="fill bitty-modal-container">
       <div ng-if="vis.type.requiresSearch && $state.linked && !unlinking"
         ng-dblclick="unlink()"
@@ -116,9 +116,8 @@
     </div>
   </navbar>
 
-
   <config
-    ng-if="!chrome.embedded"
+    ng-if="chrome.getVisible()"
     config-template="configTemplate"
     config-object="conf">
   </config>
@@ -127,9 +126,9 @@
 
   <div class="vis-editor-content">
 
-    <vis-editor-sidebar class="vis-editor-sidebar" ng-if="!chrome.embedded"></vis-editor-sidebar>
+    <vis-editor-sidebar class="vis-editor-sidebar" ng-if="chrome.getVisible()"></vis-editor-sidebar>
 
-    <div class="vis-editor-canvas" ng-class="{ embedded: chrome.embedded }">
+    <div class="vis-editor-canvas" ng-class="{ embedded: !chrome.getVisible() }">
       <div class="visualize-info" ng-if="savedVis.id">
         <div class="visualize-info-tab">
           <span bindonce bo-bind="savedVis.title"></span>

src/ui/public/chrome/api/angular.js

@@ -43,10 +43,10 @@ module.exports = function (chrome, internals) {
         controller: function ($scope, $rootScope, $location, $http) {
 
           // are we showing the embedded version of the chrome?
-          chrome.embedded = Boolean($location.search().embed);
+          chrome.setVisible(!Boolean($location.search().embed));
 
           // listen for route changes, propogate to tabs
-          var onRouteChange = _.bindKey(internals.tabs, 'consumeRouteUpdate', $location, !chrome.embedded);
+          var onRouteChange = _.bindKey(internals.tabs, 'consumeRouteUpdate', $location, chrome.getVisible());
           $rootScope.$on('$routeChangeSuccess', onRouteChange);
           $rootScope.$on('$routeUpdate', onRouteChange);
           onRouteChange();

src/ui/public/chrome/api/controls.js

@@ -0,0 +1,29 @@
+var _ = require('lodash');
+
+module.exports = function (chrome, internals) {
+  /**
+   * ui/chrome Controls API
+   *
+   *   Exposes controls for the Kibana chrome
+   *
+   *   Visible
+   *     determines if the Kibana chrome should be displayed
+   */
+
+  /**
+   * @param {boolean} display - should the chrome be displayed
+   * @return {chrome}
+   */
+  chrome.setVisible = function (display) {
+    internals.visible = Boolean(display);
+    return chrome;
+  };
+
+  /**
+   * @return {boolean} - display state of the chrome
+   */
+  chrome.getVisible = function () {
+    if (_.isUndefined(internals.visible)) return true;
+    return internals.visible;
+  };
+};

src/ui/public/chrome/api/theme.js

@@ -1,7 +1,6 @@
 var _ = require('lodash');
 
 module.exports = function (chrome, internals) {
-
   /**
    * ui/chrome Theme API
    *
@@ -36,35 +35,29 @@ module.exports = function (chrome, internals) {
   };
 
   /**
-   * @param {string} logo - css background value
-   * @param {string|bool} [smallLogo] - css background value, true to reuse the regular logo
+   * @param {string|object} item - brand key to set, or object to apply
+   * @param {mixed} val - value to put on the brand item
    * @return {chrome}
    */
-  chrome.setLogo = function (logo, smallLogo) {
-    if (smallLogo === true) {
-      smallLogo = logo;
+  chrome.setBrand = function (item, val) {
+    internals.brand = internals.brand || {};
+
+    // allow objects to be passed in
+    if (_.isPlainObject(item)) {
+      internals.brand = _.clone(item);
+    } else {
+      internals.brand[item] = val;
     }
 
-    chrome.logo = logo;
-    chrome.smallLogo = smallLogo;
-
-    return chrome;
-  };
-
-  /**
-   * @param {string} val - the text to display
-   * @return {chrome}
-   */
-  chrome.setBrand = function (val) {
-    internals.brand = val;
     return chrome;
   };
 
   /**
    * @return {string} - the brand text
    */
-  chrome.getBrand = function () {
-    return internals.brand;
+  chrome.getBrand = function (item) {
+    if (!internals.brand) return;
+    return internals.brand[item];
   };
 
 };

src/ui/public/chrome/chrome.html

@@ -1,8 +1,8 @@
 <kbn-notifications list="notifList"></kbn-notifications>
 <div class="content" style="display: none;" chrome-context >
   <nav
-    ng-style="{ background: chrome.navBackground }"
-    ng-class="{ show: !chrome.embedded }"
+    ng-style="{ background: chrome.getNavBackground() }"
+    ng-class="{ show: chrome.getVisible() }"
     bindonce
     class="hide navbar navbar-inverse navbar-static-top">
 
@@ -15,7 +15,7 @@
         <span class="icon-bar"></span>
       </button>
       <span class="visible-xs">
-        <span ng-if="chrome.getBrand()" class="navbar-brand">{{ chrome.getBrand() }}</span>
+        <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>
@@ -26,20 +26,20 @@
     <div collapse="!showCollapsed" class="navbar-collapse">
       <ul class="nav navbar-nav" role="navigation">
         <li
-          ng-if="chrome.logo"
-          ng-style="{ 'background': chrome.logo }"
+          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.smallLogo"
-          ng-style="{ 'background': chrome.smallLogo }"
+          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()" class="navbar-brand">{{ chrome.getBrand() }}</li>
+        <li ng-if="chrome.getBrand('title')" class="navbar-brand">{{ chrome.getBrand('title') }}</li>
 
         <li ng-if="chrome.getShowAppsLink()">
           <a href="/apps"><i class="fa fa-th" alt="Go to app switcher"></i></a>

src/ui/public/chrome/chrome.js

@@ -32,6 +32,7 @@ $('<link>').attr({
 
 require('./api/apps')(chrome, internals);
 require('./api/angular')(chrome, internals);
+require('./api/controls')(chrome, internals);
 require('./api/tabs')(chrome, internals);
 require('./api/template')(chrome, internals);
 require('./api/theme')(chrome, internals);