New panel edit: support scrolling (#22026)

* Make new edit work again

* Add custom scrolls

* better merge

Co-authored-by: Ryan McKinley <ryantxu@gmail.com>
This commit is contained in:
Dominik Prokop 2020-02-08 14:12:02 +01:00 committed by GitHub
parent e7710f0c66
commit 3617e59548
2 changed files with 16 additions and 6 deletions

View File

@ -1,7 +1,7 @@
import React, { PureComponent } from 'react';
import { css, cx } from 'emotion';
import { GrafanaTheme, PanelData, LoadingState, DefaultTimeRange, PanelEvents } from '@grafana/data';
import { stylesFactory, Forms } from '@grafana/ui';
import { stylesFactory, Forms, CustomScrollbar } from '@grafana/ui';
import config from 'app/core/config';
import { PanelModel } from '../../state/PanelModel';
@ -52,6 +52,10 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
cursor: row-resize;
`
),
noScrollPaneContent: css`
height: 100%;
overflow: hidden;
`,
};
});
@ -171,8 +175,9 @@ export class PanelEditor extends PureComponent<Props, State> {
</div>
<SplitPane
split="vertical"
primary="second"
minSize={50}
defaultSize={'80%'}
defaultSize={350}
resizerClassName={styles.resizerV}
onDragStarted={() => (document.body.style.cursor = 'col-resize')}
onDragFinished={this.onDragFinished}
@ -180,7 +185,8 @@ export class PanelEditor extends PureComponent<Props, State> {
<SplitPane
split="horizontal"
minSize={50}
defaultSize={'60%'}
primary="second"
defaultSize="40%"
resizerClassName={styles.resizerH}
onDragStarted={() => (document.body.style.cursor = 'row-resize')}
onDragFinished={this.onDragFinished}
@ -195,12 +201,14 @@ export class PanelEditor extends PureComponent<Props, State> {
isInView={true}
/>
</div>
<div>
<div className={styles.noScrollPaneContent}>
<QueriesTab panel={dirtyPanel} dashboard={dashboard} />
</div>
</SplitPane>
<div>
<div>TODO: viz settings</div>
<div className={styles.noScrollPaneContent}>
<CustomScrollbar>
<div>Viz settings</div>
</CustomScrollbar>
</div>
</SplitPane>
</div>

View File

@ -65,6 +65,8 @@
min-width: 0;
display: flex;
min-height: 0;
height: 100%;
overflow: hidden;
}
.panel-editor__content {