Skip to content

Commit 09a19d8

Browse files
torkelotorkelo
committed
ux(dashboard): progress on ghost empty space panel
1 parent ca1f06f commit 09a19d8

File tree

8 files changed

+65
-30
lines changed

8 files changed

+65
-30
lines changed

‎public/app/core/routes/dashboard_loaders.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,12 @@ function (coreModule) {
3131
meta: { canStar: false, canShare: false, isNew: true },
3232
dashboard: {
3333
title: "New dashboard",
34-
isNew: true,
3534
rows: [
3635
{
3736
title: 'Dashboard Row',
3837
height: '250px',
3938
panels:[],
39+
isNew: true,
4040
}
4141
]
4242
},

‎public/app/features/dashboard/model.ts

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -165,24 +165,8 @@ export class DashboardModel {
165165
};
166166

167167
addPanel(panel, row) {
168-
var rowSpan = this.rowSpan(row);
169-
var panelCount = row.panels.length;
170-
var space = (12 - rowSpan) - panel.span;
171168
panel.id = this.getNextPanelId();
172-
173-
// try to make room of there is no space left
174-
if (space <= 0) {
175-
if (panelCount === 1) {
176-
row.panels[0].span = 6;
177-
panel.span = 6;
178-
} else if (panelCount === 2) {
179-
row.panels[0].span = 4;
180-
row.panels[1].span = 4;
181-
panel.span = 4;
182-
}
183-
}
184-
185-
row.panels.push(panel);
169+
row.addPanel(panel);
186170
}
187171

188172
toggleEditMode() {

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

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,7 @@ coreModule.directive('panelDropZone', function($timeout) {
190190
}
191191

192192
var dropZoneSpan = 12 - scope.ctrl.dashboard.rowSpan(scope.ctrl.row);
193-
if (dropZoneSpan > 1) {
193+
if (dropZoneSpan > 0) {
194194
if (indrag) {
195195
return showPanel(dropZoneSpan, 'Drop Here');
196196
} else {
@@ -209,14 +209,9 @@ coreModule.directive('panelDropZone', function($timeout) {
209209
hidePanel();
210210
}
211211

212-
row.events.on('panel-added', updateState);
213-
row.events.on('span-changed', updateState);
212+
row.events.on('span-changed', updateState, scope);
214213

215-
scope.$on('$destroy', () => {
216-
row.events.off('panel-added', updateState);
217-
row.events.off('span-changed', updateState);
218-
});
219-
// scope.$watchGroup(['ctrl.row.panels.length', 'ctrl.dashboard.editMode', 'ctrl.row.span'], updateState);
214+
scope.$watchGroup(['ctrl.dashboard.editMode'], updateState);
220215

221216
scope.$on("ANGULAR_DRAG_START", function() {
222217
indrag = true;

‎public/app/features/dashboard/row/row_model.ts

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
///<reference path="../../../headers/common.d.ts" />
22

3+
import _ from 'lodash';
34
import {Emitter, contextSrv} from 'app/core/core';
45
import {assignModelProperties} from 'app/core/core';
56

@@ -9,6 +10,7 @@ export class DashboardRow {
910
showTitle: any;
1011
titleSize: any;
1112
events: Emitter;
13+
span: number;
1214

1315
defaults = {
1416
title: 'Dashboard Row',
@@ -20,13 +22,61 @@ export class DashboardRow {
2022
};
2123

2224
constructor(private model) {
25+
console.log(model.isNew);
2326
assignModelProperties(this, model, this.defaults);
2427
this.events = new Emitter();
28+
this.updateRowSpan();
2529
}
2630

2731
getSaveModel() {
2832
assignModelProperties(this.model, this, this.defaults);
2933
return this.model;
3034
}
35+
36+
updateRowSpan() {
37+
this.span = 0;
38+
for (let panel of this.panels) {
39+
this.span += panel.span;
40+
}
41+
}
42+
43+
panelSpanChanged() {
44+
var oldSpan = this.span;
45+
this.updateRowSpan();
46+
47+
if (oldSpan !== this.span) {
48+
this.events.emit('span-changed');
49+
}
50+
}
51+
52+
addPanel(panel) {
53+
var rowSpan = this.span;
54+
var panelCount = this.panels.length;
55+
var space = (12 - rowSpan) - panel.span;
56+
57+
// try to make room of there is no space left
58+
if (space <= 0) {
59+
if (panelCount === 1) {
60+
this.panels[0].span = 6;
61+
panel.span = 6;
62+
} else if (panelCount === 2) {
63+
this.panels[0].span = 4;
64+
this.panels[1].span = 4;
65+
panel.span = 4;
66+
}
67+
}
68+
69+
this.panels.push(panel);
70+
this.events.emit('panel-added', panel);
71+
this.panelSpanChanged();
72+
}
73+
74+
removePanel(panel) {
75+
var index = _.indexOf(this.panels, panel);
76+
this.panels.splice(index, 1);
77+
78+
this.events.emit('panel-removed', panel);
79+
this.panelSpanChanged();
80+
}
3181
}
3282

‎public/app/features/panel/panel_ctrl.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,8 @@ export class PanelCtrl {
193193

194194
updateColumnSpan(span) {
195195
this.panel.span = Math.min(Math.max(Math.floor(this.panel.span + span), 1), 12);
196+
this.row.panelSpanChanged();
197+
196198
this.$timeout(() => {
197199
this.render();
198200
});
@@ -205,7 +207,7 @@ export class PanelCtrl {
205207
icon: 'fa-trash',
206208
yesText: 'Remove',
207209
onConfirm: () => {
208-
this.row.panels = _.without(this.row.panels, this.panel);
210+
this.row.removePanel(this.panel);
209211
}
210212
});
211213
}

‎public/app/features/panel/panel_directive.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,8 @@ module.directive('panelResizer', function($rootScope) {
157157
}
158158
}
159159

160+
ctrl.row.panelSpanChanged();
161+
160162
scope.$apply(function() {
161163
ctrl.render();
162164
});
@@ -174,6 +176,8 @@ module.directive('panelResizer', function($rootScope) {
174176
lastPanel.span += 12 - rowSpan;
175177
}
176178

179+
ctrl.row.panelSpanChanged();
180+
177181
// first digest to propagate panel width change
178182
// then render
179183
$rootScope.$apply(function() {

‎public/sass/_variables.dark.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -88,8 +88,8 @@ $component-active-bg: $brand-primary !default;
8888

8989
// Panel
9090
// -------------------------
91-
$panel-bg: $dark-2;
92-
$panel-border: solid 1px $dark-3;
91+
$panel-bg: $dark-2;
92+
$panel-border: solid 1px $dark-3;
9393

9494
$divider-border-color: #555;
9595

‎public/sass/pages/_dashboard.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,7 @@ div.flot-text {
169169
justify-content: center;
170170
flex-direction: column;
171171
text-align: center;
172-
color: $text-muted;
172+
color: $text-color-faint;
173173
font-weight: bold;
174174
background: repeating-linear-gradient(-128deg, #111, #111 10px, #191919 10px, #222 20px);
175175
}

0 commit comments

Comments
 (0)