composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-02-13 07:24:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

Stylize datatables before widget is loaded in order to avoid flickering

Browse Source
This commit is contained in:
Stephen Abello
2022-08-10 14:07:06 +02:00
parent b43b2e9741
commit b3750e46cf
7 changed files with 34 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
css/backoffice/components/_datatable.scss
View File

@@ -125,4 +125,23 @@ $ibo-fieldsorter--selected--background-color: $ibo-color-blue-200 !default;
.ibo-datatable--selected-count, .ibo-datatable--result-count{
padding-right: 0.2em;
padding-left: 0.1em;
}
//
.ibo-datatable[data-status="loading"]{
margin-top: $ibo-datatable--toolbar--table-spacing;
td, th {
position: relative;
padding: $ibo-vendors-datatables--cell--padding-y $ibo-vendors-datatables--cell--padding-x;
}
td{
@extend %ibo-font-ral-med-100;
}
tr:nth-child(even){
background-color: $ibo-vendors-datatables--row--background-color--is-even;
}
th {
@extend %ibo-font-ral-sembol-100;
border-bottom: $ibo-vendors-datatables--columns-header--border-bottom;
}
}

2
templates/base/components/datatable/layout.html.twig
View File

@@ -12,7 +12,7 @@
{% endif %}
{% endif %}
<table id="{{ oUIBlock.GetId() }}" width="100%" class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}" data-role="ibo-datatable">
<table id="{{ oUIBlock.GetId() }}" width="100%" class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}" data-role="ibo-datatable" data-status="loading">
<thead>
{% if oUIBlock.GetOption("select_mode") is not empty %}
<th></th>

4
templates/base/components/datatable/layout.ready.js.twig
View File

@@ -339,6 +339,10 @@ var oTable{{ sListIDForVarSuffix }} = $('#{{ oUIBlock.GetId() }}').DataTable({
{% endfor %}
{% endif %}
{% endif %}
// Set header and body datatables status as loaded
this.attr('data-status', 'loaded');
this.closest('.dataTables_scroll').find('.dataTables_scrollHead .ibo-datatable').attr('data-status', 'loaded');
}
});

2
templates/base/components/datatable/static/formtable/layout.html.twig
View File

@@ -4,7 +4,7 @@
<input type="hidden" name="attr_{{ oUIBlock.GetRef() }}" value="">
{% set columns = oUIBlock.GetColumns() %}
<table id="{{ oUIBlock.GetId() }}" width="100%" class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} listResults{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}" data-role="ibo-datatable">
<table id="{{ oUIBlock.GetId() }}" width="100%" class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} listResults{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}" data-role="ibo-datatable" data-status="loading">
<thead>
<tr>
{% for column in columns %}

4
templates/base/components/datatable/static/formtable/layout.ready.js.twig
View File

@@ -50,6 +50,10 @@ var oTable{{ sListIDForVarSuffix }} = $('#{{ oUIBlock.GetId() }}').DataTable({
{
this.closest('.dataTables_wrapper').find('.dataTables_length').hide();
}
// Set header and body datatables status as loaded
this.attr('data-status', 'loaded');
this.closest('.dataTables_scroll').find('.dataTables_scrollHead .ibo-datatable').attr('data-status', 'loaded');
},
});

2
templates/base/components/datatable/static/layout.html.twig
View File

@@ -2,7 +2,7 @@
{# @license http://opensource.org/licenses/AGPL-3.0 #}
{% set columns = oUIBlock.GetColumns() %}
<table id="{{ oUIBlock.GetId() }}" width="100%" class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} listResults{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}" data-role="ibo-datatable">
<table id="{{ oUIBlock.GetId() }}" width="100%" class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} listResults{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}" data-role="ibo-datatable" data-status="loading">
<thead>
<tr>
{% for column in columns %}

4
templates/base/components/datatable/static/layout.ready.js.twig
View File

@@ -79,6 +79,10 @@ var oTable{{ sListIDForVarSuffix }} = $('#{{ oUIBlock.GetId() }}').DataTable({
{
this.closest('.dataTables_wrapper').find('.dataTables_length').hide();
}
// Set header and body datatables status as loaded
this.attr('data-status', 'loaded');
this.closest('.dataTables_scroll').find('.dataTables_scrollHead .ibo-datatable').attr('data-status', 'loaded');
}
});