fix(ui-grid-header-cell): Improved styles with grid menu.

Fixed some of the more blatant issues of overlap between the grid menu and the last visible column, although some issues remain with the timing of the digest cycle. Also, updated the grid menu styles a bit based on some CSS suggestions. fix #4337, fix #5051, fix #5557
angular-ui · Jan 20, 2018 · c6b8d3b · c6b8d3b
1 parent 5157ce6
commit c6b8d3b
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 26 deletions.
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)');