Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Discover] Add wrapping to field list on sidebar #71312

Merged
merged 7 commits into from
Jul 15, 2020
Merged

[Discover] Add wrapping to field list on sidebar #71312

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
19747a5
cleanup of fielditem with accordions
andreadelrio Jul 7, 2020
19ccf91
clean sass and update tests
andreadelrio Jul 8, 2020
447c72d
bring back useShortDots, accidentally deleted
andreadelrio Jul 8, 2020
6ef78cb
add some space between name and add/remove button
andreadelrio Jul 9, 2020
971d63d
Merge branch 'master' into discover-longNames
elasticmachine Jul 14, 2020
9420eff
sass cleanup
andreadelrio Jul 14, 2020
32211c4
sometimes you don't need Eui variables :)
andreadelrio Jul 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 14 additions & 10 deletions src/plugins/discover/public/application/components/sidebar/discover_field.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
* under the License.
*/
import React from 'react';
import { EuiButton, EuiText } from '@elastic/eui';
import { EuiButton } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { DiscoverFieldDetails } from './discover_field_details';
import { FieldIcon } from '../../../../../kibana_react/public';
Expand Down Expand Up @@ -108,6 +108,13 @@ export function DiscoverField({
}
};

function wrapOnDot(str?: string) {
// u200B is a non-width white-space character, which allows
// the browser to efficiently word-wrap right after the dot
// without us having to draw a lot of extra DOM elements, etc
return str ? str.replace(/\./g, '.\u200B') : '';
}

return (
<>
<div
Expand All @@ -124,15 +131,12 @@ export function DiscoverField({
scripted={field.scripted}
/>
</span>
<span className="dscSidebarField__name eui-textTruncate">
<EuiText
size="xs"
data-test-subj={`field-${field.name}`}
className="eui-textTruncate"
title={field.name}
>
{useShortDots ? shortenDottedString(field.name) : field.displayName}
</EuiText>
<span
data-test-subj={`field-${field.name}`}
title={field.name}
className="dscSidebarField__name"
>
{useShortDots ? wrapOnDot(shortenDottedString(field.name)) : wrapOnDot(field.displayName)}
</span>
<span>
{field.name !== '_source' && !selected && (
Expand Down
25 changes: 7 additions & 18 deletions src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,6 @@
margin-bottom: 0;
}

.dscFieldList--selected,
.dscFieldList--unpopular,
.dscFieldList--popular {
padding-left: $euiSizeS;
padding-right: $euiSizeS;
}

.dscFieldListHeader {
padding: $euiSizeS $euiSizeS 0 $euiSizeS;
background-color: lightOrDarkTheme(tint($euiColorPrimary, 90%), $euiColorLightShade);
Expand All @@ -40,8 +33,7 @@
}

.dscFieldChooser {
padding-left: $euiSizeS !important;
padding-right: $euiSizeS !important;
padding-left: $euiSize;
}

.dscFieldChooser__toggle {
Expand All @@ -55,12 +47,12 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 2px;
cursor: pointer;
font-size: $euiFontSizeXS;
border-top: solid 1px transparent;
border-bottom: solid 1px transparent;
line-height: normal;
margin-bottom: $euiSizeXS * 0.5;

&:hover,
&:focus {
Expand All @@ -72,28 +64,25 @@

.dscSidebarItem--active {
border-top: 1px solid $euiColorLightShade;
background: shade($euiColorLightestShade, 5%);
color: $euiColorFullShade;
.euiText {
font-weight: bold;
}
}

.dscSidebarField {
padding: $euiSizeXS 0;
padding: $euiSizeXS;
display: flex;
align-items: flex-start;
align-items: center;
max-width: 100%;
margin: 0;
width: 100%;
border: none;
border-radius: 0;
border-radius: $euiBorderRadius - 1px;
text-align: left;
}

.dscSidebarField__name {
margin-left: $euiSizeS;
flex-grow: 1;
word-break: break-word;
padding-right: 1px;
}

.dscSidebarField__fieldIcon {
Expand Down
3 changes: 2 additions & 1 deletion src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
import './discover_sidebar.scss';
import React, { useCallback, useEffect, useState, useMemo } from 'react';
import { i18n } from '@kbn/i18n';
import { EuiButtonIcon, EuiTitle } from '@elastic/eui';
import { EuiButtonIcon, EuiTitle, EuiSpacer } from '@elastic/eui';
import { sortBy } from 'lodash';
import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
import { DiscoverField } from './discover_field';
Expand Down Expand Up @@ -199,6 +199,7 @@ export function DiscoverSidebar({
/>
</h3>
</EuiTitle>
<EuiSpacer size="xs" />
<ul
className="dscSidebarList dscFieldList--selected"
aria-labelledby="selected_fields"
Expand Down