Skip to content

Commit 760fa72

Browse files
jpinsonneaujpinsonneau
committed
fix styling
1 parent a5cbe91 commit 760fa72

File tree

10 files changed

+95
-77
lines changed

10 files changed

+95
-77
lines changed

‎web/locales/en/plugin__netobserv-plugin.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -367,9 +367,9 @@
367367
"Expand": "Expand",
368368
"Default filters": "Default filters",
369369
"Some filters have been automatically disabled": "Some filters have been automatically disabled",
370-
"Equals": "Equals",
371370
"Not equals": "Not equals",
372371
"More than": "More than",
372+
"Equals": "Equals",
373373
"Learn more": "Learn more",
374374
"Filter already exists": "Filter already exists",
375375
"Filter": "Filter",

‎web/src/components/toolbar/filters-toolbar.css‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,6 @@ button.pf-v5-c-button.pf-v5-m-link.pf-v5-m-inline:empty {
3434
padding-top: 0;
3535
}
3636

37-
/* long-enough to fit help text */
38-
#filter-toolbar #search,
39-
#filter-toolbar #autocomplete-search {
40-
width: 260px;
41-
}
42-
4337
/* stick "Learn more" text */
4438
#more {
4539
padding: 5px 0px 0px 5px;

‎web/src/components/toolbar/filters/autocomplete-filter.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,5 @@
77
#autocomplete-container {
88
margin: 0;
99
padding: 0;
10+
min-width: 330px;
1011
}

‎web/src/components/toolbar/filters/compare-filter.tsx‎

Lines changed: 69 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Dropdown, DropdownItem, MenuToggle, MenuToggleAction, MenuToggleElement } from '@patternfly/react-core';
1+
import { Badge, Dropdown, DropdownItem, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
22
import * as React from 'react';
33
import { useTranslation } from 'react-i18next';
44
import { FilterComponent } from '../../../model/filters';
@@ -20,49 +20,23 @@ export const CompareFilter: React.FC<CompareFilterProps> = ({ value, setValue, c
2020
const [isOpen, setOpen] = React.useState(false);
2121
const prevComponent = usePrevious(component);
2222

23-
const dropdownItems = [
24-
<DropdownItem key="equal" id="equal" component="button" onClick={() => onSelect(FilterCompare.equal)}>
25-
{t('Equals')}
26-
</DropdownItem>,
27-
<DropdownItem key="not-equal" id="not-equal" component="button" onClick={() => onSelect(FilterCompare.notEqual)}>
28-
{t('Not equals')}
29-
</DropdownItem>
30-
];
31-
32-
if (component === 'number') {
33-
dropdownItems.push(
34-
<DropdownItem
35-
key="more-than"
36-
id="more-than"
37-
component="button"
38-
onClick={() => onSelect(FilterCompare.moreThanOrEqual)}
39-
>
40-
{t('More than')}
41-
</DropdownItem>
42-
);
43-
}
44-
45-
const onSelect = (v: FilterCompare) => {
46-
setValue(v);
47-
setOpen(false);
48-
};
49-
50-
const onSwitch = React.useCallback(() => {
51-
const filterCompareValues = [FilterCompare.equal, FilterCompare.notEqual];
52-
if (component === 'number') {
53-
filterCompareValues.push(FilterCompare.moreThanOrEqual);
54-
}
55-
56-
const nextIndex = filterCompareValues.indexOf(value) + 1;
57-
if (nextIndex < filterCompareValues.length) {
58-
setValue(filterCompareValues[nextIndex]);
59-
} else {
60-
setValue(filterCompareValues[0]);
61-
}
62-
}, [component, value, setValue]);
23+
const getText = React.useCallback(
24+
(v: FilterCompare) => {
25+
switch (v) {
26+
case FilterCompare.notEqual:
27+
return t('Not equals');
28+
case FilterCompare.moreThanOrEqual:
29+
return t('More than');
30+
case FilterCompare.equal:
31+
default:
32+
return t('Equals');
33+
}
34+
},
35+
[t]
36+
);
6337

64-
const getSymbol = React.useCallback(() => {
65-
switch (value) {
38+
const getSymbol = React.useCallback((v: FilterCompare) => {
39+
switch (v) {
6640
case FilterCompare.notEqual:
6741
return '!=';
6842
case FilterCompare.moreThanOrEqual:
@@ -71,7 +45,53 @@ export const CompareFilter: React.FC<CompareFilterProps> = ({ value, setValue, c
7145
default:
7246
return '=';
7347
}
74-
}, [value]);
48+
}, []);
49+
50+
const onSelect = React.useCallback(
51+
(v: FilterCompare) => {
52+
setValue(v);
53+
setOpen(false);
54+
},
55+
[setValue]
56+
);
57+
58+
const getItems = React.useCallback(() => {
59+
const dropdownItems = [
60+
<DropdownItem
61+
key="equal"
62+
id="equal"
63+
component="button"
64+
description={getText(FilterCompare.equal)}
65+
onClick={() => onSelect(FilterCompare.equal)}
66+
>
67+
{getSymbol(FilterCompare.equal)}
68+
</DropdownItem>,
69+
<DropdownItem
70+
key="not-equal"
71+
id="not-equal"
72+
component="button"
73+
description={getText(FilterCompare.notEqual)}
74+
onClick={() => onSelect(FilterCompare.notEqual)}
75+
>
76+
{getSymbol(FilterCompare.notEqual)}
77+
</DropdownItem>
78+
];
79+
80+
if (component === 'number') {
81+
dropdownItems.push(
82+
<DropdownItem
83+
key="more-than"
84+
id="more-than"
85+
component="button"
86+
description={getText(FilterCompare.moreThanOrEqual)}
87+
onClick={() => onSelect(FilterCompare.moreThanOrEqual)}
88+
>
89+
{getSymbol(FilterCompare.moreThanOrEqual)}
90+
</DropdownItem>
91+
);
92+
}
93+
return dropdownItems;
94+
}, [component, getSymbol, getText, onSelect]);
7595

7696
React.useEffect(() => {
7797
// reset to equal when component change
@@ -89,21 +109,16 @@ export const CompareFilter: React.FC<CompareFilterProps> = ({ value, setValue, c
89109
<MenuToggle
90110
ref={toggleRef}
91111
id="filter-compare-toggle-button"
92-
splitButtonOptions={{
93-
variant: 'action',
94-
items: [
95-
<MenuToggleAction key="action" id="filter-compare-switch-button" onClick={onSwitch}>
96-
{getSymbol()}
97-
</MenuToggleAction>
98-
]
99-
}}
112+
badge={<Badge>{getSymbol(value)}</Badge>}
100113
onClick={() => setOpen(!isOpen)}
101114
isExpanded={isOpen}
102115
onBlur={() => setTimeout(() => setOpen(false), 500)}
103-
/>
116+
>
117+
{getText(value)}
118+
</MenuToggle>
104119
)}
105120
>
106-
{dropdownItems}
121+
{getItems()}
107122
</Dropdown>
108123
</>
109124
);

‎web/src/components/toolbar/filters/filter-hints.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
#tips {
2+
max-width: 360px;
3+
}

‎web/src/components/toolbar/filters/filter-hints.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import * as React from 'react';
33
import { useTranslation } from 'react-i18next';
44
import { Link } from 'react-router-dom';
55
import { FilterDefinition } from '../../../model/filters';
6+
import './filter-hints.css';
67

78
export interface FilterHintsProps {
89
def: FilterDefinition;

‎web/src/components/toolbar/filters/filter-search-input.css‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1-
#filter-search-input {
2-
min-width: 500px !important;
1+
#filter-search-input, #filter-search-form {
2+
min-width: 400px !important;
3+
}
4+
5+
.filters-actions {
6+
margin-left: 180px;
37
}

‎web/src/components/toolbar/filters/filter-search-input.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@ export const FilterSearchInput: React.FC<FilterSearchInputProps> = ({
187187
}
188188

189189
return (
190-
<div ref={advancedSearchPaneRef} role="dialog">
190+
<div id="filter-search-form" ref={advancedSearchPaneRef} role="dialog">
191191
<Panel variant="raised">
192192
<PanelMain>
193193
<PanelMainBody>

‎web/src/components/toolbar/filters/filters-dropdown.css‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1-
#column-filter-dropdown {
2-
min-width: 270px !important;
1+
#direction-column-filter-dropdowns {
2+
min-width: 370px;
3+
}
4+
5+
#direction-filter-dropdown-container, #column-filter-dropdown-container {
6+
flex: 1;
37
}

‎web/src/components/toolbar/filters/filters-dropdown.tsx‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Dropdown, DropdownItem, Flex, FlexItem, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
1+
import { Dropdown, DropdownItem, Flex, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
22
import * as React from 'react';
33
import { useTranslation } from 'react-i18next';
44
import { FilterDefinition, FilterId } from '../../../model/filters';
@@ -24,7 +24,7 @@ export const FiltersDropdown: React.FC<FiltersDropdownProps> = ({
2424
}) => {
2525
const { t } = useTranslation('plugin__netobserv-plugin');
2626

27-
const directionRef = useOutsideClickEvent(() => setColumnOpen(false));
27+
const directionRef = useOutsideClickEvent(() => setDirectionOpen(false));
2828
const [isDirectionOpen, setDirectionOpen] = React.useState<boolean>(false);
2929

3030
const columnRef = useOutsideClickEvent(() => setColumnOpen(false));
@@ -66,12 +66,8 @@ export const FiltersDropdown: React.FC<FiltersDropdownProps> = ({
6666
}, [filterDefinitions, selectedDirection, selectedFilter, setSelectedFilter]);
6767

6868
return (
69-
<Flex>
70-
<FlexItem
71-
id="direction-filter-dropdown-container"
72-
data-test="column-filter-dropdown-container"
73-
ref={directionRef}
74-
>
69+
<Flex id="direction-column-filter-dropdowns">
70+
<div id="direction-filter-dropdown-container" data-test="column-filter-dropdown-container" ref={directionRef}>
7571
<Dropdown
7672
data-test="direction-filter-dropdown"
7773
id="direction-filter-dropdown"
@@ -131,8 +127,8 @@ export const FiltersDropdown: React.FC<FiltersDropdownProps> = ({
131127
{t('Any direction')}
132128
</DropdownItem>
133129
</Dropdown>
134-
</FlexItem>
135-
<FlexItem id="column-filter-dropdown-container" data-test="column-filter-dropdown-container" ref={columnRef}>
130+
</div>
131+
<div id="column-filter-dropdown-container" data-test="column-filter-dropdown-container" ref={columnRef}>
136132
<Dropdown
137133
data-test="column-filter-dropdown"
138134
id="column-filter-dropdown"
@@ -154,7 +150,7 @@ export const FiltersDropdown: React.FC<FiltersDropdownProps> = ({
154150
>
155151
{getFiltersDropdownItems()}
156152
</Dropdown>
157-
</FlexItem>
153+
</div>
158154
</Flex>
159155
);
160156
};

0 commit comments

Comments
 (0)