ux: new grid progress

public/app/features/dashboard/dashgrid/dashgrid.ts

@@ -170,15 +170,6 @@ export function dashGridItem($timeout, $rootScope) {
         'data-gs-no-resize': panel.type === 'row',
       });
 
-      // listen for row moments
-      scope.$watch("panel.y", function(newModelY) {
-        let elementY = parseInt(element.attr('data-gs-y'));
-        console.log('new panel y', newModelY, elementY);
-        if (_.isNumber(newModelY) && elementY !== newModelY) {
-          gridCtrl.gridstack.move(element, panel.x, panel.y);
-        }
-      });
-
       $rootScope.onAppEvent('panel-fullscreen-exit', (evt, payload) => {
         if (panel.id !== payload.panelId) {
           return;

public/app/features/dashboard/model.ts

@@ -144,13 +144,10 @@ export class DashboardModel {
   }
 
   getNextPanelId() {
-    var i, j, row, panel, max = 0;
+    var j, panel, max = 0;
-    for (i = 0; i < this.rows.length; i++) {
+    for (j = 0; j < this.panels.length; j++) {
-      row = this.rows[i];
+      panel = this.panels[j];
-      for (j = 0; j < row.panels.length; j++) {
+      if (panel.id > max) { max = panel.id; }
-        panel = row.panels[j];
-        if (panel.id > max) { max = panel.id; }
-      }
     }
     return max + 1;
   }
@@ -170,9 +167,9 @@ export class DashboardModel {
     return null;
   }
 
-  addPanel(panel, row) {
+  addPanel(panel) {
     panel.id = this.getNextPanelId();
-    row.addPanel(panel);
+    this.panels.push(panel);
   }
 
   removePanel(panel, ask?) {

public/app/features/dashboard/row/add_panel.html

@@ -17,8 +17,6 @@
 					ng-repeat="panel in ctrl.panelHits"
 					ng-class="{active: $index === ctrl.activeIndex}"
 					ng-click="ctrl.addPanel(panel)"
-					ui-draggable="true"
-					drag="panel.id"
           title="{{panel.name}}">
         <img class="add-panel-item-img" ng-src="{{panel.info.logos.small}}"></img>
         <div class="add-panel-item-name">{{panel.name}}</div>

public/app/features/dashboard/row/add_panel.ts

@@ -32,7 +32,7 @@ export class AddPanelCtrl {
 
   keyDown(evt) {
     if (evt.keyCode === 27) {
-      //this.rowCtrl.dropView = 0;
+      this.dismiss();
       return;
     }
 
@@ -79,6 +79,24 @@ export class AddPanelCtrl {
   }
 
   addPanel(panelPluginInfo) {
+    let defaultHeight = 6;
+    let defaultWidth = 6;
+
+    if (panelPluginInfo.id === "singlestat") {
+      defaultWidth = 3;
+      defaultHeight = 3;
+    }
+
+    this.dashboard.addPanel({
+      type: panelPluginInfo.id,
+      x: 0,
+      y: 0,
+      width: defaultWidth,
+      height: defaultHeight,
+      title: 'New panel',
+    });
+
+    this.dismiss();
   }
 }
 

public/app/features/panel/panel_ctrl.ts

@@ -18,7 +18,6 @@ import {Emitter} from 'app/core/core';
 export class PanelCtrl {
   panel: any;
   error: any;
-  row: any;
   dashboard: any;
   editorTabIndex: number;
   pluginName: string;
@@ -201,21 +200,12 @@ export class PanelCtrl {
   }
 
   duplicate() {
-    this.dashboard.duplicatePanel(this.panel, this.row);
+    this.dashboard.duplicatePanel(this.panel);
     this.$timeout(() => {
       this.$scope.$root.$broadcast('render');
     });
   }
 
-  updateColumnSpan(span) {
-    this.panel.span = Math.min(Math.max(Math.floor(this.panel.span + span), 1), 12);
-    this.row.panelSpanChanged();
-
-    this.$timeout(() => {
-      this.render();
-    });
-  }
-
   removePanel() {
     this.dashboard.removePanel(this.panel);
   }

public/app/partials/panelgeneral.html

@@ -11,33 +11,20 @@
 		</div>
 	</div>
 
-	<div class="section gf-form-group">
+  <div class="section gf-form-group">
-		<h5 class="section-heading">Dimensions</h5>
+    <h5 class="section-heading">Options</h5>
-		<div class="gf-form">
+		<gf-form-switch class="gf-form" label-class="width-8" switch-class="max-width-6" label="Transparent" checked="ctrl.panel.transparent" on-change="ctrl.render()"></gf-form-switch>
-			<span class="gf-form-label width-7">Span</span>
-			<select class="gf-form-input width-6" ng-model="ctrl.panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select>
-		</div>
-		<div class="gf-form">
-			<span class="gf-form-label width-7">Height</span>
-			<input type="text" class="gf-form-input width-6" ng-model='ctrl.panel.height' placeholder="100px"></input>
-		</div>
-		<gf-form-switch class="gf-form" label-class="width-7" switch-class="max-width-6" label="Transparent" checked="ctrl.panel.transparent" on-change="ctrl.render()"></gf-form-switch>
-	</div>
-
-	<div class="section gf-form-group">
-		<h5 class="section-heading">Templating</h5>
 		<div class="gf-form">
 			<span class="gf-form-label width-8">Repeat Panel</span>
 			<dash-repeat-option model="ctrl.panel"></dash-repeat-option>
 		</div>
 		<div class="gf-form">
-			<span class="gf-form-label width-8">Min span</span>
+			<span class="gf-form-label width-8">Min width</span>
 			<select class="gf-form-input" ng-model="ctrl.panel.minSpan" ng-options="f for f in [1,2,3,4,5,6,7,8,9,10,11,12]">
 				<option value=""></option>
 			</select>
 		</div>
 	</div>
-	</div>
 
 	<panel-links-editor panel="ctrl.panel"></panel-links-editor>
 

public/sass/components/_navbar.scss

@@ -3,7 +3,7 @@
   display: block;
   overflow: visible;
   position: relative;
-  margin-left: $side-menu-width;
+  padding-left: $side-menu-width;
   box-shadow: 0 0 20px black;
   z-index: 1;
 }
@@ -17,7 +17,7 @@
 
 .sidemenu-open {
   .navbar {
-    margin-left: 0;
+    padding-left: 0;
   }
 }
 

public/sass/components/_sidemenu.scss

@@ -6,7 +6,6 @@
   width: $side-menu-width;
   background: $navbarBackground;
   z-index: 10;
-  box-shadow: 0 0 20px black;
 
   a:focus {
     text-decoration: none;