newgrid: various fixes

pkg/api/dtos/index.go

@@ -10,6 +10,7 @@ type IndexViewData struct {
 	NavTree                 []*NavLink
 	BuildVersion            string
 	BuildCommit             string
+	Theme                   string
 	NewGrafanaVersionExists bool
 	NewGrafanaVersion       string
 }

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,

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');
+  }
 }
 

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 (
     <ReactGridLayout
-      width={gridWidth}
+      width={lastGridWidth}
       className="layout"
       isDraggable={true}
       isResizable={true}
@@ -33,6 +38,7 @@ function GridWrapper({size, layout, onLayoutChange, children, onResize}) {
       draggableHandle=".grid-drag-handle"
       layout={layout}
       onResize={onResize}
+      onResizeStop={onResizeStop}
       onLayoutChange={onLayoutChange}>
       {children}
     </ReactGridLayout>
@@ -56,6 +62,8 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
     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<DashboardGridProps, any> {
     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<DashboardGridProps, any> {
 
   render() {
     return (
-      <SizedReactLayoutGrid layout={this.buildLayout()} onLayoutChange={this.onLayoutChange} onResize={this.onResize}>
+      <SizedReactLayoutGrid
+        layout={this.buildLayout()}
+        onLayoutChange={this.onLayoutChange}
+        onWidthChange={this.onWidthChange}
+        onResize={this.onResize}
+        onResizeStop={this.onResizeStop}>
         {this.renderPanels()}
       </SizedReactLayoutGrid>
     );

public/img/resize-handle-white.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" standalone="no"?>
+<!-- Generator: Adobe Fireworks CS6, Export SVG Extension by Aaron Beall (http://fireworks.abeall.com) . Version: 0.6.1  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg id="Untitled-Page%201" viewBox="0 0 6 6" style="background-color:#ffffff00" version="1.1"
+	xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
+	x="0px" y="0px" width="6px" height="6px"
+>
+	<g opacity="0.302">
+		<path d="M 6 6 L 0 6 L 0 4.2 L 4 4.2 L 4.2 4.2 L 4.2 0 L 6 0 L 6 6 L 6 6 Z" fill="#FFFFFF"/>
+	</g>
+</svg>

public/sass/_old_responsive.scss

@@ -7,14 +7,14 @@
 // ---------------------
 
 @include media-breakpoint-down(sm) {
-  div.panel {
+  // div.panel {
-    width: 100% !important;
+  //   width: 100% !important;
-    padding: 0px !important;
+  //   padding: 0px !important;
-  }
+  // }
-  .panel-margin {
+  // .panel-margin {
-    margin-right: 0;
+  //   margin-right: 0;
-    margin-left: 0;
+  //   margin-left: 0;
-  }
+  // }
   body {
     padding: 0;
   }

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');
+  }
+}
 

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 {

public/views/index.template.html

@@ -10,17 +10,14 @@
 
 		<base href="[[.AppSubUrl]]/" />
 
-		[[if .User.LightTheme]]
+		<link rel="stylesheet" href="public/build/grafana.[[ .Theme ]].css?v[[ .BuildVersion ]]">
-		  <link rel="stylesheet" href="public/build/grafana.light.css?v[[ .BuildVersion ]]">
-		[[else]]
-		  <link rel="stylesheet" href="public/build/grafana.dark.css?v[[ .BuildVersion ]]">
-		[[end]]
 
     <link rel="icon" type="image/png" href="public/img/fav32.png">
     <link rel="mask-icon" href="public/img/grafana_mask_icon.svg" color="#F05A28">
+
 	</head>
 
-	<body ng-cloak>
+	<body ng-cloak class="theme-[[ .Theme ]]">
 		<grafana-app class="grafana-app">
 
       <sidemenu class="sidemenu"></sidemenu>