Panels: allow interaction in corners when no title exists (#37169)

This commit is contained in:
Ryan McKinley 2021-07-26 10:19:07 -07:00 committed by GitHub
parent 8c8d2fe08b
commit be4b753aa0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 21 deletions

View File

@ -403,12 +403,7 @@ export class PanelChrome extends Component<Props, State> {
hasOverlayHeader() {
const { panel } = this.props;
const { errorMessage, data } = this.state;
// always show normal header if we have an error message
if (errorMessage) {
return false;
}
const { data } = this.state;
// always show normal header if we have time override
if (data.request && data.request.timeInfo) {

View File

@ -173,12 +173,7 @@ export class PanelChromeAngularUnconnected extends PureComponent<Props, State> {
hasOverlayHeader() {
const { panel } = this.props;
const { errorMessage, data } = this.state;
// always show normal header if we have an error message
if (errorMessage) {
return false;
}
const { data } = this.state;
// always show normal header if we have time override
if (data.request && data.request.timeInfo) {

View File

@ -35,15 +35,15 @@ export const PanelHeader: FC<Props> = ({ panel, error, isViewing, isEditing, dat
return (
<>
<PanelHeaderLoadingIndicator state={data.state} onClick={onCancelQuery} />
<PanelHeaderCorner
panel={panel}
title={panel.title}
description={panel.description}
scopedVars={panel.scopedVars}
links={getPanelLinksSupplier(panel)}
error={error}
/>
<div className={className}>
<PanelHeaderCorner
panel={panel}
title={panel.title}
description={panel.description}
scopedVars={panel.scopedVars}
links={getPanelLinksSupplier(panel)}
error={error}
/>
<PanelHeaderMenuTrigger aria-label={selectors.components.Panels.Panel.title(title)}>
{({ closeMenu, panelMenuOpen }) => {
return (

View File

@ -10,8 +10,14 @@ $panel-header-no-title-zindex: 1;
.panel-container--no-title {
.panel-header {
position: absolute;
width: 100%;
left: min(50px, 10%); // allows space for interaction in the corders
right: min(50px, 10%);
z-index: $panel-header-z-index;
&:hover {
left: 0;
right: 0;
}
}
.panel-content {
height: 100%;