diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx index 6df8a8bc0aa..11b55238979 100644 --- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx +++ b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { hot } from 'react-hot-loader'; import ReactGridLayout from 'react-grid-layout'; import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT } from 'app/core/constants'; import { DashboardPanel } from './DashboardPanel'; @@ -213,3 +214,5 @@ export class DashboardGrid extends React.Component { ); } } + +export default hot(module)(DashboardGrid); diff --git a/public/app/features/dashboard/dashgrid/DashboardGridDirective.ts b/public/app/features/dashboard/dashgrid/DashboardGridDirective.ts index a8e4b0dcae9..bb81c936b3e 100644 --- a/public/app/features/dashboard/dashgrid/DashboardGridDirective.ts +++ b/public/app/features/dashboard/dashgrid/DashboardGridDirective.ts @@ -1,4 +1,4 @@ import { react2AngularDirective } from 'app/core/utils/react2angular'; -import { DashboardGrid } from './DashboardGrid'; +import DashboardGrid from './DashboardGrid'; react2AngularDirective('dashboardGrid', DashboardGrid, [['dashboard', { watchDepth: 'reference' }]]); diff --git a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx index 8f213533a1e..fcd677f92c0 100644 --- a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx +++ b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx @@ -20,6 +20,7 @@ export interface EditorToolBarView { interface State { openView?: EditorToolBarView; + isOpen: boolean; fadeIn: boolean; } @@ -30,6 +31,7 @@ export class EditorTabBody extends PureComponent { this.state = { openView: null, fadeIn: false, + isOpen: false, }; } @@ -39,12 +41,13 @@ export class EditorTabBody extends PureComponent { onToggleToolBarView = (item: EditorToolBarView) => { this.setState({ - openView: item === this.state.openView ? null : item, + openView: item, + isOpen: !this.state.isOpen, }); }; onCloseOpenView = () => { - this.setState({ openView: null }); + this.setState({ isOpen: false }); }; static getDerivedStateFromProps(props, state) { @@ -102,7 +105,7 @@ export class EditorTabBody extends PureComponent { render() { const { children, toolbarItems, main, heading } = this.props; - const { openView, fadeIn } = this.state; + const { openView, fadeIn, isOpen } = this.state; return ( <> @@ -114,7 +117,7 @@ export class EditorTabBody extends PureComponent {
- +
{openView && this.renderOpenView(openView)}
diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx index 56067f67495..ffdde413ea7 100644 --- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx +++ b/public/app/features/dashboard/dashgrid/PanelEditor.tsx @@ -87,10 +87,10 @@ export class PanelEditor extends PureComponent { return (
-
- -
{ + //
+ // + //
//
//
//
diff --git a/public/sass/components/_dashboard_grid.scss b/public/sass/components/_dashboard_grid.scss index 1370bd96709..bf5a51caa8c 100644 --- a/public/sass/components/_dashboard_grid.scss +++ b/public/sass/components/_dashboard_grid.scss @@ -3,7 +3,13 @@ .panel-in-fullscreen { .react-grid-layout { - height: calc(100% - 20px) !important; + height: 100% !important; + } + + .dashboard-container--has-submenu { + .react-grid-layout { + height: calc(100% - 50px) !important; + } } .react-grid-item { diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index 353aee55a09..c1191825d08 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -3,10 +3,6 @@ width: 100%; height: 100%; box-sizing: border-box; - - &--has-submenu { - height: calc(100% - 50px); - } } .template-variable { diff --git a/scripts/webpack/webpack.hot.js b/scripts/webpack/webpack.hot.js index def878ca1ea..76acf3080e0 100644 --- a/scripts/webpack/webpack.hot.js +++ b/scripts/webpack/webpack.hot.js @@ -69,6 +69,12 @@ module.exports = merge(common, { use: [ 'style-loader', // creates style nodes from JS strings 'css-loader', // translates CSS into CommonJS + { + loader: 'postcss-loader', + options: { + config: { path: __dirname + '/postcss.config.js' }, + }, + }, 'sass-loader', // compiles Sass to CSS ], },