maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Prepare local nav styles for K7 (#29457)

Browse source 
* Breadcrumbs and Title on their own line

- Menu on the left, datepicker on the right

* Fixed up usages of kuiLocalTitle

* Fix alignment if main menu doesn’t exist

* Remove some extraneous classes
This commit is contained in:
Caroline Horn 2019-01-28 22:36:24 -05:00 committed by GitHub
parent dbf5421405
commit 2d334b699c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 220 additions and 186 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
packages/kbn-ui-framework/dist/kui_dark.css vendored
View file

@ -1003,9 +1003,17 @@ main {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding-left: 10px;
padding: 12px 8px;
/* 1 */
height: 100%; }
border-bottom: 1px solid #333;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
background-color: #222; }
.kuiLocalBreadcrumb {
font-size: 14px;
@ -1100,8 +1108,8 @@ main {
/* 1 */
outline: none !important;
/* 2 */
-webkit-box-shadow: 0 0 0 1px #242424, 0 0 0 2px #4DA1C0;
box-shadow: 0 0 0 1px #242424, 0 0 0 2px #4DA1C0;
-webkit-box-shadow: 0 0 0 1px transparent, 0 0 0 2px #4DA1C0;
box-shadow: 0 0 0 1px transparent, 0 0 0 2px #4DA1C0;
/* 3 */
color: #DDD;
/* 1 */ }
@ -1147,8 +1155,8 @@ main {
/* 1 */
outline: none !important;
/* 2 */
-webkit-box-shadow: 0 0 0 1px #242424, 0 0 0 2px #4DA1C0;
box-shadow: 0 0 0 1px #242424, 0 0 0 2px #4DA1C0;
-webkit-box-shadow: 0 0 0 1px transparent, 0 0 0 2px #4DA1C0;
box-shadow: 0 0 0 1px transparent, 0 0 0 2px #4DA1C0;
/* 3 */
color: #DDD;
/* 1 */ }
@ -1170,10 +1178,8 @@ main {
.kuiLocalDropdown {
position: relative;
padding: 10px 10px 14px;
background-color: #242424;
border-bottom: solid 1px #333;
border-top: solid 1px #333;
padding: 10px 8px 14px;
background-color: transparent;
margin-bottom: 10px;
line-height: 20px; }
@ -1308,7 +1314,9 @@ main {
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch; }
align-items: stretch;
padding-top: 8px;
padding-bottom: 8px; }
.kuiLocalMenuItem {
display: -webkit-box;
@ -1319,32 +1327,29 @@ main {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
padding: 0 10px;
padding: 2px 8px;
font-size: 14px;
background-color: transparent;
color: #DDD;
border: 0;
cursor: pointer;
border-right: solid 1px transparent;
border-left: solid 1px transparent; }
border-bottom: solid 2px transparent; }
.kuiLocalMenuItem:hover, .kuiLocalMenuItem:focus {
background-color: #4DA1C0;
color: #242424; }
background-color: rgba(77, 161, 192, 0.15);
text-decoration: underline; }
.kuiLocalMenuItem.kuiLocalMenuItem-isSelected {
background-color: #242424;
border-color: #333;
height: calc(100% + 1px);
z-index: 2;
color: #4DA1C0; }
color: #4DA1C0;
background-color: transparent;
border-color: #4DA1C0;
z-index: 2; }
.kuiLocalMenuItem.kuiLocalMenuItem-isSelected:hover, .kuiLocalMenuItem.kuiLocalMenuItem-isSelected:focus {
color: #4DA1C0; }
text-decoration: none; }
.kuiLocalMenuItem.kuiLocalMenuItem-isDisabled {
opacity: 0.5;
cursor: not-allowed; }
.kuiLocalMenuItem.kuiLocalMenuItem-isDisabled:hover {
background-color: transparent;
color: #DDD; }
text-decoration: none; }
.kuiLocalMenuItem__icon {
margin-right: 5px;
@ -1390,11 +1395,7 @@ main {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
min-height: 29px;
/* 1 */
line-height: 29px;
/* 1 */ }
justify-content: space-between; }
.kuiLocalNavRow__section {
display: -webkit-box;
@ -1414,7 +1415,7 @@ main {
* of this container using padding.
*/
.kuiLocalNavRow--secondary {
padding: 0 10px;
padding: 0 8px;
/* 1 */
-webkit-box-align: start;
-webkit-align-items: flex-start;
@ -1422,11 +1423,6 @@ main {
align-items: flex-start;
/* 1 */ }
.kuiLocalNav__popover {
height: 100%; }
.kuiLocalNav__popover .kuiLocalNav__popoverAnchor {
height: 100%; }
.kuiLocalSearch {
display: -webkit-box;
display: -webkit-flex;
@ -1632,9 +1628,21 @@ main {
-ms-flex-align: center;
align-items: center;
height: 100%;
padding-left: 10px;
padding: 12px 8px;
font-size: 14px;
font-weight: bold; }
font-weight: bold;
border-bottom: 1px solid #333;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
background-color: #222; }
.kuiLocalTitle:empty {
padding: 0;
display: none; }
/**
* 1. Allow class to be applied to `ul` and `ol` elements

82
packages/kbn-ui-framework/dist/kui_light.css vendored
View file

@ -1003,9 +1003,17 @@ main {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding-left: 10px;
padding: 12px 8px;
/* 1 */
height: 100%; }
border-bottom: 1px solid #D3DAE6;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
background-color: #FFF; }
.kuiLocalBreadcrumb {
font-size: 14px;
@ -1100,8 +1108,8 @@ main {
/* 1 */
outline: none !important;
/* 2 */
-webkit-box-shadow: 0 0 0 1px #F5F7FA, 0 0 0 2px #006BB4;
box-shadow: 0 0 0 1px #F5F7FA, 0 0 0 2px #006BB4;
-webkit-box-shadow: 0 0 0 1px transparent, 0 0 0 2px #006BB4;
box-shadow: 0 0 0 1px transparent, 0 0 0 2px #006BB4;
/* 3 */
color: #2D2D2D;
/* 1 */ }
@ -1147,8 +1155,8 @@ main {
/* 1 */
outline: none !important;
/* 2 */
-webkit-box-shadow: 0 0 0 1px #F5F7FA, 0 0 0 2px #006BB4;
box-shadow: 0 0 0 1px #F5F7FA, 0 0 0 2px #006BB4;
-webkit-box-shadow: 0 0 0 1px transparent, 0 0 0 2px #006BB4;
box-shadow: 0 0 0 1px transparent, 0 0 0 2px #006BB4;
/* 3 */
color: #2D2D2D;
/* 1 */ }
@ -1170,10 +1178,8 @@ main {
.kuiLocalDropdown {
position: relative;
padding: 10px 10px 14px;
background-color: #F5F7FA;
border-bottom: solid 1px #D3DAE6;
border-top: solid 1px #D3DAE6;
padding: 10px 8px 14px;
background-color: transparent;
margin-bottom: 10px;
line-height: 20px; }
@ -1308,7 +1314,9 @@ main {
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch; }
align-items: stretch;
padding-top: 8px;
padding-bottom: 8px; }
.kuiLocalMenuItem {
display: -webkit-box;
@ -1319,32 +1327,29 @@ main {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
padding: 0 10px;
padding: 2px 8px;
font-size: 14px;
background-color: transparent;
color: #2D2D2D;
border: 0;
cursor: pointer;
border-right: solid 1px transparent;
border-left: solid 1px transparent; }
border-bottom: solid 2px transparent; }
.kuiLocalMenuItem:hover, .kuiLocalMenuItem:focus {
background-color: #006BB4;
color: #F5F7FA; }
background-color: rgba(0, 107, 180, 0.15);
text-decoration: underline; }
.kuiLocalMenuItem.kuiLocalMenuItem-isSelected {
background-color: #F5F7FA;
border-color: #D3DAE6;
height: calc(100% + 1px);
z-index: 2;
color: #006BB4; }
color: #006BB4;
background-color: transparent;
border-color: #006BB4;
z-index: 2; }
.kuiLocalMenuItem.kuiLocalMenuItem-isSelected:hover, .kuiLocalMenuItem.kuiLocalMenuItem-isSelected:focus {
color: #006BB4; }
text-decoration: none; }
.kuiLocalMenuItem.kuiLocalMenuItem-isDisabled {
opacity: 0.5;
cursor: not-allowed; }
.kuiLocalMenuItem.kuiLocalMenuItem-isDisabled:hover {
background-color: transparent;
color: #2D2D2D; }
text-decoration: none; }
.kuiLocalMenuItem__icon {
margin-right: 5px;
@ -1390,11 +1395,7 @@ main {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
min-height: 29px;
/* 1 */
line-height: 29px;
/* 1 */ }
justify-content: space-between; }
.kuiLocalNavRow__section {
display: -webkit-box;
@ -1414,7 +1415,7 @@ main {
* of this container using padding.
*/
.kuiLocalNavRow--secondary {
padding: 0 10px;
padding: 0 8px;
/* 1 */
-webkit-box-align: start;
-webkit-align-items: flex-start;
@ -1422,11 +1423,6 @@ main {
align-items: flex-start;
/* 1 */ }
.kuiLocalNav__popover {
height: 100%; }
.kuiLocalNav__popover .kuiLocalNav__popoverAnchor {
height: 100%; }
.kuiLocalSearch {
display: -webkit-box;
display: -webkit-flex;
@ -1632,9 +1628,21 @@ main {
-ms-flex-align: center;
align-items: center;
height: 100%;
padding-left: 10px;
padding: 12px 8px;
font-size: 14px;
font-weight: bold; }
font-weight: bold;
border-bottom: 1px solid #D3DAE6;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
background-color: #FFF; }
.kuiLocalTitle:empty {
padding: 0;
display: none; }
/**
* 1. Allow class to be applied to `ul` and `ol` elements

4
packages/kbn-ui-framework/src/components/local_nav/_index.scss
View file

@ -5,7 +5,7 @@ $localNavButtonTextColor: $kuiTextColor;
$localNavButtonTextColor-isHover: $kuiColorLightestGray;
$localNavButtonBackgroundColor: transparent;
$localNavButtonBackgroundColor-isHover: $kuiColorBlue;
$localNavButtonBackgroundColor-isSelected: $kuiColorLightestGray;
$localNavButtonBackgroundColor-isSelected: transparent;
$localNavBreadcrumbDelimiterColor: $euiBorderColor;
$localSearchBackgroundColor: $euiColorGhost;
$localSearchBorderColor-isInvalid: $euiColorDanger;
@ -22,7 +22,7 @@ $localDatePickerCellSelectedBackgroundColor: $euiColorDarkShade;
$localDatePickerCellSelectedTextColor: $euiTextColor;
// Spacing
$localNavSideSpacing: 10px;
$localNavSideSpacing: $euiSizeS;
$localSearchHeight: 32px;
$localDatePickerBottomSpacing: 4px;
$localDatePickerButtonPadding: 3px 6px;

7
packages/kbn-ui-framework/src/components/local_nav/_local_breadcrumbs.scss
View file

@ -5,8 +5,11 @@
.kuiLocalBreadcrumbs {
display: flex;
align-items: center;
padding-left: $localNavSideSpacing; /* 1 */
height: 100%;
padding: ($localNavSideSpacing * 1.5) $localNavSideSpacing; /* 1 */
border-bottom: $euiBorderThin;
flex-grow: 1;
flex-basis: 100%;
background-color: $euiColorEmptyShade;
}
.kuiLocalBreadcrumb {

2
packages/kbn-ui-framework/src/components/local_nav/_local_dropdown.scss
View file

@ -2,8 +2,6 @@
position: relative;
padding: 10px $localNavSideSpacing 14px;
background-color: $localDropdownBackgroundColor;
border-bottom: solid 1px $kuiColorLightGray;
border-top: solid 1px $kuiColorLightGray;
margin-bottom: 10px;
line-height: 20px;
}

25
packages/kbn-ui-framework/src/components/local_nav/_local_menu.scss
View file

@ -1,35 +1,34 @@
.kuiLocalMenu {
display: flex;
align-items: stretch;
padding-top: $euiSizeS;
padding-bottom: $euiSizeS;
}
.kuiLocalMenuItem {
display: flex;
align-items: center;
height: 100%;
padding: 0 $localNavSideSpacing;
padding: ($localNavSideSpacing * .25) $localNavSideSpacing;
font-size: $kuiFontSize;
background-color: $localNavButtonBackgroundColor;
color: $localNavButtonTextColor;
border: 0;
cursor: pointer;
border-right: solid 1px transparent;
border-left: solid 1px transparent;
border-bottom: solid 2px transparent;
&:hover, &:focus {
background-color: $localNavButtonBackgroundColor-isHover;
color: $localNavButtonTextColor-isHover;
background-color: rgba($localNavButtonBackgroundColor-isHover, .15);
text-decoration: underline;
}
&.kuiLocalMenuItem-isSelected {
background-color: $localNavButtonBackgroundColor-isSelected;
border-color: $kuiColorLightGray;
height: calc(100% + 1px); // Cheat the border when opened
z-index: 2;
color: $kuiColorBlue;
background-color: $localNavButtonBackgroundColor-isSelected;
border-color: $euiColorPrimary;
z-index: 2;
&:hover, &:focus {
color: $kuiColorBlue;
text-decoration: none;
}
}
@ -38,8 +37,8 @@
cursor: not-allowed;
&:hover {
background-color: $localNavButtonBackgroundColor;
color: $localNavButtonTextColor;
background-color: transparent;
text-decoration: none;
}
}
}

11
packages/kbn-ui-framework/src/components/local_nav/_local_nav.scss
View file

@ -20,8 +20,6 @@
display: flex;
align-items: stretch;
justify-content: space-between;
min-height: 29px; /* 1 */
line-height: 29px; /* 1 */
}
.kuiLocalNavRow__section {
@ -40,12 +38,3 @@
padding: 0 $localNavSideSpacing; /* 1 */
align-items: flex-start; /* 1 */
}
.kuiLocalNav__popover {
height: 100%;
.kuiLocalNav__popoverAnchor {
height: 100%;
}
}

11
packages/kbn-ui-framework/src/components/local_nav/_local_title.scss
View file

@ -2,7 +2,16 @@
display: flex;
align-items: center;
height: 100%;
padding-left: $localNavSideSpacing;
padding: ($localNavSideSpacing * 1.5) $localNavSideSpacing;
font-size: $kuiFontSize;
font-weight: bold;
border-bottom: $euiBorderThin;
flex-grow: 1;
flex-basis: 100%;
background-color: $euiColorEmptyShade;
&:empty {
padding: 0;
display: none;
}
}

27
src/legacy/core_plugins/kibana/public/context/app.html
View file

@ -1,18 +1,15 @@
<div class="kuiLocalNav" ng-if="!k7design">
<div class="kuiLocalNavRow">
<div class="kuiLocalNavRow__section">
<div
class="kuiLocalTitle"
role="heading"
aria-level="1"
i18n-id="kbn.context.surroundingDocumentsDescription"
i18n-default-message="Surrounding Documents in {indexPatternId}"
i18n-values="{
indexPatternId: contextApp.state.queryParameters.indexPatternId
}"
></div>
</div>
</div>
<div class="kbnTopNav" ng-if="!k7design">
<div
class="kuiLocalTitle"
role="heading"
aria-level="1"
i18n-id="kbn.context.surroundingDocumentsDescription"
i18n-default-message="Surrounding Documents in {indexPatternId}"
i18n-values="{
indexPatternId: contextApp.state.queryParameters.indexPatternId
}"
></div>
<div class="kuiLocalNavRow kuiLocalNavRow--secondary">
<div class="kuiLocalTabs">
<div class="kuiLocalTab kuiLocalTab-isSelected" >

2
src/legacy/core_plugins/kibana/public/dashboard/top_nav/show_options_popover.js
View file

@ -54,8 +54,6 @@ export function showOptionsPopover({
const element = (
<I18nProvider>
<EuiWrappingPopover
className="kuiLocalNav__popover"
anchorClassName="kuiLocalNav__popoverAnchor"
id="popover"
button={anchorElement}
isOpen={true}

8
src/legacy/core_plugins/kibana/public/discover/index.html
View file

@ -5,8 +5,8 @@
<div data-transclude-slots>
<!-- Breadcrumbs. -->
<div data-transclude-slot="topLeftCorner" class="kuiLocalBreadcrumbs">
<h1 tabindex="0" id="kui_local_breadcrumb" class="kuiLocalBreadcrumb">
<span ng-show="opts.savedSearch.id" class="kuiLocalBreadcrumb__emphasis">
<h1 tabindex="0" id="kui_local_breadcrumb" class="kuiLocalBreadcrumb" ng-if="opts.savedSearch.id">
<span class="kuiLocalBreadcrumb__emphasis">
<span data-test-subj="discoverCurrentQuery" ng-bind="opts.savedSearch.lastSavedTitle" ng-hide="k7design"></span>
<span
id="reload_saved_search"
@ -17,13 +17,15 @@
class="kuiIcon fa-undo small"
></span>&nbsp;
</span>
</h1>
<div class="kuiLocalBreadcrumb">
<span data-test-subj="discoverQueryHits" class="kuiLocalBreadcrumb__emphasis">{{(hits || 0) | number:0}}</span>
<span
i18n-id="kbn.discover.hitsPluralTitle"
i18n-default-message="{hits, plural, one {hit} other {hits}}"
i18n-values="{ hits }"
></span>
</h1>
</div>
</div>
<!-- Search. -->

20
src/legacy/core_plugins/kibana/public/doc/index.html
View file

@ -1,14 +1,10 @@
<div ng-controller="doc" class="app-container">
<div class="kuiLocalNav" ng-if="!k7design">
<div class="kuiLocalNavRow">
<div class="kuiLocalNavRow__section">
<div
class="kuiLocalTitle"
i18n-id="kbn.doc.singleDocumentTitle"
i18n-default-message="Single Document"
></div>
</div>
</div>
<div class="kbnTopNav" ng-if="!k7design">
<div
class="kuiLocalTitle"
i18n-id="kbn.doc.singleDocumentTitle"
i18n-default-message="Single Document"
></div>
<div class="kuiLocalNavRow kuiLocalNavRow--secondary">
<div class="kuiLocalTabs">
<div
@ -42,7 +38,7 @@
<div
class="kuiInfoPanelBody__message"
i18n-id="kbn.doc.couldNotFindDocumentsDescription"
i18n-default-message="Unfortunately I could not find any documents matching that id, of that type, in that index. I tried really hard. I wanted it to be there. Sometimes I swear documents grow legs and just walk out of the index. Sneaky. I wish I could offer some advice here, something to make you feel better"
i18n-default-message="Unfortunately I could not find any documents matching that id, of that type, in that index. I tried really hard. I wanted it to be there. Sometimes I swear documents grow legs and just walk out of the index. Sneaky. I wish I could offer some advice here, something to make you feel better"
></div>
</div>
</div>
@ -63,7 +59,7 @@
<div
class="kuiInfoPanelBody__message"
i18n-id="kbn.doc.somethingWentWrongDescription"
i18n-default-message="Oh no. Something went very wrong. Its not just that I couldn't find your document, I couldn't even try. The index was missing, or the type. Go check out Elasticsearch, something isn't quite right here."
i18n-default-message="Oh no. Something went very wrong. Its not just that I couldn't find your document, I couldn't even try. The index was missing, or the type. Go check out Elasticsearch, something isn't quite right here."
></div>
</div>
</div>

5
src/legacy/core_plugins/kibana/public/visualize/editor/editor.html
View file

@ -6,6 +6,7 @@
<!-- Breadcrumbs. -->
<bread-crumbs
data-transclude-slot="topLeftCorner"
class="fullWidth"
page-title="getVisualizationTitle()"
use-links="true"
omit-current-page="true"
@ -18,7 +19,7 @@
ng-show="chrome.getVisible()"
class="fullWidth"
>
<div ng-if="vis.type.requiresSearch && state.linked">
<div ng-if="vis.type.requiresSearch && state.linked" class="kuiVerticalRhythmSmall">
{{ ::'kbn.visualize.linkedToSearchInfoText' | i18n: { defaultMessage: 'Linked to Saved Search' } }}
<a
href="#/discover/{{savedVis.savedSearch.id}}"
@ -36,7 +37,7 @@
</a>
</div>
<div ng-if="vis.type.requiresSearch && vis.type.options.showQueryBar" class="fullWidth">
<div ng-if="vis.type.requiresSearch && vis.type.options.showQueryBar" class="fullWidth kuiVerticalRhythmSmall">
<query-bar
query="state.query"
app-name="'visualize'"

1
src/legacy/core_plugins/kibana/public/visualize/wizard/step_2.html
View file

@ -5,6 +5,7 @@
<!-- Breadcrumbs. -->
<bread-crumbs
data-transclude-slot="topLeftCorner"
class="fullWidth"
use-links="true"
omit-current-page="true"
page-title="::'kbn.visualize.newVisWizard.pageTitle' | i18n: { defaultMessage: 'Choose search source' }"

4
src/legacy/core_plugins/timelion/public/index.html
View file

@ -8,11 +8,9 @@
<span ng-show="opts.savedSheet.id && !k7design">
{{opts.savedSheet.lastSavedTitle}}
&nbsp;
<span class="fa fa-bolt" ng-click="showStats = !showStats"></span>
&nbsp;
</span>
<span class="timApp__stats" ng-show="stats && (showStats || k7design)">
<span class="timApp__stats" ng-show="stats">
<span
i18n-id="timelion.topNavMenu.statsDescription"
i18n-default-message="Query Time {queryTime}ms / Processing Time {processingTime}ms"

2
src/legacy/core_plugins/timelion/public/partials/sheet_options.html
View file

@ -5,7 +5,7 @@
i18n-default-message="Sheet options"
></h2>
<div>
<div class="clearfix">
<div class="form-group col-md-6">
<label
for="timelionColCount"

2
src/ui/public/_index.scss
View file

@ -20,6 +20,8 @@
@import './error_url_overflow/index';
@import './field_editor/index';
@import './inspector/index';
@import './kbn_top_nav/index';
// @import './timepicker/index';
@import './markdown/index';
@import './notify/index';
@import './partials/index';

8
src/ui/public/chrome/directives/header_global_nav/_header_global_nav.scss
View file

@ -6,23 +6,23 @@
}
.header-global-wrapper + .app-wrapper:not(.hidden-chrome) {
top: 50px;
top: 48px;
left: 0;
// HOTFIX: Temporary fix for flyouts not inside portals
// SASSTODO: Find an actual solution
.euiFlyout {
top: 50px;
top: 48px;
}
}
// Mobile header is smaller
@include euiBreakpoint('xs','s') {
.header-global-wrapper + .app-wrapper {
top: 50px;
top: 36px;
.euiFlyout {
top: 50px;
top: 36px;
}
}
}

1
src/ui/public/kbn_top_nav/_index.scss Normal file
View file

@ -0,0 +1 @@
@import './kbn_top_nav';

31
src/ui/public/kbn_top_nav/_kbn_top_nav.scss Normal file
View file

@ -0,0 +1,31 @@
/**
* 1. Make sure the timepicker is always one right, even if the main menu doesn't exist
*/
.kbnTopNav {
background-color: $euiColorLightestShade;
border-bottom: $euiBorderThin;
}
.kbnTopNav__row {
display: flex;
align-items: center;
justify-content: flex-end; /* 1 */
}
.kbnTopNav__mainMenu {
flex-grow: 1; /* 1 */
&:empty {
// Make sure the area doesn't take up any space if it is empty
padding: 0;
}
.kuiLocalMenuItem {
font-weight: $euiFontWeightMedium;
}
.kuiLocalMenuItem:not(.kuiLocalMenuItem-isDisabled) {
color: $euiLinkColor;
}
}

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

@ -1,40 +1,35 @@
<div
class="kuiLocalNav"
class="kbnTopNav"
ng-show="kbnTopNav.isVisible()"
data-test-subj="top-nav"
>
<!-- Top row -->
<div class="kuiLocalNavRow">
<!-- Top left corner slot, e.g. breadcrumbs, title. -->
<div
class="kuiLocalNavRow__section"
data-transclude-slot="topLeftCorner"
></div>
<!-- Top row slot, e.g. breadcrumbs, title. -->
<div data-transclude-slot="topLeftCorner"></div>
<div class="kbnTopNav__row">
<!-- Right-side: menu -->
<div class="kuiLocalNavRow__section">
<div class="kuiLocalMenu">
<button
class="kuiLocalMenuItem"
ng-repeat="menuItem in kbnTopNav.menuItems"
aria-label="{{::menuItem.description}}"
aria-haspopup="{{!menuItem.hasFunction}}"
aria-expanded="{{kbnTopNav.isCurrent(menuItem.key)}}"
aria-disabled="{{menuItem.disableButton()}}"
ng-class="{'kuiLocalMenuItem-isSelected': kbnTopNav.isCurrent(menuItem.key), 'kuiLocalMenuItem-isDisabled': menuItem.disableButton()}"
ng-click="kbnTopNav.handleClick(menuItem, $event)"
ng-bind="menuItem.label"
tooltip="{{menuItem.tooltip()}}"
tooltip-placement="bottom"
tooltip-popup-delay="400"
tooltip-append-to-body="1"
data-test-subj="{{menuItem.testId}}"
></button>
<!-- Time-picker "menu item" -->
<kbn-global-timepicker></kbn-global-timepicker>
</div>
<div class="kuiLocalMenu kbnTopNav__mainMenu" ng-if="kbnTopNav.menuItems.length">
<button
class="kuiLocalMenuItem"
ng-repeat="menuItem in kbnTopNav.menuItems"
aria-label="{{::menuItem.description}}"
aria-haspopup="{{!menuItem.hasFunction}}"
aria-expanded="{{kbnTopNav.isCurrent(menuItem.key)}}"
aria-disabled="{{menuItem.disableButton()}}"
ng-class="{'kuiLocalMenuItem-isSelected': kbnTopNav.isCurrent(menuItem.key), 'kuiLocalMenuItem-isDisabled': menuItem.disableButton()}"
ng-click="kbnTopNav.handleClick(menuItem, $event)"
ng-bind="menuItem.label"
tooltip="{{menuItem.tooltip()}}"
tooltip-placement="bottom"
tooltip-popup-delay="400"
tooltip-append-to-body="1"
data-test-subj="{{menuItem.testId}}"
></button>
</div>
<!-- Time-picker "menu item" -->
<kbn-global-timepicker></kbn-global-timepicker>
</div>
<!-- Dropdown content, e.g. time-picker. -->

2
src/ui/public/share/show_share_context_menu.tsx
View file

@ -68,8 +68,6 @@ export function showShareContextMenu({
const element = (
<I18nProvider>
<EuiWrappingPopover
className="kuiLocalNav__popover"
anchorClassName="kuiLocalNav__popoverAnchor"
id="sharePopover"
button={anchorElement}
isOpen={true}

2
src/ui/public/styles/bootstrap/variables.less
View file

@ -357,7 +357,7 @@
//##
// Basics of a navbar
@navbar-height: 50px;
@navbar-height: 48px;
@navbar-margin-bottom: @line-height-computed;
@navbar-border-radius: @border-radius-base;
@navbar-padding-horizontal: floor((@grid-gutter-width / 2));

14
x-pack/plugins/graph/public/templates/index.html
View file

@ -4,15 +4,15 @@
<!-- Transcluded elements. -->
<div data-transclude-slots>
<!-- Title. -->
<div data-transclude-slot="topLeftCorner" class="kuiLocalTitle">
<strong
ng-if="!k7design && savedWorkspace.lastSavedTitle"
>{{ savedWorkspace.lastSavedTitle }}</strong>
<strong
ng-if="!k7design && !savedWorkspace.lastSavedTitle"
<div data-transclude-slot="topLeftCorner">
<div class="kuiLocalTitle" ng-if="!k7design">
<strong ng-if="savedWorkspace.lastSavedTitle">{{ savedWorkspace.lastSavedTitle }}</strong>
<strong
ng-if="!savedWorkspace.lastSavedTitle"
i18n-id="xpack.graph.topNavMenu.defaultNewWorkspaceTitle"
i18n-default-message="New Graph Workspace"
></strong>
></strong>
</div>
</div>
<div data-transclude-slot="bottomRow" class="gphGraph__flexGroup">