From 3a089dd04c1cec1110be879899c4dab87984521d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 11 Oct 2017 21:36:03 +0200 Subject: [PATCH] newgrid: various fixes --- pkg/api/dtos/index.go | 1 + pkg/api/index.go | 1 + public/app/features/dashboard/PanelModel.ts | 4 ++ .../dashboard/dashgrid/DashboardGrid.tsx | 32 ++++++++++-- public/img/resize-handle-white.svg | 11 ++++ public/sass/_old_responsive.scss | 16 +++--- public/sass/components/_dashboard_grid.scss | 9 ++++ public/sass/pages/_dashboard.scss | 52 ------------------- public/views/index.template.html | 9 ++-- 9 files changed, 65 insertions(+), 70 deletions(-) create mode 100644 public/img/resize-handle-white.svg diff --git a/pkg/api/dtos/index.go b/pkg/api/dtos/index.go index ea910901492..5661ae1df91 100644 --- a/pkg/api/dtos/index.go +++ b/pkg/api/dtos/index.go @@ -10,6 +10,7 @@ type IndexViewData struct { NavTree []*NavLink BuildVersion string BuildCommit string + Theme string NewGrafanaVersionExists bool NewGrafanaVersion string } diff --git a/pkg/api/index.go b/pkg/api/index.go index 854fe880e6d..189a6bbb604 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -62,6 +62,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { HelpFlags1: c.HelpFlags1, }, Settings: settings, + Theme: prefs.Theme, AppUrl: appUrl, AppSubUrl: appSubUrl, GoogleAnalyticsId: setting.GoogleAnalyticsId, diff --git a/public/app/features/dashboard/PanelModel.ts b/public/app/features/dashboard/PanelModel.ts index de086170b20..44b67fd841a 100644 --- a/public/app/features/dashboard/PanelModel.ts +++ b/public/app/features/dashboard/PanelModel.ts @@ -70,5 +70,9 @@ export class PanelModel { this.events.emit('panel-size-changed'); } } + + resizeDone() { + this.events.emit('panel-size-changed'); + } } diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx index 7f1958836ff..dfd1a8e4274 100644 --- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx +++ b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx @@ -10,17 +10,22 @@ import classNames from 'classnames'; import sizeMe from 'react-sizeme'; const COLUMN_COUNT = 12; +let lastGridWidth = 1200; -function GridWrapper({size, layout, onLayoutChange, children, onResize}) { +function GridWrapper({size, layout, onLayoutChange, children, onResize, onResizeStop, onWidthChange}) { if (size.width === 0) { console.log('size is zero!'); } - const gridWidth = size.width > 0 ? size.width : 1200; + const width = size.width > 0 ? size.width : lastGridWidth; + if (width !== lastGridWidth) { + onWidthChange(); + lastGridWidth = width; + } return ( {children} @@ -56,6 +62,8 @@ export class DashboardGrid extends React.Component { this.panelContainer = this.props.getPanelContainer(); this.onLayoutChange = this.onLayoutChange.bind(this); this.onResize = this.onResize.bind(this); + this.onResizeStop = this.onResizeStop.bind(this); + this.onWidthChange = this.onWidthChange.bind(this); // subscribe to dashboard events this.dashboard = this.panelContainer.getDashboard(); @@ -98,10 +106,21 @@ export class DashboardGrid extends React.Component { this.forceUpdate(); } + onWidthChange() { + console.log('width change'); + for (const panel of this.dashboard.panels) { + panel.resizeDone(); + } + } + onResize(layout, oldItem, newItem) { this.panelMap[newItem.i].updateGridPos(newItem); } + onResizeStop(layout, oldItem, newItem) { + this.panelMap[newItem.i].resizeDone(); + } + renderPanels() { const panelElements = []; @@ -119,7 +138,12 @@ export class DashboardGrid extends React.Component { render() { return ( - + {this.renderPanels()} ); diff --git a/public/img/resize-handle-white.svg b/public/img/resize-handle-white.svg new file mode 100644 index 00000000000..3b439663f8a --- /dev/null +++ b/public/img/resize-handle-white.svg @@ -0,0 +1,11 @@ + + + + + + + + \ No newline at end of file diff --git a/public/sass/_old_responsive.scss b/public/sass/_old_responsive.scss index be56bbae485..b2ca34837d6 100644 --- a/public/sass/_old_responsive.scss +++ b/public/sass/_old_responsive.scss @@ -7,14 +7,14 @@ // --------------------- @include media-breakpoint-down(sm) { - div.panel { - width: 100% !important; - padding: 0px !important; - } - .panel-margin { - margin-right: 0; - margin-left: 0; - } + // div.panel { + // width: 100% !important; + // padding: 0px !important; + // } + // .panel-margin { + // margin-right: 0; + // margin-left: 0; + // } body { padding: 0; } diff --git a/public/sass/components/_dashboard_grid.scss b/public/sass/components/_dashboard_grid.scss index 5a346d443a6..21fdd845f65 100644 --- a/public/sass/components/_dashboard_grid.scss +++ b/public/sass/components/_dashboard_grid.scss @@ -21,4 +21,13 @@ } } +.react-grid-item { + // overflow: auto; +} + +.theme-dark { + .react-grid-item > .react-resizable-handle { + background-image: url('../img/resize-handle-white.svg'); + } +} diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index 0559f75fd91..d1c763e2d8d 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -173,64 +173,12 @@ div.flot-text { } } -.panel-full-edit { -} - -.panel-highlight { - box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236,10.8) -} - .panel-hover-highlight { .panel-menu-toggle { visibility: visible; transition: opacity 0.1s ease-in 0.2s; opacity: 1; } - - .resize-panel-handle { - visibility: visible; - transition: opacity 0.1s ease-in 0.2s; - opacity: 1; - } -} - -.on-drag-hover { - .panel-container { - box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 5px rgba(82,168,236,10.8) - } -} - -.panel-drop-zone { - display: none; - - .panel-container { - border: $panel-border; - display: flex; - justify-content: center; - flex-direction: column; - text-align: center; - color: $text-color-faint; - font-weight: bold; - background: $panel-drop-zone-bg; - } -} - -.panel-in-fullscreen { - .panel-drop-zone { - display: none !important; - } - - .grid-stack > .grid-stack-item { - position: unset; - display: none; - } - - .panel-fullscreen { - display: block !important; - > .ui-resizable-handle { - display: none !important; - } - } } .panel-time-info { diff --git a/public/views/index.template.html b/public/views/index.template.html index fd17b1e84a0..da72f16161d 100644 --- a/public/views/index.template.html +++ b/public/views/index.template.html @@ -10,17 +10,14 @@ - [[if .User.LightTheme]] - - [[else]] - - [[end]] + + - +