Skip to content

Commit a65f38b

Browse files
MrKnights1MrKnights1
committed
Muzzle device list #656 
1 parent 28ac931 commit a65f38b

File tree

17 files changed

+1684
-1116
lines changed

17 files changed

+1684
-1116
lines changed

‎src/App.js‎

Lines changed: 748 additions & 697 deletions
Large diffs are not rendered by default.

‎src/components/filter/index.css‎

Lines changed: 47 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@
1111
transform-origin: top;
1212
transform: scaleY(0);
1313
transition: transform 0.26s ease;
14-
z-index: 1;
14+
/* Raise stacking context so the filter and its controls can appear above page content */
15+
z-index: 1000;
1516
}
1617

1718
.filter-wrapper.full-width {
@@ -35,7 +36,7 @@
3536
}
3637

3738
.filter-wrapper.open {
38-
box-shadow: 0px 5px 15px 5px rgb( from var(--color-black) r g b / 0.70);
39+
box-shadow: 0px 5px 15px 5px rgb(from var(--color-black) r g b / 0.7);
3940
overflow: visible;
4041
transform: scaleY(1);
4142
}
@@ -50,7 +51,26 @@
5051
position: fixed;
5152
right: 20px;
5253
width: 6vh;
53-
z-index: 1;
54+
/* Make sure the toggle button sits above the filter when needed */
55+
z-index: 1001;
56+
}
57+
58+
/* Ensure react-select controls and menus in the filter stack above other elements.
59+
Some react-select menus are rendered into a portal (body); adding global rules
60+
here ensures consistent stacking regardless of portal usage. */
61+
.basic-multi-select .select__control {
62+
z-index: 1002;
63+
}
64+
65+
.basic-multi-select .select__menu,
66+
.basic-multi-select .select__menu-list {
67+
z-index: 9999; /* match inline portal z-index used in SelectFilter */
68+
}
69+
70+
/* Also cover portal-mounted menus which are rendered as siblings under <body> */
71+
.select__menu,
72+
.select__menu-list {
73+
z-index: 9999 !important;
5474
}
5575

5676
.filter-toggle-icon-wrapper svg {
@@ -66,6 +86,20 @@
6686
width: 400px;
6787
}
6888

89+
/* Page-specific tweak: add spacing to filter labels on the barrel attachments page */
90+
.barrel-attachments-filter .single-filter-label {
91+
padding-right: 12px;
92+
}
93+
94+
/* Narrow the inner filter content on the Barrel Attachments page so the
95+
page headline can fit on a single line next to the filter controls. */
96+
.barrel-attachments-filter .filter-content-wrapper {
97+
max-width: 820px; /* reduce from full width to keep headline on one line */
98+
padding-left: 12px;
99+
padding-right: 12px;
100+
justify-content: flex-end;
101+
}
102+
69103
.single-filter-wrapper-wide .basic-multi-select {
70104
flex-grow: 1;
71105
}
@@ -98,7 +132,15 @@
98132

99133
.basic-multi-select {
100134
min-width: 110px;
101-
color: var(--color-gunmetal-dark);
135+
/* Ensure the select's visible text is light on the dark control background */
136+
color: var(--color-white);
137+
}
138+
139+
/* Make sure the react-select input, single value and placeholder text are readable */
140+
.basic-multi-select .select__input,
141+
.basic-multi-select .select__single-value,
142+
.basic-multi-select .select__placeholder {
143+
color: var(--color-white) !important;
102144
}
103145

104146
.filter-slider-wrapper .MuiSlider-root {
@@ -140,7 +182,7 @@
140182

141183
.button-group-button:hover img,
142184
.button-group-button.selected img {
143-
opacity: 1.0;
185+
opacity: 1;
144186
}
145187

146188
.button-group-button:first-child {

‎src/components/filter/index.js‎

Lines changed: 28 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,7 @@ const ConditionalWrapper = ({ condition, wrapper, children }) => {
1313
return condition ? wrapper(children) : children;
1414
};
1515

16-
function ButtonGroupFilterButton({
17-
tooltipContent,
18-
onClick,
19-
content,
20-
selected,
21-
type = 'image',
22-
}) {
16+
function ButtonGroupFilterButton({ tooltipContent, onClick, content, selected, type = 'image' }) {
2317
return (
2418
<Tooltip placement="top" title={tooltipContent} arrow>
2519
<button
@@ -53,7 +47,7 @@ function SliderFilter({
5347
valueLabelDisplay = 'auto',
5448
}) {
5549
if (!!marks && !Array.isArray(marks)) {
56-
marks = Object.keys(marks).map(val => {
50+
marks = Object.keys(marks).map((val) => {
5751
return {
5852
label: String(marks[val]),
5953
value: parseInt(val),
@@ -99,7 +93,7 @@ function RangeFilter({
9993
valueLabelDisplay,
10094
}) {
10195
if (!!marks && !Array.isArray(marks)) {
102-
marks = Object.keys(marks).map(val => {
96+
marks = Object.keys(marks).map((val) => {
10397
return {
10498
label: String(marks[val]),
10599
value: val,
@@ -166,7 +160,7 @@ const selectFilterStyle = {
166160
multiValueLabel: (provided) => ({
167161
...provided,
168162
color: 'var(--color-yellow-light)',
169-
padding: '0.1rem'
163+
padding: '0.1rem',
170164
}),
171165
menu: (provided) => ({
172166
...provided,
@@ -208,6 +202,9 @@ const selectFilterStyle = {
208202
}),
209203
};
210204

205+
// Export the style object so pages can reuse the same react-select styles
206+
export { selectFilterStyle };
207+
211208
function SelectFilter({
212209
placeholder,
213210
defaultValue,
@@ -231,11 +228,7 @@ function SelectFilter({
231228
condition={tooltip}
232229
wrapper={(children) => {
233230
return (
234-
<Tooltip
235-
placement="bottom"
236-
title={tooltip}
237-
arrow
238-
>
231+
<Tooltip placement="bottom" title={tooltip} arrow>
239232
{children}
240233
</Tooltip>
241234
);
@@ -253,7 +246,7 @@ function SelectFilter({
253246
<span className={'single-filter-label'}>{label}</span>
254247
{labelChildren}
255248
</label>
256-
)
249+
);
257250
}}
258251
>
259252
<Select
@@ -270,7 +263,9 @@ function SelectFilter({
270263
options={options}
271264
ref={parentRef}
272265
styles={selectFilterStyle}
273-
noOptionsMessage={() => { return t('All options already selected');}}
266+
noOptionsMessage={() => {
267+
return t('All options already selected');
268+
}}
274269
/>
275270
</ConditionalWrapper>
276271
</ConditionalWrapper>
@@ -299,28 +294,24 @@ function SelectItemFilter({
299294
const selectInputRef = useRef(null);
300295
const { t } = useTranslation();
301296

302-
const elements = [(
297+
const elements = [
303298
<SelectFilter
304299
key={'select-item-filter'}
305300
placeholder={placeholder}
306301
label={label}
307302
options={items.map((item) => {
308303
return {
309-
label: shortNames? item.shortName : item.name,
304+
label: shortNames ? item.shortName : item.name,
310305
value: item[valueField],
311-
selected: selection && selection.id === item.id
306+
selected: selection && selection.id === item.id,
312307
};
313308
})}
314309
onChange={(event) => {
315310
if (!event) {
316311
return true;
317312
}
318313

319-
setSelectedItem(
320-
items.find(
321-
(item) => item.id === event.value,
322-
),
323-
);
314+
setSelectedItem(items.find((item) => item.id === event.value));
324315
if (onChange) {
325316
onChange(event);
326317
}
@@ -334,31 +325,28 @@ function SelectItemFilter({
334325
tooltipDisabled={tooltipDisabled}
335326
onMenuOpen={onMenuOpen}
336327
onMenuClose={onMenuClose}
337-
/>
338-
)];
328+
/>,
329+
];
339330

340331
if (selectedItem && showImage) {
341-
elements.push((
342-
<Tooltip
343-
title={t('Clear selection')}
344-
arrow
345-
>
332+
elements.push(
333+
<Tooltip title={t('Clear selection')} arrow>
346334
<img
347335
key={'select-item-filter-selected-icon'}
348336
alt={`${selectedItem.name}-icon`}
349337
onClick={() => {
350338
selectInputRef.current?.clearValue();
351339
setSelectedItem(false);
352340
if (onChange) {
353-
onChange({label: '', value: false});
341+
onChange({ label: '', value: false });
354342
}
355343
}}
356344
loading="lazy"
357345
src={selectedItem.iconLink}
358-
style={{cursor: 'pointer'}}
346+
style={{ cursor: 'pointer' }}
359347
/>
360-
</Tooltip>
361-
))
348+
</Tooltip>,
349+
);
362350
}
363351
return elements;
364352
}
@@ -381,11 +369,7 @@ function InputFilter({
381369
condition={tooltip}
382370
wrapper={(children) => {
383371
return (
384-
<Tooltip
385-
placement="bottom"
386-
title={tooltip}
387-
arrow
388-
>
372+
<Tooltip placement="bottom" title={tooltip} arrow>
389373
{children}
390374
</Tooltip>
391375
);
@@ -410,14 +394,14 @@ function InputFilter({
410394
);
411395
}
412396

413-
function Filter({ center, children, fullWidth }) {
397+
function Filter({ center, children, fullWidth, className }) {
414398
const [showFilter, setShowFilter] = useState(false);
415399
const toggleButton = useRef();
416400
useEffect(() => {
417401
if (!toggleButton.current) {
418402
return;
419403
}
420-
const intersectionObserver = new IntersectionObserver(entries => {
404+
const intersectionObserver = new IntersectionObserver((entries) => {
421405
if (!toggleButton.current) {
422406
return;
423407
}
@@ -447,7 +431,7 @@ function Filter({ center, children, fullWidth }) {
447431
<div
448432
className={`filter-wrapper${showFilter ? ' open' : ''}${
449433
center ? ' filter-wrapper-center' : ''
450-
}${fullWidth ? ' full-width' : ''}`}
434+
}${fullWidth ? ' full-width' : ''} ${className || ''}`}
451435
key="page-filter"
452436
>
453437
<div className={'filter-content-wrapper'}>

0 commit comments

Comments
 (0)