Merge pull request #4548 from w33ble/custom-navbar
fix navbar color customization
This commit is contained in:
commit
3580d9a996
|
@ -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([
|
||||
{
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
|
|
4
src/ui/public/chrome/api/angular.js
vendored
4
src/ui/public/chrome/api/angular.js
vendored
|
@ -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();
|
||||
|
|
29
src/ui/public/chrome/api/controls.js
vendored
Normal file
29
src/ui/public/chrome/api/controls.js
vendored
Normal file
|
@ -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;
|
||||
};
|
||||
};
|
|
@ -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];
|
||||
};
|
||||
|
||||
};
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in a new issue