Skip to content

Commit a6a26d9

Browse files
Portugal, Marcelomportuga
Portugal, Marcelo
authored and
mportuga
committed
fix(ui-grid-menu-button.js): Replace show/hide buttons with a single toggle button.
fix #5634
1 parent 7ed11ec commit a6a26d9

File tree

2 files changed

+43
-46
lines changed

2 files changed

+43
-46
lines changed

‎src/js/core/directives/ui-grid-menu-button.js

+12-19
Original file line numberDiff line numberDiff line change
@@ -250,6 +250,10 @@ angular.module('ui.grid')
250250
return showHideColumns;
251251
}
252252

253+
function isColumnVisible(colDef) {
254+
return colDef.visible === true || colDef.visible === undefined;
255+
}
256+
253257
// add header for columns
254258
showHideColumns.push({
255259
title: i18nService.getSafeText('gridMenu.columns'),
@@ -262,34 +266,23 @@ angular.module('ui.grid')
262266
if ( colDef.enableHiding !== false ){
263267
// add hide menu item - shows an OK icon as we only show when column is already visible
264268
var menuItem = {
265-
icon: 'ui-grid-icon-ok',
269+
icon: isColumnVisible(colDef) ? 'ui-grid-icon-ok' : 'ui-grid-icon-cancel',
266270
action: function($event) {
267271
$event.stopPropagation();
268-
service.toggleColumnVisibility( this.context.gridCol );
269-
},
270-
shown: function() {
271-
return this.context.gridCol.colDef.visible === true || this.context.gridCol.colDef.visible === undefined;
272-
},
273-
context: { gridCol: $scope.grid.getColumn(colDef.name || colDef.field) },
274-
leaveOpen: true,
275-
order: 301 + index * 2
276-
};
277-
service.setMenuItemTitle( menuItem, colDef, $scope.grid );
278-
showHideColumns.push( menuItem );
279272

280-
// add show menu item - shows no icon as we only show when column is invisible
281-
menuItem = {
282-
icon: 'ui-grid-icon-cancel',
283-
action: function($event) {
284-
$event.stopPropagation();
285273
service.toggleColumnVisibility( this.context.gridCol );
274+
275+
if ($event.target && $event.target.firstChild) {
276+
$event.target.firstChild.className = isColumnVisible(this.context.gridCol.colDef) ?
277+
'ui-grid-icon-ok' : 'ui-grid-icon-cancel';
278+
}
286279
},
287280
shown: function() {
288-
return !(this.context.gridCol.colDef.visible === true || this.context.gridCol.colDef.visible === undefined);
281+
return this.context.gridCol.colDef.enableHiding !== false;
289282
},
290283
context: { gridCol: $scope.grid.getColumn(colDef.name || colDef.field) },
291284
leaveOpen: true,
292-
order: 301 + index * 2 + 1
285+
order: 301 + index
293286
};
294287
service.setMenuItemTitle( menuItem, colDef, $scope.grid );
295288
showHideColumns.push( menuItem );

‎test/unit/core/directives/ui-grid-menu-button.spec.js

+31-27
Original file line numberDiff line numberDiff line change
@@ -210,29 +210,22 @@ describe('ui-grid-menu-button uiGridGridMenuService', function() {
210210

211211
menuItems = uiGridGridMenuService.getMenuItems($scope);
212212

213-
expect(menuItems.length).toEqual(12,
214-
'Should be 12 items, 2 from customItems, 2 from registered, 1 columns header, and 2x3 columns that allow hiding');
213+
expect(menuItems.length).toEqual(9,
214+
'Should be 9 items, 2 from customItems, 2 from registered, 1 columns header, and 3 columns that allow hiding');
215215
expect(menuItems[0].title).toEqual('x', 'Menu item 0 should be from register');
216216
expect(menuItems[1].title).toEqual('y', 'Menu item 1 should be from register');
217217
expect(menuItems[2].title).toEqual('z', 'Menu item 2 should be from customItem');
218218
expect(menuItems[3].title).toEqual('a', 'Menu item 3 should be from customItem');
219219

220-
//expect( menuItems[4].title ).toEqual('Columns:', 'Menu item 4 should be header');
221220
expect(menuItems[4].title).toEqual('Clear all filters', 'Menu item 4 Clear all filters');
222221
expect(menuItems[5].title).toEqual('Columns:', 'Menu item 5 should be header');
223222
expect(menuItems[6].title.toLowerCase()).toEqual('fn_col1', 'Menu item 5 should be col1');
224-
expect(menuItems[7].title.toLowerCase()).toEqual('fn_col1', 'Menu item 6 should be col1');
225-
expect(menuItems[8].title.toLowerCase()).toEqual('fn_col3', 'Menu item 7 should be col3');
226-
expect(menuItems[9].title.toLowerCase()).toEqual('fn_col3', 'Menu item 8 should be col3');
227-
expect(menuItems[10].title.toLowerCase()).toEqual('fn_col4', 'Menu item 9 should be col4');
228-
expect(menuItems[11].title.toLowerCase()).toEqual('fn_col4', 'Menu item 10 should be col4');
223+
expect(menuItems[7].title.toLowerCase()).toEqual('fn_col3', 'Menu item 6 should be col3');
224+
expect(menuItems[8].title.toLowerCase()).toEqual('fn_col4', 'Menu item 7 should be col4');
229225

230226
expect(menuItems[6].context.gridCol).toEqual(grid.columns[0], 'column hide/show menus should have gridCol');
231-
expect(menuItems[7].context.gridCol).toEqual(grid.columns[0], 'column hide/show menus should have gridCol');
232-
expect(menuItems[8].context.gridCol).toEqual(grid.columns[2], 'column hide/show menus should have gridCol');
233-
expect(menuItems[9].context.gridCol).toEqual(grid.columns[2], 'column hide/show menus should have gridCol');
234-
expect(menuItems[10].context.gridCol).toEqual(grid.columns[3], 'column hide/show menus should have gridCol');
235-
expect(menuItems[11].context.gridCol).toEqual(grid.columns[3], 'column hide/show menus should have gridCol');
227+
expect(menuItems[7].context.gridCol).toEqual(grid.columns[2], 'column hide/show menus should have gridCol');
228+
expect(menuItems[8].context.gridCol).toEqual(grid.columns[3], 'column hide/show menus should have gridCol');
236229
});
237230

238231
it('gridMenuTitleFilter returns a promise', function() {
@@ -247,34 +240,26 @@ describe('ui-grid-menu-button uiGridGridMenuService', function() {
247240

248241
menuItems = uiGridGridMenuService.getMenuItems($scope);
249242

250-
expect(menuItems.length).toEqual(10, 'Should be 10 items, 1 columns header, 2x4 columns that allow hiding and clear all filters');
243+
expect(menuItems.length).toEqual(6, 'Should be 6 items, 1 columns header, 4 columns that allow hiding and clear all filters');
251244
expect(menuItems[0].title).toEqual('Clear all filters', 'Menu item 0 should be Clear all filters');
252245
expect(menuItems[1].title).toEqual('Columns:', 'Menu item 1 should be header');
253246
expect(menuItems[2].title).toEqual('', 'Promise not resolved');
254247
expect(menuItems[3].title).toEqual('', 'Promise not resolved');
255248
expect(menuItems[4].title).toEqual('', 'Promise not resolved');
256249
expect(menuItems[5].title).toEqual('', 'Promise not resolved');
257-
expect(menuItems[6].title).toEqual('', 'Promise not resolved');
258-
expect(menuItems[7].title).toEqual('', 'Promise not resolved');
259-
expect(menuItems[8].title).toEqual('', 'Promise not resolved');
260-
expect(menuItems[9].title).toEqual('', 'Promise not resolved');
261250

262251
promises.forEach(function(promise, index) {
263252
promise.resolve('resolve_' + index);
264253
});
265254
$scope.$digest();
266255

267-
expect(menuItems.length).toEqual(10, 'Should be 10 items, 1 columns header, 2x4 columns that allow hiding and Clean all filters');
256+
expect(menuItems.length).toEqual(6, 'Should be 10 items, 1 columns header, 4 columns that allow hiding and Clean all filters');
268257
expect(menuItems[0].title).toEqual('Clear all filters', 'Menu item 0 should be Clear all filters');
269258
expect(menuItems[1].title).toEqual('Columns:', 'Menu item 0 should be header');
270259
expect(menuItems[2].title).toEqual('resolve_0', 'Promise now resolved');
271260
expect(menuItems[3].title).toEqual('resolve_1', 'Promise now resolved');
272261
expect(menuItems[4].title).toEqual('resolve_2', 'Promise now resolved');
273262
expect(menuItems[5].title).toEqual('resolve_3', 'Promise now resolved');
274-
expect(menuItems[6].title).toEqual('resolve_4', 'Promise now resolved');
275-
expect(menuItems[7].title).toEqual('resolve_5', 'Promise now resolved');
276-
expect(menuItems[8].title).toEqual('resolve_6', 'Promise now resolved');
277-
expect(menuItems[9].title).toEqual('resolve_7', 'Promise now resolved');
278263
});
279264
});
280265

@@ -284,13 +269,15 @@ describe('ui-grid-menu-button uiGridGridMenuService', function() {
284269
beforeEach(function() {
285270
event = jasmine.createSpyObj('event', ['stopPropagation']);
286271
grid.options.columnDefs = [
287-
{name: 'col1'},
288-
{field: 'col2'},
272+
{name: 'col1', visible: true},
273+
{field: 'col2', visible: false},
289274
{name: 'col3'},
290275
{field: 'col4'}
291276
];
292277
uiGridGridMenuService.initialize($scope, grid);
293-
spyOn(uiGridGridMenuService, 'toggleColumnVisibility').and.callThrough();
278+
spyOn(uiGridGridMenuService, 'toggleColumnVisibility').and.callFake(function(gridCol) {
279+
gridCol.colDef.visible = !gridCol.colDef.visible;
280+
});
294281
});
295282
afterEach(function() {
296283
event.stopPropagation.calls.reset();
@@ -303,18 +290,35 @@ describe('ui-grid-menu-button uiGridGridMenuService', function() {
303290
});
304291
it('calls toggleColumnVisibility and stopPropagation when hide menu item is clicked', function() {
305292
showHideColumns = uiGridGridMenuService.showHideColumns($scope);
293+
showHideColumns[1].context.gridCol.colDef.visible = false;
306294
showHideColumns[1].action(event);
307295

308296
expect(event.stopPropagation).toHaveBeenCalled();
309297
expect(uiGridGridMenuService.toggleColumnVisibility).toHaveBeenCalled();
310298
});
299+
it('toggles the icon to ok when hide menu item is clicked', function() {
300+
showHideColumns = uiGridGridMenuService.showHideColumns($scope);
301+
event.target = {firstChild: {}};
302+
showHideColumns[1].context.gridCol.colDef.visible = false;
303+
showHideColumns[1].action(event);
304+
305+
expect(event.target.firstChild.className).toEqual('ui-grid-icon-ok');
306+
});
311307
it('calls toggleColumnVisibility and stopPropagation when show menu item is clicked', function() {
312308
showHideColumns = uiGridGridMenuService.showHideColumns($scope);
313-
showHideColumns[2].action(event);
309+
showHideColumns[1].action(event);
314310

315311
expect(event.stopPropagation).toHaveBeenCalled();
316312
expect(uiGridGridMenuService.toggleColumnVisibility).toHaveBeenCalled();
317313
});
314+
it('toggles the icon to cancel when show menu item is clicked', function() {
315+
showHideColumns = uiGridGridMenuService.showHideColumns($scope);
316+
event.target = {firstChild: {}};
317+
showHideColumns[1].context.gridCol.colDef.visible = true;
318+
showHideColumns[1].action(event);
319+
320+
expect(event.target.firstChild.className).toEqual('ui-grid-icon-cancel');
321+
});
318322
});
319323

320324
describe('setMenuItemTitle: ', function() {

0 commit comments

Comments
 (0)