mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
PanelEditor: use splitpane for new editor (#22022)
* use splitpane for new editor * change header * use back button icon * adding react split
This commit is contained in:
Ryan McKinley
GitHub
parent
72b9f78e14
commit
a51ac787c0
@ -253,6 +253,7 @@
|
||||
"react-popper": "1.3.3",
|
||||
"react-redux": "7.1.1",
|
||||
"react-sizeme": "2.5.2",
|
||||
"react-split-pane": "0.1.89",
|
||||
"react-transition-group": "2.6.1",
|
||||
"react-use": "12.8.0",
|
||||
"react-virtualized-auto-sizer": "1.0.2",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { css } from 'emotion';
|
||||
import { css, cx } from 'emotion';
|
||||
import { GrafanaTheme } from '@grafana/data';
|
||||
import { stylesFactory, Forms } from '@grafana/ui';
|
||||
import config from 'app/core/config';
|
||||
@ -8,11 +8,22 @@ import { PanelModel } from '../../state/PanelModel';
|
||||
import { DashboardModel } from '../../state/DashboardModel';
|
||||
import { DashboardPanel } from '../../dashgrid/DashboardPanel';
|
||||
import { QueriesTab } from '../../panel_editor/QueriesTab';
|
||||
import SplitPane from 'react-split-pane';
|
||||
import { StoreState } from '../../../../types/store';
|
||||
import { connect } from 'react-redux';
|
||||
import { updateLocation } from '../../../../core/reducers/location';
|
||||
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme) => ({
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme) => {
|
||||
const resizer = css`
|
||||
padding: 3px;
|
||||
font-style: italic;
|
||||
background: ${theme.colors.panelBg};
|
||||
&:hover {
|
||||
background: ${theme.colors.headingColor};
|
||||
}
|
||||
`;
|
||||
|
||||
return {
|
||||
wrapper: css`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -23,29 +34,25 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: ${theme.colors.pageBg};
|
||||
display: flex;
|
||||
padding: ${theme.spacing.md};
|
||||
flex-direction: row;
|
||||
`,
|
||||
leftPane: css`
|
||||
flex-grow: 1;
|
||||
fill: css`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
`,
|
||||
rightPane: css`
|
||||
width: 450px;
|
||||
height: 100%;
|
||||
flex-grow: 0;
|
||||
`,
|
||||
leftPaneViz: css`
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
`,
|
||||
leftPaneData: css`
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
padding-top: ${theme.spacing.md};
|
||||
`,
|
||||
}));
|
||||
resizerV: cx(
|
||||
resizer,
|
||||
css`
|
||||
cursor: col-resize;
|
||||
`
|
||||
),
|
||||
resizerH: cx(
|
||||
resizer,
|
||||
css`
|
||||
cursor: row-resize;
|
||||
`
|
||||
),
|
||||
};
|
||||
});
|
||||
|
||||
interface Props {
|
||||
dashboard: DashboardModel;
|
||||
@ -87,6 +94,11 @@ export class PanelEditor extends PureComponent<Props, State> {
|
||||
});
|
||||
};
|
||||
|
||||
onDragFinished = () => {
|
||||
document.body.style.cursor = 'auto';
|
||||
console.log('TODO, save splitter settings');
|
||||
};
|
||||
|
||||
render() {
|
||||
const { dashboard } = this.props;
|
||||
const { dirtyPanel } = this.state;
|
||||
@ -98,10 +110,33 @@ export class PanelEditor extends PureComponent<Props, State> {
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.wrapper}>
|
||||
<div className={styles.leftPane}>
|
||||
<div className={styles.leftPaneViz}>
|
||||
<div>
|
||||
<button className="navbar-edit__back-btn" onClick={this.onPanelExit}>
|
||||
<i className="fa fa-arrow-left"></i>
|
||||
</button>
|
||||
{this.props.panel.title}
|
||||
<Forms.Button variant="destructive" onClick={this.onDiscard}>
|
||||
Discard
|
||||
</Forms.Button>
|
||||
</div>
|
||||
<SplitPane
|
||||
split="vertical"
|
||||
minSize={50}
|
||||
defaultSize={'80%'}
|
||||
resizerClassName={styles.resizerV}
|
||||
onDragStarted={() => (document.body.style.cursor = 'col-resize')}
|
||||
onDragFinished={this.onDragFinished}
|
||||
>
|
||||
<SplitPane
|
||||
split="horizontal"
|
||||
minSize={50}
|
||||
defaultSize={'60%'}
|
||||
resizerClassName={styles.resizerH}
|
||||
onDragStarted={() => (document.body.style.cursor = 'row-resize')}
|
||||
onDragFinished={this.onDragFinished}
|
||||
>
|
||||
<div className={styles.fill}>
|
||||
<DashboardPanel
|
||||
dashboard={dashboard}
|
||||
panel={dirtyPanel}
|
||||
@ -111,18 +146,15 @@ export class PanelEditor extends PureComponent<Props, State> {
|
||||
isInView={true}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.leftPaneData}>
|
||||
<div>
|
||||
<QueriesTab panel={dirtyPanel} dashboard={dashboard} />
|
||||
</div>
|
||||
</SplitPane>
|
||||
<div>
|
||||
<div>TODO: viz settings</div>
|
||||
</div>
|
||||
<div className={styles.rightPane}>
|
||||
<Forms.Button variant="destructive" onClick={this.onDiscard}>
|
||||
Discard
|
||||
</Forms.Button>
|
||||
<Forms.Button onClick={this.onPanelExit}>Exit</Forms.Button>
|
||||
</SplitPane>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
18
yarn.lock
18
yarn.lock
@ -19048,7 +19048,7 @@ prop-types-exact@^1.2.0:
|
||||
object.assign "^4.1.0"
|
||||
reflect.ownkeys "^0.2.0"
|
||||
|
||||
prop-types@15.7.2, prop-types@15.x, prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
|
||||
prop-types@15.7.2, prop-types@15.x, prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
|
||||
version "15.7.2"
|
||||
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
|
||||
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
|
||||
@ -19930,6 +19930,15 @@ react-sizeme@^2.6.7:
|
||||
shallowequal "^1.1.0"
|
||||
throttle-debounce "^2.1.0"
|
||||
|
||||
react-split-pane@0.1.89:
|
||||
version "0.1.89"
|
||||
resolved "https://registry.yarnpkg.com/react-split-pane/-/react-split-pane-0.1.89.tgz#e111e5f7e6e1cd3c86a5aa0d9ddf987c2165f0d0"
|
||||
integrity sha512-bGEiOevi6nBE1evEJOsZjd5A7plLboFAU4+HGASWWVm94XUg7QdsuPInGOB+5Ym4RtY3TZCpmUvLe6qQmrZUOg==
|
||||
dependencies:
|
||||
prop-types "^15.5.10"
|
||||
react-lifecycles-compat "^3.0.4"
|
||||
react-style-proptype "^3.0.0"
|
||||
|
||||
react-storybook-addon-props-combinations@1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/react-storybook-addon-props-combinations/-/react-storybook-addon-props-combinations-1.1.0.tgz#22a61794cc3c106bf44be809af3c3241f6988e72"
|
||||
@ -19938,6 +19947,13 @@ react-storybook-addon-props-combinations@1.1.0:
|
||||
object-hash "^1.1.8"
|
||||
pretty-format "^21.2.1"
|
||||
|
||||
react-style-proptype@^3.0.0:
|
||||
version "3.2.2"
|
||||
resolved "https://registry.yarnpkg.com/react-style-proptype/-/react-style-proptype-3.2.2.tgz#d8e998e62ce79ec35b087252b90f19f1c33968a0"
|
||||
integrity sha512-ywYLSjNkxKHiZOqNlso9PZByNEY+FTyh3C+7uuziK0xFXu9xzdyfHwg4S9iyiRRoPCR4k2LqaBBsWVmSBwCWYQ==
|
||||
dependencies:
|
||||
prop-types "^15.5.4"
|
||||
|
||||
react-syntax-highlighter@^11.0.2:
|
||||
version "11.0.2"
|
||||
resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-11.0.2.tgz#4e3f376e752b20d2f54e4c55652fd663149e4029"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user