IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-02 12:17:01 -06:00
Code Issues Packages Projects Releases Wiki Activity

Dashboard: Overflow and z-index adjustments (#75597)

Browse Source
This commit is contained in:
Leon Sorokin 2023-10-05 22:46:15 -05:00 committed by GitHub
parent df9e7671d9
commit e2dcd5184a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/grafana-data/src/themes/zIndex.ts
View File

@ -1,6 +1,7 @@
// We need to centralize the zIndex definitions as they work
// like global values in the browser.
export const zIndex = {
activePanel: 999,
navbarFixed: 1000,
sidemenu: 1020,
dropdown: 1030,

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

@ -358,6 +358,15 @@ 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,6 +161,7 @@ $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

@ -89,6 +89,7 @@ export class SplitPaneWrapper extends PureComponent<React.PropsWithChildren<Prop
return (
<SplitPane
className={styles.splitPane}
split={splitOrientation}
minSize={minSize}
maxSize={maxSize}
@ -144,6 +145,9 @@ const getStyles = (theme: GrafanaTheme2, hasSplit: boolean) => {
`;
return {
splitPane: css({
overflow: 'visible !important',
}),
resizerV: cx(
resizer,
css`

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

@ -163,6 +163,7 @@ $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;

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

@ -13,6 +13,7 @@
&:hover {
.react-resizable-handle {
visibility: visible;
z-index: $zindex-active-panel;
}
}
}
@ -90,8 +91,7 @@
&:hover,
&:active,
&:focus {
// above other panels, but below lowest pre-defined index in zIndex.ts
z-index: 999 !important;
z-index: $zindex-active-panel !important;
}
}