From c6b8d3bcf5095e7543603e1622499aefa2d5c0a4 Mon Sep 17 00:00:00 2001 From: "Portugal, Marcelo" Date: Sat, 20 Jan 2018 17:28:43 -0500 Subject: [PATCH] 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 --- src/js/core/directives/ui-grid-header-cell.js | 8 ++++-- src/less/footer.less | 4 +-- src/less/header.less | 22 +++++++++++++-- src/less/menu.less | 28 ++++++++++++------- src/less/variables.less | 16 +++++++---- src/templates/ui-grid/uiGridHeaderCell.html | 3 +- .../directives/ui-grid-header-cell.spec.js | 11 +++++++- 7 files changed, 66 insertions(+), 26 deletions(-) diff --git a/src/js/core/directives/ui-grid-header-cell.js b/src/js/core/directives/ui-grid-header-cell.js index b02101c2fe..5efbf64962 100644 --- 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 index 55a1897287..17b4308db7 100644 --- 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; } -} \ No newline at end of file +} diff --git a/src/less/header.less b/src/less/header.less index 07b80c936b..7e88f24732 100644 --- 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 index da50cfdf02..dda0e5cbc7 100644 --- a/src/less/menu.less +++ b/src/less/menu.less @@ -4,25 +4,28 @@ 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; @@ -30,14 +33,20 @@ 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 index d521979a4b..95d9ae1f3c 100644 --- 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,7 +49,6 @@ @sortArrowBorderColor: #777777; -// TODO: color for menu background @rowHeaderCell: #F0F0EE; @rowSelected: #C9DDE1; @rowSavingForeground: #848484; @@ -50,10 +56,10 @@ @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 index 317a9b79bb..1cacad9290 100644 --- a/src/templates/ui-grid/uiGridHeaderCell.html +++ b/src/templates/ui-grid/uiGridHeaderCell.html @@ -1,6 +1,6 @@