github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

Backport #8350

Browse source 
[refactor] extract tab styles from navbar to "localTabs"

While moving the kbn-dev-tools-app directive to use kbn-top-nav, it became obvious that a change to the tab styles was necessary. Unfortunately they were all tied closely to the navbar-static-top class. Chatted with CJ and he already had a new version of the tabs running in the styleguide, so I just ported them over here and replaced our uses with the new ones.

(cherry picked from commit 7a3262f7ea)
This commit is contained in:
spalger 2016-09-19 15:13:09 -07:00
parent cf14cfcd9c
commit ba05897f63
13 changed files with 79 additions and 111 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/core_plugins/console/public/src/directives/sense_navbar.js
View file

@ -19,7 +19,6 @@ require('ui/modules')
controller: class SenseNavbarController {
constructor($scope, $timeout, $element, Private) {
const KbnTopNavController = Private(KbnTopNavControllerProvider);
$scope.chrome = require('ui/chrome');
this.menu = new KbnTopNavController([
{

1
src/core_plugins/kibana/public/dev_tools/directives/dev_tools_app.js
View file

@ -2,6 +2,7 @@ import uiModules from 'ui/modules';
import devTools from 'ui/registry/dev_tools';
import template from 'plugins/kibana/dev_tools/partials/dev_tools_app.html';
import 'plugins/kibana/dev_tools/styles/dev_tools_app.less';
import 'ui/kbn_top_nav';
uiModules
.get('apps/dev_tools')

25
src/core_plugins/kibana/public/dev_tools/partials/dev_tools_app.html
View file

@ -1,15 +1,16 @@
<div class="dev-tools-app-container app-container">
<nav class="navbar navbar-default navbar-static-top subnav">
<bread-crumbs omit-current-page="true"></bread-crumbs>
<ul class="nav navbar-nav">
<li ng-repeat="item in devTools" ng-class="{active: currentPath === item.url}">
<a class="navbar-link" kbn-href="{{::item.url}}">
{{::item.display}}
</a>
</li>
</ul>
</nav>
<bread-crumbs class="bread-crumbs--navbar" omit-current-page="true"></bread-crumbs>
<kbn-top-nav name="devtools">
<div class="localTabs">
<a
ng-repeat="item in devTools"
class="localTab"
ng-class="{'localTab-isSelected': currentPath === item.url}"
kbn-href="{{::item.url}}"
>
{{::item.display}}
</a>
</div>
</kbn-top-nav>
<div role="main" class="dev-tools-container" ng-transclude></div>
</div>

42
src/core_plugins/kibana/public/management/app.html
View file

@ -1,32 +1,26 @@
<div class="app-container">
<nav class="navbar management-navbar navbar-default navbar-static-top subnav" data-test-subj="managementNav">
<bread-crumbs omit-current-page="true"></bread-crumbs>
<ul class="nav navbar-nav">
<li class="current-page" ng-hide="sectionName">
<bread-crumbs class="bread-crumbs--navbar" omit-current-page="true"></bread-crumbs>
<kbn-top-nav name="management-subnav" data-test-subj="managementNav">
<div class="localTabs">
<span ng-if="!sectionName" class="localTab">
{{::section.display}}
</li>
</span>
<li
<a
ng-if="sectionName"
ng-repeat="item in section.items.inOrder"
ng-class="item.class"
class="localTab"
ng-class="{ 'localTab-isSelected': item.active, 'localTab-disabled': !item.url }"
kbn-href="{{::item.url}}"
data-test-subj="{{::item.name}}"
tooltip="{{::item.tooltip}}"
tooltip-placement="bottom"
tooltip-popup-delay="400"
tooltip-append-to-body="1"
>
<a
class="navbar-link"
ng-class="{ 'is-navbar-nav-link-disabled': !item.url }"
kbn-href="{{::item.url}}"
data-test-subj="{{::item.name}}"
tooltip="{{::item.tooltip}}"
tooltip-placement="bottom"
tooltip-popup-delay="400"
tooltip-append-to-body="1"
>
{{::item.display}}
</a>
</li>
</ul>
</nav>
{{::item.display}}
</a>
</div>
</kbn-top-nav>
<div role="main" class="management-container" ng-transclude></div>
</div>

3
src/core_plugins/kibana/public/management/index.js
View file

@ -13,6 +13,7 @@ import appTemplate from 'plugins/kibana/management/app.html';
import landingTemplate from 'plugins/kibana/management/landing.html';
import chrome from 'ui/chrome/chrome';
import management from 'ui/management';
import 'ui/kbn_top_nav';
uiRoutes
.when('/management', {
@ -41,7 +42,7 @@ uiModules
if ($scope.section) {
$scope.section.items.forEach(item => {
item.class = `#${$location.path()}`.indexOf(item.url) > -1 ? 'active' : undefined;
item.active = `#${$location.path()}`.indexOf(item.url) > -1;
});
}

2
src/ui/public/kbn_top_nav/kbn_top_nav.html
View file

@ -1,4 +1,4 @@
<navbar ng-show="chrome.getVisible()" class="kibana-nav-options">
<navbar ng-show="kbnTopNav.isVisible()" class="kibana-nav-options">
<div ng-transclude></div>
<div class="button-group kibana-nav-actions" role="toolbar">
<button

5
src/ui/public/kbn_top_nav/kbn_top_nav_controller.js
View file

@ -1,5 +1,6 @@
import { capitalize, isArray, isFunction } from 'lodash';
import chrome from 'ui/chrome';
import uiModules from 'ui/modules';
import filterTemplate from 'ui/chrome/config/filter.html';
import intervalTemplate from 'ui/chrome/config/interval.html';
@ -22,6 +23,10 @@ export default function ($compile) {
this.addItems(opts);
}
isVisible() {
return chrome.getVisible();
}
addItems(rawOpts) {
if (!isArray(rawOpts)) rawOpts = [rawOpts];

16
src/ui/public/styles/base.less
View file

@ -217,16 +217,6 @@ a {
.button-variant(@navbar-default-color; @navbar-default-bg; @navbar-default-border);
}
// right section of the main nav base
.navbar-static-top .navbar-right {
font-size: @font-size-small;
.loading-spinner {
color: @navbar-inverse-brand-hover-color;
vertical-align: middle;
}
}
.navbar-timepicker {
> li > a {
padding-left: 7px !important;
@ -315,6 +305,12 @@ table {
//== breadCrumbsTemplate
bread-crumbs {
display: block;
&.bread-crumbs--navbar {
background-color: @navbar-default-bg;
}
ul {
margin: 0;
padding: 8px 10px;

11
src/ui/public/styles/bootstrap/navbar.less
View file

@ -79,7 +79,6 @@
// Undo the collapse side padding for navbars with containers to ensure
// alignment of right-aligned contents.
.navbar-fixed-top &,
.navbar-static-top &,
.navbar-fixed-bottom & {
padding-left: 0;
padding-right: 0;
@ -124,16 +123,6 @@
// Display the navbar across the entirety of the page or fixed it to the top or
// bottom of the page.
// Static top (unfixed, but 100% wide) navbar
.navbar-static-top {
z-index: @zindex-navbar;
border-width: 0 0 1px;
@media (min-width: @grid-float-breakpoint) {
border-radius: 0;
}
}
// Fix the top/bottom navbars when screen real estate supports it
.navbar-fixed-top,
.navbar-fixed-bottom {

1
src/ui/public/styles/bootstrap/theme.less
View file

@ -164,7 +164,6 @@
}
// Undo rounded corners in static and fixed navbars
.navbar-static-top,
.navbar-fixed-top,
.navbar-fixed-bottom {
border-radius: 0;

1
src/ui/public/styles/config.less
View file

@ -3,7 +3,6 @@
.config {
.navbar;
.navbar-default();
.navbar-static-top;
border-bottom: 1px solid;
border-bottom-color: @config-border;

33
src/ui/public/styles/local_tabs.less Normal file
View file

@ -0,0 +1,33 @@
@import (reference) "./variables.less";
.localTabs {
display: flex;
align-items: center;
}
.localTab {
flex: 0 0 auto;
padding: 5px 0 6px;
font-size: 18px;
line-height: 20px;
color: @kibanaGray2;
border-bottom: 2px solid transparent;
background-color: transparent;
text-decoration: none;
&.localTab-disabled {
opacity: 0.5;
cursor: default;
}
&:only-child,
&:hover,
&.localTab-isSelected {
color: @kibanaGray1;
border-bottom-color: @kibanaGray1;
}
}
.localTab + .localTab {
margin-left: 20px;
}

49
src/ui/public/styles/theme.less
View file

@ -17,55 +17,6 @@
border-width: 0;
}
.navbar-static-top {
background-color: @kibanaGray5;
color: @kibanaGray2;
.navbar-brand:hover,
.navbar-brand {
float: none;
color: @kibanaGray2;
font-size: 1em;
background-color: transparent;
padding-top: 8px;
height: 35px;
}
.navbar-nav {
> li > a,
> span {
color: @kibanaGray2;
font-size: 1.5em;
padding: 5px 0 6px 0;
margin: 0 10px;
border-bottom: 2px solid transparent;
}
// singular tabs are treated as titles
> li:only-child > a {
color: @kibanaGray1;
}
// Active, hover state for the getTabs
> .active > a,
> .active > a:hover,
> .active > a:active,
> li > a:active,
> li > a:hover {
color: @kibanaGray1;
background-color: transparent;
border-bottom: 2px solid @kibanaGray1;
}
.is-navbar-nav-link-disabled {
opacity: 0.5;
cursor: default;
&:hover {
border-bottom-color: transparent;
color: @kibanaGray2;
}
}
}
}
.navbar-btn-link {
margin: 0;
border-radius: 0;