diff --git a/src/features/pagination/js/pagination.js b/src/features/pagination/js/pagination.js index f15d0b65e5..21ab523299 100644 --- a/src/features/pagination/js/pagination.js +++ b/src/features/pagination/js/pagination.js @@ -343,10 +343,14 @@ scope: true, require: '^uiGrid', link: function ($scope, $elm, $attr, uiGridCtrl) { + var defaultFocusElementSelector = '.ui-grid-pager-control-input'; + $scope.aria = i18nService.getSafeText('pagination.aria'); //Returns an object with all of the aria labels + $scope.paginationApi = uiGridCtrl.grid.api.pagination; $scope.sizesLabel = i18nService.getSafeText('pagination.sizes'); $scope.totalItemsLabel = i18nService.getSafeText('pagination.totalItems'); $scope.paginationOf = i18nService.getSafeText('pagination.of'); + $scope.paginationThrough = i18nService.getSafeText('pagination.through'); var options = uiGridCtrl.grid.options; @@ -414,6 +418,34 @@ $scope.cantPageBackward = function () { return options.paginationCurrentPage <= 1; }; + + var focusToInputIf = function(condition){ + if (condition){ + gridUtil.focus.bySelector($elm, defaultFocusElementSelector); + } + }; + + //Takes care of setting focus to the middle element when focus is lost + $scope.pageFirstPageClick = function () { + $scope.paginationApi.seek(1); + focusToInputIf($scope.cantPageBackward()); + }; + + $scope.pagePreviousPageClick = function () { + $scope.paginationApi.previousPage(); + focusToInputIf($scope.cantPageBackward()); + }; + + $scope.pageNextPageClick = function () { + $scope.paginationApi.nextPage(); + focusToInputIf($scope.cantPageForward()); + }; + + $scope.pageLastPageClick = function () { + $scope.paginationApi.seek($scope.paginationApi.getTotalPages()); + focusToInputIf($scope.cantPageToLast()); + }; + } }; } diff --git a/src/features/pagination/less/pagination.less b/src/features/pagination/less/pagination.less index d17fd630f5..7ed54c9954 100644 --- a/src/features/pagination/less/pagination.less +++ b/src/features/pagination/less/pagination.less @@ -1,3 +1,7 @@ +@import "../../../less/variables"; +@import "../../../less/elements"; +@import (reference) "../../../less/bootstrap/bootstrap"; + .ui-grid-pager-panel { position: absolute; left: 0; @@ -20,14 +24,26 @@ button { height: 25px; min-width: 26px; + #ui-grid-twbs > .btn; + #ui-grid-twbs > .button-variant(@paginationButtonColor, @paginationButtonBackgroundColor, @paginationButtonBorderColor); } input { + #ui-grid-twbs > .form-control(); + #ui-grid-twbs > .input-sm (); + display: inline; height: 26px; width: 50px; vertical-align: top; } + .ui-grid-pager-max-pages-number{ + vertical-align: bottom; + > * { + vertical-align: middle; + } + } + .first-bar { width: 10px; border-left: 2px solid #4d4d4d; @@ -75,8 +91,11 @@ float: left; select { + #ui-grid-twbs > .form-control; + #ui-grid-twbs > .input-sm (); height: 26px; width: 60px; + display: inline; } .ui-grid-pager-row-count-label { diff --git a/src/features/pagination/templates/pagination.html b/src/features/pagination/templates/pagination.html index 741a8f6316..675f6ac030 100644 --- a/src/features/pagination/templates/pagination.html +++ b/src/features/pagination/templates/pagination.html @@ -1,23 +1,97 @@ -
-
-
- - - - / {{ paginationApi.getTotalPages() }} - - +