engineering/unrhodecode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

main-page: fixed jumping of text in grid loading.

Browse source 
- new logic starts with everything hidden and global loading marker
- show only those grida that contain data.
This commit is contained in:
Daniel Dourvaris 2020-01-10 13:06:16 +01:00
parent 540f9ad582
commit 4ee8e9f718
2 changed files with 44 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

11
rhodecode/public/css/tables.less
View file

@ -373,6 +373,17 @@ table#repo_list_table {
min-width: 600px;
}
#no_grid_data {
text-align: center;
}
#grid_data_loading {
text-align: center;
font-weight: 600;
font-size: 16px;
padding: 80px 20px;
}
// Keyboard mappings
table.keyboard-mappings {
th {

58
rhodecode/templates/index_base.mako
View file

@ -14,32 +14,50 @@
<div class="title">
</div>
<!-- end box / title -->
<div id="no_grid_data" class="table" style="display: none">
<h2 class="no-object-border">
<h2>
${_('No repositories or repositories groups exists here.')}
</h2>
</div>
<div id="grid_data_loading" class="table" style="display: none">
<i class="icon-spin animate-spin"></i>
${_('loading...')}
</div>
<div class="table">
<div id="groups_list_wrap" style="min-height: 200px;">
<div id="groups_list_wrap" style="min-height: 200px;display: none">
<table id="group_list_table" class="display" style="width: 100%;"></table>
</div>
</div>
<div class="table">
<div id="repos_list_wrap" style="min-height: 200px;">
<div id="repos_list_wrap" style="min-height: 200px;display: none">
<table id="repo_list_table" class="display" style="width: 100%;"></table>
</div>
</div>
</div>
<script>
$(document).ready(function () {
var noRepoData = null;
var noGroupData = null;
var $gridDataLoading = $('#grid_data_loading');
// repo group list
// global show loading of hidden grids
$(document).on('preInit.dt', function (e, settings) {
$gridDataLoading.show();
});
## repo group list
var $groupListTable = $('#group_list_table');
$groupListTable.on('xhr.dt', function (e, settings, json, xhr) {
$gridDataLoading.hide();
});
$groupListTable.DataTable({
processing: true,
serverSide: true,
@ -97,11 +115,12 @@
emptyTable: _gettext("No repository groups present.")
},
"drawCallback": function (settings, json) {
// hide grid if it's empty
if (settings.fnRecordsDisplay() === 0) {
$('#groups_list_wrap').hide();
noGroupData = true;
// both hidden, show no-data
if ($('#repos_list_wrap').is(':hidden')) {
if (noRepoData === true) {
$('#no_grid_data').show();
}
} else {
@ -119,18 +138,13 @@
},
});
$groupListTable.on('xhr.dt', function (e, settings, json, xhr) {
$groupListTable.css('opacity', 1);
});
$groupListTable.on('preXhr.dt', function (e, settings, data) {
$groupListTable.css('opacity', 0.3);
});
## // repo list
## repo list
var $repoListTable = $('#repo_list_table');
$repoListTable.on('xhr.dt', function (e, settings, json, xhr) {
$gridDataLoading.hide();
});
$repoListTable.DataTable({
processing: true,
serverSide: true,
@ -188,11 +202,13 @@
emptyTable: _gettext("No repositories present.")
},
"drawCallback": function (settings, json) {
// hide grid if it's empty
if (settings.fnRecordsDisplay() == 0) {
$('#repos_list_wrap').hide()
noRepoData = true;
// both hidden, show no-data
if ($('#groups_list_wrap').is(':hidden')) {
if (noGroupData === true) {
$('#no_grid_data').show()
}
} else {
@ -210,14 +226,6 @@
},
});
$repoListTable.on('xhr.dt', function (e, settings, json, xhr) {
$repoListTable.css('opacity', 1);
});
$repoListTable.on('preXhr.dt', function (e, settings, data) {
$repoListTable.css('opacity', 0.3);
});
});
</script>
</%def>