IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux(dashboard): worked on single row edit mode, #6442

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-11-02 22:24:08 +01:00
parent e23f898418
commit 075c722527
4 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/app/features/dashboard/model.ts
View File

@ -192,6 +192,7 @@ export class DashboardModel {
this.editMode = !this.editMode;
this.updateSubmenuVisibility();
this.events.emit('edit-mode-changed', this.editMode);
}
setPanelFocus(id) {

2
public/app/features/dashboard/row/add_panel.ts
View File

@ -93,7 +93,7 @@ export class AddPanelCtrl {
isNew: true,
};
this.rowCtrl.dropView = 0;
this.rowCtrl.closeDropView();
this.dashboard.addPanel(panel, this.row);
this.$timeout(() => {
this.$rootScope.$broadcast('render');

4
public/app/features/dashboard/row/row.html
View File

@ -1,4 +1,4 @@
<div ng-if="ctrl.dashboard.editMode">
<div ng-if="ctrl.editMode">
<div class="dash-row-header">
<a class="dash-row-header-title" ng-click="ctrl.toggleCollapse()">
<span class="dash-row-collapse-toggle pointer">
@ -40,7 +40,7 @@
</div>
</div>
<div ng-if="!ctrl.dashboard.editMode">
<div ng-if="!ctrl.editMode">
<div class="row-open">
<div class='row-tab dropdown' ng-show="dashboardMeta.canEdit" ng-hide="dashboard.meta.fullscreen">
<span class="row-tab-button dropdown-toggle" data-toggle="dropdown">

21
public/app/features/dashboard/row/row_ctrl.ts
View File

@ -12,6 +12,7 @@ export class DashRowCtrl {
dashboard: any;
row: any;
dropView: number;
editMode: boolean;
/** @ngInject */
constructor(private $scope, private $rootScope, private $timeout, private uiSegmentSrv, private $q) {
@ -21,6 +22,12 @@ export class DashRowCtrl {
this.dropView = 1;
delete this.row.isNew;
}
this.dashboard.events.on('edit-mode-changed', this.editModeChanged.bind(this), $scope);
}
editModeChanged() {
this.editMode = this.dashboard.editMode;
}
onDrop(panelId, dropTarget) {
@ -107,15 +114,20 @@ export class DashRowCtrl {
}
onMenuAddPanel() {
this.dashboard.toggleEditMode();
this.editMode = true;
this.dropView = 1;
}
onMenuRowOptions() {
this.dashboard.toggleEditMode();
this.editMode = true;
this.dropView = 2;
}
closeDropView() {
this.dropView = 0;
this.editMode = this.dashboard.editMode;
}
onMenuDeleteRow() {
this.dashboard.removeRow(this.row);
}
@ -208,7 +220,7 @@ coreModule.directive('panelDropZone', function($timeout) {
}
function updateState() {
if (scope.ctrl.dashboard.editMode) {
if (scope.ctrl.editMode) {
if (row.panels.length === 0 && indrag === false) {
return showPanel(12, 'Empty Space');
}
@ -234,8 +246,7 @@ coreModule.directive('panelDropZone', function($timeout) {
}
row.events.on('span-changed', updateState, scope);
scope.$watchGroup(['ctrl.dashboard.editMode'], updateState);
scope.$watchGroup(['ctrl.editMode'], updateState);
scope.$on("ANGULAR_DRAG_START", function() {
indrag = true;