From 2a97c0d2f98d4d9f606a8ceb32a837b5a2d7737e Mon Sep 17 00:00:00 2001 From: chorn Date: Thu, 31 Jan 2019 11:56:11 -0500 Subject: [PATCH 01/17] Dashboard visual pass (initial) --- .../public/components/vis/_vis.scss | 1 + .../components/vis/input_control_vis.js | 60 +++++++++---------- .../dashboard/grid/_dashboard_grid.scss | 17 ++++++ .../public/dashboard/grid/dashboard_grid.js | 2 +- .../dashboard/panel/_dashboard_panel.scss | 59 ++++++++---------- .../public/dashboard/panel/dashboard_panel.js | 16 +++-- .../panel/panel_header/panel_header.tsx | 25 ++++---- .../panel/panel_header/panel_options_menu.tsx | 2 +- .../public/dashboard/top_nav/options.js | 6 +- .../markdown_vis/public/_markdown_vis.scss | 3 +- .../public/vis/vis_types/vislib_vis_type.js | 6 ++ .../visualize/components/_visualization.scss | 4 ++ 12 files changed, 113 insertions(+), 88 deletions(-) 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/kibana/public/dashboard/grid/_dashboard_grid.scss b/src/legacy/core_plugins/kibana/public/dashboard/grid/_dashboard_grid.scss index 46479536aaff6..77b9ccaa9f4f9 100644 --- a/src/legacy/core_plugins/kibana/public/dashboard/grid/_dashboard_grid.scss +++ b/src/legacy/core_plugins/kibana/public/dashboard/grid/_dashboard_grid.scss @@ -99,4 +99,21 @@ } } +// When in view-mode only, and on tiny mobile screens, just stack each of the grid-items +@include euiBreakpoint('xs') { + .dshLayout--viewing { + .react-grid-item { + position: static !important; + width: calc(100% - #{$euiSize}) !important; + margin: $euiSizeS; + } + + &.dshLayout-withoutMargins { + .react-grid-item { + width: 100% !important; + margin: 0; + } + } + } +} diff --git a/src/legacy/core_plugins/kibana/public/dashboard/grid/dashboard_grid.js b/src/legacy/core_plugins/kibana/public/dashboard/grid/dashboard_grid.js index 66288aa4a7142..d90b597b1a0c0 100644 --- a/src/legacy/core_plugins/kibana/public/dashboard/grid/dashboard_grid.js +++ b/src/legacy/core_plugins/kibana/public/dashboard/grid/dashboard_grid.js @@ -91,7 +91,7 @@ function ResponsiveGrid({ rowHeight={DASHBOARD_GRID_HEIGHT} // Pass the named classes of what should get the dragging handle // (.doesnt-exist literally doesnt exist) - draggableHandle={isViewMode ? '.doesnt-exist' : '.dshPanel__title'} + draggableHandle={isViewMode ? '.doesnt-exist' : '.dshPanel__dragger'} layout={layout} onLayoutChange={onLayoutChange} measureBeforeMount={false} 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..10ff7c10ee604 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 @@ -21,6 +21,12 @@ 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 @@ -41,11 +47,12 @@ } .dshPanel--editing { + border-style: dashed; + border-color: $euiColorMediumShade; transition: all $euiAnimSpeedFast $euiAnimSlightResistance; &:hover, &:focus { - border-color: $euiColorPrimary; @include euiSlightShadowHover; } } @@ -69,57 +76,35 @@ // HEADER .dshPanel__header { - padding: $euiSizeS; flex: 0 0 auto; - white-space: nowrap; display: flex; - border: none; - transition: background-color $euiAnimSpeedFast $euiAnimSlightResistance; } .dshPanel__title { - font-size: $euiFontSizeS; - color: $euiColorDarkShade; - transition: color $euiAnimSpeedFast $euiAnimSlightResistance; - flex: 1 1 auto; @include euiTextTruncate; + @include euiTitle('xxxs'); - // 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 $euiSizeS 0; + } } -.dshPanel--editing:hover { - .dshPanel__header { - background-color: rgba($euiColorFullShade,.05) !important; +.dshPanel--editing { + .dshPanel__dragger:hover { cursor: move; } +} - .dshPanel__title:hover { - color: $euiColorPrimary; - } +.dshPanel__dragger:not(.dshPanel__title) { + flex-grow: 1; } -/** - * 1. Use opacity to make this element accessible to screen readers and keyboard. - * 2. Show on focus to enable keyboard accessibility. - */ .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 @@ -129,6 +114,10 @@ * 2. Show on focus to enable keyboard accessibility. */ .dshPanel_optionsMenuButton { + background-color: transparentize($euiColorEmptyShade, .6); + border-radius: $euiBorderRadius; + position: relative; + top: 2px; opacity: 0; /* 1 */ &:focus { /* 2 */ 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_header/panel_header.tsx b/src/legacy/core_plugins/kibana/public/dashboard/panel/panel_header/panel_header.tsx index 9e9e59d79aa97..71d54361cb9d3 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/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/ui/public/vis/vis_types/vislib_vis_type.js b/src/ui/public/vis/vis_types/vislib_vis_type.js index 06bd5aecebfbe..d5d416d97794c 100644 --- a/src/ui/public/vis/vis_types/vislib_vis_type.js +++ b/src/ui/public/vis/vis_types/vislib_vis_type.js @@ -63,7 +63,13 @@ export function VislibVisTypeProvider(Private, $rootScope, $timeout, $compile) { this.destroy(); } + // console.log(esResponse); + return new Promise(async (resolve) => { + if (!esResponse) { + return; + } + if (this.el.clientWidth === 0 || this.el.clientHeight === 0) { return resolve(); } diff --git a/src/ui/public/visualize/components/_visualization.scss b/src/ui/public/visualize/components/_visualization.scss index ee1273e444aac..ed9ff65e51b53 100644 --- a/src/ui/public/visualize/components/_visualization.scss +++ b/src/ui/public/visualize/components/_visualization.scss @@ -35,6 +35,10 @@ @include internetExplorerOnly(){ flex: 1 0; } + + &:focus { + box-shadow: none; + } } // SASSTODO: Can't find exact usage From f5e67b7ec3b098f192b102f8c73a0b17d6a11757 Mon Sep 17 00:00:00 2001 From: chorn Date: Thu, 31 Jan 2019 18:14:15 -0500 Subject: [PATCH 02/17] Adjusted panel header ..And used a different selector for editing mode to fix bug of `.dshPanel--editing` needing a hard refresh to update. --- .../dashboard/grid/_dashboard_grid.scss | 7 ++- .../dashboard/panel/_dashboard_panel.scss | 54 ++++++++++++++----- .../panel/panel_header/panel_header.tsx | 2 - 3 files changed, 46 insertions(+), 17 deletions(-) diff --git a/src/legacy/core_plugins/kibana/public/dashboard/grid/_dashboard_grid.scss b/src/legacy/core_plugins/kibana/public/dashboard/grid/_dashboard_grid.scss index 77b9ccaa9f4f9..c5589b7063f02 100644 --- a/src/legacy/core_plugins/kibana/public/dashboard/grid/_dashboard_grid.scss +++ b/src/legacy/core_plugins/kibana/public/dashboard/grid/_dashboard_grid.scss @@ -73,6 +73,11 @@ &::after { border: none; } + + &:hover, + &:focus { + background-color: transparentize($euiColorWarning, .9); + } } /** @@ -95,7 +100,7 @@ */ &.react-grid-placeholder { border-radius: $euiBorderRadius; - background: $euiColorPrimary; + background: $euiColorWarning; } } 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 10ff7c10ee604..7563947c4f0bc 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; @@ -46,7 +52,7 @@ } } -.dshPanel--editing { +.dshLayout--editing .dshPanel { border-style: dashed; border-color: $euiColorMediumShade; transition: all $euiAnimSpeedFast $euiAnimSlightResistance; @@ -62,35 +68,46 @@ // 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 { flex: 0 0 auto; display: flex; + // ensure menu button is on the right even if the title doesn't exist + justify-content: flex-end; } .dshPanel__title { @include euiTextTruncate; @include euiTitle('xxxs'); + flex-grow: 1; &:not(:empty) { padding: $euiSizeXS $euiSizeS 0; } } -.dshPanel--editing { +.dshLayout--editing { + .dshPanel__dragger { + transition: background-color $euiAnimSpeedFast $euiAnimSlightResistance; + } + .dshPanel__dragger:hover { + background-color: transparentize($euiColorWarning, .9); cursor: move; } } @@ -112,23 +129,32 @@ /** * 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($euiColorEmptyShade, .6); - border-radius: $euiBorderRadius; - position: relative; - top: 2px; + background-color: transparentize($euiColorDarkestShade, .9); + border-bottom-right-radius: 0; + border-top-left-radius: 0; opacity: 0; /* 1 */ - &:focus { /* 2 */ + &:focus { + opacity: 1; /* 2 */ + } + + .dshPanel_optionsMenuPopover[class*="-isOpen"] &, + .dshPanel:hover & { opacity: 1; } } -.dshPanel:hover .dshPanel_optionsMenuButton { - opacity: 1; +.dshLayout--editing { + .dshPanel_optionsMenuButton { + background-color: transparentize($euiColorWarning, .9); + opacity: 1; /* 3 */ + } } + // ERROR .dshPanel__error { 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 71d54361cb9d3..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 @@ -79,8 +79,6 @@ function PanelHeaderUi({
- -
); } From 08005283cfe60f4f78991d3e246687be333d570f Mon Sep 17 00:00:00 2001 From: chorn Date: Thu, 31 Jan 2019 21:58:19 -0500 Subject: [PATCH 03/17] better positioning of legend toggle --- .../dashboard/panel/_dashboard_panel.scss | 19 +++- src/ui/public/styles/_legacy/_base.scss | 1 - .../public/vis/editors/default/_default.scss | 1 + .../vis/vis_types/_vislib_vis_legend.scss | 101 +++++++++++------- .../vis/vis_types/vislib_vis_legend.html | 5 +- .../visualize/components/_visualization.scss | 2 +- 6 files changed, 84 insertions(+), 45 deletions(-) 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 7563947c4f0bc..4b5e3c83b096c 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 @@ -131,25 +131,38 @@ * 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; +} + +.dshPanel .visLegend__toggle, +.dshPanel_optionsMenuButton { opacity: 0; /* 1 */ &:focus { opacity: 1; /* 2 */ } +} - .dshPanel_optionsMenuPopover[class*="-isOpen"] &, - .dshPanel:hover & { +.dshPanel_optionsMenuPopover[class*="-isOpen"], +.dshPanel:hover { + .dshPanel_optionsMenuButton, + .visLegend__toggle { opacity: 1; } } .dshLayout--editing { - .dshPanel_optionsMenuButton { + .dshPanel_optionsMenuButton:hover, + .dshPanel_optionsMenuButton:focus { background-color: transparentize($euiColorWarning, .9); + } + + .dshPanel_optionsMenuButton, + .dshPanel .visLegend__toggle { opacity: 1; /* 3 */ } } diff --git a/src/ui/public/styles/_legacy/_base.scss b/src/ui/public/styles/_legacy/_base.scss index f76903e209ff3..4fd3cc8b4a685 100644 --- a/src/ui/public/styles/_legacy/_base.scss +++ b/src/ui/public/styles/_legacy/_base.scss @@ -70,7 +70,6 @@ input[type="checkbox"], } .application { - background-color: $euiColorEmptyShade; position: relative; z-index: 0; display: flex; 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/vis_types/_vislib_vis_legend.scss b/src/ui/public/vis/vis_types/_vislib_vis_legend.scss index 4b2d9508dd535..ca6a26a674357 100644 --- a/src/ui/public/vis/vis_types/_vislib_vis_legend.scss +++ b/src/ui/public/vis/vis_types/_vislib_vis_legend.scss @@ -3,69 +3,92 @@ // 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; + + &:hover, + &:focus { + box-shadow: none; + background-color: $euiFocusBackgroundColor; + } } + +/** + * 1. Keep the legend from being overlapped by the dashboard panel title + * 2. Make sure the chart is centered based on legend + */ + .visLegend { @include euiFontSizeXS; display: flex; - flex-direction: row; - padding: $euiSizeXS 0; - overflow: auto; + padding-top: $euiSizeM; /* 1 */ min-height: 0; height: 100%; overflow: hidden; +} - // flex-direction re-aligns toggle button - .visLib--legend-left & { - flex-direction: row-reverse; +.visLib { + // Default is legend on the right + .visLegend { + flex-direction: column; + align-items: flex-end; } - .visLib--legend-right & { - flex-direction: row; + .visLib__chart { + padding-left: $euiSizeL; /* 2 */ } - .visLib--legend-top & { - flex-direction: column-reverse; - width: 100%; - padding-left: $euiSizeL; + &.visLib--legend-left { + .visLegend { + align-items: flex-start; + } - } - .visLib--legend-bottom & { - flex-direction: column; - width: 100%; - padding-left: $euiSizeL; + .visLib__chart { + padding-left: 0; /* 2 */ + padding-right: $euiSizeL; /* 2 */ + } } - .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; - } + &.visLib--legend-bottom, + &.visLib--legend-top { + .visLegend { + flex-direction: row; + align-items: flex-start; } - &.hidden { - visibility: hidden; + .visLib__chart { + padding-left: 0; } } } +.visLegend__list { + @include euiScrollBar; + 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; + } + } + + &.hidden { + visibility: hidden; + } +} + .visLegend__value { cursor: pointer; - padding: $euiSizeXS; + padding: $euiSizeXS + 1px; display: flex; > * { 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..3e1e004e77e5c 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,15 @@ 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.toggleLegendButtonAriaLabel' | i18n: { defaultMessage: 'Toggle legend' } }}" > - + +
    diff --git a/src/ui/public/visualize/components/_visualization.scss b/src/ui/public/visualize/components/_visualization.scss index ed9ff65e51b53..3faee55b1958f 100644 --- a/src/ui/public/visualize/components/_visualization.scss +++ b/src/ui/public/visualize/components/_visualization.scss @@ -12,7 +12,7 @@ width: 100%; height: 100%; overflow: auto; - position: relative; + // position: relative; padding: $euiSizeS; flex: 1 1 100%; From 0d331922bf35dd8a5d507f45635756d7c3b71f8b Mon Sep 17 00:00:00 2001 From: chorn Date: Fri, 1 Feb 2019 15:33:56 -0500 Subject: [PATCH 04/17] Fixed legend toggle position --- .../dashboard/panel/_dashboard_panel.scss | 13 +++-- .../vis/vis_types/_vislib_vis_legend.scss | 56 +++++++------------ 2 files changed, 28 insertions(+), 41 deletions(-) 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 4b5e3c83b096c..305e7fd013c51 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 @@ -50,6 +50,11 @@ .visualization .visChart__container { overflow: visible; /* 2 */ } + + .visLegend__toggle { + border-bottom-right-radius: 0; + border-top-left-radius: 0; + } } .dshLayout--editing .dshPanel { @@ -94,10 +99,11 @@ .dshPanel__title { @include euiTextTruncate; @include euiTitle('xxxs'); + line-height: 1.5; flex-grow: 1; &:not(:empty) { - padding: $euiSizeXS $euiSizeS 0; + padding: ($euiSizeXS * 1.5) $euiSizeS 0; } } @@ -156,11 +162,6 @@ } .dshLayout--editing { - .dshPanel_optionsMenuButton:hover, - .dshPanel_optionsMenuButton:focus { - background-color: transparentize($euiColorWarning, .9); - } - .dshPanel_optionsMenuButton, .dshPanel .visLegend__toggle { opacity: 1; /* 3 */ 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 ca6a26a674357..26a4bec6ea91f 100644 --- a/src/ui/public/vis/vis_types/_vislib_vis_legend.scss +++ b/src/ui/public/vis/vis_types/_vislib_vis_legend.scss @@ -4,14 +4,24 @@ .visLegend__toggle { border-radius: $euiBorderRadius; + position: absolute; + bottom: 0; + left: 0; + background-color: $euiColorEmptyShade; + transition: opacity $euiAnimSpeedFast $euiAnimSlightResistance, + background-color $euiAnimSpeedFast $euiAnimSlightResistance $euiAnimSpeedExtraSlow; - &:hover, &:focus { box-shadow: none; - background-color: $euiFocusBackgroundColor; + background-color: $euiFocusBackgroundColor !important; } } +.visLegend__toggle--isOpen { + background-color: transparentize($euiColorDarkestShade, .9); + opacity: 1; +} + /** * 1. Keep the legend from being overlapped by the dashboard panel title @@ -27,47 +37,23 @@ overflow: hidden; } -.visLib { - // Default is legend on the right - .visLegend { - flex-direction: column; - align-items: flex-end; - } - - .visLib__chart { - padding-left: $euiSizeL; /* 2 */ - } - - &.visLib--legend-left { - .visLegend { - align-items: flex-start; - } - - .visLib__chart { - padding-left: 0; /* 2 */ - padding-right: $euiSizeL; /* 2 */ - } +&.visLib--legend-left{ + .visLegend__list { + margin-bottom: $euiSizeL; } +} - &.visLib--legend-bottom, - &.visLib--legend-top { - .visLegend { - flex-direction: row; - align-items: flex-start; - } - - .visLib__chart { - padding-left: 0; - } +&.visLib--legend-bottom { + .visLegend__list { + margin-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; - flex-direction: column; - min-height: 0; overflow-x: hidden; overflow-y: auto; @@ -88,7 +74,7 @@ .visLegend__value { cursor: pointer; - padding: $euiSizeXS + 1px; + padding: $euiSizeXS; display: flex; > * { From 4fbe47311b10b3112c4d6715b5370c4dd0fe0bb2 Mon Sep 17 00:00:00 2001 From: chorn Date: Fri, 1 Feb 2019 15:34:16 -0500 Subject: [PATCH 05/17] Fixed some visualize sidebar font sizes --- .../controls/point_series/category_axis.html | 29 +++++++++-------- .../controls/point_series/value_axes.html | 32 ++++++++++--------- .../public/vis/editors/default/_sidebar.scss | 2 +- 3 files changed, 33 insertions(+), 30 deletions(-) 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/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; From b97dfced8c0bbfa07c2c33c78b9a3d9fd0ca2226 Mon Sep 17 00:00:00 2001 From: chorn Date: Fri, 1 Feb 2019 15:45:06 -0500 Subject: [PATCH 06/17] better position for resize handle --- .../kibana/public/dashboard/grid/_dashboard_grid.scss | 7 +++++-- src/ui/public/vis/vis_types/_vislib_vis_legend.scss | 4 ++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/legacy/core_plugins/kibana/public/dashboard/grid/_dashboard_grid.scss b/src/legacy/core_plugins/kibana/public/dashboard/grid/_dashboard_grid.scss index c5589b7063f02..4f458a1eb807a 100644 --- a/src/legacy/core_plugins/kibana/public/dashboard/grid/_dashboard_grid.scss +++ b/src/legacy/core_plugins/kibana/public/dashboard/grid/_dashboard_grid.scss @@ -18,9 +18,12 @@ */ .dshLayout--editing { .react-resizable-handle { + @include size($euiSizeL); z-index: $euiZLevel1; /* 1 */ - right: $euiSizeXS; - bottom: $euiSizeXS; + right: 0; + bottom: 0; + padding-right: $euiSizeS; + padding-bottom: $euiSizeS; } } 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 26a4bec6ea91f..b34c1cebc116e 100644 --- a/src/ui/public/vis/vis_types/_vislib_vis_legend.scss +++ b/src/ui/public/vis/vis_types/_vislib_vis_legend.scss @@ -37,13 +37,13 @@ overflow: hidden; } -&.visLib--legend-left{ +.visLib--legend-left{ .visLegend__list { margin-bottom: $euiSizeL; } } -&.visLib--legend-bottom { +.visLib--legend-bottom { .visLegend__list { margin-left: $euiSizeL; } From ad1560fa0611703b7ef759bb4ee1271ef4060b65 Mon Sep 17 00:00:00 2001 From: chorn Date: Fri, 1 Feb 2019 18:07:37 -0500 Subject: [PATCH 07/17] Consolidated error and warning messages --- .../dashboard/panel/_dashboard_panel.scss | 1 + .../public/dashboard/panel/panel_error.tsx | 14 +++++- .../metrics/public/components/_error.scss | 18 -------- .../metrics/public/components/error.js | 18 +++++--- .../metrics/public/components/no_data.js | 21 ++++++--- .../visualizations/components/_legend.scss | 1 + .../components/_timeseries_chart.scss | 2 +- .../components/horizontal_legend.js | 1 + .../components/vertical_legend.js | 1 + .../table_vis/public/table_vis.html | 18 +++++--- .../tagcloud/public/_tag_cloud.scss | 23 +--------- .../tagcloud/public/feedback_message.js | 45 ++++++++++++------- .../public/tag_cloud_visualization.js | 1 + src/ui/public/doc_table/doc_table.html | 15 +++++-- .../filter_bar/_global_filter_group.scss | 2 +- src/ui/public/styles/bootstrap/tables.less | 6 +++ src/ui/public/vislib/lib/_handler.scss | 6 +-- .../visualize/components/_visualization.scss | 3 ++ .../components/visualization_noresults.tsx | 14 +++--- .../components/visualization_requesterror.tsx | 10 +++-- 20 files changed, 125 insertions(+), 95 deletions(-) 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 305e7fd013c51..f88e1aefff196 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 @@ -176,6 +176,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/panel_error.tsx b/src/legacy/core_plugins/kibana/public/dashboard/panel/panel_error.tsx index 4901c7d9287f1..e51c8f3afc68e 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,8 +17,15 @@ * under the License. */ +import { EuiIcon, EuiSpacer, EuiText } from '@elastic/eui'; +import MarkdownIt from 'markdown-it'; import React from 'react'; +const markdownIt = new MarkdownIt({ + html: false, + linkify: true, +}); + export interface PanelErrorProps { error: string | React.ReactNode; } @@ -26,8 +33,11 @@ export interface PanelErrorProps { export function PanelError({ error }: PanelErrorProps) { return (
    -
    ); } 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..3fd33bdbf444c 100644 --- a/src/legacy/core_plugins/tagcloud/public/_tag_cloud.scss +++ b/src/legacy/core_plugins/tagcloud/public/_tag_cloud.scss @@ -1,5 +1,5 @@ .tgcVis { - position: absolute; + position: relative; top: 0; left: 0; width: 100%; @@ -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..b3482042a34f6 100644 --- a/src/legacy/core_plugins/tagcloud/public/tag_cloud_visualization.js +++ b/src/legacy/core_plugins/tagcloud/public/tag_cloud_visualization.js @@ -38,6 +38,7 @@ export class TagCloudVisualization { const cloudContainer = document.createElement('div'); cloudContainer.classList.add('tgcVis'); cloudContainer.setAttribute('data-test-subj', 'tagCloudVisualization'); + this._containerNode.classList.add('visChart--vertical'); this._containerNode.appendChild(cloudContainer); this._vis = vis; diff --git a/src/ui/public/doc_table/doc_table.html b/src/ui/public/doc_table/doc_table.html index c035a36dfe907..fe5e8da285175 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/styles/bootstrap/tables.less b/src/ui/public/styles/bootstrap/tables.less index 14dff80b87813..917196b3c711d 100644 --- a/src/ui/public/styles/bootstrap/tables.less +++ b/src/ui/public/styles/bootstrap/tables.less @@ -9,6 +9,12 @@ width: 100%; max-width: 100%; margin-bottom: @line-height-computed; + font-size: 14px; + + thead { + font-size: 12px; + } + // Cells > thead, > tbody, 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/visualize/components/_visualization.scss b/src/ui/public/visualize/components/_visualization.scss index 3faee55b1958f..6848069590b4d 100644 --- a/src/ui/public/visualize/components/_visualization.scss +++ b/src/ui/public/visualize/components/_visualization.scss @@ -64,4 +64,7 @@ min-width: 0; } +.visChart--vertical { + flex-direction: column; +} diff --git a/src/ui/public/visualize/components/visualization_noresults.tsx b/src/ui/public/visualize/components/visualization_noresults.tsx index 48628e99cfcff..eb0350ebe2c2f 100644 --- a/src/ui/public/visualize/components/visualization_noresults.tsx +++ b/src/ui/public/visualize/components/visualization_noresults.tsx @@ -17,6 +17,7 @@ * under the License. */ +import { EuiIcon, EuiSpacer, EuiText } from '@elastic/eui'; import React from 'react'; import { dispatchRenderComplete } from '../../render_complete'; @@ -29,13 +30,16 @@ export class VisualizationNoResults extends React.Component +
    -