Increase z-index of focused dashboard grid item (#17349)
Increase z-index of focused dashboard grid item so that its overflowing elements display above sibling elements. Fixes #17333
This commit is contained in:
parent
1117a73166
commit
f63be5ff3f
3 changed files with 27 additions and 9 deletions
|
@ -27,6 +27,11 @@ exports[`renders DashboardGrid 1`] = `
|
|||
<div
|
||||
className=""
|
||||
key="1"
|
||||
style={
|
||||
Object {
|
||||
"zIndex": "auto",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Connect(DashboardPanel)
|
||||
embeddableFactory={
|
||||
|
@ -47,6 +52,11 @@ exports[`renders DashboardGrid 1`] = `
|
|||
<div
|
||||
className=""
|
||||
key="2"
|
||||
style={
|
||||
Object {
|
||||
"zIndex": "auto",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Connect(DashboardPanel)
|
||||
embeddableFactory={
|
||||
|
|
|
@ -88,6 +88,7 @@ export class DashboardGrid extends React.Component {
|
|||
// item.
|
||||
this.gridItems = {};
|
||||
this.state = {
|
||||
focusedPanelIndex: undefined,
|
||||
layout: this.buildLayoutFromPanels()
|
||||
};
|
||||
// A mapping of panel type to embeddable handlers. Because this function reaches out of react and into angular,
|
||||
|
@ -151,17 +152,13 @@ export class DashboardGrid extends React.Component {
|
|||
onPanelsUpdated(updatedPanels);
|
||||
};
|
||||
|
||||
onPanelFocused = panelIndex => {
|
||||
const gridItem = this.gridItems[panelIndex];
|
||||
if (gridItem) {
|
||||
gridItem.style.zIndex = '1';
|
||||
}
|
||||
onPanelFocused = focusedPanelIndex => {
|
||||
this.setState({ focusedPanelIndex });
|
||||
};
|
||||
|
||||
onPanelBlurred = panelIndex => {
|
||||
const gridItem = this.gridItems[panelIndex];
|
||||
if (gridItem) {
|
||||
gridItem.style.zIndex = 'auto';
|
||||
onPanelBlurred = blurredPanelIndex => {
|
||||
if (this.state.focusedPanelIndex === blurredPanelIndex) {
|
||||
this.setState({ focusedPanelIndex: undefined });
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -171,6 +168,7 @@ export class DashboardGrid extends React.Component {
|
|||
getContainerApi,
|
||||
maximizedPanelId
|
||||
} = this.props;
|
||||
const { focusedPanelIndex } = this.state;
|
||||
|
||||
// Part of our unofficial API - need to render in a consistent order for plugins.
|
||||
const panelsInOrder = Object.keys(panels).map(key => panels[key]);
|
||||
|
@ -191,6 +189,7 @@ export class DashboardGrid extends React.Component {
|
|||
});
|
||||
return (
|
||||
<div
|
||||
style={{ zIndex: focusedPanelIndex === panel.panelIndex ? '2' : 'auto' }}
|
||||
className={classes}
|
||||
key={panel.panelIndex}
|
||||
ref={reactGridItem => { this.gridItems[panel.panelIndex] = reactGridItem; }}
|
||||
|
|
|
@ -59,3 +59,12 @@ test('renders DashboardGrid with no visualizations', () => {
|
|||
const component = shallow(<DashboardGrid {...getProps({ panels: {} })} />);
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('adjusts z-index of focused panel to be higher than siblings', () => {
|
||||
const component = shallow(<DashboardGrid {...getProps()} />);
|
||||
const panelElements = component.find('Connect(DashboardPanel)');
|
||||
panelElements.first().prop('onPanelFocused')('1');
|
||||
const [gridItem1, gridItem2] = component.update().findWhere(el => el.key() === '1' || el.key() === '2');
|
||||
expect(gridItem1.props.style.zIndex).toEqual('2');
|
||||
expect(gridItem2.props.style.zIndex).toEqual('auto');
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue