angular-ui · mportuga · Jan 20, 2018 · Jan 20, 2018
diff --git a/src/js/core/directives/ui-grid-header-cell.js b/src/js/core/directives/ui-grid-header-cell.js
@@ -246,8 +246,10 @@
               contents.addClass(classAdded);
 
               $scope.$applyAsync(function() {
-                var rightMostContainer = $scope.grid.renderContainers['right'] ? $scope.grid.renderContainers['right'] : $scope.grid.renderContainers['body'];
-                $scope.isLastCol = ( $scope.col === rightMostContainer.visibleColumnCache[ rightMostContainer.visibleColumnCache.length - 1 ] );
+                var rightMostContainer = $scope.grid.renderContainers['right'] && $scope.grid.renderContainers['right'].visibleColumnCache.length ?
+                $scope.grid.renderContainers['right'] : $scope.grid.renderContainers['body'];
+                $scope.isLastCol = uiGridCtrl.grid.options && uiGridCtrl.grid.options.enableGridMenu &&
+                  $scope.col === rightMostContainer.visibleColumnCache[ rightMostContainer.visibleColumnCache.length - 1 ];
               });
 
               // Figure out whether this column is sortable or not
@@ -371,7 +373,7 @@
                 event.preventDefault();
                 $scope.toggleMenu(event);
               }
-            }; 
+            };
 
             $scope.toggleMenu = function(event) {
 

diff --git a/src/less/footer.less b/src/less/footer.less
@@ -71,7 +71,7 @@
 }
 
 input[type="text"].ui-grid-filter-input {
-  padding: 0;
+  padding: 0 18px 0 0;
   margin: 0;
   border: 0;
   width: 100%;
@@ -82,4 +82,4 @@ input[type="text"].ui-grid-filter-input {
   &:hover {
     border: @gridBorderWidth solid  @borderColor;
   }
-}
+}
diff --git a/src/less/header.less b/src/less/header.less
@@ -104,8 +104,24 @@
   }
 }
 
-.ui-grid-column-menu-button-last-col {
-  margin-right: 25px;
+.ui-grid-header-cell-last-col {
+  .ui-grid-cell-contents,
+  .ui-grid-filter-container,
+  .ui-grid-column-menu-button,
+  & + .ui-grid-column-resizer.right {
+    margin-right: 13px;
+  }
+}
+
+.ui-grid-render-container-right {
+  .ui-grid-header-cell-last-col {
+    .ui-grid-cell-contents,
+    .ui-grid-filter-container,
+    .ui-grid-column-menu-button,
+    & + .ui-grid-column-resizer.right {
+      margin-right: 28px;
+    }
+  }
 }
 
 .ui-grid-column-menu {
@@ -195,7 +211,7 @@
 }
 
 input[type="text"].ui-grid-filter-input {
-  padding: 0;
+  padding: 0 18px 0 0;
   margin: 0;
   border: 0;
   width: 100%;

diff --git a/src/less/menu.less b/src/less/menu.less
@@ -4,40 +4,49 @@
   right: 0;
   top: 0;
   background: @headerBackgroundColor;
-  border: @gridBorderWidth solid @borderColor;
+  border: 0;
+  border-left: @gridBorderWidth solid @borderColor;
+  border-bottom: @gridBorderWidth solid @borderColor;
   cursor: pointer;
-  height: 31px;
+  height: 32px;
   font-weight: normal;
 }
 
 .ui-grid-menu-button .ui-grid-icon-container {
-  margin-top: 3px;
+  margin-top: 5px;
+  margin-left: 2px;
 }
 
 .ui-grid-menu-button .ui-grid-menu {
   right: 0;
   .ui-grid-menu-mid {
     overflow: scroll;
-    border: @gridBorderWidth solid @borderColor;
   }
 }
 
 .ui-grid-menu {
+  max-width: 320px;
   z-index: 2; // So it shows up over grid canvas
   position: absolute;
   padding: 0 10px 20px 10px;
   cursor: pointer;
   box-sizing: border-box;
 }
 
+.ui-grid-menu-item {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .ui-grid-menu .ui-grid-menu-inner {
-  background: @headerBackgroundColor;
+  background: @menuBackgroundColor;
   border: @gridBorderWidth solid @borderColor;
   position: relative;
   white-space: nowrap;
 
   .rounded(@gridBorderRadius);
-  .box-shadow(e("0 10px 20px rgba(0, 0, 0, 0.2), inset 0 12px 12px -14px rgba(0, 0, 0, 0.2)"));
 }
 
 .ui-grid-menu .ui-grid-menu-inner ul {
@@ -48,6 +57,7 @@
   li {
     padding: 0px;
     button {
+      color: @menuTextColor;
       min-width: 100%;
       padding: 8px;
       text-align: left;
@@ -57,12 +67,10 @@
       // Show a shadow when hovering over a menu item
       &:hover,
       &:focus {
-        // background-color: negation(@headerBackgroundColor, #fff);
-        .inner-shadow(@vertical: 0, @blur: 14px, @alpha: 0.2);
+        background-color: @menuHoverColor;
       }
       &.ui-grid-menu-item-active {
-        .inner-shadow(@vertical: 0, @blur: 14px, @alpha: 0.2);
-        background-color: @selectedColor;
+        background-color: @menuSelectedColor;
       }
     }
   }

diff --git a/src/less/variables.less b/src/less/variables.less
@@ -11,7 +11,8 @@
 @gridBorderWidth: 1px;
 @gridBorderRadius: 0px;
 @borderColor: #d4d4d4;
-
+@focusColor: #b3c4c7;
+@activeColor: darken(@focusColor, 8%);
 
 /**
 * @section Header styles
@@ -32,7 +33,13 @@
 @rowColorEven: #f3f3f3;
 @rowColorOdd: #fdfdfd;
 
-// TODO: colors for buttons
+/**
+* @section Grid Menu colors
+*/
+@menuBackgroundColor: #fff;
+@menuHoverColor: @focusColor;
+@menuSelectedColor: @activeColor;
+@menuTextColor: #000;
 
 /**
 * @section Sort arrow colors
@@ -42,18 +49,17 @@
 @sortArrowBorderColor: #777777;
 
 
-// TODO: color for menu background
 @rowHeaderCell: #F0F0EE;
 @rowSelected: #C9DDE1;
 @rowSavingForeground: #848484;
 @rowErrorForeground: #FF0000;
 @rowDirtyForeground: #610B38;
 
 // TODO: color for cell selections
-@focusedCell: #b3c4c7;
+@focusedCell: @focusColor;
 
 // Color to use for enabled or selected settings/items/cells, etc. Should probably override the one above
-@selectedColor: #cecece;
+@selectedColor: @activeColor;
 
 /**
 * @section Scrollbar styles

diff --git a/src/templates/ui-grid/uiGridHeaderCell.html b/src/templates/ui-grid/uiGridHeaderCell.html
@@ -1,6 +1,6 @@
 <div
   role="columnheader"
-  ng-class="{ 'sortable': sortable }"
+  ng-class="{ 'sortable': sortable, 'ui-grid-header-cell-last-col': isLastCol }"
   ui-grid-one-bind-aria-labelledby-grid="col.uid + '-header-text ' + col.uid + '-sortdir-text'"
   aria-sort="{{col.sort.direction == asc ? 'ascending' : ( col.sort.direction == desc ? 'descending' : (!col.sort.direction ? 'none' : 'other'))}}">
   <div
@@ -41,7 +41,6 @@
     ng-if="grid.options.enableColumnMenus && !col.isRowHeader  && col.colDef.enableColumnMenu !== false"
     ng-click="toggleMenu($event)"
     ng-keydown="headerCellArrowKeyDown($event)"
-    ng-class="{'ui-grid-column-menu-button-last-col': isLastCol}"
     ui-grid-one-bind-aria-label="i18n.headerCell.aria.columnMenuButtonLabel"
     aria-haspopup="true">
     <i

diff --git a/test/unit/core/directives/ui-grid-header-cell.spec.js b/test/unit/core/directives/ui-grid-header-cell.spec.js
@@ -68,7 +68,7 @@ describe('uiGridHeaderCell', function() {
 			$compile(grid)($scope);
 			$document[0].body.appendChild(grid[0]);
 
-			$scope.$digest();
+			$scope.$apply();
 		};
 
 		recompile();
@@ -193,6 +193,15 @@ describe('uiGridHeaderCell', function() {
 		}));
 	});
 
+	describe('isLastCol', function() {
+		it('should not add a last col class to the last column when the grid menu is disabled', function() {
+			expect($(grid).find('.ui-grid-header-cell:nth(2) .sortable').hasClass('ui-grid-header-cell-last-col')).toBe(false);
+		});
+		it('should not add a last col class to a column that is not the last column', function() {
+			expect($(grid).find('.ui-grid-header-cell:nth(1) .sortable').hasClass('ui-grid-header-cell-last-col')).toBe(false);
+		});
+	});
+
 	describe('externalScope', function() {
 		it('should be present', function() {
 			var header = $(grid).find('.ui-grid-header-cell:nth(0)');