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

Canvas: Remove inline editor button #52237

Browse Source
This commit is contained in:
Nathan Marrs 2022-07-14 16:55:22 -07:00 committed by GitHub
parent 644e82e85c
commit 8b7516bc55
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/plugins/panel/canvas/CanvasContextMenu.tsx
View File

@ -67,7 +67,7 @@ export const CanvasContextMenu = ({ scene }: Props) => {
onClick={() => { onClick={() => {
if (scene.inlineEditingCallback) { if (scene.inlineEditingCallback) {
if (inlineEditorOpen) { if (inlineEditorOpen) {
activePanel.panel.inlineEditButtonClose(); activePanel.panel.closeInlineEdit();
} else { } else {
scene.inlineEditingCallback(); scene.inlineEditingCallback();
} }

45
public/app/plugins/panel/canvas/CanvasPanel.tsx
View File

@ -1,10 +1,9 @@
import { css } from '@emotion/css';
import React, { Component } from 'react'; import React, { Component } from 'react';
import { ReplaySubject, Subscription } from 'rxjs'; import { ReplaySubject, Subscription } from 'rxjs';
import { GrafanaTheme, PanelProps } from '@grafana/data'; import { PanelProps } from '@grafana/data';
import { config, locationService } from '@grafana/runtime/src'; import { locationService } from '@grafana/runtime/src';
import { Button, PanelContext, PanelContextRoot, stylesFactory } from '@grafana/ui'; import { PanelContext, PanelContextRoot } from '@grafana/ui';
import { CanvasFrameOptions } from 'app/features/canvas'; import { CanvasFrameOptions } from 'app/features/canvas';
import { ElementState } from 'app/features/canvas/runtime/element'; import { ElementState } from 'app/features/canvas/runtime/element';
import { Scene } from 'app/features/canvas/runtime/scene'; import { Scene } from 'app/features/canvas/runtime/scene';
@ -42,7 +41,6 @@ export class CanvasPanel extends Component<Props, State> {
readonly scene: Scene; readonly scene: Scene;
private subs = new Subscription(); private subs = new Subscription();
needsReload = false; needsReload = false;
styles = getStyles(config.theme);
isEditing = locationService.getSearchObject().editPanel !== undefined; isEditing = locationService.getSearchObject().editPanel !== undefined;
constructor(props: Props) { constructor(props: Props) {
@ -57,13 +55,13 @@ export class CanvasPanel extends Component<Props, State> {
this.scene = new Scene(this.props.options.root, this.props.options.inlineEditing, this.onUpdateScene); this.scene = new Scene(this.props.options.root, this.props.options.inlineEditing, this.onUpdateScene);
this.scene.updateSize(props.width, props.height); this.scene.updateSize(props.width, props.height);
this.scene.updateData(props.data); this.scene.updateData(props.data);
this.scene.inlineEditingCallback = this.inlineEditButtonClick; this.scene.inlineEditingCallback = this.openInlineEdit;
this.subs.add( this.subs.add(
this.props.eventBus.subscribe(PanelEditEnteredEvent, (evt) => { this.props.eventBus.subscribe(PanelEditEnteredEvent, (evt) => {
// Remove current selection when entering edit mode for any panel in dashboard // Remove current selection when entering edit mode for any panel in dashboard
this.scene.clearCurrentSelection(); this.scene.clearCurrentSelection();
this.inlineEditButtonClose(); this.closeInlineEdit();
}) })
); );
@ -171,7 +169,7 @@ export class CanvasPanel extends Component<Props, State> {
return changed; return changed;
} }
inlineEditButtonClick = () => { openInlineEdit = () => {
if (isInlineEditOpen) { if (isInlineEditOpen) {
this.forceUpdate(); this.forceUpdate();
this.setActivePanel(); this.setActivePanel();
@ -183,7 +181,7 @@ export class CanvasPanel extends Component<Props, State> {
isInlineEditOpen = true; isInlineEditOpen = true;
}; };
inlineEditButtonClose = () => { closeInlineEdit = () => {
this.setState({ openInlineEdit: false }); this.setState({ openInlineEdit: false });
isInlineEditOpen = false; isInlineEditOpen = false;
}; };
@ -194,39 +192,14 @@ export class CanvasPanel extends Component<Props, State> {
}; };
renderInlineEdit = () => { renderInlineEdit = () => {
return ( return <InlineEdit onClose={() => this.closeInlineEdit()} id={this.props.id} scene={activeCanvasPanel!.scene} />;
<InlineEdit onClose={() => this.inlineEditButtonClose()} id={this.props.id} scene={activeCanvasPanel!.scene} />
);
}; };
render() { render() {
return ( return (
<> <>
{this.scene.render()} {this.scene.render()}
{this.props.options.inlineEditing && !this.isEditing && ( {this.state.openInlineEdit && this.renderInlineEdit()}
<div>
<div className={this.styles.inlineEditButton}>
<Button
size="lg"
variant="secondary"
icon="edit"
data-btninlineedit={this.props.id}
onClick={this.inlineEditButtonClick}
/>
</div>
{this.state.openInlineEdit && this.renderInlineEdit()}
</div>
)}
</> </>
); );
} }
} }
const getStyles = stylesFactory((theme: GrafanaTheme) => ({
inlineEditButton: css`
position: absolute;
bottom: 8px;
left: 8px;
z-index: 999;
`,
}));