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]]
+
+
-
+