IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #14069 from grafana/panel-focus-in-react

Browse Source 
Panel focus in react
This commit is contained in:
Torkel Ödegaard 2018-11-14 14:40:18 +01:00 committed by GitHub
commit 18308bf584
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
public/app/features/dashboard/dashgrid/DashboardPanel.tsx
View File

@ -117,6 +117,14 @@ export class DashboardPanel extends PureComponent<Props, State> {
this.cleanUpAngularPanel();
}
onMouseEnter = () => {
this.props.dashboard.setPanelFocus(this.props.panel.id);
};
onMouseLeave = () => {
this.props.dashboard.setPanelFocus(0);
};
renderReactPanel() {
const { dashboard, panel } = this.props;
const { plugin } = this.state;
@ -127,7 +135,7 @@ export class DashboardPanel extends PureComponent<Props, State> {
// I want to try to keep markup (parents) for panel the same in edit mode to avoide unmount / new mount of panel
return (
<div className={containerClass}>
<div className={panelWrapperClass}>
<div className={panelWrapperClass} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
<PanelChrome component={plugin.exports.Panel} panel={panel} dashboard={dashboard} />
</div>
{panel.isEditing && (
@ -156,6 +164,13 @@ export class DashboardPanel extends PureComponent<Props, State> {
}
// legacy angular rendering
return <div ref={element => (this.element = element)} className="panel-height-helper" />;
return (
<div
ref={element => (this.element = element)}
className="panel-height-helper"
onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}
/>
);
}
}

13
public/app/features/panel/panel_directive.ts
View File

@ -80,16 +80,6 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => {
let lastAlertState;
let hasAlertRule;
function mouseEnter() {
panelContainer.toggleClass('panel-hover-highlight', true);
ctrl.dashboard.setPanelFocus(ctrl.panel.id);
}
function mouseLeave() {
panelContainer.toggleClass('panel-hover-highlight', false);
ctrl.dashboard.setPanelFocus(0);
}
function resizeScrollableContent() {
if (panelScrollbar) {
panelScrollbar.update();
@ -212,9 +202,6 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => {
scope.$apply(ctrl.openInspector.bind(ctrl));
});
elem.on('mouseenter', mouseEnter);
elem.on('mouseleave', mouseLeave);
scope.$on('$destroy', () => {
elem.off();
cornerInfoElem.off();