Update dashboard layout

This commit is contained in:
Benjamin DALSASS
2026-01-30 06:40:22 +01:00
parent 3aba8c5aa3
commit 2ff183a78a
4 changed files with 111 additions and 52 deletions

View File

@@ -131,6 +131,9 @@ abstract class DashboardLayoutMultiCol extends DashboardLayout
for ($iRows = 0; $iRows < $iNbRows; $iRows++) {
$oDashboardRow = new DashboardRow();
// GRID LAYOUT: Store the maximum column Y in this row
$iGridMaxColY = -1;
for ($iCols = 0; $iCols < $this->iNbCols; $iCols++) {
$oDashboardColumn = new DashboardColumn($bEditMode);
$oDashboardColumn->SetCellIndex($iCellIdx);
@@ -160,7 +163,7 @@ abstract class DashboardLayoutMultiCol extends DashboardLayout
$iWidth = $iGridColWidth;
}
$iHeight = array_key_exists('preferred_height', $aDashletsInfo) ? $aDashletsInfo['preferred_height'] : 1;
// GRID LAYOUT: Store max height of dashlets in this current row
// GRID LAYOUT: Store max height of dashlets in this current column
if ($iHeight > $iGridMaxHeightDashlet) {
$iGridMaxHeightDashlet = $iHeight;
}
@@ -191,13 +194,18 @@ abstract class DashboardLayoutMultiCol extends DashboardLayout
}
$iCellIdx++;
// GRID LAYOUT: Store max y in this current row
if ($iGridCurrentColY > $iGridMaxColY) {
$iGridMaxColY = $iGridCurrentColY;
}
// GRID LAYOUT: Next column
$iGridCurrentX += $iGridColWidth;
}
// GRID LAYOUT: Next Row
$iGridCurrentY++;
$iGridCurrentY += ($iGridMaxColY + 1);
$iGridCurrentX = 0;
$sJSReload .= $oDashboardRow->GetJSRefreshCallback()." ";

View File

@@ -163,17 +163,49 @@ ibo-dashlet[data-dashlet-type="DashletObjectList"] {
}
ibo-dashlet[data-dashlet-type="DashletGroupByTable"] {
.ibo-panel--body{
margin: 0 -16px;
border: none;
padding: 0;
padding-top: 16px;
&:before{
display: none;
overflow-y: hidden!important;
> .ibo-dashlet > .ibo-content-block > .ibo-content-block{
display: flex;
max-height: 100%;
flex-direction: column;
.dataTables_wrapper{
height: 100%;
.dataTables_scroll{
max-height: 100%;
height: 100%;
display: flex;
flex-direction: column;
.dataTables_scrollHead{
overflow: hidden;
position: relative;
border: 0;
width: 100%;
flex-shrink: 0;
}
.dataTables_scrollBody{
max-height: unset!important;
}
}
}
.ibo-datatable{
margin-top: 10px;
.ibo-panel--body{
margin: 0 -16px;
border: none;
padding: 0;
padding-top: 16px;
&:before{
display: none;
}
.ibo-datatable{
margin-top: 10px;
}
}
}
}

View File

@@ -78,23 +78,24 @@ collection-entry-element {
.ibo-form-compact{
.ibo-field{
display: flex;
flex-direction: column;
gap: 4px;
label{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
.ibo-field--label{
min-width: 100px;
max-width: unset;
padding-right: 0;
width: unset;
}
}
.ibo-input-type-checkbox{
align-self: flex-start;
}
.ibo-input-type-date{
display: block;
}
}
}

View File

@@ -1,5 +1,7 @@
{% use "application/forms/itop_base_layout.html.twig" %}
{# FORM #}
{%- block form_start -%}
{%- do form.setMethodRendered() -%}
{% set method = method|upper %}
@@ -22,12 +24,27 @@
</form>
{%- endblock form_end -%}
{%- block widget_attributes -%}
{# ROWS #}
{%- block form_rows -%}
{% for block in blocks %}
{% if block.added == 1 and form[block.name] != null %}
{% set row_attr = row_attr|merge({id: 'turbo_' ~ block.id }) %}
{{ form_row(form[block.name], {row_attr: row_attr}) }}
{% else %}
<div id="turbo_{{ block.id }}" class="ibo-field ibo-content-block ibo-block ibo-field-small"></div>
{% endif %}
{% endfor %}
{%- endblock form_rows -%}
{%- block form_row -%}
{% set row_attr = row_attr|merge({class: (row_attr.class|default('') ~ ' ibo-field ibo-content-block ibo-block ibo-field-small')|trim}) %}
{{- parent() -}}
{% if trigger_form_submit_on_modify %}
onChange="this.form.TriggerTurbo(this);"
{% endif %}
{%- endblock widget_attributes -%}
{%- endblock form_row -%}
{# WIDGETS #}
{%- block attributes -%}
{{- parent() -}}
@@ -36,18 +53,34 @@
{% endif %}
{%- endblock attributes -%}
{%- block widget_attributes -%}
{{- parent() -}}
{% if trigger_form_submit_on_modify %}
onChange="this.form.TriggerTurbo(this);"
{% endif %}
{%- endblock widget_attributes -%}
{%- block form_widget_simple -%}
{% if type == 'text' %}{% set ibo_class='ibo-input-string' %}{% else %}{% set ibo_class='ibo-input-' ~ type %}{% endif %}
{% set ibo_class='ibo-input-type-' ~ type|default('text') %}
{% set attr = attr|merge({class: (attr.class|default('') ~ ' ibo-input ' ~ ibo_class)|trim}) %}
{{- parent() -}}
{%- endblock form_widget_simple -%}
{%- block textarea_widget -%}
{% if type == 'text' %}{% set ibo_class='ibo-input-string' %}{% else %}{% set ibo_class='ibo-input-' ~ type %}{% endif %}
{% set attr = attr|merge({class: (attr.class|default('') ~ ' ibo-input ' ~ ibo_class)|trim}) %}
{% set attr = attr|merge({class: (attr.class|default('') ~ ' ibo-input-textarea')|trim}) %}
{{- parent() -}}
{%- endblock textarea_widget -%}
{%- block checkbox_widget -%}
{% set attr = attr|merge({class: (attr.class|default('') ~ ' ibo-input-type-checkbox ')|trim}) %}
{{- parent() -}}
{%- endblock checkbox_widget -%}
{%- block radio_widget -%}
{% set attr = attr|merge({class: (attr.class|default('') ~ ' ibo-input-type-radio ')|trim}) %}
{{- parent() -}}
{%- endblock radio_widget -%}
{%- block choice_widget_collapsed -%}
{% set attr = attr|merge({class: (attr.class|default('') ~ ' ibo-input')|trim}) %}
<select is="choices-element" class="field_autocomplete ibo-input ibo-input-select ibo-input-select-autocomplete ui-autocomplete-input"
@@ -78,8 +111,10 @@
{%- block choice_widget_expanded -%}
<div {{ block('widget_container_attributes') }}>
{%- for child in form %}
<div class="ibo-choice-widget-expanded--item">
{{- form_widget(child) -}}
{{- form_label(child, null, {translation_domain: choice_translation_domain, no_label_class: true}) -}}
</div>
{% endfor -%}
</div>
{%- endblock choice_widget_expanded -%}
@@ -94,23 +129,13 @@
{{- parent() -}}
{%- endblock form_label -%}
{%- block form_rows -%}
{% for block in blocks %}
{% if block.added == 1 and form[block.name] != null %}
{% set row_attr = row_attr|merge({id: 'turbo_' ~ block.id }) %}
{{ form_row(form[block.name], {row_attr: row_attr}) }}
{% else %}
<div id="turbo_{{ block.id }}" class="ibo-field ibo-content-block ibo-block ibo-field-small"></div>
{% endif %}
{% endfor %}
{%- endblock form_rows -%}
{%- block form_row -%}
{% set row_attr = row_attr|merge({class: (row_attr.class|default('') ~ ' ibo-field ibo-content-block ibo-block ibo-field-small')|trim}) %}
{%- block form_label_content -%}
{{- parent() -}}
{%- endblock form_row -%}
<div style="float: right;display: flex;flex-direction: column;align-items: center;row-gap: 3px;">
<span role="marquee" class="ibo-button--icon fas" style="padding:6px;"></span>
</div>
{%-endblock form_label_content -%}
{%- block collection_widget -%}
@@ -135,13 +160,6 @@
{%- endblock collection_widget -%}
{%- block form_label_content -%}
{{- parent() -}}
<div style="float: right;display: flex;flex-direction: column;align-items: center;row-gap: 3px;">
<span role="marquee" class="ibo-button--icon fas" style="padding:6px;"></span>
</div>
{%-endblock form_label_content -%}
{%- block form_errors -%}
<div id="turbo_error_{{ form.vars.id }}" class="form-error">
{{- parent() -}}