Skip to content

Commit f1137e4

Browse files
torkelotorkelo
committed
ux(dashboard): removed green row icon gain, replaced with collapse icon, grafana#6442 
1 parent 075c722 commit f1137e4

File tree

6 files changed

+51
-63
lines changed

6 files changed

+51
-63
lines changed

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,6 @@ export class DashboardModel {
196196
}
197197

198198
setPanelFocus(id) {
199-
console.log('setting focus panel id', id);
200199
this.meta.focusPanelId = id;
201200
}
202201

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

Lines changed: 5 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div ng-if="ctrl.editMode">
1+
<div ng-if="ctrl.dashboard.editMode">
22
<div class="dash-row-header">
33
<a class="dash-row-header-title" ng-click="ctrl.toggleCollapse()">
44
<span class="dash-row-collapse-toggle pointer">
@@ -40,27 +40,12 @@
4040
</div>
4141
</div>
4242

43-
<div ng-if="!ctrl.editMode">
44-
<div class="row-open">
45-
<div class='row-tab dropdown' ng-show="dashboardMeta.canEdit" ng-hide="dashboard.meta.fullscreen">
46-
<span class="row-tab-button dropdown-toggle" data-toggle="dropdown">
47-
<i class="fa fa-bars"></i>
48-
</span>
49-
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="drop1">
50-
<li>
51-
<a ng-click="ctrl.onMenuAddPanel()">Add Panel</a>
52-
</li>
53-
<li>
54-
<a ng-click="ctrl.onMenuRowOptions()">Row Options</a>
55-
</li>
56-
<li>
57-
<a ng-click="ctrl.onMenuDeleteRow()">Delete row</a>
58-
</li>
59-
</ul>
60-
</div>
43+
<div ng-if="!ctrl.dashboard.editMode">
44+
<div class="dash-row-expand-toggle" ng-if="!ctrl.row.collapse && !ctrl.row.showTitle" ng-click="ctrl.toggleCollapse()">
45+
<i class="fa fa-chevron-down"></i>
6146
</div>
6247

63-
<div class="dash-row-header" ng-if="ctrl.showtitle">
48+
<div class="dash-row-header" ng-if="ctrl.row.showTitle || ctrl.row.collapse">
6449
<a class="dash-row-header-title" ng-click="ctrl.toggleCollapse()">
6550
<span class="dash-row-collapse-toggle pointer">
6651
<i class="fa fa-chevron-down" ng-show="!ctrl.row.collapse"></i>

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

Lines changed: 15 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ export class DashRowCtrl {
1212
dashboard: any;
1313
row: any;
1414
dropView: number;
15-
editMode: boolean;
1615

1716
/** @ngInject */
1817
constructor(private $scope, private $rootScope, private $timeout, private uiSegmentSrv, private $q) {
@@ -22,12 +21,6 @@ export class DashRowCtrl {
2221
this.dropView = 1;
2322
delete this.row.isNew;
2423
}
25-
26-
this.dashboard.events.on('edit-mode-changed', this.editModeChanged.bind(this), $scope);
27-
}
28-
29-
editModeChanged() {
30-
this.editMode = this.dashboard.editMode;
3124
}
3225

3326
onDrop(panelId, dropTarget) {
@@ -58,7 +51,7 @@ export class DashRowCtrl {
5851
dropTarget.row.panels.splice(dropTarget.index+1, 0, dragObject.panel);
5952
} else if (this.row === dragObject.row) {
6053
// just move element
61-
this.row.movePanel(dropTarget.index, dragObject.index);
54+
this.row.movePanel(dragObject.index, dropTarget.index);
6255
} else {
6356
// split drop target space
6457
dragObject.panel.span = dropTarget.panel.span = dropTarget.panel.span/2;
@@ -100,32 +93,29 @@ export class DashRowCtrl {
10093
}
10194

10295
toggleCollapse() {
103-
this.dropView = 0;
96+
this.closeDropView();
10497
this.row.collapse = !this.row.collapse;
10598
}
10699

107100
showAddPanel() {
108101
this.row.collapse = false;
109-
this.dropView = this.dropView === 1 ? 0 : 1;
102+
if (this.dropView === 1) {
103+
this.closeDropView();
104+
} else {
105+
this.dropView = 1;
106+
}
110107
}
111108

112109
showRowOptions() {
113-
this.dropView = this.dropView === 2 ? 0 : 2;
114-
}
115-
116-
onMenuAddPanel() {
117-
this.editMode = true;
118-
this.dropView = 1;
119-
}
120-
121-
onMenuRowOptions() {
122-
this.editMode = true;
123-
this.dropView = 2;
110+
if (this.dropView === 2) {
111+
this.closeDropView();
112+
} else {
113+
this.dropView = 2;
114+
}
124115
}
125116

126117
closeDropView() {
127118
this.dropView = 0;
128-
this.editMode = this.dashboard.editMode;
129119
}
130120

131121
onMenuDeleteRow() {
@@ -205,6 +195,7 @@ coreModule.directive('panelWidth', function($rootScope) {
205195
coreModule.directive('panelDropZone', function($timeout) {
206196
return function(scope, element) {
207197
var row = scope.ctrl.row;
198+
var dashboard = scope.ctrl.dashboard;
208199
var indrag = false;
209200
var textEl = element.find('.panel-drop-zone-text');
210201

@@ -220,7 +211,7 @@ coreModule.directive('panelDropZone', function($timeout) {
220211
}
221212

222213
function updateState() {
223-
if (scope.ctrl.editMode) {
214+
if (scope.ctrl.dashboard.editMode) {
224215
if (row.panels.length === 0 && indrag === false) {
225216
return showPanel(12, 'Empty Space');
226217
}
@@ -246,7 +237,7 @@ coreModule.directive('panelDropZone', function($timeout) {
246237
}
247238

248239
row.events.on('span-changed', updateState, scope);
249-
scope.$watchGroup(['ctrl.editMode'], updateState);
240+
dashboard.events.emit('edit-mode-changed', updateState, scope);
250241

251242
scope.$on("ANGULAR_DRAG_START", function() {
252243
indrag = true;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ module.directive('grafanaPanel', function($rootScope) {
146146
module.directive('panelResizer', function($rootScope) {
147147
return {
148148
restrict: 'E',
149-
template: '<span class="resize-panel-handle"></span>',
149+
template: '<span class="resize-panel-handle fa fa-signal"></span>',
150150
link: function(scope, elem) {
151151
var resizing = false;
152152
var lastPanel;

‎public/sass/components/_row.scss

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -169,15 +169,6 @@ a.dash-row-header-actions--tight {
169169
display: flex;
170170
}
171171

172-
.dash-edit-mode {
173-
.dash-row-options {
174-
margin-bottom: 0;
175-
}
176-
.dash-row-add-panel {
177-
margin-bottom: 0;
178-
}
179-
}
180-
181172
.add-panel-panels-scroll {
182173
width: 100%;
183174
overflow: hidden;
@@ -215,6 +206,23 @@ a.dash-row-header-actions--tight {
215206
width: 2rem;
216207
}
217208

209+
.dash-row-expand-toggle {
210+
margin-top: -3px;
211+
left: 1px;
212+
position: absolute;
213+
z-index: 100;
214+
transition: .10s left;
215+
transition-delay: .05s;
216+
width: 15px;
217+
font-size: 60%;
218+
color: $text-muted;
219+
cursor: pointer;
220+
height: 100%;
221+
222+
&:hover {
223+
color: $link-color;
224+
}
225+
}
218226

219227
// Legacy mode
220228
.row-tab {
@@ -237,14 +245,6 @@ a.dash-row-header-actions--tight {
237245
color: rgba(255,255,255,.90);
238246
}
239247

240-
.row-button {
241-
width: 24px;
242-
float: left;
243-
cursor: pointer;
244-
line-height: 31px;
245-
background-color: $blue-dark;
246-
}
247-
248248
.row-open {
249249
margin-top: 1px;
250250
left: -24px;

‎public/sass/pages/_dashboard.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -198,6 +198,7 @@ div.flot-text {
198198
width: 15px;
199199
height: 15px;
200200
display: block;
201+
color: $panel-bg;
201202
}
202203

203204
.dashboard-header {
@@ -211,3 +212,15 @@ div.flot-text {
211212
}
212213
}
213214

215+
.dash-edit-mode {
216+
.resize-panel-handle {
217+
color: $text-color-faint;
218+
overflow: hidden;
219+
&:before {
220+
left: initial;
221+
right: -5px;
222+
bottom: 0px;
223+
position: absolute;
224+
}
225+
}
226+
}

0 commit comments

Comments
 (0)