shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-11-01 08:21:15 +03:00
Code Releases Activity

Merge pull request #7151 from mabashian/6823-pagination-ux-fixes

Browse Source 
Pagination ux fixes
This commit is contained in:
Michael Abashian 2017-07-19 14:16:24 -04:00 committed by GitHub
commit 04014e4f53
7 changed files with 26 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
awx/ui/client/src/instance-groups/instance-groups.route.js
View File

@ -12,7 +12,7 @@ export default {
params: {
instance_group_search: {
value: {
page_size: '10',
page_size: '20',
order_by: 'name'
}
}

2
awx/ui/client/src/instance-groups/instances/instance-jobs/instance-jobs-list.route.js
View File

@ -11,7 +11,7 @@ export default {
params: {
instance_job_search: {
value: {
page_size: '10',
page_size: '20',
order_by: '-finished',
not__launch_type: 'sync'
}

2
awx/ui/client/src/instance-groups/instances/instances-list.route.js
View File

@ -12,7 +12,7 @@ export default {
params: {
instance_search: {
value: {
page_size: '10',
page_size: '20',
order_by: 'hostname'
}
}

2
awx/ui/client/src/instance-groups/jobs/jobs-list.route.js
View File

@ -11,7 +11,7 @@ export default {
params: {
job_search: {
value: {
page_size: '10',
page_size: '20',
order_by: '-finished',
not__launch_type: 'sync'
}

9
awx/ui/client/src/shared/paginate/paginate.block.less
View File

@ -20,7 +20,7 @@
.Paginate {
margin-top: 20px;
font-size: 12px !important;
font-size: 10px !important;
color: @list-pagin-text;
text-transform: uppercase;
display: flex;
@ -28,7 +28,7 @@
}
.Paginate-pager--pageof {
line-height: 22px;
line-height: 25px;
margin-left: 10px;
}
@ -64,6 +64,7 @@
.Paginate-filteringDropdowns{
display: flex;
align-items: center;
line-height: 25px;
}
.Paginate-dropdown{
@ -80,3 +81,7 @@
}
}
}
.Paginate-itemsOf {
line-height: 25px;
}

10
awx/ui/client/src/shared/paginate/paginate.controller.js
View File

@ -6,6 +6,8 @@ export default ['$scope', '$stateParams', '$state', '$filter', 'GetBasePath', 'Q
$scope.pageSize = pageSize;
$scope.basePageSize = parseInt(pageSize) === 5 ? 5 : 20;
function init() {
let updatePaginationVariables = function() {
@ -39,12 +41,8 @@ export default ['$scope', '$stateParams', '$state', '$filter', 'GetBasePath', 'Q
$scope.toPage();
};
$scope.dataCount = function() {
return $filter('number')($scope.dataset.count);
};
$scope.toPage = function(page) {
if(page === 0) {
if(page === 0 || page > $scope.last) {
return;
}
if (GetBasePath($scope.basePath) || $scope.basePath) {
@ -130,7 +128,7 @@ export default ['$scope', '$stateParams', '$state', '$filter', 'GetBasePath', 'Q
return `1 - ${$scope.pageSize}`;
} else {
let floor = (($scope.current - 1) * parseInt($scope.pageSize)) + 1;
let ceil = floor + parseInt($scope.pageSize) < $scope.dataset.count ? floor + parseInt($scope.pageSize) : $scope.dataset.count;
let ceil = floor + parseInt($scope.pageSize) - 1 < $scope.dataset.count ? floor + parseInt($scope.pageSize) - 1 : $scope.dataset.count;
return `${floor} - ${ceil}`;
}
}

12
awx/ui/client/src/shared/paginate/paginate.partial.html
View File

@ -1,4 +1,4 @@
<div class="Paginate page-row" ng-hide="dataset.count < 1">
<div class="Paginate page-row">
<div class="Paginate-wrapper" ng-hide="dataset.count <= pageSize">
<ul class="Paginate-controls pagination">
<!-- first -->
@ -18,7 +18,7 @@
<a href ng-class="{'Paginate-controls--active': page === current}" ng-click="toPage(page)">{{ page }}</a>
</li>
<!-- next -->
<li class="Paginate-controls--next Paginate-controls--item" ng-hide="current === last">
<li class="Paginate-controls--next Paginate-controls--item" ng-class="{disabled: current === last}">
<a href ng-click="toPage(current + 1)">
<i class="fa fa-angle-right"></i>
</a>
@ -35,16 +35,16 @@
<span id="total-pages">{{last}}</span>
</span>
</div>
<div class="Paginate-total page-label" ng-hide="dataCount === 0">
<div class="Paginate-total page-label" ng-hide="dataset.count === 0">
<!-- TODO: Move the ITEMS line into paginate.directive.js
so that i18n.sprintf("A of B") can be used but
it seems $sce.trustAsHtml() does not work with html tag.
-->
<span translate>ITEMS&nbsp;
<span class="Paginate-itemsOf" translate>ITEMS&nbsp;
<span>{{dataRange}}</span>
<span>of {{dataCount()}}</span>
<span ng-hide="dataset.count <= basePageSize">of {{dataset.count | number}}</span>
</span>
<div class="Paginate-filteringDropdowns" ng-hide="hideViewPerPage">
<div class="Paginate-filteringDropdowns" ng-hide="hideViewPerPage || dataset.count <= basePageSize">
<div class="Paginate-filterLabel" translate>VIEW PER PAGE</div>
<div class="DashboardGraphs-periodDropdown">
<a role="button"