From 2ff183a78a8614f0f19a7fe7b83d6f91ebc157a5 Mon Sep 17 00:00:00 2001 From: Benjamin DALSASS Date: Fri, 30 Jan 2026 06:40:22 +0100 Subject: [PATCH] Update dashboard layout --- application/dashboardlayout.class.inc.php | 12 ++- .../dashlet/_dashlet-within-dashboard.scss | 50 +++++++++--- css/backoffice/components/_form.scss | 21 ++--- .../forms/itop_console_layout.html.twig | 80 ++++++++++++------- 4 files changed, 111 insertions(+), 52 deletions(-) diff --git a/application/dashboardlayout.class.inc.php b/application/dashboardlayout.class.inc.php index 61ae3e373..cbf702746 100644 --- a/application/dashboardlayout.class.inc.php +++ b/application/dashboardlayout.class.inc.php @@ -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()." "; diff --git a/css/backoffice/blocks-integrations/dashlet/_dashlet-within-dashboard.scss b/css/backoffice/blocks-integrations/dashlet/_dashlet-within-dashboard.scss index 0bca4b91f..2c3189f71 100644 --- a/css/backoffice/blocks-integrations/dashlet/_dashlet-within-dashboard.scss +++ b/css/backoffice/blocks-integrations/dashlet/_dashlet-within-dashboard.scss @@ -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; + } } + } } diff --git a/css/backoffice/components/_form.scss b/css/backoffice/components/_form.scss index 14301ac90..923bc6ba0 100644 --- a/css/backoffice/components/_form.scss +++ b/css/backoffice/components/_form.scss @@ -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; + } +} } diff --git a/templates/application/forms/itop_console_layout.html.twig b/templates/application/forms/itop_console_layout.html.twig index 3f3210968..7bdc6df22 100644 --- a/templates/application/forms/itop_console_layout.html.twig +++ b/templates/application/forms/itop_console_layout.html.twig @@ -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 @@ {%- 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 %} +
+ {% 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}) %}