github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

Improve filter editor responsiveness (#79448)

Browse source 
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Anton Dosov 2020-10-13 20:36:07 +02:00 • committed by GitHub
parent 7f7ffa57a4
commit ad41810c53
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 15 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/plugins/data/public/ui/filter_bar/_variables.scss
View file

@ -1,3 +1,4 @@
$kbnGlobalFilterItemBorderColor: tintOrShade($euiColorMediumShade, 35%, 20%);
$kbnGlobalFilterItemBorderColorExcluded: tintOrShade($euiColorDanger, 70%, 50%);
$kbnGlobalFilterItemPinnedColorExcluded: tintOrShade($euiColorDanger, 30%, 20%);
$kbnGlobalFilterItemEditorWidth: 420px; // if changing this make sure to also change `FILTER_EDITOR_WIDTH` in ./filter_item.tsx

4
src/plugins/data/public/ui/filter_bar/filter_bar.tsx
View file

@ -23,7 +23,7 @@ import classNames from 'classnames';
import React, { useState } from 'react';
import { FilterEditor } from './filter_editor';
import { FilterItem } from './filter_item';
import { FILTER_EDITOR_WIDTH, FilterItem } from './filter_item';
import { FilterOptions } from './filter_options';
import { useKibana } from '../../../../kibana_react/public';
import { IIndexPattern } from '../..';
@ -112,7 +112,7 @@ function FilterBarUI(props: Props) {
repositionOnScroll
>
<EuiFlexItem grow={false}>
<div style={{ width: 400 }}>
<div style={{ width: FILTER_EDITOR_WIDTH, maxWidth: '100%' }}>
<FilterEditor
filter={newFilter}
indexPatterns={props.indexPatterns}

4
src/plugins/data/public/ui/filter_bar/filter_editor/_filter_editor.scss
View file

@ -1,3 +1,5 @@
.globalFilterEditor__fieldInput {
max-width: $euiSize * 13;
@include euiBreakpoint('m', 'l', 'xl') {
max-width: $kbnGlobalFilterItemEditorWidth * 0.66;
}
}

2
src/plugins/data/public/ui/filter_bar/filter_editor/index.tsx
View file

@ -245,7 +245,7 @@ class FilterEditorUI extends Component<Props, State> {
private renderRegularEditor() {
return (
<div>
<EuiFlexGroup responsive={false} gutterSize="s">
<EuiFlexGroup responsive={true} gutterSize="s">
<EuiFlexItem grow={2}>{this.renderFieldInput()}</EuiFlexItem>
<EuiFlexItem grow={false} style={{ flexBasis: 160 }}>
{this.renderOperatorInput()}

9
src/plugins/data/public/ui/filter_bar/filter_item.tsx
View file

@ -62,6 +62,13 @@ export type FilterLabelStatus =
| typeof FILTER_ITEM_WARNING
| typeof FILTER_ITEM_ERROR;
/**
* @remarks
* if changing this make sure to also change
* $kbnGlobalFilterItemEditorWidth
*/
export const FILTER_EDITOR_WIDTH = 420;
export function FilterItem(props: Props) {
const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
const [indexPatternExists, setIndexPatternExists] = useState<boolean | undefined>(undefined);
@ -228,7 +235,7 @@ export function FilterItem(props: Props) {
},
{
id: 1,
width: 420,
width: FILTER_EDITOR_WIDTH,
content: (
<div>
<FilterEditor