Browse Source

panel-header: Move the panel description/links/error container outside of panel header to not interfere with the react-grid stuff

Johannes Schill 7 years ago
parent
commit
0fa8ae4fac
1 changed files with 20 additions and 18 deletions
  1. 20 18
      public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx

+ 20 - 18
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx

@@ -43,7 +43,7 @@ export class PanelHeader extends PureComponent<Props, State> {
     const panelHeaderClass = classNames({ 'panel-header': true, 'grid-drag-handle': !isFullscreen });
     const { panel, dashboard, timeInfo } = this.props;
     return (
-      <div className={panelHeaderClass}>
+      <>
         {panel.description && (
           <Tooltip
             content={panel.description}
@@ -60,27 +60,29 @@ export class PanelHeader extends PureComponent<Props, State> {
           </span>
         )}
 
-        <div className="panel-title-container" onClick={this.onMenuToggle}>
-          <div className="panel-title">
-            <span className="icon-gf panel-alert-icon" />
-            <span className="panel-title-text">
-              {panel.title} <span className="fa fa-caret-down panel-menu-toggle" />
-            </span>
+        <div className={panelHeaderClass}>
+          <div className="panel-title-container" onClick={this.onMenuToggle}>
+            <div className="panel-title">
+              <span className="icon-gf panel-alert-icon" />
+              <span className="panel-title-text">
+                {panel.title} <span className="fa fa-caret-down panel-menu-toggle" />
+              </span>
 
-            {this.state.panelMenuOpen && (
-              <ClickOutsideWrapper onClick={this.closeMenu}>
-                <PanelHeaderMenu panel={panel} dashboard={dashboard} />
-              </ClickOutsideWrapper>
-            )}
+              {this.state.panelMenuOpen && (
+                <ClickOutsideWrapper onClick={this.closeMenu}>
+                  <PanelHeaderMenu panel={panel} dashboard={dashboard} />
+                </ClickOutsideWrapper>
+              )}
 
-            {timeInfo && (
-              <span className="panel-time-info">
-                <i className="fa fa-clock-o" /> {timeInfo}
-              </span>
-            )}
+              {timeInfo && (
+                <span className="panel-time-info">
+                  <i className="fa fa-clock-o" /> {timeInfo}
+                </span>
+              )}
+            </div>
           </div>
         </div>
-      </div>
+      </>
     );
   }
 }