root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 90 Packages Projects Releases Wiki Activity

Dashboard: Revert descending z-index changes (#83466) 

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
This commit is contained in:
Leon Sorokin 2024-03-06 08:31:54 -06:00 committed by GitHub
parent 316601258a
commit 1dc6014b10
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 3 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
View File

@ -358,15 +358,6 @@ const getStyles = (theme: GrafanaTheme2) => {
display: 'flex',
flexDirection: 'column',
'> *': {
zIndex: 0,
},
// matches .react-grid-item styles in _dashboard_grid.scss to ensure any contained tooltips occlude adjacent panels
'&:hover, &:active, &:focus': {
zIndex: theme.zIndex.activePanel,
},
'.show-on-hover': {
opacity: '0',
visibility: 'hidden',

1
packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
View File

@ -161,7 +161,6 @@ $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
$zindex-active-panel: ${theme.zIndex.activePanel};
$zindex-dropdown: ${theme.zIndex.dropdown};
$zindex-navbar-fixed: ${theme.zIndex.navbarFixed};
$zindex-sidemenu: ${theme.zIndex.sidemenu};

4
public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx
View File

@ -91,7 +91,6 @@ export class SplitPaneWrapper extends PureComponent<React.PropsWithChildren<Prop
return (
<SplitPane
className={styles.splitPane}
split={splitOrientation}
minSize={minSize}
maxSize={maxSize}
@ -115,9 +114,6 @@ export class SplitPaneWrapper extends PureComponent<React.PropsWithChildren<Prop
const getStyles = (theme: GrafanaTheme2, hasSplit: boolean) => {
return {
splitPane: css({
overflow: 'visible !important',
}),
resizer: css({
display: hasSplit ? 'block' : 'none',
}),

2
public/app/features/dashboard-scene/scene/DashboardControls.tsx
View File

@ -74,7 +74,7 @@ function getStyles(theme: GrafanaTheme2) {
position: 'sticky',
top: 0,
background: theme.colors.background.canvas,
zIndex: theme.zIndex.activePanel,
zIndex: theme.zIndex.navbarFixed,
padding: theme.spacing(2, 0),
width: '100%',
marginLeft: 'auto',

2
public/app/features/trails/DataTrail.tsx
View File

@ -245,7 +245,7 @@ function getStyles(theme: GrafanaTheme2) {
flexWrap: 'wrap',
position: 'sticky',
background: theme.isDark ? theme.colors.background.canvas : theme.colors.background.primary,
zIndex: theme.zIndex.activePanel + 1,
zIndex: theme.zIndex.navbarFixed,
top: 0,
}),
};

1
public/sass/_variables.generated.scss
View File

@ -163,7 +163,6 @@ $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
$zindex-active-panel: 999;
$zindex-dropdown: 1030;
$zindex-navbar-fixed: 1000;
$zindex-sidemenu: 1020;

14
public/sass/components/_dashboard_grid.scss
View File

@ -13,7 +13,6 @@
&:hover {
.react-resizable-handle {
visibility: visible;
z-index: $zindex-active-panel;
}
}
}
@ -86,22 +85,11 @@
}
}
// Hack to prevent panel overlap during drag/hover (due to descending z-index assignment)
.react-grid-item:not(.context-menu-open, .resizing) {
&:hover,
&:active,
&:focus {
z-index: $zindex-active-panel !important;
}
}
// Hack for preventing panel menu overlapping.
.react-grid-item.context-menu-open,
.react-grid-item.resizing,
.react-grid-item.resizing.panel,
.react-grid-item.panel.dropdown-menu-open,
.react-grid-item.react-draggable-dragging.panel {
z-index: $zindex-dropdown !important;
z-index: $zindex-dropdown;
}
// Disable animation on initial rendering and enable it when component has been mounted.