diff --git a/src/ui/public/_index.scss b/src/ui/public/_index.scss index 771f4b85e2b2..234eaa53e96f 100644 --- a/src/ui/public/_index.scss +++ b/src/ui/public/_index.scss @@ -11,6 +11,13 @@ @import './doc_viewer/index'; @import './inspector/index'; @import './markdown/index'; +@import './accessibility/index'; +@import './chrome/index'; +@import './error_allow_explicit_index/index'; +@import './error_auto_create_index/index'; +@import './error_url_overflow/index'; +@import './field_editor/index'; +@import './notify/index'; @import './query_bar/index'; // The following are prefixed with "vis" diff --git a/src/ui/public/accessibility/__tests__/kbn_ui_ace_keyboard_mode.js b/src/ui/public/accessibility/__tests__/kbn_ui_ace_keyboard_mode.js index 2444fd76c6e8..784528447995 100644 --- a/src/ui/public/accessibility/__tests__/kbn_ui_ace_keyboard_mode.js +++ b/src/ui/public/accessibility/__tests__/kbn_ui_ace_keyboard_mode.js @@ -29,17 +29,19 @@ describe('kbnUiAceKeyboardMode directive', () => { beforeEach(ngMock.module('kibana')); - beforeEach(ngMock.inject(($compile, $rootScope) => { - element = $compile(`
`)($rootScope.$new()); - })); + beforeEach( + ngMock.inject(($compile, $rootScope) => { + element = $compile(`
`)($rootScope.$new()); + }) + ); it('should add the hint element', () => { - expect(element.find('.uiAceKeyboardHint').length).to.be(1); + expect(element.find('.kbnUiAceKeyboardHint').length).to.be(1); }); describe('hint element', () => { it('should be tabable', () => { - expect(element.find('.uiAceKeyboardHint').attr('tabindex')).to.be('0'); + expect(element.find('.kbnUiAceKeyboardHint').attr('tabindex')).to.be('0'); }); it('should move focus to textbox and be inactive if pressed enter on it', () => { @@ -47,20 +49,22 @@ describe('kbnUiAceKeyboardMode directive', () => { sinon.spy(textarea[0], 'focus'); const ev = angular.element.Event('keydown'); // eslint-disable-line new-cap ev.keyCode = keyCodes.ENTER; - element.find('.uiAceKeyboardHint').trigger(ev); + element.find('.kbnUiAceKeyboardHint').trigger(ev); expect(textarea[0].focus.called).to.be(true); - expect(element.find('.uiAceKeyboardHint').hasClass('uiAceKeyboardHint-isInactive')).to.be(true); + expect( + element.find('.kbnUiAceKeyboardHint').hasClass('kbnUiAceKeyboardHint-isInactive') + ).to.be(true); }); it('should be shown again, when pressing Escape in ace editor', () => { const textarea = element.find('textarea'); - const hint = element.find('.uiAceKeyboardHint'); + const hint = element.find('.kbnUiAceKeyboardHint'); sinon.spy(hint[0], 'focus'); const ev = angular.element.Event('keydown'); // eslint-disable-line new-cap ev.keyCode = keyCodes.ESCAPE; textarea.trigger(ev); expect(hint[0].focus.called).to.be(true); - expect(hint.hasClass('uiAceKeyboardHint-isInactive')).to.be(false); + expect(hint.hasClass('kbnUiAceKeyboardHint-isInactive')).to.be(false); }); }); @@ -69,7 +73,6 @@ describe('kbnUiAceKeyboardMode directive', () => { expect(element.find('textarea').attr('tabindex')).to.be('-1'); }); }); - }); describe('kbnUiAceKeyboardModeService', () => { @@ -77,19 +80,21 @@ describe('kbnUiAceKeyboardModeService', () => { beforeEach(ngMock.module('kibana')); - beforeEach(ngMock.inject(($compile, $rootScope, kbnUiAceKeyboardModeService) => { - const scope = $rootScope.$new(); - element = $compile(`
`)(scope); - kbnUiAceKeyboardModeService.initialize(scope, element); - })); + beforeEach( + ngMock.inject(($compile, $rootScope, kbnUiAceKeyboardModeService) => { + const scope = $rootScope.$new(); + element = $compile(`
`)(scope); + kbnUiAceKeyboardModeService.initialize(scope, element); + }) + ); it('should add the hint element', () => { - expect(element.find('.uiAceKeyboardHint').length).to.be(1); + expect(element.find('.kbnUiAceKeyboardHint').length).to.be(1); }); describe('hint element', () => { it('should be tabable', () => { - expect(element.find('.uiAceKeyboardHint').attr('tabindex')).to.be('0'); + expect(element.find('.kbnUiAceKeyboardHint').attr('tabindex')).to.be('0'); }); it('should move focus to textbox and be inactive if pressed enter on it', () => { @@ -97,20 +102,22 @@ describe('kbnUiAceKeyboardModeService', () => { sinon.spy(textarea[0], 'focus'); const ev = angular.element.Event('keydown'); // eslint-disable-line new-cap ev.keyCode = keyCodes.ENTER; - element.find('.uiAceKeyboardHint').trigger(ev); + element.find('.kbnUiAceKeyboardHint').trigger(ev); expect(textarea[0].focus.called).to.be(true); - expect(element.find('.uiAceKeyboardHint').hasClass('uiAceKeyboardHint-isInactive')).to.be(true); + expect( + element.find('.kbnUiAceKeyboardHint').hasClass('kbnUiAceKeyboardHint-isInactive') + ).to.be(true); }); it('should be shown again, when pressing Escape in ace editor', () => { const textarea = element.find('textarea'); - const hint = element.find('.uiAceKeyboardHint'); + const hint = element.find('.kbnUiAceKeyboardHint'); sinon.spy(hint[0], 'focus'); const ev = angular.element.Event('keydown'); // eslint-disable-line new-cap ev.keyCode = keyCodes.ESCAPE; textarea.trigger(ev); expect(hint[0].focus.called).to.be(true); - expect(hint.hasClass('uiAceKeyboardHint-isInactive')).to.be(false); + expect(hint.hasClass('kbnUiAceKeyboardHint-isInactive')).to.be(false); }); }); @@ -119,5 +126,4 @@ describe('kbnUiAceKeyboardModeService', () => { expect(element.find('textarea').attr('tabindex')).to.be('-1'); }); }); - }); diff --git a/src/ui/public/accessibility/_index.scss b/src/ui/public/accessibility/_index.scss new file mode 100644 index 000000000000..95062449e4b1 --- /dev/null +++ b/src/ui/public/accessibility/_index.scss @@ -0,0 +1 @@ +@import './kbn_ui_ace_keyboard_mode'; diff --git a/src/ui/public/accessibility/kbn_ui_ace_keyboard_mode.less b/src/ui/public/accessibility/_kbn_ui_ace_keyboard_mode.scss similarity index 60% rename from src/ui/public/accessibility/kbn_ui_ace_keyboard_mode.less rename to src/ui/public/accessibility/_kbn_ui_ace_keyboard_mode.scss index cb879b18af77..9ace600db419 100644 --- a/src/ui/public/accessibility/kbn_ui_ace_keyboard_mode.less +++ b/src/ui/public/accessibility/_kbn_ui_ace_keyboard_mode.scss @@ -1,12 +1,10 @@ -@import (reference) "~ui/styles/variables"; - -.uiAceKeyboardHint { +.kbnUiAceKeyboardHint { position: absolute; top: 0; bottom: 0; right: 0; left: 0; - background: rgba(255, 255, 255, 0.7); + background: transparentize($euiColorEmptyShade, 0.3); display: flex; flex-direction: column; justify-content: center; @@ -16,11 +14,11 @@ &:focus { opacity: 1; - border: 2px solid @globalColorBlue; + border: 2px solid $euiColorPrimary; z-index: 1000; } - &.uiAceKeyboardHint-isInactive { + &.kbnUiAceKeyboardHint-isInactive { display: none; } } diff --git a/src/ui/public/accessibility/kbn_ui_ace_keyboard_mode.js b/src/ui/public/accessibility/kbn_ui_ace_keyboard_mode.js index 5e4fa35e4efc..b18464b9ab90 100644 --- a/src/ui/public/accessibility/kbn_ui_ace_keyboard_mode.js +++ b/src/ui/public/accessibility/kbn_ui_ace_keyboard_mode.js @@ -33,19 +33,19 @@ import angular from 'angular'; import { uiModules } from '../modules'; -import './kbn_ui_ace_keyboard_mode.less'; import { keyCodes } from '@elastic/eui'; let aceKeyboardModeId = 0; -uiModules.get('kibana') +uiModules + .get('kibana') .factory('kbnUiAceKeyboardModeService', () => ({ initialize(scope, element) { - const uniqueId = `uiAceKeyboardHint-${scope.$id}-${aceKeyboardModeId++}`; + const uniqueId = `kbnUiAceKeyboardHint-${scope.$id}-${aceKeyboardModeId++}`; const hint = angular.element( `
{ + hint.keydown(ev => { if (ev.keyCode === keyCodes.ENTER) { ev.preventDefault(); startEditing(); @@ -86,19 +86,23 @@ uiModules.get('kibana') // We have to capture this event on the 'capture' phase, otherwise Ace will have already // dismissed the autocompleter when the user hits ESC. - document.addEventListener('keydown', () => { - const autoCompleter = document.querySelector('.ace_autocomplete'); + document.addEventListener( + 'keydown', + () => { + const autoCompleter = document.querySelector('.ace_autocomplete'); - if (!autoCompleter) { - isAutoCompleterOpen = false; - return; - } + if (!autoCompleter) { + isAutoCompleterOpen = false; + return; + } - // The autoComplete is just hidden when it's closed, not removed from the DOM. - isAutoCompleterOpen = autoCompleter.style.display !== 'none'; - }, { capture: true }); + // The autoComplete is just hidden when it's closed, not removed from the DOM. + isAutoCompleterOpen = autoCompleter.style.display !== 'none'; + }, + { capture: true } + ); - uiAceTextbox.keydown((ev) => { + uiAceTextbox.keydown(ev => { if (ev.keyCode === keyCodes.ESCAPE) { // If the autocompletion context menu is open then we want to let ESC close it but // **not** exit out of editing mode. @@ -115,11 +119,11 @@ uiModules.get('kibana') // Prevent tabbing into the ACE textarea, we now handle all focusing for it uiAceTextbox.attr('tabindex', '-1'); element.prepend(hint); - } + }, })) - .directive('kbnUiAceKeyboardMode', (kbnUiAceKeyboardModeService) => ({ + .directive('kbnUiAceKeyboardMode', kbnUiAceKeyboardModeService => ({ restrict: 'A', link(scope, element) { kbnUiAceKeyboardModeService.initialize(scope, element); - } + }, })); diff --git a/src/ui/public/chrome/_index.scss b/src/ui/public/chrome/_index.scss new file mode 100644 index 000000000000..7e6c3ebaccc5 --- /dev/null +++ b/src/ui/public/chrome/_index.scss @@ -0,0 +1,3 @@ +@import './variables'; + +@import './directives/index'; diff --git a/src/ui/public/chrome/_variables.scss b/src/ui/public/chrome/_variables.scss new file mode 100644 index 000000000000..902847c446aa --- /dev/null +++ b/src/ui/public/chrome/_variables.scss @@ -0,0 +1,11 @@ + +$kbnChromeGlobalNavBackground: shade($euiColorPrimary, 30%); + +$kbnGlobalNavClosedWidth: 53px; +$kbnGlobalNavOpenWidth: 180px; +$kbnGlobalNavLogoHeight: 70px; +$kbnGlobalNavAppIconHeight: 38px; + +$kbnLoadingIndicatorBackgroundSize: $euiSizeXXL * 10; +$kbnLoadingIndicatorColor1: tint($euiColorAccent, 15%); +$kbnLoadingIndicatorColor2: tint($euiColorAccent, 60%); diff --git a/src/ui/public/chrome/directives/__snapshots__/loading_indicator.test.js.snap b/src/ui/public/chrome/directives/__snapshots__/loading_indicator.test.js.snap index b9d9391a05d8..3007be1e5dfe 100644 --- a/src/ui/public/chrome/directives/__snapshots__/loading_indicator.test.js.snap +++ b/src/ui/public/chrome/directives/__snapshots__/loading_indicator.test.js.snap @@ -2,22 +2,22 @@ exports[`kbnLoadingIndicator is hidden by default 1`] = `
`; exports[`kbnLoadingIndicator is visible when loadingCount is > 0 1`] = `
`; diff --git a/src/ui/public/chrome/directives/_index.scss b/src/ui/public/chrome/directives/_index.scss new file mode 100644 index 000000000000..6f63cf424b24 --- /dev/null +++ b/src/ui/public/chrome/directives/_index.scss @@ -0,0 +1,5 @@ +@import './kbn_chrome'; +@import './loading_indicator'; + +@import './global_nav/index'; +@import './header_global_nav/index'; diff --git a/src/ui/public/chrome/directives/kbn_chrome.less b/src/ui/public/chrome/directives/_kbn_chrome.scss similarity index 75% rename from src/ui/public/chrome/directives/kbn_chrome.less rename to src/ui/public/chrome/directives/_kbn_chrome.scss index a87f906286e1..052cabec1be4 100644 --- a/src/ui/public/chrome/directives/kbn_chrome.less +++ b/src/ui/public/chrome/directives/_kbn_chrome.scss @@ -1,12 +1,9 @@ - -@import (reference) "~ui/styles/mixins"; -@import (reference) "~ui/styles/variables"; - /** * stretch the root element of the Kibana application to set the base-size that * flexed children should keep. Only works when paired with root styles applied * by core service from new platform */ +// SASSTODO: Naming here is too embedded and high up that changing them could cause major breaks #kibana-body { overflow-x: hidden; min-height: 100%; @@ -16,16 +13,16 @@ display: flex; flex-flow: column nowrap; position: absolute; - left: @global-nav-closed-width; + left: $kbnGlobalNavClosedWidth; top: 0; right: 0; bottom: 0; z-index: 5; margin: 0 auto; - background-color: #fff; + background-color: $euiColorEmptyShade; /** - * 1. Dirty, but we need to override the .is-global-nav-open state + * 1. Dirty, but we need to override the .kbnGlobalNav-isOpen state * when we're looking at the log-in screen. */ &.hidden-chrome { diff --git a/src/ui/public/chrome/directives/_loading_indicator.scss b/src/ui/public/chrome/directives/_loading_indicator.scss new file mode 100644 index 000000000000..cca5af5d80a2 --- /dev/null +++ b/src/ui/public/chrome/directives/_loading_indicator.scss @@ -0,0 +1,46 @@ +/** + * 1. Position this loader on top of the content. + * 2. Make sure indicator isn't wider than the screen. + */ +.kbnLoadingIndicator { + position: fixed; // 1 + top: 0; // 1 + left: 0; // 1 + right: 0; // 1 + z-index: $euiZLevel1; // 1 + overflow: hidden; // 2 + height: $euiSizeXS / 2; + + &.hidden { + visibility: hidden; + opacity: 0; + transition-delay: 0.25s; + } +} + + .kbnLoadingIndicator__bar { + top: 0; + left: 0; + right: 0; + bottom: 0; + position: absolute; + z-index: $euiZLevel1 + 1; + visibility: visible; + display: block; + animation: kbn-animate-loading-indicator 2s linear infinite; + background-color: $kbnLoadingIndicatorColor2; + background-image: linear-gradient(to right, + $kbnLoadingIndicatorColor1 0%, + $kbnLoadingIndicatorColor1 50%, + $kbnLoadingIndicatorColor2 50%, + $kbnLoadingIndicatorColor2 100% + ); + background-repeat: repeat-x; + background-size: $kbnLoadingIndicatorBackgroundSize $kbnLoadingIndicatorBackgroundSize; + width: 200%; + } + + @keyframes kbn-animate-loading-indicator { + from { transform: translateX(0); } + to { transform: translateX(-$kbnLoadingIndicatorBackgroundSize); } + } diff --git a/src/ui/public/chrome/directives/global_nav/_global_nav.scss b/src/ui/public/chrome/directives/global_nav/_global_nav.scss new file mode 100644 index 000000000000..d1ea87e9a442 --- /dev/null +++ b/src/ui/public/chrome/directives/global_nav/_global_nav.scss @@ -0,0 +1,70 @@ +.kbnGlobalNav { + width: $kbnGlobalNavClosedWidth; + position: fixed; + left: 0; + top: 0; + bottom: 0; + z-index: 0; + background-color: $kbnChromeGlobalNavBackground; + overflow: hidden; + + &.kbnGlobalNav-isOpen { + width: $kbnGlobalNavOpenWidth; + + + .app-wrapper { + left: $kbnGlobalNavOpenWidth; + } + } + + .kbnGlobalNav__smallLogoBrand, + .kbnGlobalNav__logoBrand { + height: $kbnGlobalNavLogoHeight; + width: $kbnGlobalNavOpenWidth; + list-style-type: none; + } +} + +/** + * 1. Push main apps to the top and bottom buttons to the bottom. + * 2. Fill height of global nav, but respect the height of the logo. + * 3. Allow user to scroll to see clipped nav items when the nav is too short. + * 4. Style the scrollbar to look good in Chrome and Safari. + */ +.kbnGlobalNav__links { + @include euiScrollBar; /* 4 */ + + display: flex; /* 1 */ + flex-direction: column; /* 1 */ + justify-content: space-between; /* 1 */ + height: calc(100% - #{$kbnGlobalNavLogoHeight}); /* 2 */ + overflow-x: hidden; /* 3 */ + overflow-y: auto; /* 3 */ + + &::-webkit-scrollbar { /* 4 */ + @include size($euiSizeS); + } + + &::-webkit-scrollbar-thumb { /* 4 */ + background-color: tint($kbnChromeGlobalNavBackground, 50%); + } +} + +/** + * 1. Prevent the top and bottom links from collapsing when the browser window is too short. + * This problem is specific to Safari. + */ +.kbnGlobalNav__linksSection { + flex: 0 0 auto; /* 1 */ +} + +.kbnGlobalNav__logoLink { + display: inline-block; + + &:hover { + background-color: darken($euiColorPrimary, 15%); + } + + &.active { + background-color: $euiColorPrimary; + } +} diff --git a/src/ui/public/chrome/directives/global_nav/_index.scss b/src/ui/public/chrome/directives/global_nav/_index.scss new file mode 100644 index 000000000000..6113fe352641 --- /dev/null +++ b/src/ui/public/chrome/directives/global_nav/_index.scss @@ -0,0 +1,2 @@ +@import './global_nav'; +@import './global_nav_link/index'; diff --git a/src/ui/public/chrome/directives/global_nav/global_nav.html b/src/ui/public/chrome/directives/global_nav/global_nav.html index 3bb669c59a6c..a2deb53cdb6e 100644 --- a/src/ui/public/chrome/directives/global_nav/global_nav.html +++ b/src/ui/public/chrome/directives/global_nav/global_nav.html @@ -1,14 +1,13 @@ diff --git a/src/ui/public/chrome/directives/global_nav/global_nav.js b/src/ui/public/chrome/directives/global_nav/global_nav.js index 5a87fd787817..cedb56c11844 100644 --- a/src/ui/public/chrome/directives/global_nav/global_nav.js +++ b/src/ui/public/chrome/directives/global_nav/global_nav.js @@ -17,7 +17,6 @@ * under the License. */ - import './app_switcher'; import './global_nav_link'; import 'ui/i18n'; @@ -46,13 +45,21 @@ module.directive('globalNav', (globalNavState, chrome, i18n) => { const isOpen = globalNavState.isOpen(); scope.isGlobalNavOpen = isOpen; scope.globalNavToggleButton = { - classes: isOpen ? 'global-nav-link--close' : undefined, - title: isOpen ? - i18n('common.ui.chrome.globalNav.navToggleButtonCollapseTitle', { defaultMessage: 'Collapse' }) - : i18n('common.ui.chrome.globalNav.navToggleButtonExpandTitle', { defaultMessage: 'Expand' }), - tooltipContent: isOpen ? - i18n('common.ui.chrome.globalNav.navToggleButtonCollapseTooltip', { defaultMessage: 'Collapse side bar' }) - : i18n('common.ui.chrome.globalNav.navToggleButtonExpandTooltip', { defaultMessage: 'Expand side bar' }), + classes: isOpen ? 'kbnGlobalNavLink--close' : undefined, + title: isOpen + ? i18n('common.ui.chrome.globalNav.navToggleButtonCollapseTitle', { + defaultMessage: 'Collapse', + }) + : i18n('common.ui.chrome.globalNav.navToggleButtonExpandTitle', { + defaultMessage: 'Expand', + }), + tooltipContent: isOpen + ? i18n('common.ui.chrome.globalNav.navToggleButtonCollapseTooltip', { + defaultMessage: 'Collapse side bar', + }) + : i18n('common.ui.chrome.globalNav.navToggleButtonExpandTooltip', { + defaultMessage: 'Expand side bar', + }), }; // Notify visualizations, e.g. the dashboard, that they should re-render. @@ -77,6 +84,6 @@ module.directive('globalNav', (globalNavState, chrome, i18n) => { scope.isHomeActive = () => { return window.location.hash.indexOf('#/home') === 0; }; - } + }, }; }); diff --git a/src/ui/public/chrome/directives/global_nav/global_nav.less b/src/ui/public/chrome/directives/global_nav/global_nav.less index a81360fcc0db..d679b401e209 100644 --- a/src/ui/public/chrome/directives/global_nav/global_nav.less +++ b/src/ui/public/chrome/directives/global_nav/global_nav.less @@ -1,36 +1,7 @@ - -@import (reference) "~ui/styles/mixins"; -@import (reference) "~ui/styles/variables"; - -@global-nav-logo-height: 70px; - -.global-nav { - width: @global-nav-closed-width; - position: fixed; - left: 0; - top: 0; - bottom: 0; - z-index: 0; - background-color: #005571; - overflow: hidden; - - &.is-global-nav-open { - width: @global-nav-open-width; - - .app-title { - display: inline-block; - } - - + .app-wrapper { - left: @global-nav-open-width; - } - } - - .logo-small, - .logo { - height: @global-nav-logo-height; - width: @global-nav-open-width; - list-style-type: none; +// SASSTODO: Move to sass when image paths work +.kbnGlobalNav { + .kbnGlobalNav__smallLogoBrand, + .kbnGlobalNav__logoBrand { &.kibana { background-image: url("~ui/images/kibana.svg"); background-position: 10px 14px; @@ -39,41 +10,3 @@ } } } - - /** - * 1. Push main apps to the top and bottom buttons to the bottom. - * 2. Fill height of global nav, but respect the height of the logo. - * 3. Allow user to scroll to see clipped nav items when the nav is too short. - * 4. Style the scrollbar to look good in Chrome and Safari. - */ - .global-nav__links { - display: flex; /* 1 */ - flex-direction: column; /* 1 */ - justify-content: space-between; /* 1 */ - height: ~"calc(100% - @{global-nav-logo-height})"; /* 2 */ - overflow-x: hidden; /* 3 */ - overflow-y: auto; /* 3 */ - - &::-webkit-scrollbar { /* 4 */ - width: 16px; - height: 16px; - } - - &::-webkit-scrollbar-thumb { /* 4 */ - background-color: #2f99c1; - border: 6px solid transparent; - background-clip: content-box; - } - - &::-webkit-scrollbar-track { /* 4 */ - background-color: transparent; - } - } - - /** - * 1. Prevent the top and bottom links from collapsing when the browser window is too short. - * This problem is specific to Safari. - */ - .global-nav__links-section { - flex: 0 0 auto; /* 1 */ - } diff --git a/src/ui/public/chrome/directives/global_nav/global_nav_link/__tests__/global_nav_link.js b/src/ui/public/chrome/directives/global_nav/global_nav_link/__tests__/global_nav_link.js index d265df874216..574a1e9a5dac 100644 --- a/src/ui/public/chrome/directives/global_nav/global_nav_link/__tests__/global_nav_link.js +++ b/src/ui/public/chrome/directives/global_nav/global_nav_link/__tests__/global_nav_link.js @@ -60,7 +60,6 @@ describe('globalNavLink directive', () => { } describe('interface', () => { - describe('isActive attribute', () => { it(`doesn't apply the active class when false`, () => { const element = create({ @@ -78,18 +77,18 @@ describe('globalNavLink directive', () => { }); describe('isDisabled attribute', () => { - it(`doesn't apply the is-global-nav-link-disabled class when false`, () => { + it(`doesn't apply the kbnGlobalNavLink-isDisabled class when false`, () => { const element = create({ isDisabled: false, }); - expect(element.hasClass('is-global-nav-link-disabled')).to.be(false); + expect(element.hasClass('kbnGlobalNavLink-isDisabled')).to.be(false); }); - it('applies the is-global-nav-link-disabled class when true', () => { + it('applies the kbnGlobalNavLink-isDisabled class when true', () => { const element = create({ isDisabled: true, }); - expect(element.hasClass('is-global-nav-link-disabled')).to.be(true); + expect(element.hasClass('kbnGlobalNavLink-isDisabled')).to.be(true); }); }); diff --git a/src/ui/public/chrome/directives/global_nav/global_nav_link/_global_nav_link.scss b/src/ui/public/chrome/directives/global_nav/global_nav_link/_global_nav_link.scss new file mode 100644 index 000000000000..7b7b1f70b18d --- /dev/null +++ b/src/ui/public/chrome/directives/global_nav/global_nav_link/_global_nav_link.scss @@ -0,0 +1,97 @@ +.kbnGlobalNavLink { + &:hover { + background-color: shade($euiColorPrimary, 15%); + } + + &.active { + background-color: $euiColorPrimary; + } +} + +.kbnGlobalNavLink { + position: relative; + width: $kbnGlobalNavClosedWidth; + height: $kbnGlobalNavAppIconHeight; + line-height: $euiSizeL; + + &.kbnGlobalNavLink-isDisabled { + opacity: 0.5; + + .kbnGlobalNavLink__anchor { + cursor: default; + } + } + + &.active { + .kbnGlobalNavLink__anchor { + color: $euiColorEmptyShade; + text-decoration: none; + } + } +} + +.kbnGlobalNav-isOpen { + .kbnGlobalNavLink { + width: $kbnGlobalNavOpenWidth; + } +} + +.kbnGlobalNavLink__anchor { + display: block; + height: 100%; + color: $euiColorEmptyShade; + width: 100%; + line-height: inherit; +} + +.kbnGlobalNavLink__icon { + display: inline-block; + width: $kbnGlobalNavClosedWidth; + height: $kbnGlobalNavAppIconHeight; + float: left; + text-align: center; + font-size: 1.7em; +} + +/** + * This image is used to display the icon. + */ +.kbnGlobalNavLink__iconImage { + height: 18px; + margin-top: $euiSizeS; +} + +/** + * This placeholder text gets shown if there is no specified icon. + */ +.kbnGlobalNavLink__iconPlaceholder { + line-height: $kbnGlobalNavAppIconHeight; + background-position: center; + background-size: contain; + background-repeat: no-repeat; +} + +.kbnGlobalNavLink__title { + @include euiTextTruncate; + display: none; + width: $kbnGlobalNavOpenWidth - $kbnGlobalNavClosedWidth - 3px; + float: right; + font-size: 0.9em; + text-align: left; + padding-left: 3px; + padding-right: 3px; + line-height: $kbnGlobalNavAppIconHeight; + + .kbnGlobalNav-isOpen & { + display: inline-block; + } +} + +.kbnGlobalNavLink--close { + /** + * 1. Translation accounts for the icon image being slightly off-center. + */ + .kbnGlobalNavLink__icon { + transform: translateX(1px) scaleX(-1); /* 1 */ + } +} diff --git a/src/ui/public/chrome/directives/global_nav/global_nav_link/_index.scss b/src/ui/public/chrome/directives/global_nav/global_nav_link/_index.scss new file mode 100644 index 000000000000..caa3e567bd5f --- /dev/null +++ b/src/ui/public/chrome/directives/global_nav/global_nav_link/_index.scss @@ -0,0 +1 @@ +@import './global_nav_link'; diff --git a/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.html b/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.html index e23fb0ce15e2..838cd00d04d4 100644 --- a/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.html +++ b/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.html @@ -1,37 +1,35 @@
-
+
+ /> {{ label[0] }}
-
- {{ label }} -
+
{{ label }}
diff --git a/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.js b/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.js index 437bec461ba6..d5028ecda981 100644 --- a/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.js +++ b/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.js @@ -19,7 +19,6 @@ import globalNavLinkTemplate from './global_nav_link.html'; -import './global_nav_link.less'; import { uiModules } from '../../../../modules'; const module = uiModules.get('kibana'); diff --git a/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.less b/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.less deleted file mode 100644 index 3c8400fa75ad..000000000000 --- a/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.less +++ /dev/null @@ -1,114 +0,0 @@ -@import (reference) "~ui/styles/variables"; - -.global_nav_logo { - display: inline-block; - - &:hover { - background-color: darken(@globalColorBlue, 15%); - } - - &.active { - background-color: @globalColorBlue; - } -} - -.global-nav-link { - position: relative; - width: @global-nav-closed-width; - height: @app-icon-height; - line-height: @app-line-height; - - &.is-global-nav-link-disabled { - opacity: 0.5; - - .global-nav-link__anchor { - cursor: default; - } - } - - &:hover { - background-color: darken(@globalColorBlue, 15%); - } - - &.active { - background-color: @globalColorBlue; - - .global-nav-link__anchor { - color: @white; - text-decoration: none; - } - } -} - -.is-global-nav-open { - .global-nav-link { - width: @global-nav-open-width; - } -} - - .global-nav-link__anchor { - display: block; - height: 100%; - width: 100%; - line-height: inherit; - color: @globalColorWhite; - - &:focus, &:hover { - color: @globalColorWhite; - } - } - - .global-nav-link__icon { - display: inline-block; - width: @global-nav-closed-width; - height: @app-icon-height; - float: left; - text-align: center; - font-size: 1.7em; - } - - /** - * This image is used to display the icon. - */ - .global-nav-link__icon-image { - height: 18px; - margin-top: 8px; - } - - /** - * This placeholder text gets shown if there is no specified icon. - */ - .global-nav-link__icon-placeholder { - line-height: @app-icon-height; - background-position: center; - background-size: contain; - background-repeat: no-repeat; - } - - .global-nav-link__title { - display: none; - width: calc(@global-nav-open-width - @global-nav-closed-width - 3px); - float: right; - font-size: 0.9em; - text-align: left; - padding-left: 3px; - padding-right: 3px; - line-height: @app-icon-height; - white-space: nowrap; - max-width: 100%; - text-overflow: ellipsis; - overflow: hidden; - - .is-global-nav-open & { - display: inline-block; - } - } - -.global-nav-link--close { - /** - * 1. Translation accounts for the icon image being slightly off-center. - */ - .global-nav-link__icon { - transform: translateX(1px) scaleX(-1); /* 1 */ - } -} diff --git a/src/ui/public/chrome/directives/header_global_nav/header_global_nav.less b/src/ui/public/chrome/directives/header_global_nav/_header_global_nav.scss similarity index 100% rename from src/ui/public/chrome/directives/header_global_nav/header_global_nav.less rename to src/ui/public/chrome/directives/header_global_nav/_header_global_nav.scss diff --git a/src/ui/public/chrome/directives/header_global_nav/_index.scss b/src/ui/public/chrome/directives/header_global_nav/_index.scss new file mode 100644 index 000000000000..2fc07db69d74 --- /dev/null +++ b/src/ui/public/chrome/directives/header_global_nav/_index.scss @@ -0,0 +1 @@ +@import './header_global_nav'; diff --git a/src/ui/public/chrome/directives/header_global_nav/header_global_nav.js b/src/ui/public/chrome/directives/header_global_nav/header_global_nav.js index 10773e22894f..ddbc5825351d 100644 --- a/src/ui/public/chrome/directives/header_global_nav/header_global_nav.js +++ b/src/ui/public/chrome/directives/header_global_nav/header_global_nav.js @@ -20,7 +20,6 @@ import { uiModules } from '../../../modules'; import { Header } from './components/header'; -import './header_global_nav.less'; import { chromeHeaderNavControlsRegistry } from 'ui/registry/chrome_header_nav_controls'; import { injectI18nProvider } from '@kbn/i18n/react'; diff --git a/src/ui/public/chrome/directives/kbn_chrome.js b/src/ui/public/chrome/directives/kbn_chrome.js index 255963a77ca3..bbd0e4189f45 100644 --- a/src/ui/public/chrome/directives/kbn_chrome.js +++ b/src/ui/public/chrome/directives/kbn_chrome.js @@ -21,7 +21,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; import $ from 'jquery'; -import './kbn_chrome.less'; import { uiModules } from '../../modules'; import { getUnhashableStatesProvider, diff --git a/src/ui/public/chrome/directives/loading_indicator.js b/src/ui/public/chrome/directives/loading_indicator.js index dee04bc2d51c..7b194ecd3a83 100644 --- a/src/ui/public/chrome/directives/loading_indicator.js +++ b/src/ui/public/chrome/directives/loading_indicator.js @@ -24,17 +24,15 @@ import classNames from 'classnames'; import { uiModules } from 'ui/modules'; import chrome from 'ui/chrome'; -import './loading_indicator.less'; - export class LoadingIndicator extends React.Component { state = { visible: false, - } + }; componentDidMount() { - this._unsub = chrome.loadingCount.subscribe((count) => { + this._unsub = chrome.loadingCount.subscribe(count => { this.setState({ - visible: count > 0 + visible: count > 0, }); }); } @@ -45,10 +43,7 @@ export class LoadingIndicator extends React.Component { } render() { - const className = classNames( - 'loadingIndicator', - this.state.visible ? null : 'hidden' - ); + const className = classNames('kbnLoadingIndicator', this.state.visible ? null : 'hidden'); const testSubj = this.state.visible ? 'globalLoadingIndicator' @@ -56,7 +51,7 @@ export class LoadingIndicator extends React.Component { return (
-
+
); } diff --git a/src/ui/public/chrome/directives/loading_indicator.less b/src/ui/public/chrome/directives/loading_indicator.less deleted file mode 100644 index 5e57ba5ff7cc..000000000000 --- a/src/ui/public/chrome/directives/loading_indicator.less +++ /dev/null @@ -1,53 +0,0 @@ -@import "~ui/styles/variables"; - -@loadingIndicatorBackgroundSize: 400px; -@loadingIndicatorHeight: 2px; -@loadingIndicatorColor1: @kibanaPink1; -@loadingIndicatorColor2: @kibanaPink2; - -/** - * 1. Position this loader on top of the content. - * 2. Make sure indicator isn't wider than the screen. - */ -.loadingIndicator { - position: fixed; // 1 - top: 0; // 1 - left: 0; // 1 - right: 0; // 1 - z-index: 20; // 1 - overflow: hidden; // 2 - height: @loadingIndicatorHeight; - - &.hidden { - visibility: hidden; - opacity: 0; - transition-delay: 0.25s; - } -} - - .loadingIndicator__bar { - top: 0; - left: 0; - right: 0; - bottom: 0; - position: absolute; - z-index: 21; - visibility: visible; - display: block; - animation: animate-loading-indicator 2s linear infinite; - background-color: @kibanaPink2; - background-image: linear-gradient(to right, - @loadingIndicatorColor1 0%, - @loadingIndicatorColor1 50%, - @loadingIndicatorColor2 50%, - @loadingIndicatorColor2 100% - ); - background-repeat: repeat-x; - background-size: @loadingIndicatorBackgroundSize @loadingIndicatorBackgroundSize; - width: 200%; - } - - @keyframes animate-loading-indicator { - from { transform: translateX(0); } - to { transform: translateX(-@loadingIndicatorBackgroundSize); } - } diff --git a/src/ui/public/error_allow_explicit_index/_error_allow_explicit_index.scss b/src/ui/public/error_allow_explicit_index/_error_allow_explicit_index.scss new file mode 100644 index 000000000000..769abea15019 --- /dev/null +++ b/src/ui/public/error_allow_explicit_index/_error_allow_explicit_index.scss @@ -0,0 +1,3 @@ +.kbnError--multi-allow-explicit-index { + padding: $euiSizeL; +} diff --git a/src/ui/public/error_allow_explicit_index/_index.scss b/src/ui/public/error_allow_explicit_index/_index.scss new file mode 100644 index 000000000000..84cb11112767 --- /dev/null +++ b/src/ui/public/error_allow_explicit_index/_index.scss @@ -0,0 +1 @@ +@import './error_allow_explicit_index'; diff --git a/src/ui/public/error_allow_explicit_index/error_allow_explicit_index.html b/src/ui/public/error_allow_explicit_index/error_allow_explicit_index.html index 3af52f4ee172..a56aa4f4f9ab 100644 --- a/src/ui/public/error_allow_explicit_index/error_allow_explicit_index.html +++ b/src/ui/public/error_allow_explicit_index/error_allow_explicit_index.html @@ -1,18 +1,25 @@ -
-

- Oh no! -

+
+

Oh no!

+

- It looks like your Elasticsearch cluster has the rest.action.multi.allow_explicit_index setting set to false, which prevents Kibana from making search requests. We use this ability to send a single request to Elasticsearch that searches multiple indexes so that when there are many panels on a dashboard they will load quickly and uniformly. + It looks like your Elasticsearch cluster has the + rest.action.multi.allow_explicit_index setting set to false, which + prevents Kibana from making search requests. We use this ability to send a single request to + Elasticsearch that searches multiple indexes so that when there are many panels on a dashboard + they will load quickly and uniformly.

- Unfortunately, until this issue is fixed you won't be able to use certain apps in Kibana, like Discover, Visualize and Dashboard. + Unfortunately, until this issue is fixed you won't be able to use certain apps in Kibana, like + Discover, Visualize and Dashboard.

Ok, how do I fix this?

    -
  1. Remove rest.action.multi.allow_explicit_index: false from your Elasticsearch config file.
    2. +
  2. + Remove rest.action.multi.allow_explicit_index: false from your Elasticsearch + config file. +
  3. Restart Elasticsearch.
  4. Use the browser's back button to return to what you were doing.
diff --git a/src/ui/public/error_allow_explicit_index/error_allow_explicit_index.js b/src/ui/public/error_allow_explicit_index/error_allow_explicit_index.js index f9f02e167d98..4770ac9d91a6 100644 --- a/src/ui/public/error_allow_explicit_index/error_allow_explicit_index.js +++ b/src/ui/public/error_allow_explicit_index/error_allow_explicit_index.js @@ -22,7 +22,6 @@ import { get } from 'lodash'; import uiRoutes from '../routes'; import { KbnUrlProvider } from '../url'; -import './error_allow_explicit_index.less'; import template from './error_allow_explicit_index.html'; uiRoutes diff --git a/src/ui/public/error_allow_explicit_index/error_allow_explicit_index.less b/src/ui/public/error_allow_explicit_index/error_allow_explicit_index.less deleted file mode 100644 index 31f7d1f9e384..000000000000 --- a/src/ui/public/error_allow_explicit_index/error_allow_explicit_index.less +++ /dev/null @@ -1,3 +0,0 @@ -.error-multi-allow-explicit-index { - padding: 25px; -} diff --git a/src/ui/public/error_auto_create_index/_error_auto_create_index.scss b/src/ui/public/error_auto_create_index/_error_auto_create_index.scss new file mode 100644 index 000000000000..ad31aabfc66c --- /dev/null +++ b/src/ui/public/error_auto_create_index/_error_auto_create_index.scss @@ -0,0 +1,3 @@ +.kbnError--auto-create-index { + padding: $euiSizeL; +} diff --git a/src/ui/public/error_auto_create_index/_index.scss b/src/ui/public/error_auto_create_index/_index.scss new file mode 100644 index 000000000000..42e672ab322d --- /dev/null +++ b/src/ui/public/error_auto_create_index/_index.scss @@ -0,0 +1 @@ +@import './error_auto_create_index' diff --git a/src/ui/public/error_auto_create_index/error_auto_create_index.html b/src/ui/public/error_auto_create_index/error_auto_create_index.html index 1b60f8aeff4f..31bf0014af8c 100644 --- a/src/ui/public/error_auto_create_index/error_auto_create_index.html +++ b/src/ui/public/error_auto_create_index/error_auto_create_index.html @@ -1,22 +1,21 @@ -
-

- Oh no! -

+
+

Oh no!

-

- It looks like your Elasticsearch cluster's action.auto_create_index setting is preventing Kibana from automatically creating an index to store saved objects. Kibana uses this Elasticsearch feature because it is the best way to make sure that the saved object index uses the correct mappings/schema, and it allows Kibana to poll Elasticsearch less often. +

+ It looks like your Elasticsearch cluster's action.auto_create_index setting is + preventing Kibana from automatically creating an index to store saved objects. Kibana uses this + Elasticsearch feature because it is the best way to make sure that the saved object index uses + the correct mappings/schema, and it allows Kibana to poll Elasticsearch less often.

-

- Unfortunately, until this issue is fixed you won't be able to save anything in Kibana. -

+

Unfortunately, until this issue is fixed you won't be able to save anything in Kibana.

-

- Ok, how do I fix this? -

+

Ok, how do I fix this?

-
    -
  1. Remove action.auto_create_index: false from your Elasticsearch configuration file
    2. +
      +
    1. + Remove action.auto_create_index: false from your Elasticsearch configuration file +
    2. Restart elasticsearch.
    3. Use the browser's back button to return to what you were doing.
    @@ -28,14 +27,15 @@ aria-label="Info" role="img" > - - Note: - + Note:
- The action.auto_create_index can also define a whitelist of patterns where this feature should be enabled. We don't discuss how to use the setting that way here because it requires knowing all of the other plugins/interactions that rely on the feature for the same reasons that Kibana does. + The action.auto_create_index can also define a whitelist of patterns where this + feature should be enabled. We don't discuss how to use the setting that way here because it + requires knowing all of the other plugins/interactions that rely on the feature for the same + reasons that Kibana does.
diff --git a/src/ui/public/error_auto_create_index/error_auto_create_index.js b/src/ui/public/error_auto_create_index/error_auto_create_index.js index e812a3f23cbc..66188d57b1cc 100644 --- a/src/ui/public/error_auto_create_index/error_auto_create_index.js +++ b/src/ui/public/error_auto_create_index/error_auto_create_index.js @@ -21,7 +21,6 @@ import { get } from 'lodash'; import uiRoutes from '../routes'; -import './error_auto_create_index.less'; import template from './error_auto_create_index.html'; uiRoutes diff --git a/src/ui/public/error_auto_create_index/error_auto_create_index.less b/src/ui/public/error_auto_create_index/error_auto_create_index.less deleted file mode 100644 index 99617c157a9f..000000000000 --- a/src/ui/public/error_auto_create_index/error_auto_create_index.less +++ /dev/null @@ -1,3 +0,0 @@ -.error-auto-create-index { - padding: 25px; -} diff --git a/src/ui/public/error_url_overflow/_error_url_overflow.scss b/src/ui/public/error_url_overflow/_error_url_overflow.scss new file mode 100644 index 000000000000..df96d72521a5 --- /dev/null +++ b/src/ui/public/error_url_overflow/_error_url_overflow.scss @@ -0,0 +1,3 @@ +.kbnError--url-overflow-app { + padding: $euiSizeL; +} diff --git a/src/ui/public/error_url_overflow/_index.scss b/src/ui/public/error_url_overflow/_index.scss new file mode 100644 index 000000000000..15e2f7779826 --- /dev/null +++ b/src/ui/public/error_url_overflow/_index.scss @@ -0,0 +1 @@ +@import './error_url_overflow'; diff --git a/src/ui/public/error_url_overflow/error_url_overflow.html b/src/ui/public/error_url_overflow/error_url_overflow.html index 143ccb25e2db..a21c3a9e32bc 100644 --- a/src/ui/public/error_url_overflow/error_url_overflow.html +++ b/src/ui/public/error_url_overflow/error_url_overflow.html @@ -1,19 +1,32 @@ -
-

- Woah there! -

+
+

Woah there!

- That's a big URL you have there. I have some unfortunate news: Your browser doesn't play nice with Kibana's bacon-double-cheese-burger-with-extra-fries sized URL. To keep you from running into problems Kibana limits URLs in your browser to {{controller.limit}} characters for your safety. + That's a big URL you have there. I have some unfortunate news: Your browser doesn't play nice + with Kibana's bacon-double-cheese-burger-with-extra-fries sized URL. To keep you from running + into problems Kibana limits URLs in your browser to {{ controller.limit }} characters for your + safety.

Ok, how do I fix this?

This usually only happens with big, complex dashboards, so you have some options:

    -
  1. Enable the state:storeInSessionStorage option in the advanced settings. This will prevent the URLs from getting long, but makes them a bit less portable.
    2. -
  2. Remove some stuff from your dashboard. This will reduce the length of the URL and keep IE in a good place.
    3. +
  3. + Enable the state:storeInSessionStorage option in the + advanced settings. This will prevent the URLs from + getting long, but makes them a bit less portable. +
    4. +
  4. + Remove some stuff from your dashboard. This will reduce the length of the URL and keep IE in a + good place. +
  5. Don't use IE. Every other supported browser we know of doesn't have this limit.
-
-
-

Foot note: Party size candy bars are tiny. Party size sub sandwiches are massive. Really makes you think.

+
+
+

+ Foot note: Party size candy bars are tiny. Party size sub sandwiches are massive. Really + makes you think. +

diff --git a/src/ui/public/error_url_overflow/error_url_overflow.js b/src/ui/public/error_url_overflow/error_url_overflow.js index 2ca1049b6e91..1014c20eb4e0 100644 --- a/src/ui/public/error_url_overflow/error_url_overflow.js +++ b/src/ui/public/error_url_overflow/error_url_overflow.js @@ -20,7 +20,6 @@ import uiRoutes from '../routes'; import { KbnUrlProvider } from '../url'; -import './error_url_overflow.less'; import template from './error_url_overflow.html'; import { UrlOverflowServiceProvider } from './url_overflow_service'; diff --git a/src/ui/public/error_url_overflow/error_url_overflow.less b/src/ui/public/error_url_overflow/error_url_overflow.less deleted file mode 100644 index efc1e066d38c..000000000000 --- a/src/ui/public/error_url_overflow/error_url_overflow.less +++ /dev/null @@ -1,7 +0,0 @@ -.error-url-overflow-app { - padding: 25px; - - pre { - white-space: pre-wrap; - } -} diff --git a/src/ui/public/field_editor/_index.scss b/src/ui/public/field_editor/_index.scss new file mode 100644 index 000000000000..9c94861eb74a --- /dev/null +++ b/src/ui/public/field_editor/_index.scss @@ -0,0 +1 @@ +@import './components/field_format_editor/samples/index'; diff --git a/src/ui/public/field_editor/components/field_format_editor/samples/__snapshots__/samples.test.js.snap b/src/ui/public/field_editor/components/field_format_editor/samples/__snapshots__/samples.test.js.snap index 812fe2650c51..a1e131d81b0a 100644 --- a/src/ui/public/field_editor/components/field_format_editor/samples/__snapshots__/samples.test.js.snap +++ b/src/ui/public/field_editor/components/field_format_editor/samples/__snapshots__/samples.test.js.snap @@ -14,7 +14,7 @@ exports[`FormatEditorSamples should render normally 1`] = ` } > { + name: intl.formatMessage({ + id: 'common.ui.fieldEditor.samples.inputHeader', + defaultMessage: 'Input', + }), + render: input => { return typeof input === 'object' ? JSON.stringify(input) : input; }, }, { field: 'output', - name: intl.formatMessage({ id: 'common.ui.fieldEditor.samples.outputHeader', defaultMessage: 'Output' }), - render: (output) => { + name: intl.formatMessage({ + id: 'common.ui.fieldEditor.samples.outputHeader', + defaultMessage: 'Output', + }), + render: output => { return (
); }, - } + }, ]; - return samples.length ? ( } + label={ + + } >
a component
b good diff --git a/src/ui/public/notify/banners/_global_banner_list.scss b/src/ui/public/notify/banners/_global_banner_list.scss new file mode 100644 index 000000000000..ff260f7dc42f --- /dev/null +++ b/src/ui/public/notify/banners/_global_banner_list.scss @@ -0,0 +1,7 @@ +.kbnGlobalBannerList { + padding: $euiSize; +} + +.kbnGlobalBannerList__item + .kbnGlobalBannerList__item { + margin-top: $euiSize; +} diff --git a/src/ui/public/notify/banners/_index.scss b/src/ui/public/notify/banners/_index.scss new file mode 100644 index 000000000000..96b9a42385e8 --- /dev/null +++ b/src/ui/public/notify/banners/_index.scss @@ -0,0 +1 @@ +@import './global_banner_list'; diff --git a/src/ui/public/notify/banners/global_banner_list.js b/src/ui/public/notify/banners/global_banner_list.js index ca60ae373853..9a6f120968b0 100644 --- a/src/ui/public/notify/banners/global_banner_list.js +++ b/src/ui/public/notify/banners/global_banner_list.js @@ -20,8 +20,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import './global_banner_list.less'; - /** * GlobalBannerList is a list of "banners". A banner something that is displayed at the top of Kibana that may or may not disappear. * @@ -33,7 +31,6 @@ import './global_banner_list.less'; * @param {Array} banners The array of banners represented by objects in the form of { id, component }. */ export class GlobalBannerList extends Component { - static propTypes = { banners: PropTypes.array, subscribe: PropTypes.func, @@ -57,29 +54,15 @@ export class GlobalBannerList extends Component { } const flexBanners = this.props.banners.map(banner => { - const { - id, - component, - priority, - ...rest - } = banner; + const { id, component, priority, ...rest } = banner; return ( -
- { component } +
+ {component}
); }); - return ( -
- {flexBanners} -
- ); + return
{flexBanners}
; } } diff --git a/src/ui/public/notify/banners/global_banner_list.less b/src/ui/public/notify/banners/global_banner_list.less deleted file mode 100644 index f1ead7231f4f..000000000000 --- a/src/ui/public/notify/banners/global_banner_list.less +++ /dev/null @@ -1,7 +0,0 @@ -.globalBanner__list { - padding: 16px; -} - -.globalBanner__item + .globalBanner__item { - margin-top: 16px; -} diff --git a/src/ui/public/notify/notifier.js b/src/ui/public/notify/notifier.js index f779b635671b..560966e97b72 100644 --- a/src/ui/public/notify/notifier.js +++ b/src/ui/public/notify/notifier.js @@ -25,10 +25,7 @@ import { i18n } from '@kbn/i18n'; const notifs = []; -const { - version, - buildNum, -} = metadata; +const { version, buildNum } = metadata; function closeNotif(notif, cb = _.noop, key) { return function () { @@ -68,13 +65,17 @@ function startNotifTimer(notif, cb) { notif.timeRemaining = Math.floor(notif.lifetime / interval); - notif.timerId = Notifier.config.setInterval(function () { - notif.timeRemaining -= 1; + notif.timerId = Notifier.config.setInterval( + function () { + notif.timeRemaining -= 1; - if (notif.timeRemaining <= 0) { - closeNotif(notif, cb, 'ignore')(); - } - }, interval, notif.timeRemaining); + if (notif.timeRemaining <= 0) { + closeNotif(notif, cb, 'ignore')(); + } + }, + interval, + notif.timeRemaining + ); notif.cancelTimer = timerCanceler(notif, cb); } @@ -88,7 +89,7 @@ const typeToButtonClassMap = { danger: 'kuiButton--danger', // NOTE: `error` type is internally named as `danger` info: 'kuiButton--primary', }; -const buttonHierarchyClass = (index) => { +const buttonHierarchyClass = index => { if (index === 0) { // first action: primary className return 'kuiButton--primary'; @@ -121,7 +122,7 @@ function add(notif, cb) { getButtonClass() { const buttonTypeClass = typeToButtonClassMap[notif.type]; return `${buttonHierarchyClass(index)} ${buttonTypeClass}`; - } + }, }; }); } @@ -134,11 +135,11 @@ function add(notif, cb) { // decorate the notification with helper functions for the template notif.getButtonClass = () => typeToButtonClassMap[notif.type]; - notif.getAlertClassStack = () => `toast-stack alert ${typeToAlertClassMap[notif.type]}`; + notif.getAlertClassStack = () => `kbnToast__stack alert ${typeToAlertClassMap[notif.type]}`; notif.getIconClass = () => `fa fa-${notif.icon}`; - notif.getToastMessageClass = () => 'toast-message'; - notif.getAlertClass = () => `toast alert ${typeToAlertClassMap[notif.type]}`; - notif.getButtonGroupClass = () => 'toast-controls'; + notif.getToastMessageClass = () => 'kbnToast__message'; + notif.getAlertClass = () => `kbnToast alert ${typeToAlertClassMap[notif.type]}`; + notif.getButtonGroupClass = () => 'kbnToast__controls'; let dup = null; if (notif.content) { @@ -175,9 +176,7 @@ export function Notifier(opts) { // label type thing to say where notifications came from self.from = opts.location; - const notificationLevels = [ - 'error', - ]; + const notificationLevels = ['error']; notificationLevels.forEach(function (m) { self[m] = _.bind(self[m], self); @@ -189,7 +188,7 @@ Notifier.config = { errorLifetime: 300000, infoLifetime: 5000, setInterval: window.setInterval, - clearInterval: window.clearInterval + clearInterval: window.clearInterval, }; Notifier.applyConfig = function (config) { @@ -223,5 +222,6 @@ Notifier.prototype.error = function (err, opts, cb) { actions: ['report', 'accept'], stack: formatStack(err) }, _.pick(opts, overridableOptions)); + return add(config, cb); }; diff --git a/src/ui/public/notify/notify.js b/src/ui/public/notify/notify.js index c892131e8d18..4ed43c1fcfc3 100644 --- a/src/ui/public/notify/notify.js +++ b/src/ui/public/notify/notify.js @@ -25,7 +25,6 @@ import { fatalError } from './fatal_error'; import { banners } from './banners'; import { Notifier } from './notifier'; import template from './partials/toaster.html'; -import './notify.less'; import '../filters/markdown'; import '../directives/truncated'; import { FormattedMessage } from '@kbn/i18n/react'; diff --git a/src/ui/public/notify/notify.less b/src/ui/public/notify/notify.less deleted file mode 100644 index 61317e02c866..000000000000 --- a/src/ui/public/notify/notify.less +++ /dev/null @@ -1,83 +0,0 @@ -@import "~ui/styles/mixins"; - -.toaster-container { - visibility: visible; - width: 100%; - - .toaster { - margin: 0; - padding: 0; - list-style: none; - } - - /** - * 1. Shouldn't look like a button. - */ - .toaster-countdown { - appearance: none; - background: none; - border: none; - } - - .alert { - padding: 5px 15px; - margin: 0; - border-radius: 0; - border: 0px; - } - - .toast { - display: flex; - align-items: center; - - > * { - flex: 0 0 auto; - &:not(:last-child) { - margin-right: 4px; - } - } - } - - .toast-message { - flex: 1 1 auto; - .ellipsis(); - line-height: normal; - } - - .toast-stack { - padding-bottom: 10px; - - pre { - display: inline-block; - width: 100%; - margin: 10px 0; - word-break: normal; - word-wrap: normal; - white-space: pre-wrap; - } - } - - .toast-controls { - display: flex; - } - - .alert-info .badge { - background: darken(@alert-info-bg, 25%); - } - .alert-warning .badge { - background: darken(@alert-warning-bg, 25%); - } - .alert-danger .badge { - background: darken(@alert-danger-bg, 25%); - } - - .toast-message { - white-space: normal; - } -} - -// toast message class for banner needs to be display:block because banner does -// not have a flex layout, and the styled element could be any kind of element -.toast-message-banner { - display: block; -} diff --git a/src/ui/public/notify/partials/_index.scss b/src/ui/public/notify/partials/_index.scss new file mode 100644 index 000000000000..32421b33128c --- /dev/null +++ b/src/ui/public/notify/partials/_index.scss @@ -0,0 +1 @@ +@import './toaster'; diff --git a/src/ui/public/notify/partials/_toaster.scss b/src/ui/public/notify/partials/_toaster.scss new file mode 100644 index 000000000000..b3584daf9825 --- /dev/null +++ b/src/ui/public/notify/partials/_toaster.scss @@ -0,0 +1,63 @@ +.kbnToaster__container { + visibility: visible; + width: 100%; + + .kbnToaster { + margin: 0; + padding: 0; + list-style: none; + } + + /** + * 1. Shouldn't look like a button. + */ + .kbnToaster__countdown { + appearance: none; + background: none; + border: none; + } + + .alert { + padding: $euiSizeXS $euiSize; + margin: 0; + border-radius: 0; + border: none; + } + + .kbnToast { + display: flex; + align-items: center; + + > * { + flex: 0 0 auto; + + &:not(:last-child) { + margin-right: $euiSizeXS; + } + } + } + + .kbnToast__message { + text-overflow: ellipsis; + flex: 1 1 auto; + line-height: normal; + white-space: normal; + } + + .kbnToast__stack { + padding-bottom: $euiSizeS; + + pre { + display: inline-block; + width: 100%; + margin: $euiSizeS 0; + word-break: normal; + word-wrap: normal; + white-space: pre-wrap; + } + } + + .kbnToast__controls { + display: flex; + } +} diff --git a/src/ui/public/notify/partials/toaster.html b/src/ui/public/notify/partials/toaster.html index da2de021f09c..49b229d9c3ab 100644 --- a/src/ui/public/notify/partials/toaster.html +++ b/src/ui/public/notify/partials/toaster.html @@ -1,8 +1,7 @@ -
-
    +
    +
    • - {{ notif.count }} @@ -84,14 +83,12 @@ class="euiBadge euiBadge--default" type="button" ng-if="notif.isTimed()" - class="toaster-countdown" + class="kbnToaster__countdown" ng-click="notif.cancelTimer()" title="Stop" > - - {{notif.timeRemaining}}s - + {{ notif.timeRemaining }}s
      @@ -99,7 +96,6 @@ 
      
       
      
-
     
      • 
   
    
 
    
diff --git a/src/ui/public/styles/bootstrap/theme.less b/src/ui/public/styles/bootstrap/theme.less
index 52a70a11ac7b..a9746c6a72a5 100644
--- a/src/ui/public/styles/bootstrap/theme.less
+++ b/src/ui/public/styles/bootstrap/theme.less
@@ -121,6 +121,15 @@
 .alert-warning    { .alert-styles(@alert-warning-bg); }
 .alert-danger     { .alert-styles(@alert-danger-bg); }
 
+.alert-info .badge {
+  background: darken(@alert-info-bg, 25%);
+}
+.alert-warning .badge {
+  background: darken(@alert-warning-bg, 25%);
+}
+.alert-danger .badge {
+  background: darken(@alert-danger-bg, 25%);
+}
 
 //
 // Progress bars
diff --git a/src/ui/public/styles/theme.less b/src/ui/public/styles/theme.less
index dc975d316107..02cee9ec4bec 100644
--- a/src/ui/public/styles/theme.less
+++ b/src/ui/public/styles/theme.less
@@ -31,13 +31,13 @@
   }
 
   .navbar-inverse {
-    .logo {
+    .kbnGlobalNav__logoBrand {
       height: @navbar-height;
       width: 252px;
       background-color: @navbar-inverse-brand-bg;
     }
 
-    .logo-small {
+    .kbnGlobalNav__smallLogoBrand {
       height: @navbar-height;
       width: 45px;
       background-color: @navbar-inverse-brand-bg;
diff --git a/test/functional/apps/xpack/index.js b/test/functional/apps/xpack/index.js
index 5b5bb60e05ac..39765914e79f 100644
--- a/test/functional/apps/xpack/index.js
+++ b/test/functional/apps/xpack/index.js
@@ -27,26 +27,23 @@ export default function ({ getService, getPageObjects }) {
     before(function () {
       log.debug('check for X-Pack welcome, opt-out, and dismiss it');
 
-      // find class toaster and see if there's any list items in it?
-      return PageObjects.settings.navigateTo()
+      // find class kbnToaster and see if there's any list items in it?
+      return PageObjects.settings
+        .navigateTo()
         .then(() => {
           return PageObjects.monitoring.getToasterContents();
         })
-        .then((contents) => {
-        // Welcome to X-Pack!
-        // Sharing your cluster statistics with us helps us improve. Your data is never shared with anyone. Not interested? Opt out here.
-        // Dismiss
+        .then(contents => {
+          // Welcome to X-Pack!
+          // Sharing your cluster statistics with us helps us improve. Your data is never shared with anyone. Not interested? Opt out here.
+          // Dismiss
           log.debug('Toast banner contents = ' + contents);
           if (contents.includes('X-Pack')) {
-            return PageObjects.monitoring.clickOptOut()
-              .then(() => {
-                return PageObjects.monitoring.dismissWelcome();
-              });
+            return PageObjects.monitoring.clickOptOut().then(() => {
+              return PageObjects.monitoring.dismissWelcome();
+            });
           }
         });
-
     });
-
   });
-
 }
diff --git a/test/functional/page_objects/header_page.js b/test/functional/page_objects/header_page.js
index 803d8266e3c8..4b8f3612332a 100644
--- a/test/functional/page_objects/header_page.js
+++ b/test/functional/page_objects/header_page.js
@@ -28,7 +28,6 @@ export function HeaderPageProvider({ getService, getPageObjects }) {
   const defaultFindTimeout = config.get('timeouts.find');
 
   class HeaderPage {
-
     async clickSelector(selector) {
       log.debug(`clickSelector(${selector})`);
       await find.clickByCssSelector(selector);
@@ -198,7 +197,7 @@ export function HeaderPageProvider({ getService, getPageObjects }) {
     // check if the auto refresh state is active and to pause it
     async pauseAutoRefresh() {
       let result = false;
-      if (await this.getAutoRefreshState() === 'active') {
+      if ((await this.getAutoRefreshState()) === 'active') {
         await testSubjects.click('globalTimepickerAutoRefreshButton');
         result = true;
       }
@@ -208,7 +207,7 @@ export function HeaderPageProvider({ getService, getPageObjects }) {
     // check if the auto refresh state is inactive and to resume it
     async resumeAutoRefresh() {
       let result = false;
-      if (await this.getAutoRefreshState() === 'inactive') {
+      if ((await this.getAutoRefreshState()) === 'inactive') {
         await testSubjects.click('globalTimepickerAutoRefreshButton');
         result = true;
       }
@@ -216,8 +215,10 @@ export function HeaderPageProvider({ getService, getPageObjects }) {
     }
 
     async getToastMessage(findTimeout = defaultFindTimeout) {
-      const toastMessage =
-        await find.displayedByCssSelector('kbn-truncated.toast-message', findTimeout);
+      const toastMessage = await find.displayedByCssSelector(
+        'kbn-truncated.kbnToast__message',
+        findTimeout
+      );
       const messageText = await toastMessage.getVisibleText();
       log.debug(`getToastMessage: ${messageText}`);
       return messageText;
diff --git a/test/functional/page_objects/monitoring_page.js b/test/functional/page_objects/monitoring_page.js
index ea6fd825ea42..8ae8dc88388f 100644
--- a/test/functional/page_objects/monitoring_page.js
+++ b/test/functional/page_objects/monitoring_page.js
@@ -32,14 +32,13 @@ export function MonitoringPageProvider({ getService }) {
     }
 
     async getToasterContents() {
-      const el = await find.byCssSelector('div.toaster-container');
+      const el = await find.byCssSelector('div.kbnToaster__container');
       return await el.getVisibleText();
     }
 
     async clickOptOut() {
       return find.clickByLinkText('Opt out here');
     }
-
   }
 
   return new MonitoringPage();
diff --git a/x-pack/plugins/canvas/public/components/fullscreen/fullscreen.scss b/x-pack/plugins/canvas/public/components/fullscreen/fullscreen.scss
index 0cfdcd29ecf9..9acace1498ba 100644
--- a/x-pack/plugins/canvas/public/components/fullscreen/fullscreen.scss
+++ b/x-pack/plugins/canvas/public/components/fullscreen/fullscreen.scss
@@ -1,6 +1,6 @@
 body.canvas-isFullscreen {
   // this is a hack that overwrites Kibana's core chrome
-  .global-nav.is-global-nav-open + .app-wrapper,
+  .kbnGlobalNav.kbnGlobalNav-isOpen + .app-wrapper,
   .app-wrapper {
     left: 0;
   }
@@ -11,7 +11,7 @@ body.canvas-isFullscreen {
   }
 
   // hide all the interface parts
-  nav.global-nav, // K6 global side nav
+  nav.kbnGlobalNav, // K6 global side nav
   .header-global-wrapper, // K7 global top nav
   .canvasLayout__stageHeader,
   .canvasLayout__sidebar,
diff --git a/x-pack/plugins/graph/public/templates/_graph.scss b/x-pack/plugins/graph/public/templates/_graph.scss
index 71520354b803..0735f6ca1c83 100644
--- a/x-pack/plugins/graph/public/templates/_graph.scss
+++ b/x-pack/plugins/graph/public/templates/_graph.scss
@@ -1,3 +1,5 @@
+@import 'ui/public/chrome/variables';
+
 @mixin gphSvgText() {
   font-family: $euiFontFamily;
   font-size: $euiSizeS;
@@ -14,11 +16,11 @@
 .gphGraph__container {
   position: fixed;
   height: 100%;
-  width: calc(100% - 53px); /* 1 */
+  width: calc(100% - #{$kbnGlobalNavClosedWidth}); /* 1 */
 }
 
-.global-nav.is-global-nav-open + .app-wrapper .gphGraph__container {
-  width: calc(100% - 180px); /* 1 */
+.kbnGlobalNav.kbnGlobalNav-isOpen + .app-wrapper .gphGraph__container {
+  width: calc(100% - #{$kbnGlobalNavOpenWidth}); /* 1 */
 }
 
 .gphGraph {
@@ -49,7 +51,7 @@
 
 .gphNode__label {
   @include gphSvgText;
-  cursor:pointer;
+  cursor: pointer;
 }
 
 .gphNode__label--html {
diff --git a/x-pack/plugins/ml/public/components/chart_tooltip/chart_tooltip_service.js b/x-pack/plugins/ml/public/components/chart_tooltip/chart_tooltip_service.js
index 53a0a1b7adc7..4eeb7a81b3f2 100644
--- a/x-pack/plugins/ml/public/components/chart_tooltip/chart_tooltip_service.js
+++ b/x-pack/plugins/ml/public/components/chart_tooltip/chart_tooltip_service.js
@@ -32,7 +32,7 @@ mlChartTooltipService.show = function (contents, target, offset = { x: 0, y: 0 }
   this.element.html(contents);
 
   // side bar width
-  const navOffset = $('.global-nav').width();
+  const navOffset = $('.kbnGlobalNav').width();
   const contentWidth = $('body').width() - navOffset - 10;
   const tooltipWidth = this.element.width();
   const scrollTop = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/_create_job.scss b/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/_create_job.scss
index 0b85a380ff92..864a8b6c44d4 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/_create_job.scss
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/_create_job.scss
@@ -252,6 +252,6 @@ ml-multi-metric-job-chart {
 
 // hide the default es loading indicator bar as it can't be switched off
 // for standard es searches using the http header.
-.loadingIndicator__bar {
+.kbnLoadingIndicator__bar {
   display: none;
 }
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/_create_job.scss b/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/_create_job.scss
index 4ad173c43243..1c67c51a6a37 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/_create_job.scss
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/_create_job.scss
@@ -288,6 +288,6 @@ ml-population-job-chart {
 
 // hide the default es loading indicator bar as it can't be switched off
 // for standard es searches using the http header.
-.loadingIndicator__bar {
+.kbnLoadingIndicator__bar {
   display: none;
 }
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/recognize/create_job/_create_jobs.scss b/x-pack/plugins/ml/public/jobs/new_job/simple/recognize/create_job/_create_jobs.scss
index 21d0cefd5551..0a19ef71ee21 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/recognize/create_job/_create_jobs.scss
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/recognize/create_job/_create_jobs.scss
@@ -188,6 +188,6 @@
 
 // hide the default es loading indicator bar as it can't be switched off
 // for standard es searches using the http header.
-.loadingIndicator__bar {
+.kbnLoadingIndicator__bar {
   display: none;
 }
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/_create_job.scss b/x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/_create_job.scss
index bb339185a127..c5a3916d5c2d 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/_create_job.scss
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/_create_job.scss
@@ -205,6 +205,6 @@
 
 // hide the default es loading indicator bar as it can't be switched off
 // for standard es searches using the http header.
-.loadingIndicator__bar {
+.kbnLoadingIndicator__bar {
   display: none;
 }
diff --git a/x-pack/plugins/reporting/export_types/common/layouts/preserve_layout.css b/x-pack/plugins/reporting/export_types/common/layouts/preserve_layout.css
index c923894bfced..d834f382df8b 100644
--- a/x-pack/plugins/reporting/export_types/common/layouts/preserve_layout.css
+++ b/x-pack/plugins/reporting/export_types/common/layouts/preserve_layout.css
@@ -15,9 +15,9 @@
 }
 
 /* hide unusable controls */
-.global-nav,
+.kbnGlobalNav,
 kbn-top-nav,
-.toaster-container,
+.kbnToaster__container,
 filter-bar,
 ::-webkit-scrollbar {
   display: none !important;
diff --git a/x-pack/plugins/reporting/export_types/common/layouts/print.css b/x-pack/plugins/reporting/export_types/common/layouts/print.css
index 1523e56cc61b..4dc1629a444b 100644
--- a/x-pack/plugins/reporting/export_types/common/layouts/print.css
+++ b/x-pack/plugins/reporting/export_types/common/layouts/print.css
@@ -15,9 +15,9 @@
 }
 
 /* hide unusable controls */
-.global-nav,
+.kbnGlobalNav,
 kbn-top-nav,
-.toaster-container,
+.kbnToaster__container,
 filter-bar,
 ::-webkit-scrollbar {
   display: none !important;
diff --git a/x-pack/plugins/spaces/public/views/nav_control/_nav_control.scss b/x-pack/plugins/spaces/public/views/nav_control/_nav_control.scss
index 6feccde1080a..3c08b33cd22d 100644
--- a/x-pack/plugins/spaces/public/views/nav_control/_nav_control.scss
+++ b/x-pack/plugins/spaces/public/views/nav_control/_nav_control.scss
@@ -1,3 +1,3 @@
-.global-nav-link__icon .spaceNavGraphic {
+.kbnGlobalNavLink__icon .spaceNavGraphic {
     margin-top: 0.5em;
 }
diff --git a/x-pack/plugins/spaces/public/views/nav_control/components/spaces_global_nav_button.tsx b/x-pack/plugins/spaces/public/views/nav_control/components/spaces_global_nav_button.tsx
index 137b4c50a89d..f9ff36c671dd 100644
--- a/x-pack/plugins/spaces/public/views/nav_control/components/spaces_global_nav_button.tsx
+++ b/x-pack/plugins/spaces/public/views/nav_control/components/spaces_global_nav_button.tsx
@@ -10,10 +10,10 @@ import { ButtonProps } from '../types';
 export class SpacesGlobalNavButton extends Component {
   public render() {
     return (
-      
    
-        
       
    
     );
diff --git a/x-pack/test/functional/apps/dashboard_mode/dashboard_view_mode.js b/x-pack/test/functional/apps/dashboard_mode/dashboard_view_mode.js
index 8e20bbf1ea28..2979026dc837 100644
--- a/x-pack/test/functional/apps/dashboard_mode/dashboard_view_mode.js
+++ b/x-pack/test/functional/apps/dashboard_mode/dashboard_view_mode.js
@@ -123,7 +123,7 @@ export default function ({ getService, getPageObjects }) {
         const collapseLinkExists = await find.existsByLinkText('Collapse');
         expect(collapseLinkExists).to.be(true);
 
-        const navLinks = await find.allByCssSelector('.global-nav-link');
+        const navLinks = await find.allByCssSelector('.kbnGlobalNavLink');
         expect(navLinks.length).to.equal(5);
       });