diff --git a/package.json b/package.json index cd28a75de782..622a6d27b6d0 100644 --- a/package.json +++ b/package.json @@ -73,6 +73,7 @@ }, "dependencies": { "@elastic/datemath": "2.3.0", + "@elastic/eui": "0.0.7", "@elastic/filesaver": "1.1.2", "@elastic/numeral": "2.3.1", "@elastic/test-subj-selector": "0.2.1", @@ -95,7 +96,7 @@ "babel-plugin-transform-async-generator-functions": "6.24.1", "babel-plugin-transform-class-properties": "6.24.1", "babel-plugin-transform-define": "1.3.0", - "babel-plugin-transform-object-rest-spread": "6.23.0", + "babel-plugin-transform-object-rest-spread": "6.26.0", "babel-polyfill": "6.20.0", "babel-preset-env": "1.4.0", "babel-preset-react": "6.22.0", diff --git a/src/core_plugins/kibana/public/dashboard/dashboard_app.js b/src/core_plugins/kibana/public/dashboard/dashboard_app.js index c8351edc9578..b64ca6c6bb39 100644 --- a/src/core_plugins/kibana/public/dashboard/dashboard_app.js +++ b/src/core_plugins/kibana/public/dashboard/dashboard_app.js @@ -2,6 +2,7 @@ import _ from 'lodash'; import angular from 'angular'; import { uiModules } from 'ui/modules'; import chrome from 'ui/chrome'; +import { applyTheme } from 'ui/theme'; import 'ui/query_bar'; @@ -329,11 +330,13 @@ app.directive('dashboardApp', function ($injector) { function setDarkTheme() { chrome.removeApplicationClass(['theme-light']); chrome.addApplicationClass('theme-dark'); + applyTheme('dark'); } function setLightTheme() { chrome.removeApplicationClass(['theme-dark']); chrome.addApplicationClass('theme-light'); + applyTheme('light'); } if ($route.current.params && $route.current.params[DashboardConstants.NEW_VISUALIZATION_ID_PARAM]) { diff --git a/src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html b/src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html index f2daacd8cf08..010cad19d1a9 100644 --- a/src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html +++ b/src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html @@ -31,7 +31,7 @@ -
+
-
- +
diff --git a/src/core_plugins/metrics/public/components/markdown_editor.js b/src/core_plugins/metrics/public/components/markdown_editor.js index b0d4a9816e11..08001fc589fd 100644 --- a/src/core_plugins/metrics/public/components/markdown_editor.js +++ b/src/core_plugins/metrics/public/components/markdown_editor.js @@ -11,6 +11,9 @@ import { KuiCodeEditor } from 'ui_framework/components'; import _ from 'lodash'; import 'brace/mode/markdown'; import 'brace/theme/github'; +import { + EuiCodeBlock, +} from '@elastic/eui'; class MarkdownEditor extends Component { constructor(props) { @@ -129,15 +132,14 @@ class MarkdownEditor extends Component { There is also a special variable named _all which you can use to access the entire tree. This is useful for creating lists with data from a group by... - 
-            
-              {`# All servers:
 
-{{#each _all}}
-- {{ label }} {{ last.formatted }}
-{{/each}}`}
-            
-
+ + {`# All servers: + + {{#each _all}} + - {{ label }} {{ last.formatted }} + {{/each}}`} + ); diff --git a/src/ui/public/angular-bootstrap/alert/alert.html b/src/ui/public/angular-bootstrap/alert/alert.html index 6415960996f5..77fa4323e9c7 100755 --- a/src/ui/public/angular-bootstrap/alert/alert.html +++ b/src/ui/public/angular-bootstrap/alert/alert.html @@ -1,7 +1,7 @@ diff --git a/src/ui/public/angular-bootstrap/rating/rating.html b/src/ui/public/angular-bootstrap/rating/rating.html index f4ab6bc7ef26..44f4c4b8bd5f 100755 --- a/src/ui/public/angular-bootstrap/rating/rating.html +++ b/src/ui/public/angular-bootstrap/rating/rating.html @@ -1,5 +1,5 @@ - ({{ $index < value ? '*' : ' ' }}) + ({{ $index < value ? '*' : ' ' }}) - \ No newline at end of file + diff --git a/src/ui/public/autoload/styles.js b/src/ui/public/autoload/styles.js index 929e26ba69b6..f85bedc6daeb 100644 --- a/src/ui/public/autoload/styles.js +++ b/src/ui/public/autoload/styles.js @@ -1,6 +1,19 @@ +const theme = require('../theme'); + // Kibana UI Framework require('../../../../ui_framework/dist/ui_framework.css'); +// Elastic UI Framework, light theme +const euiThemeLight = require('!!raw-loader!@elastic/eui/dist/eui_theme_light.css'); +theme.registerTheme('light', euiThemeLight); + +// Elastic UI Framework, dark theme +const euiThemeDark = require('!!raw-loader!@elastic/eui/dist/eui_theme_dark.css'); +theme.registerTheme('dark', euiThemeDark); + +// Set default theme. +theme.applyTheme('light'); + // All Kibana styles inside of the /styles dir const context = require.context('../styles', false, /[\/\\](?!mixins|variables|_|\.)[^\/\\]+\.less/); context.keys().forEach(key => context(key)); diff --git a/src/ui/public/directives/__tests__/timepicker.js b/src/ui/public/directives/__tests__/timepicker.js index 675fb53b4f0c..641c6706fc46 100644 --- a/src/ui/public/directives/__tests__/timepicker.js +++ b/src/ui/public/directives/__tests__/timepicker.js @@ -132,14 +132,14 @@ describe('timepicker directive', function () { }); it('should highlight the right mode', function () { - expect($elem.find('.kbn-timepicker-modes .active').text().trim()).to.be('Quick'); + expect($elem.find('.kbn-timepicker-modes .euiTab-isSelected').text().trim()).to.be('Quick'); // Each of the 3 modes const modes = ['absolute', 'relative', 'quick']; _.each(modes, function (mode) { $scope.setMode(mode); $scope.$digest(); - expect($elem.find('.kbn-timepicker-modes .active').text().trim().toLowerCase()).to.be(mode); + expect($elem.find('.kbn-timepicker-modes .euiTab-isSelected').text().trim().toLowerCase()).to.be(mode); }); }); }); diff --git a/src/ui/public/filter_bar/filter_bar.html b/src/ui/public/filter_bar/filter_bar.html index d74e7c3d4156..648fe0522cb3 100644 --- a/src/ui/public/filter_bar/filter_bar.html +++ b/src/ui/public/filter_bar/filter_bar.html @@ -42,14 +42,14 @@ ng-show="showAddFilterButton()" >
- Add a filter - +
diff --git a/src/ui/public/filter_bar/filter_bar.less b/src/ui/public/filter_bar/filter_bar.less index 8cedeae4ab3a..bde206068bc7 100644 --- a/src/ui/public/filter_bar/filter_bar.less +++ b/src/ui/public/filter_bar/filter_bar.less @@ -73,6 +73,7 @@ filter-bar { white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; + line-height: 1.5; } .filter { diff --git a/src/ui/public/notify/notify.less b/src/ui/public/notify/notify.less index 13dcdf906b48..6c0eb5f0f60e 100644 --- a/src/ui/public/notify/notify.less +++ b/src/ui/public/notify/notify.less @@ -35,7 +35,7 @@ } .alert { - padding: 0 15px; + padding: 5px 15px; margin: 0; border-radius: 0; border: 0px; @@ -55,7 +55,6 @@ .toast-message { flex: 1 1 auto; - padding-top: 10px; .ellipsis(); line-height: normal; } diff --git a/src/ui/public/styles/base.less b/src/ui/public/styles/base.less index c5ed81db876f..76f88796057d 100644 --- a/src/ui/public/styles/base.less +++ b/src/ui/public/styles/base.less @@ -6,17 +6,6 @@ @import "./react-select"; @import "./pui_react"; -html, -body { - .flex-parent(); - height: 100%; - margin: 0; -} - -label > small { - font-weight: normal; -} - .small { font-size: 0.9em !important; } @@ -52,11 +41,6 @@ label > small { font-family: @font-family-monospace; } -code { - word-break: break-all; - word-wrap: break-word; -} - ul.navbar-inline li { display: inline; } @@ -123,15 +107,6 @@ notifications { margin-bottom: 0px!important; } -a { - // overriden by next rule for a tags that actually have an href - cursor: default; -} - -.link, [ng-click], [clip-copy], [href], [confirm-click] { - cursor: pointer; -} - .application, .app-container { > * { @@ -236,16 +211,6 @@ kbn-table, .kbn-table { } } -//== Generic Table -table { - td .fa { - // font-awesome's override of the line-height usually doesn't - // cauase problems, but in the table it pushes the icon to the - // top of the row - line-height: @line-height-base; - } -} - //== SavedObjectFinder saved-object-finder, paginated-selectable-list { @@ -358,10 +323,6 @@ input[type="checkbox"], } } -textarea { - resize: vertical; -} - .field-collapse-toggle { color: @field-collapse-toggle-color; margin-left: 10px !important; @@ -409,18 +370,6 @@ style-compile { } } -mark, .mark { - background-color: @mark-bg; - border-radius: 2px; -} - -fieldset { - margin: @form-group-margin-bottom; - padding: @form-group-margin-bottom; - border: 1px solid @input-border; - border-radius: @input-border-radius-base; -} - [fixed-scroll] { overflow-x: auto; padding-bottom: 0px; @@ -499,6 +448,8 @@ fieldset { .kuiOptionLabel { font-weight: normal; // 1 cursor: pointer; + display: inline-block; + margin-bottom: 10px; } .kuiFormPanel { diff --git a/src/ui/public/styles/bootstrap/code.less b/src/ui/public/styles/bootstrap/code.less index a08b4d48c4c8..e69de29bb2d1 100644 --- a/src/ui/public/styles/bootstrap/code.less +++ b/src/ui/public/styles/bootstrap/code.less @@ -1,69 +0,0 @@ -// -// Code (inline and block) -// -------------------------------------------------- - - -// Inline and block code styles -code, -kbd, -pre, -samp { - font-family: @font-family-monospace; -} - -// Inline code -code { - padding: 2px 4px; - font-size: 90%; - color: @code-color; - background-color: @code-bg; - border-radius: @border-radius-base; -} - -// User input typically entered via keyboard -kbd { - padding: 2px 4px; - font-size: 90%; - color: @kbd-color; - background-color: @kbd-bg; - border-radius: @border-radius-small; - box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); - - kbd { - padding: 0; - font-size: 100%; - font-weight: bold; - box-shadow: none; - } -} - -// Blocks of code -pre { - display: block; - padding: ((@line-height-computed - 1) / 2); - margin: 0 0 (@line-height-computed / 2); - font-size: (@font-size-base - 1); // 14px to 13px - line-height: @line-height-base; - word-break: break-all; - word-wrap: break-word; - color: @pre-color; - background-color: @pre-bg; - border: 1px solid @pre-border-color; - border-radius: @border-radius-base; - - // Account for some code outputs that place code tags in pre tags - code { - padding: 0; - font-size: inherit; - color: inherit; - white-space: pre-wrap; - background-color: transparent; - border-radius: 0; - } -} - -// Enable scrollable blocks of code -.pre-scrollable { - max-height: @pre-scrollable-max-height; - overflow-y: scroll; -} diff --git a/src/ui/public/styles/bootstrap/forms.less b/src/ui/public/styles/bootstrap/forms.less index aaee6efa3f34..4b2fc50a7bde 100644 --- a/src/ui/public/styles/bootstrap/forms.less +++ b/src/ui/public/styles/bootstrap/forms.less @@ -3,92 +3,6 @@ // -------------------------------------------------- -// Normalize non-controls -// -// Restyle and baseline non-control form elements. - -fieldset { - padding: 0; - margin: 0; - border: 0; - // Chrome and Firefox set a `min-width: min-content;` on fieldsets, - // so we reset that to ensure it behaves more like a standard block element. - // See https://github.com/twbs/bootstrap/issues/12359. - min-width: 0; -} - -legend { - display: block; - width: 100%; - padding: 0; - margin-bottom: @line-height-computed; - font-size: (@font-size-base * 1.5); - line-height: inherit; - color: @legend-color; - border: 0; - border-bottom: 1px solid @legend-border-color; -} - -label { - display: inline-block; - max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141) - margin-bottom: 5px; - font-weight: bold; -} - - -// Normalize form controls -// -// While most of our form styles require extra classes, some basic normalization -// is required to ensure optimum display with or without those classes to better -// address browser inconsistencies. - -// Override content-box in Normalize (* isn't specific enough) -input[type="search"] { - .box-sizing(border-box); -} - -// Position radios and checkboxes better -input[type="radio"], -input[type="checkbox"] { - margin: 4px 0 0; - margin-top: 1px \9; // IE8-9 - line-height: normal; -} - -input[type="file"] { - display: block; -} - -// Make range inputs behave like textual form controls -input[type="range"] { - display: block; - width: 100%; -} - -// Make multiple select elements height not fixed -select[multiple], -select[size] { - height: auto; -} - -// Focus for file, radio, and checkbox -input[type="file"]:focus, -input[type="radio"]:focus, -input[type="checkbox"]:focus { - .tab-focus(); -} - -// Adjust output element -output { - display: block; - padding-top: (@padding-base-vertical + 1); - font-size: @font-size-base; - line-height: @line-height-base; - color: @input-color; -} - - // Common form controls // // Shared size and type resets for form controls. Apply `.form-control` to any @@ -161,50 +75,6 @@ output { } } - -// Search inputs in iOS -// -// This overrides the extra rounded corners on search inputs in iOS so that our -// `.form-control` class can properly style them. Note that this cannot simply -// be added to `.form-control` as it's not specific enough. For details, see -// https://github.com/twbs/bootstrap/issues/11586. - -input[type="search"] { - -webkit-appearance: none; -} - - -// Special styles for iOS temporal inputs -// -// In Mobile Safari, setting `display: block` on temporal inputs causes the -// text within the input to become vertically misaligned. As a workaround, we -// set a pixel line-height that matches the given height of the input, but only -// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848 -// -// Note that as of 8.3, iOS doesn't support `datetime` or `week`. - -@media screen and (-webkit-min-device-pixel-ratio: 0) { - input[type="date"], - input[type="time"], - input[type="datetime-local"], - input[type="month"] { - &.form-control { - line-height: @input-height-base; - } - - &.input-sm, - .input-group-sm & { - line-height: @input-height-small; - } - - &.input-lg, - .input-group-lg & { - line-height: @input-height-large; - } - } -} - - // Form groups // // Designed to help with the organization and spacing of vertical forms. For @@ -265,18 +135,6 @@ input[type="search"] { margin-left: 10px; // space out consecutive inline controls } -// Apply same disabled cursor tweak as for inputs -// Some special care is needed because