diff --git a/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap b/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap index 86fce47fa887f..28562b9382a9e 100644 --- a/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap +++ b/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap @@ -50,85 +50,65 @@ exports[`Apply and Cancel change btns enabled when there are changes 1`] = ` gutterSize="l" justifyContent="flexStart" responsive={true} - wrap={false} + wrap={true} > - - - - - + + - - - - - + + - - - - - + + @@ -184,85 +164,65 @@ exports[`Clear btns enabled when there are values 1`] = ` gutterSize="l" justifyContent="flexStart" responsive={true} - wrap={false} + wrap={true} > - - - - - + + - - - - - + + - - - - - + + @@ -318,85 +278,65 @@ exports[`Renders list control 1`] = ` gutterSize="l" justifyContent="flexStart" responsive={true} - wrap={false} + wrap={true} > - - - - - + + - - - - - + + - - - - - + + @@ -458,85 +398,65 @@ exports[`Renders range control 1`] = ` gutterSize="l" justifyContent="flexStart" responsive={true} - wrap={false} + wrap={true} > - - - - - + + - - - - - + + - - - - - + + diff --git a/src/legacy/core_plugins/input_control_vis/public/components/vis/_vis.scss b/src/legacy/core_plugins/input_control_vis/public/components/vis/_vis.scss index 08d769393c790..dae5adff0a439 100644 --- a/src/legacy/core_plugins/input_control_vis/public/components/vis/_vis.scss +++ b/src/legacy/core_plugins/input_control_vis/public/components/vis/_vis.scss @@ -1,6 +1,7 @@ .icvContainer { width: 100%; margin: 0 $euiSizeXS; + padding: $euiSizeS; // Removes the browser's number stepper input[type=number]::-webkit-inner-spin-button, diff --git a/src/legacy/core_plugins/input_control_vis/public/components/vis/input_control_vis.js b/src/legacy/core_plugins/input_control_vis/public/components/vis/input_control_vis.js index c0a5a3db9d6d2..602127f4fca66 100644 --- a/src/legacy/core_plugins/input_control_vis/public/components/vis/input_control_vis.js +++ b/src/legacy/core_plugins/input_control_vis/public/components/vis/input_control_vis.js @@ -23,9 +23,9 @@ import { RangeControl } from './range_control'; import { ListControl } from './list_control'; import { EuiButton, + EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, - EuiFormRow, } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; @@ -99,40 +99,40 @@ export class InputControlVis extends Component { renderStagingButtons() { return ( - + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + ); diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/point_series/category_axis.html b/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/point_series/category_axis.html index c9e517489d6e4..0d6f804ef87ae 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/point_series/category_axis.html +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/point_series/category_axis.html @@ -40,25 +40,26 @@
+ + + - - - - - + + +
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/point_series/value_axes.html b/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/point_series/value_axes.html index 77b41bb7e2fb4..fb62021a51c93 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/point_series/value_axes.html +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/point_series/value_axes.html @@ -143,25 +143,27 @@
- - + + + - - + + +
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/_dashboard_app.scss b/src/legacy/core_plugins/kibana/public/dashboard/_dashboard_app.scss index 01cb7f0cce35c..2d1347f0e2964 100644 --- a/src/legacy/core_plugins/kibana/public/dashboard/_dashboard_app.scss +++ b/src/legacy/core_plugins/kibana/public/dashboard/_dashboard_app.scss @@ -11,12 +11,13 @@ .dshStartScreen { text-align: center; - margin: $euiSize auto; - max-width: 800px; - width: 100%; - background: $euiColorEmptyShade; - padding: $euiSizeXXL; - border-radius: $euiBorderRadius; + padding: $euiSize; + background-color: $euiColorLightestShade; + color: $euiColorDarkShade; + + > * { + max-width: 36em !important; + } } .dshSaveModal, diff --git a/src/legacy/core_plugins/kibana/public/dashboard/_index.scss b/src/legacy/core_plugins/kibana/public/dashboard/_index.scss index 30c15f90951b9..a5037a64f067e 100644 --- a/src/legacy/core_plugins/kibana/public/dashboard/_index.scss +++ b/src/legacy/core_plugins/kibana/public/dashboard/_index.scss @@ -3,8 +3,10 @@ // 'react-resizable/css/styles.css'; // ... are being imported via JS in grid/dashboard_grid.js +@import './variables'; + // Temporary hacks -@import 'hacks'; +@import './hacks'; // Prefix all styles with "dsh" to avoid conflicts. // Examples @@ -13,7 +15,7 @@ // dshChart__legend--small // dshChart__legend-isLoading -@import 'dashboard_app'; -@import 'grid/index'; -@import 'panel/index'; -@import 'viewport/index'; +@import './dashboard_app'; +@import './grid/index'; +@import './panel/index'; +@import './viewport/index'; diff --git a/src/legacy/core_plugins/kibana/public/dashboard/_variables.scss b/src/legacy/core_plugins/kibana/public/dashboard/_variables.scss new file mode 100644 index 0000000000000..4a715ab255166 --- /dev/null +++ b/src/legacy/core_plugins/kibana/public/dashboard/_variables.scss @@ -0,0 +1 @@ +$dshEditingModeHoverColor: transparentize($euiColorWarning, lightOrDarkTheme(.9, .7)); diff --git a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html index 67774b3400816..f40f9caa67e7d 100644 --- a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html +++ b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html @@ -50,69 +50,76 @@ on-submit="onApplyFilters" > -
-

-

+
+
+ -

- - - -

-
+

+ +
+

+

+ +

+ + + +

+

+
+ +
+

+

-
-

-

+

+ + + +

+
-

- - - -

+
- my embeddable title - +
-
- -
+ + + +
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/panel/_dashboard_panel.scss b/src/legacy/core_plugins/kibana/public/dashboard/panel/_dashboard_panel.scss index a1606566d22e8..8f860151478f0 100644 --- a/src/legacy/core_plugins/kibana/public/dashboard/panel/_dashboard_panel.scss +++ b/src/legacy/core_plugins/kibana/public/dashboard/panel/_dashboard_panel.scss @@ -1,3 +1,9 @@ +/** + * EDITING MODE + * Use .dshLayout--editing to target editing state because + * .dshPanel--editing doesn't get updating without a hard refresh + */ + .dshPanel { z-index: auto; flex: 1; @@ -21,12 +27,19 @@ width: 100%; } + .panel-content-isLoading { + // completely center the loading indicator + justify-content: center; + align-items: center; + } + /** * 1. We want the kbnDocTable__container to scroll only when embedded in a dashboard panel * 2. Fix overflow of vis's specifically for inside dashboard panels, lets the panel decide the overflow * 3. Force a better looking scrollbar */ .kbnDocTable__container { + @include euiScrollBar; /* 3 */ flex: 1 1 0; /* 1 */ overflow: auto; /* 1 */ } @@ -38,14 +51,20 @@ .visualization .visChart__container { overflow: visible; /* 2 */ } + + .visLegend__toggle { + border-bottom-right-radius: 0; + border-top-left-radius: 0; + } } -.dshPanel--editing { +.dshLayout--editing .dshPanel { + border-style: dashed; + border-color: $euiColorMediumShade; transition: all $euiAnimSpeedFast $euiAnimSlightResistance; &:hover, &:focus { - border-color: $euiColorPrimary; @include euiSlightShadowHover; } } @@ -55,71 +74,61 @@ // Adjust borders/etc... for non-spaced out and expanded panels .dshLayout-withoutMargins, .dshDashboardGrid__item--expanded { - // Remove border color unless in editing mode - .dshPanel:not(.dshPanel--editing) { - border-color: transparent; - } - .dshPanel { box-shadow: none; border-radius: 0; } } +// Remove border color unless in editing mode +.dshLayout-withoutMargins:not(.dshLayout--editing), +.dshDashboardGrid__item--expanded { + .dshPanel { + border-color: transparent; + } +} + // HEADER .dshPanel__header { - padding: $euiSizeS; flex: 0 0 auto; - white-space: nowrap; display: flex; - border: none; - transition: background-color $euiAnimSpeedFast $euiAnimSlightResistance; + // ensure menu button is on the right even if the title doesn't exist + justify-content: flex-end; } .dshPanel__title { - font-size: $euiFontSizeS; - color: $euiColorDarkShade; - transition: color $euiAnimSpeedFast $euiAnimSlightResistance; - flex: 1 1 auto; @include euiTextTruncate; + @include euiTitle('xxxs'); + line-height: 1.5; + flex-grow: 1; - // flexbox fix for IE10 - // http://stackoverflow.com/questions/22008135/internet-explorer-10-does-not-apply-flexbox-on-inline-elements - display: inline-block; + &:not(:empty) { + padding: ($euiSizeXS * 1.5) $euiSizeS 0; + } } -.dshPanel--editing:hover { - .dshPanel__header { - background-color: rgba($euiColorFullShade,.05) !important; - cursor: move; +.dshLayout--editing { + .dshPanel__dragger { + transition: background-color $euiAnimSpeedFast $euiAnimSlightResistance; } - .dshPanel__title:hover { - color: $euiColorPrimary; + .dshPanel__dragger:hover { + background-color: $dshEditingModeHoverColor; + cursor: move; } } -/** - * 1. Use opacity to make this element accessible to screen readers and keyboard. - * 2. Show on focus to enable keyboard accessibility. - */ +.dshPanel__dragger:not(.dshPanel__title) { + flex-grow: 1; +} + .dshPanel__header--floater { - opacity: 0; /* 1 */ position: absolute; - right: 1px; - top: 1px; - background-color: $euiColorEmptyShade; + right: 0; + top: 0; + left: 0; z-index: $euiZLevel1; - transition: opacity $euiAnimSpeedFast $euiAnimSlightResistance; - - &:focus { /* 2 */ - opacity: 1; - } -} - -.dshPanel:hover .dshPanel__header--floater { - opacity: 1; } // OPTIONS MENU @@ -127,19 +136,44 @@ /** * 1. Use opacity to make this element accessible to screen readers and keyboard. * 2. Show on focus to enable keyboard accessibility. + * 3. Always show in editing mode */ + +.dshPanel_optionsMenuButton { + background-color: transparentize($euiColorDarkestShade, .9); + border-bottom-right-radius: 0; + border-top-left-radius: 0; + + &:focus { + background-color: $euiFocusBackgroundColor; + } +} + +.dshPanel .visLegend__toggle, .dshPanel_optionsMenuButton { opacity: 0; /* 1 */ - &:focus { /* 2 */ + &:focus { + opacity: 1; /* 2 */ + } +} + +.dshPanel_optionsMenuPopover[class*="-isOpen"], +.dshPanel:hover { + .dshPanel_optionsMenuButton, + .visLegend__toggle { opacity: 1; } } -.dshPanel:hover .dshPanel_optionsMenuButton { - opacity: 1; +.dshLayout--editing { + .dshPanel_optionsMenuButton, + .dshPanel .visLegend__toggle { + opacity: 1; /* 3 */ + } } + // ERROR .dshPanel__error { @@ -147,6 +181,7 @@ justify-content: center; flex-direction: column; overflow: auto; + text-align: center; .fa-exclamation-triangle { font-size: $euiFontSizeXL; diff --git a/src/legacy/core_plugins/kibana/public/dashboard/panel/dashboard_panel.js b/src/legacy/core_plugins/kibana/public/dashboard/panel/dashboard_panel.js index cf10849298f29..500079cf22a89 100644 --- a/src/legacy/core_plugins/kibana/public/dashboard/panel/dashboard_panel.js +++ b/src/legacy/core_plugins/kibana/public/dashboard/panel/dashboard_panel.js @@ -19,7 +19,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { injectI18n, FormattedMessage } from '@kbn/i18n/react'; +import { injectI18n } from '@kbn/i18n/react'; import classNames from 'classnames'; import _ from 'lodash'; @@ -28,6 +28,7 @@ import { PanelError } from './panel_error'; import { EuiPanel, + EuiLoadingChart, } from '@elastic/eui'; class DashboardPanelUi extends React.Component { @@ -98,16 +99,19 @@ class DashboardPanelUi extends React.Component { }; renderEmbeddableViewport() { + const classes = classNames('panel-content', { + 'panel-content-isLoading': !this.props.initialized, + }); + return (
this.panelElement = panelElement} > - {!this.props.initialized && } + {!this.props.initialized && ( + + )}
); } diff --git a/src/legacy/core_plugins/kibana/public/dashboard/panel/panel_error.tsx b/src/legacy/core_plugins/kibana/public/dashboard/panel/panel_error.tsx index 4901c7d9287f1..9345bb2c63224 100644 --- a/src/legacy/core_plugins/kibana/public/dashboard/panel/panel_error.tsx +++ b/src/legacy/core_plugins/kibana/public/dashboard/panel/panel_error.tsx @@ -17,6 +17,7 @@ * under the License. */ +import { EuiIcon, EuiSpacer, EuiText } from '@elastic/eui'; import React from 'react'; export interface PanelErrorProps { @@ -26,8 +27,11 @@ export interface PanelErrorProps { export function PanelError({ error }: PanelErrorProps) { return (
-
); } diff --git a/src/legacy/core_plugins/kibana/public/dashboard/panel/panel_header/panel_header.tsx b/src/legacy/core_plugins/kibana/public/dashboard/panel/panel_header/panel_header.tsx index 9e9e59d79aa97..9f6d9bb309da0 100644 --- a/src/legacy/core_plugins/kibana/public/dashboard/panel/panel_header/panel_header.tsx +++ b/src/legacy/core_plugins/kibana/public/dashboard/panel/panel_header/panel_header.tsx @@ -18,6 +18,7 @@ */ import { InjectedIntl, injectI18n } from '@kbn/i18n/react'; +import classNames from 'classnames'; import React from 'react'; import { Embeddable } from 'ui/embeddable'; import { PanelId } from '../../selectors'; @@ -43,24 +44,26 @@ function PanelHeaderUi({ hidePanelTitles, intl, }: PanelHeaderUiProps) { + const classes = classNames('dshPanel__header', { + 'dshPanel__header--floater': !title || hidePanelTitles, + }); + if (isViewOnlyMode && (!title || hidePanelTitles)) { return ( -
-
- -
+
+
); } return (
- {hidePanelTitles ? '' : title} - - -
-
+ +
); } diff --git a/src/legacy/core_plugins/kibana/public/dashboard/panel/panel_header/panel_options_menu.tsx b/src/legacy/core_plugins/kibana/public/dashboard/panel/panel_header/panel_options_menu.tsx index 25efd58d059e1..a9ebf3ce42a51 100644 --- a/src/legacy/core_plugins/kibana/public/dashboard/panel/panel_header/panel_options_menu.tsx +++ b/src/legacy/core_plugins/kibana/public/dashboard/panel/panel_header/panel_options_menu.tsx @@ -51,7 +51,7 @@ function PanelOptionsMenuUi({ { - const isChecked = evt.target.checked; + const isChecked = !evt.target.checked; this.props.onHidePanelTitlesChange(isChecked); this.setState({ hidePanelTitles: isChecked }); } @@ -68,9 +68,9 @@ class OptionsMenuUi extends Component { diff --git a/src/legacy/core_plugins/kibana/public/dashboard/viewport/_dashboard_viewport.scss b/src/legacy/core_plugins/kibana/public/dashboard/viewport/_dashboard_viewport.scss index 58eecb70db63a..25f5476bfe92c 100644 --- a/src/legacy/core_plugins/kibana/public/dashboard/viewport/_dashboard_viewport.scss +++ b/src/legacy/core_plugins/kibana/public/dashboard/viewport/_dashboard_viewport.scss @@ -5,5 +5,5 @@ .dshDashboardViewport-withMargins { width: 100%; - background-color: $euiColorLightestShade; + background-color: $euiPageBackgroundColor; } diff --git a/src/legacy/core_plugins/markdown_vis/public/_markdown_vis.scss b/src/legacy/core_plugins/markdown_vis/public/_markdown_vis.scss index f9f4347096db1..8c66e7859752a 100644 --- a/src/legacy/core_plugins/markdown_vis/public/_markdown_vis.scss +++ b/src/legacy/core_plugins/markdown_vis/public/_markdown_vis.scss @@ -1,6 +1,7 @@ .mkdVis { - padding: $euiSizeM; + padding: $euiSizeS; width: 100%; + } #markdownVisInput { diff --git a/src/legacy/core_plugins/metrics/public/components/_error.scss b/src/legacy/core_plugins/metrics/public/components/_error.scss index b9905c1011363..0718bf58b0ce2 100644 --- a/src/legacy/core_plugins/metrics/public/components/_error.scss +++ b/src/legacy/core_plugins/metrics/public/components/_error.scss @@ -1,21 +1,3 @@ -// EUITODO: Convert to EuiCallout -.tvbError { - padding: $euiSize; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - // Calculate colors similar to EuiCallout - $tempBackgroundColor: tintOrShade($euiColorDanger, 90%, 70%); - background-color: $tempBackgroundColor; - - .tvbError__title { - @include euiTitle("xs"); - color: makeHighContrastColor($euiColorDanger, $tempBackgroundColor); - } -} - .tvbError__additional, .tvbError__stack { margin-top: $euiSizeS; diff --git a/src/legacy/core_plugins/metrics/public/components/error.js b/src/legacy/core_plugins/metrics/public/components/error.js index eef0a6d841705..e06d2eaa3ea82 100644 --- a/src/legacy/core_plugins/metrics/public/components/error.js +++ b/src/legacy/core_plugins/metrics/public/components/error.js @@ -17,6 +17,7 @@ * under the License. */ +import { EuiIcon, EuiSpacer, EuiText } from '@elastic/eui'; import PropTypes from 'prop-types'; import React from 'react'; import _ from 'lodash'; @@ -38,28 +39,33 @@ function ErrorComponent(props) { reason = _.get(error, 'error.caused_by.caused_by.reason'); additionalInfo = (
-
{reason}
+
{reason}
{scriptStack.join('\n')}
); } else if (reason) { additionalInfo = (
-
{reason}
+ {reason}
); } return ( -
-
+
+ +
- {additionalInfo} + + {additionalInfo} +
); } diff --git a/src/legacy/core_plugins/metrics/public/components/no_data.js b/src/legacy/core_plugins/metrics/public/components/no_data.js index 4a7d62294bc6c..d00a7a83a6959 100644 --- a/src/legacy/core_plugins/metrics/public/components/no_data.js +++ b/src/legacy/core_plugins/metrics/public/components/no_data.js @@ -19,16 +19,23 @@ import React from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; +import { EuiIcon, EuiSpacer, EuiText } from '@elastic/eui'; function NoDataComponent() { return ( -
-
- -
+
+ +
); } diff --git a/src/legacy/core_plugins/metrics/public/visualizations/components/_legend.scss b/src/legacy/core_plugins/metrics/public/visualizations/components/_legend.scss index e6a18e7c9ac11..50800ede7063c 100644 --- a/src/legacy/core_plugins/metrics/public/visualizations/components/_legend.scss +++ b/src/legacy/core_plugins/metrics/public/visualizations/components/_legend.scss @@ -62,6 +62,7 @@ } .tvbLegend__itemValue { + font-weight: $euiFontWeightSemiBold; color: $tvbValueColor; margin-left: $euiSizeXS; diff --git a/src/legacy/core_plugins/metrics/public/visualizations/components/_timeseries_chart.scss b/src/legacy/core_plugins/metrics/public/visualizations/components/_timeseries_chart.scss index 6f644eb88bdfb..2c32b6f87d57c 100644 --- a/src/legacy/core_plugins/metrics/public/visualizations/components/_timeseries_chart.scss +++ b/src/legacy/core_plugins/metrics/public/visualizations/components/_timeseries_chart.scss @@ -14,7 +14,7 @@ display: flex; flex: 1 0 auto; // TODO: Remove once tooltips are portaled - overflow: hidden; // Ensures the tooltip doesn't cause scrollbars + overflow: visible; // Ensures the tooltip doesn't cause scrollbars } .tvbVisTimeSeries__visualization { diff --git a/src/legacy/core_plugins/metrics/public/visualizations/components/horizontal_legend.js b/src/legacy/core_plugins/metrics/public/visualizations/components/horizontal_legend.js index 37fb4bab667b7..b98f4fb561681 100644 --- a/src/legacy/core_plugins/metrics/public/visualizations/components/horizontal_legend.js +++ b/src/legacy/core_plugins/metrics/public/visualizations/components/horizontal_legend.js @@ -48,6 +48,7 @@ const HorizontalLegend = injectI18n(function (props) { iconSize="s" onClick={props.onClick} aria-label={props.intl.formatMessage({ id: 'tsvb.horizontalLegend.toggleChartAriaLabel', defaultMessage: 'Toggle chart legend' })} + title={props.intl.formatMessage({ id: 'tsvb.horizontalLegend.toggleChartAriaLabel', defaultMessage: 'Toggle chart legend' })} aria-expanded={!!props.showLegend} aria-controls={htmlId('legend')} /> diff --git a/src/legacy/core_plugins/metrics/public/visualizations/components/vertical_legend.js b/src/legacy/core_plugins/metrics/public/visualizations/components/vertical_legend.js index cfd9fa840f9ec..67b2c38b3f8ff 100644 --- a/src/legacy/core_plugins/metrics/public/visualizations/components/vertical_legend.js +++ b/src/legacy/core_plugins/metrics/public/visualizations/components/vertical_legend.js @@ -58,6 +58,7 @@ const VerticalLegend = injectI18n(function (props) { iconSize="s" onClick={props.onClick} aria-label={props.intl.formatMessage({ id: 'tsvb.verticalLegend.toggleChartAriaLabel', defaultMessage: 'Toggle chart legend' })} + title={props.intl.formatMessage({ id: 'tsvb.verticalLegend.toggleChartAriaLabel', defaultMessage: 'Toggle chart legend' })} aria-expanded={!!props.showLegend} aria-controls={htmlId('legend')} /> diff --git a/src/legacy/core_plugins/table_vis/public/table_vis.html b/src/legacy/core_plugins/table_vis/public/table_vis.html index b9a4aceb525e2..d751db69f2ef3 100644 --- a/src/legacy/core_plugins/table_vis/public/table_vis.html +++ b/src/legacy/core_plugins/table_vis/public/table_vis.html @@ -1,10 +1,16 @@
-
- -

+
+
+ + +
+
+ +

+

+
diff --git a/src/legacy/core_plugins/tagcloud/public/_tag_cloud.scss b/src/legacy/core_plugins/tagcloud/public/_tag_cloud.scss index 62c94b09d4e9f..268e456056776 100644 --- a/src/legacy/core_plugins/tagcloud/public/_tag_cloud.scss +++ b/src/legacy/core_plugins/tagcloud/public/_tag_cloud.scss @@ -7,28 +7,7 @@ overflow: hidden; } -.tgcVisFeedback { - position: absolute; - left: 0; - top: 0; - width: 100%; -} - -.tgcVisFeedback__message { - display: none; - text-align: center; - padding: $euiSizeS; - font-weight: $euiFontWeightBold; - $color: $euiColorWarning; - $backgroundColor: tintOrShade($color, 90%, 70%); - background-color: transparentize($backgroundColor, .5); - color: makeHighContrastColor($color, $backgroundColor); -} - .tgcVisLabel { - position: absolute; - bottom: 2px; // Bringing it up 2px removes the vertical scrollbar - left: 0; width: 100%; text-align: center; font-weight: $euiFontWeightBold; diff --git a/src/legacy/core_plugins/tagcloud/public/feedback_message.js b/src/legacy/core_plugins/tagcloud/public/feedback_message.js index f58e6e7d0f581..e554c4f30867f 100644 --- a/src/legacy/core_plugins/tagcloud/public/feedback_message.js +++ b/src/legacy/core_plugins/tagcloud/public/feedback_message.js @@ -17,8 +17,9 @@ * under the License. */ -import React, { Component } from 'react'; +import React, { Component, Fragment } from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; +import { EuiIconTip } from '@elastic/eui'; export class FeedbackMessage extends Component { @@ -28,21 +29,35 @@ export class FeedbackMessage extends Component { } render() { + if (!this.state.shouldShowTruncate && !this.state.shouldShowIncomplete) { + return ''; + } + return ( -
-
- -
-
- -
-
+ + {this.state.shouldShowTruncate && +

+ +

+ } + {this.state.shouldShowIncomplete && +

+ +

+ } + + )} + /> ); } } diff --git a/src/legacy/core_plugins/tagcloud/public/tag_cloud_visualization.js b/src/legacy/core_plugins/tagcloud/public/tag_cloud_visualization.js index 78307cd75ad70..59df7b2da677f 100644 --- a/src/legacy/core_plugins/tagcloud/public/tag_cloud_visualization.js +++ b/src/legacy/core_plugins/tagcloud/public/tag_cloud_visualization.js @@ -35,10 +35,15 @@ export class TagCloudVisualization { constructor(node, vis) { this._containerNode = node; + const cloudRelativeContainer = document.createElement('div'); + cloudRelativeContainer.classList.add('tgcVis'); + cloudRelativeContainer.setAttribute('style', 'position: relative'); const cloudContainer = document.createElement('div'); cloudContainer.classList.add('tgcVis'); cloudContainer.setAttribute('data-test-subj', 'tagCloudVisualization'); - this._containerNode.appendChild(cloudContainer); + this._containerNode.classList.add('visChart--vertical'); + cloudRelativeContainer.appendChild(cloudContainer); + this._containerNode.appendChild(cloudRelativeContainer); this._vis = vis; this._truncated = false; diff --git a/src/ui/public/doc_table/doc_table.html b/src/ui/public/doc_table/doc_table.html index c035a36dfe907..65f33f6ae542e 100644 --- a/src/ui/public/doc_table/doc_table.html +++ b/src/ui/public/doc_table/doc_table.html @@ -107,8 +107,15 @@
-

-

+
+ + +
+ +

+

+
diff --git a/src/ui/public/filter_bar/_global_filter_group.scss b/src/ui/public/filter_bar/_global_filter_group.scss index 9ed40964a95b4..600915f3adc84 100644 --- a/src/ui/public/filter_bar/_global_filter_group.scss +++ b/src/ui/public/filter_bar/_global_filter_group.scss @@ -1,5 +1,5 @@ // SASSTODO: Probably not the right file for this selector, but temporary until the files get re-organized -.globalQueryBar { +.globalQueryBar:not(:empty) { padding-bottom: $euiSizeS; } diff --git a/src/ui/public/share/show_share_context_menu.tsx b/src/ui/public/share/show_share_context_menu.tsx index 7b39c2e1d4443..4dae2005da75e 100644 --- a/src/ui/public/share/show_share_context_menu.tsx +++ b/src/ui/public/share/show_share_context_menu.tsx @@ -74,6 +74,7 @@ export function showShareContextMenu({ closePopover={onClose} panelPaddingSize="none" withTitle + anchorPosition="downLeft" > thead, > tbody, diff --git a/src/ui/public/vis/editors/default/_default.scss b/src/ui/public/vis/editors/default/_default.scss index 347a1ae8b4838..1753ad4382119 100644 --- a/src/ui/public/vis/editors/default/_default.scss +++ b/src/ui/public/vis/editors/default/_default.scss @@ -81,6 +81,7 @@ */ .visEditor__canvas { + background-color: $euiColorEmptyShade; display: flex; flex-direction: row; overflow: auto; diff --git a/src/ui/public/vis/editors/default/_sidebar.scss b/src/ui/public/vis/editors/default/_sidebar.scss index 3f50581cd0c81..b5181acf78640 100644 --- a/src/ui/public/vis/editors/default/_sidebar.scss +++ b/src/ui/public/vis/editors/default/_sidebar.scss @@ -131,6 +131,7 @@ } .visEditorSidebar__collapsibleTitle { + @include euiFontSizeS; display: flex; align-items: center; justify-content: space-between; @@ -153,7 +154,6 @@ } .visEditorSidebar__collapsibleTitleLabel { - @include euiFontSizeS; color: $euiColorPrimary; display: flex; align-items: center; diff --git a/src/ui/public/vis/vis_types/__tests__/vislib_vis_legend.js b/src/ui/public/vis/vis_types/__tests__/vislib_vis_legend.js index 7490d6391e5a8..ab7bf8fab0abb 100644 --- a/src/ui/public/vis/vis_types/__tests__/vislib_vis_legend.js +++ b/src/ui/public/vis/vis_types/__tests__/vislib_vis_legend.js @@ -158,35 +158,4 @@ describe('visualize_legend directive', function () { $rootScope.unhighlight({ currentTarget: null }); }).to.not.throwError(); }); - - it('getToggleLegendClasses returns correct class', () => { - const requiresSearch = false; - const vis = new CreateVis(null, requiresSearch); - init(vis, fixtures.oneRangeBucket); - - $rootScope.vis.params.legendPosition = 'top'; - $rootScope.open = true; - expect($rootScope.getToggleLegendClasses()).to.equal('fa-chevron-circle-up'); - $rootScope.open = false; - expect($rootScope.getToggleLegendClasses()).to.equal('fa-chevron-circle-down'); - - $rootScope.vis.params.legendPosition = 'bottom'; - $rootScope.open = true; - expect($rootScope.getToggleLegendClasses()).to.equal('fa-chevron-circle-down'); - $rootScope.open = false; - expect($rootScope.getToggleLegendClasses()).to.equal('fa-chevron-circle-up'); - - $rootScope.vis.params.legendPosition = 'left'; - $rootScope.open = true; - expect($rootScope.getToggleLegendClasses()).to.equal('fa-chevron-circle-left'); - $rootScope.open = false; - expect($rootScope.getToggleLegendClasses()).to.equal('fa-chevron-circle-right'); - - $rootScope.vis.params.legendPosition = 'right'; - $rootScope.open = true; - expect($rootScope.getToggleLegendClasses()).to.equal('fa-chevron-circle-right'); - $rootScope.open = false; - expect($rootScope.getToggleLegendClasses()).to.equal('fa-chevron-circle-left'); - }); - }); diff --git a/src/ui/public/vis/vis_types/_vislib_vis_legend.scss b/src/ui/public/vis/vis_types/_vislib_vis_legend.scss index 4b2d9508dd535..532b489d7bc75 100644 --- a/src/ui/public/vis/vis_types/_vislib_vis_legend.scss +++ b/src/ui/public/vis/vis_types/_vislib_vis_legend.scss @@ -3,63 +3,66 @@ // NOTE: Some of the styles attempt to align with the TSVB legend .visLegend__toggle { - align-self: flex-start; - // Override .kuiCollapseButton - color: $visValueColor !important; + border-radius: $euiBorderRadius; + position: absolute; + bottom: 0; + left: 0; + background-color: $euiColorEmptyShade; + transition: opacity $euiAnimSpeedFast $euiAnimSlightResistance, + background-color $euiAnimSpeedFast $euiAnimSlightResistance $euiAnimSpeedExtraSlow; + + &:focus { + box-shadow: none; + background-color: $euiFocusBackgroundColor !important; + } +} + +.visLegend__toggle--isOpen { + background-color: transparentize($euiColorDarkestShade, .9); + opacity: 1; } + .visLegend { @include euiFontSizeXS; display: flex; - flex-direction: row; - padding: $euiSizeXS 0; - overflow: auto; min-height: 0; height: 100%; overflow: hidden; +} - // flex-direction re-aligns toggle button - .visLib--legend-left & { - flex-direction: row-reverse; +.visLib--legend-left{ + .visLegend__list { + margin-bottom: $euiSizeL; } +} - .visLib--legend-right & { - flex-direction: row; +.visLib--legend-bottom { + .visLegend__list { + margin-left: $euiSizeL; } +} - .visLib--legend-top & { - flex-direction: column-reverse; - width: 100%; - padding-left: $euiSizeL; +.visLegend__list { + @include euiScrollBar; + line-height: $euiSize; + width: 150px; // Must be a hard-coded width for the chart to get its correct dimensions + flex: 1 1 auto; + overflow-x: hidden; + overflow-y: auto; - } + .visLib--legend-top &, .visLib--legend-bottom & { - flex-direction: column; - width: 100%; - padding-left: $euiSizeL; - } + width: auto; + overflow-y: hidden; - .visLegend__list { - width: 150px; // Must be a hard-coded width for the chart to get its correct dimensions - flex: 1 1 auto; - flex-direction: column; - min-height: 0; - overflow-x: hidden; - overflow-y: auto; - - .visLib--legend-top &, - .visLib--legend-bottom & { - width: auto; - overflow-y: hidden; - - .visLegend__value { - display: inline-block; - } + .visLegend__value { + display: inline-block; } + } - &.hidden { - visibility: hidden; - } + &.hidden { + visibility: hidden; } } diff --git a/src/ui/public/vis/vis_types/vislib_vis_legend.html b/src/ui/public/vis/vis_types/vislib_vis_legend.html index d432302c46d84..a79a11d4ce23a 100644 --- a/src/ui/public/vis/vis_types/vislib_vis_legend.html +++ b/src/ui/public/vis/vis_types/vislib_vis_legend.html @@ -3,12 +3,14 @@ type="button" ng-click="toggleLegend()" class="kuiCollapseButton visLegend__toggle" + ng-class="{'visLegend__toggle--isOpen': open}" aria-label="{{::'common.ui.vis.visTypes.legend.toggleLegendButtonAriaLabel' | i18n: { defaultMessage: 'Toggle legend' } }}" aria-expanded="{{!!open}}" aria-controls="{{::legendId}}" data-test-subj="vislibToggleLegend" + title="{{::'common.ui.vis.visTypes.legend.toggleLegendButtonTitle' | i18n: { defaultMessage: 'Toggle legend' } }}" > - +
    diff --git a/src/ui/public/vis/vis_types/vislib_vis_legend.js b/src/ui/public/vis/vis_types/vislib_vis_legend.js index c46a75d2929e4..8e1c00c4d2740 100644 --- a/src/ui/public/vis/vis_types/vislib_vis_legend.js +++ b/src/ui/public/vis/vis_types/vislib_vis_legend.js @@ -87,20 +87,6 @@ uiModules.get('kibana') }); }; - $scope.getToggleLegendClasses = function () { - switch ($scope.vis.params.legendPosition) { - case 'top': - return $scope.open ? 'fa-chevron-circle-up' : 'fa-chevron-circle-down'; - case 'bottom': - return $scope.open ? 'fa-chevron-circle-down' : 'fa-chevron-circle-up'; - case 'left': - return $scope.open ? 'fa-chevron-circle-left' : 'fa-chevron-circle-right'; - case 'right': - default: - return $scope.open ? 'fa-chevron-circle-right' : 'fa-chevron-circle-left'; - } - }; - $scope.filter = function (legendData, negate) { $scope.vis.API.events.filter({ data: legendData.values, negate: negate }); }; diff --git a/src/ui/public/vislib/lib/_handler.scss b/src/ui/public/vislib/lib/_handler.scss index 8d9a9e35f7e0e..d1c7fc7c6278c 100644 --- a/src/ui/public/vislib/lib/_handler.scss +++ b/src/ui/public/vislib/lib/_handler.scss @@ -3,15 +3,11 @@ display: flex; align-items: center; justify-content: center; + text-align: center; // From ML .top { align-self: flex-start; } .bottom { align-self: flex-end; } - - p { - margin-top: 15%; - @include euiFontSizeL; - } } // Prevent large request errors from overflowing the container diff --git a/src/ui/public/vislib/lib/layout/_layout.scss b/src/ui/public/vislib/lib/layout/_layout.scss index d23bf3afc2522..f841b317b0e2e 100644 --- a/src/ui/public/vislib/lib/layout/_layout.scss +++ b/src/ui/public/vislib/lib/layout/_layout.scss @@ -239,6 +239,7 @@ } .chart { + @include euiScrollBar; flex: 1 1 100%; min-height: 0; min-width: 0; diff --git a/src/ui/public/visualize/components/__snapshots__/visualization_noresults.test.js.snap b/src/ui/public/visualize/components/__snapshots__/visualization_noresults.test.js.snap index e499f1c841046..68a43fa0ca7ac 100644 --- a/src/ui/public/visualize/components/__snapshots__/visualization_noresults.test.js.snap +++ b/src/ui/public/visualize/components/__snapshots__/visualization_noresults.test.js.snap @@ -2,7 +2,7 @@ exports[`VisualizationNoResults should render according to snapshot 1`] = `
    -