From a51ac787c01119211ab1b81f0db79767c0d89722 Mon Sep 17 00:00:00 2001 From: Ryan McKinley Date: Sat, 8 Feb 2020 12:01:10 +0100 Subject: [PATCH] PanelEditor: use splitpane for new editor (#22022) * use splitpane for new editor * change header * use back button icon * adding react split --- package.json | 1 + .../components/PanelEditor/PanelEditor.tsx | 128 +++++++++++------- yarn.lock | 18 ++- 3 files changed, 98 insertions(+), 49 deletions(-) diff --git a/package.json b/package.json index 840763de76f..e7ccec1e3fc 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx index d76c8d6f39e..946a7d19841 100644 --- a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx +++ b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx @@ -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,44 +8,51 @@ 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) => ({ - wrapper: css` - width: 100%; - height: 100%; - position: fixed; - z-index: ${theme.zIndex.modal}; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: ${theme.colors.pageBg}; - display: flex; - padding: ${theme.spacing.md}; - flex-direction: row; - `, - leftPane: css` - flex-grow: 1; - 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}; - `, -})); +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%; + position: fixed; + z-index: ${theme.zIndex.modal}; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: ${theme.colors.pageBg}; + `, + fill: css` + width: 100%; + height: 100%; + `, + 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 { }); }; + 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 { } return ( - <> -
-
-
+
+
+ + {this.props.panel.title} + + Discard + +
+ (document.body.style.cursor = 'col-resize')} + onDragFinished={this.onDragFinished} + > + (document.body.style.cursor = 'row-resize')} + onDragFinished={this.onDragFinished} + > +
{ isInView={true} />
-
+
+ +
+
TODO: viz settings
-
- - Discard - - Exit -
-
- + +
); } } diff --git a/yarn.lock b/yarn.lock index 081950a698d..29aae0feed5 100644 --- a/yarn.lock +++ b/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"