From d87653b07944eea2443e541b962a1bbeba14334f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 25 Aug 2017 10:19:08 +0200 Subject: [PATCH] ux: new grid progress --- .../features/dashboard/dashgrid/dashgrid.ts | 9 -------- public/app/features/dashboard/model.ts | 15 ++++++------- .../app/features/dashboard/row/add_panel.html | 2 -- .../app/features/dashboard/row/add_panel.ts | 20 +++++++++++++++++- public/app/features/panel/panel_ctrl.ts | 12 +---------- public/app/partials/panelgeneral.html | 21 ++++--------------- public/sass/components/_navbar.scss | 4 ++-- public/sass/components/_sidemenu.scss | 1 - 8 files changed, 32 insertions(+), 52 deletions(-) diff --git a/public/app/features/dashboard/dashgrid/dashgrid.ts b/public/app/features/dashboard/dashgrid/dashgrid.ts index 45bc310d2c2..62ccb4feb0d 100644 --- a/public/app/features/dashboard/dashgrid/dashgrid.ts +++ b/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; diff --git a/public/app/features/dashboard/model.ts b/public/app/features/dashboard/model.ts index 0427177a262..406931c1364 100644 --- a/public/app/features/dashboard/model.ts +++ b/public/app/features/dashboard/model.ts @@ -144,13 +144,10 @@ export class DashboardModel { } getNextPanelId() { - var i, j, row, panel, max = 0; - for (i = 0; i < this.rows.length; i++) { - row = this.rows[i]; - for (j = 0; j < row.panels.length; j++) { - panel = row.panels[j]; - if (panel.id > max) { max = panel.id; } - } + var j, panel, max = 0; + for (j = 0; j < this.panels.length; j++) { + panel = this.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?) { diff --git a/public/app/features/dashboard/row/add_panel.html b/public/app/features/dashboard/row/add_panel.html index 8ff43fe5a40..2065cd8c2fd 100644 --- a/public/app/features/dashboard/row/add_panel.html +++ b/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}}">
{{panel.name}}
diff --git a/public/app/features/dashboard/row/add_panel.ts b/public/app/features/dashboard/row/add_panel.ts index 9d2234e2861..4ac46f78fac 100644 --- a/public/app/features/dashboard/row/add_panel.ts +++ b/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(); } } diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts index d27ae104237..82e24e72d5d 100644 --- a/public/app/features/panel/panel_ctrl.ts +++ b/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); } diff --git a/public/app/partials/panelgeneral.html b/public/app/partials/panelgeneral.html index a69884dc5cc..be53968854b 100644 --- a/public/app/partials/panelgeneral.html +++ b/public/app/partials/panelgeneral.html @@ -11,33 +11,20 @@ -
-
Dimensions
-
- Span - -
-
- Height - -
- -
- -
-
Templating
+
+
Options
+
Repeat Panel
- Min span + Min width
-
diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 35a52748d71..c3a845fabe5 100644 --- a/public/sass/components/_navbar.scss +++ b/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; } } diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss index 09ad19ba19b..86011f41c28 100644 --- a/public/sass/components/_sidemenu.scss +++ b/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;