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): removed green row icon gain, replaced with collapse icon, #6442

Browse Source
This commit is contained in:
Torkel Ödegaard
2016-11-03 11:30:25 +01:00
parent 075c722527
commit f1137e4d20
6 changed files with 51 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -196,7 +196,6 @@ export class DashboardModel {
}
setPanelFocus(id) {
console.log('setting focus panel id', id);
this.meta.focusPanelId = id;
}

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

@@ -1,4 +1,4 @@
<div ng-if="ctrl.editMode">
<div ng-if="ctrl.dashboard.editMode">
<div class="dash-row-header">
<a class="dash-row-header-title" ng-click="ctrl.toggleCollapse()">
<span class="dash-row-collapse-toggle pointer">
@@ -40,27 +40,12 @@
</div>
</div>
<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">
<i class="fa fa-bars"></i>
</span>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="drop1">
<li>
<a ng-click="ctrl.onMenuAddPanel()">Add Panel</a>
</li>
<li>
<a ng-click="ctrl.onMenuRowOptions()">Row Options</a>
</li>
<li>
<a ng-click="ctrl.onMenuDeleteRow()">Delete row</a>
</li>
</ul>
</div>
<div ng-if="!ctrl.dashboard.editMode">
<div class="dash-row-expand-toggle" ng-if="!ctrl.row.collapse && !ctrl.row.showTitle" ng-click="ctrl.toggleCollapse()">
<i class="fa fa-chevron-down"></i>
</div>
<div class="dash-row-header" ng-if="ctrl.showtitle">
<div class="dash-row-header" ng-if="ctrl.row.showTitle || ctrl.row.collapse">
<a class="dash-row-header-title" ng-click="ctrl.toggleCollapse()">
<span class="dash-row-collapse-toggle pointer">
<i class="fa fa-chevron-down" ng-show="!ctrl.row.collapse"></i>

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

@@ -12,7 +12,6 @@ export class DashRowCtrl {
dashboard: any;
row: any;
dropView: number;
editMode: boolean;
/** @ngInject */
constructor(private $scope, private $rootScope, private $timeout, private uiSegmentSrv, private $q) {
@@ -22,12 +21,6 @@ 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) {
@@ -58,7 +51,7 @@ export class DashRowCtrl {
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);
this.row.movePanel(dragObject.index, dropTarget.index);
} else {
// split drop target space
dragObject.panel.span = dropTarget.panel.span = dropTarget.panel.span/2;
@@ -100,32 +93,29 @@ export class DashRowCtrl {
}
toggleCollapse() {
this.dropView = 0;
this.closeDropView();
this.row.collapse = !this.row.collapse;
}
showAddPanel() {
this.row.collapse = false;
this.dropView = this.dropView === 1 ? 0 : 1;
if (this.dropView === 1) {
this.closeDropView();
} else {
this.dropView = 1;
}
}
showRowOptions() {
this.dropView = this.dropView === 2 ? 0 : 2;
}
onMenuAddPanel() {
this.editMode = true;
this.dropView = 1;
}
onMenuRowOptions() {
this.editMode = true;
this.dropView = 2;
if (this.dropView === 2) {
this.closeDropView();
} else {
this.dropView = 2;
}
}
closeDropView() {
this.dropView = 0;
this.editMode = this.dashboard.editMode;
}
onMenuDeleteRow() {
@@ -205,6 +195,7 @@ coreModule.directive('panelWidth', function($rootScope) {
coreModule.directive('panelDropZone', function($timeout) {
return function(scope, element) {
var row = scope.ctrl.row;
var dashboard = scope.ctrl.dashboard;
var indrag = false;
var textEl = element.find('.panel-drop-zone-text');
@@ -220,7 +211,7 @@ coreModule.directive('panelDropZone', function($timeout) {
}
function updateState() {
if (scope.ctrl.editMode) {
if (scope.ctrl.dashboard.editMode) {
if (row.panels.length === 0 && indrag === false) {
return showPanel(12, 'Empty Space');
}
@@ -246,7 +237,7 @@ coreModule.directive('panelDropZone', function($timeout) {
}
row.events.on('span-changed', updateState, scope);
scope.$watchGroup(['ctrl.editMode'], updateState);
dashboard.events.emit('edit-mode-changed', updateState, scope);
scope.$on("ANGULAR_DRAG_START", function() {
indrag = true;