Pagination ux fixes

This commit is contained in:
Michael Abashian 2017-07-18 17:25:09 -04:00
parent e1e1f5d15f
commit 5dc354ee4b
7 changed files with 24 additions and 17 deletions

View File

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

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'
}
@ -37,4 +37,4 @@ export default {
}
],
}
};
};

View File

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

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'
}
@ -37,4 +37,4 @@ export default {
}
]
}
};
};

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;
}

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() {
@ -28,7 +30,7 @@ export default ['$scope', '$stateParams', '$state', '$filter', 'GetBasePath', 'Q
$('#period-dropdown')
.replaceWith("<a id=\"period-dropdown\" class=\"DashboardGraphs-filterDropdownText DashboardGraphs-filterDropdownItems--period\" role=\"button\" data-toggle=\"dropdown\" data-target=\"#\" href=\"/page.html\">"+id+
"<i class=\"fa fa-angle-down DashboardGraphs-filterIcon\"></i>\n");
if($scope.querySet){
let origQuerySet = _.cloneDeep($scope.querySet);
queryset = _.merge(origQuerySet, { page_size: $scope.pageSize });
@ -44,7 +46,7 @@ export default ['$scope', '$stateParams', '$state', '$filter', 'GetBasePath', 'Q
};
$scope.toPage = function(page) {
if(page === 0) {
if(page === 0 || page > $scope.last) {
return;
}
if (GetBasePath($scope.basePath) || $scope.basePath) {

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>
@ -40,11 +40,11 @@
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 {{dataCount()}}</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"