public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ux(dashboard): improving drag and drop behavior!

Browse Source
This commit is contained in:
Torkel Ödegaard
2016-10-30 19:37:50 +01:00
parent 09a19d8ecb
commit 48a54edd85
5 changed files with 68 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/features/dashboard/row/add_panel.html
+6 -1
View File
@@ -8,7 +8,12 @@
<div class="add-panel-panels-scroll">
<div class="add-panel-panels">
<div class="add-panel-item" ng-repeat="panel in ctrl.panelHits" ng-class="{active: $index === ctrl.activeIndex}" ng-click="ctrl.addPanel(panel)">
<div class="add-panel-item"
ng-repeat="panel in ctrl.panelHits"
ng-class="{active: $index === ctrl.activeIndex}"
ng-click="ctrl.addPanel(panel)"
ui-draggable="ctrl.dashboard.editMode"
drag="panel.id">
<img class="add-panel-item-img" ng-src="{{panel.info.logos.small}}"></img>
<div class="add-panel-item-name">{{panel.name}}</div>
</div>
public/app/features/dashboard/row/add_panel.ts
-1
View File
@@ -93,7 +93,6 @@ export class AddPanelCtrl {
isNew: true,
};
this.rowCtrl.dropView = 0;
this.dashboard.addPanel(panel, this.row);
this.$timeout(() => {
this.$rootScope.$broadcast('render');
public/app/features/dashboard/row/row.html
+1 -1
View File
@@ -53,7 +53,7 @@
</div>
<div class="panels-wrapper" ng-if="!ctrl.row.collapse">
<div ng-repeat="panel in ctrl.row.panels track by panel.id" class="panel" ui-draggable="!ctrl.dashboard.meta.fullscreen" drag="panel.id" ui-on-drop="ctrl.onDrop($data, panel)" drag-handle-class="drag-handle" panel-width>
<div ng-repeat="panel in ctrl.row.panels track by panel.id" class="panel" ui-draggable="ctrl.dashboard.editMode" drag="panel.id" ui-on-drop="ctrl.onDrop($data, panel)" drag-handle-class="drag-handle" panel-width>
<plugin-component type="panel" class="panel-margin">
</plugin-component>
</div>
public/app/features/dashboard/row/row.ts
+52 -19
View File
@@ -26,21 +26,61 @@ export class DashRowCtrl {
}
onDrop(panelId, dropTarget) {
var info = this.dashboard.getPanelInfoById(panelId);
if (dropTarget) {
var dropInfo = this.dashboard.getPanelInfoById(dropTarget.id);
dropInfo.row.panels[dropInfo.index] = info.panel;
info.row.panels[info.index] = dropTarget;
var dragSpan = info.panel.span;
info.panel.span = dropTarget.span;
dropTarget.span = dragSpan;
var dragObject;
// if string it's a panel type
if (_.isString(panelId)) {
// setup new panel
dragObject = {
row: this.row,
panel: {
title: config.new_panel_title,
type: panelId,
id: this.dashboard.getNextPanelId(),
},
isNew: true,
};
} else {
info.row.panels.splice(info.index, 1);
info.panel.span = 12 - this.dashboard.rowSpan(this.row);
this.row.panels.push(info.panel);
dragObject = this.dashboard.getPanelInfoById(panelId);
}
this.$rootScope.$broadcast('render');
if (dropTarget) {
dropTarget = this.dashboard.getPanelInfoById(dropTarget.id);
// if draging new panel onto existing panel split it
if (dragObject.isNew) {
dragObject.panel.span = dropTarget.panel.span = dropTarget.panel.span/2;
// insert after
dropTarget.row.panels.splice(dropTarget.index+1, 0, dragObject.panel);
} else if (this.row === dragObject.row) {
// just move element
this.row.movePanel(dropTarget.index, dragObject.index);
} else {
// split drop target space
dragObject.panel.span = dropTarget.panel.span = dropTarget.panel.span/2;
// insert after
dropTarget.row.panels.splice(dropTarget.index+1, 0, dragObject.panel);
// remove from source row
dragObject.row.removePanel(dragObject.panel);
}
// dropInfo.row.panels[dropInfo.index] = info.panel;
// info.row.panels[info.index] = dropTarget;
// var dragSpan = info.panel.span;
// info.panel.span = dropTarget.span;
// dropTarget.span = dragSpan;
} else {
dragObject.panel.span = 12 - this.row.span;
this.row.panels.push(dragObject.panel);
// if not new remove from source row
if (!dragObject.isNew) {
dragObject.row.removePanel(dragObject.panel);
}
}
this.row.panelSpanChanged();
this.$timeout(() => {
this.$rootScope.$broadcast('render');
});
}
setHeight(height) {
@@ -216,16 +256,9 @@ coreModule.directive('panelDropZone', function($timeout) {
scope.$on("ANGULAR_DRAG_START", function() {
indrag = true;
updateState();
// $timeout(function() {
// var dropZoneSpan = 12 - scope.ctrl.dashboard.rowSpan(scope.ctrl.row);
// if (dropZoneSpan > 0) {
// showPanel(dropZoneSpan, 'Panel Drop Zone');
// }
// });
});
scope.$on("ANGULAR_DRAG_END", function() {
console.log('drag end');
indrag = false;
updateState();
});
public/app/features/dashboard/row/row_model.ts
+9 -1
View File
@@ -22,7 +22,6 @@ export class DashboardRow {
};
constructor(private model) {
console.log(model.isNew);
assignModelProperties(this, model, this.defaults);
this.events = new Emitter();
this.updateRowSpan();
@@ -63,6 +62,11 @@ export class DashboardRow {
this.panels[0].span = 4;
this.panels[1].span = 4;
panel.span = 4;
} else if (panelCount === 3) {
this.panels[0].span = 3;
this.panels[1].span = 3;
this.panels[2].span = 3;
panel.span = 3;
}
}
@@ -78,5 +82,9 @@ export class DashboardRow {
this.events.emit('panel-removed', panel);
this.panelSpanChanged();
}
movePanel(fromIndex, toIndex) {
this.panels.splice(toIndex, 0, this.panels.splice(fromIndex, 1)[0]);
}
}