mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
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:
parent
e7710f0c66
commit
3617e59548
@ -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>
|
||||
|
@ -65,6 +65,8 @@
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel-editor__content {
|
||||
|
Loading…
Reference in New Issue
Block a user