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

Better formatting document summary with images (#111987)

Browse source 
* Better formatting document summary with images

* Improve styling

* Address review feedback
This commit is contained in:
Tim Roes 2021-09-15 12:06:46 +02:00 committed by GitHub
parent 13de9f598e
commit a4b28a61ef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 28 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/plugins/discover/public/application/apps/main/components/doc_table/lib/row_formatter.scss Normal file
View file

@ -0,0 +1,7 @@
// Special handling for images coming from the image field formatter
// See discover_grid.scss for more explanation on those values
.rowFormatter__value img {
vertical-align: middle;
max-height: lineHeightFromBaseline(2) !important;
max-width: ($euiSizeXXL * 12.5) !important;
}

3
src/plugins/discover/public/application/apps/main/components/doc_table/lib/row_formatter.tsx
View file

@ -11,6 +11,8 @@ import type { IndexPattern } from 'src/plugins/data/common';
import { MAX_DOC_FIELDS_DISPLAYED } from '../../../../../../../common';
import { getServices } from '../../../../../../kibana_services';
import './row_formatter.scss';
interface Props {
defPairs: Array<[string, unknown]>;
}
@ -21,6 +23,7 @@ const TemplateComponent = ({ defPairs }: Props) => {
<Fragment key={idx}>
<dt>{pair[0]}:</dt>
<dd
className="rowFormatter__value"
// We can dangerously set HTML here because this content is guaranteed to have been run through a valid field formatter first.
dangerouslySetInnerHTML={{ __html: `${pair[1]}` }} // eslint-disable-line react/no-danger
/>{' '}

15
src/plugins/discover/public/application/components/discover_grid/discover_grid.scss
View file

@ -86,6 +86,21 @@
.dscDiscoverGrid__descriptionListDescription {
word-break: normal !important;
// Special handling for images coming from the image field formatter
img {
// Align the images vertically centered with the text
vertical-align: middle;
// Set the maximum height to the line-height. The used function is the same
// function used to calculate the line-height for the EuiDescriptionList Description.
// !important is required to overwrite the max-height on the element from the field formatter
max-height: lineHeightFromBaseline(2) !important;
// An arbitrary amount of width we don't want to go over, to not have very wide images.
// For most width-height-ratios that will never be hit, because we'd usually limit
// it by the way smaller height. But images with very large width and very small height
// might be limited by that.
max-width: ($euiSizeXXL * 12.5) !important;
}
}
@include euiBreakpoint('xs', 's', 'm') {

3
src/plugins/discover/public/application/components/discover_grid/get_render_cell_value.tsx
View file

@ -110,6 +110,9 @@ export const getRenderCellValueFn = (
});
return (
// If you change the styling of this list (specifically something that will change the line-height)
// make sure to adjust the img overwrites attached to dscDiscoverGrid__descriptionListDescription
// in discover_grid.scss
<EuiDescriptionList type="inline" compressed className="dscDiscoverGrid__descriptionList">
{[...highlightPairs, ...sourcePairs].slice(0, maxDocFieldsDisplayed).map(([key, value]) => (
<Fragment key={key}>