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 @@