diff --git a/css/includes/components/form/_form-editor-horizontal-layout.scss b/css/includes/components/form/_form-editor-horizontal-layout.scss index e4dc7f31ac6..e9e1754192d 100644 --- a/css/includes/components/form/_form-editor-horizontal-layout.scss +++ b/css/includes/components/form/_form-editor-horizontal-layout.scss @@ -41,11 +41,6 @@ } } } - - .glpi-form-editor-drag-question-placeholder { - height: unset !important; - margin-bottom: 0.5rem !important; - } } @@ -112,16 +107,26 @@ } } } + + [data-glpi-form-editor-horizontal-block-placeholder] { + &:not([data-glpi-form-editor-active-horizontal-block-placeholder]) { + [data-glpi-form-editor-toolbar] { + display: none !important; + } + } + } } } - &:not([data-glpi-form-editor-active-horizontal-blocks]) > [data-glpi-form-editor-toolbar] { - position: absolute; - height: 0; - width: 0; - opacity: 0; - visibility: hidden; - overflow: hidden; + &:not([data-glpi-form-editor-active-horizontal-blocks]) { + > [data-glpi-form-editor-toolbar] { + position: absolute; + height: 0; + width: 0; + opacity: 0; + visibility: hidden; + overflow: hidden; + } } [data-glpi-form-editor-horizontal-blocks] { @@ -134,7 +139,8 @@ @for $i from 2 through 4 { &:has(> section:nth-of-type(#{$i})) { [data-glpi-form-editor-block], - [data-glpi-form-editor-horizontal-block-placeholder] { + [data-glpi-form-editor-horizontal-block-placeholder], + .glpi-form-editor-drag-question-placeholder { &:not([data-glpi-form-editor-active-question]):not([data-glpi-form-editor-active-comment]) { // Ensure each block has the same max width and share the available space @if $i == 4 { @@ -184,21 +190,32 @@ margin-top: auto; margin-bottom: auto; order: 100; + + // Remove hover effect on buttons + button { + border: unset !important; + background-color: unset !important; + color: var(--tblr-btn-color) !important; + } } [data-glpi-form-editor-horizontal-block-placeholder] { - // Hide the placeholder toolbar when the block isn't active + // Hide the placeholder toolbar when the block isn't active and the placeholder isn't hovered &:not([data-glpi-form-editor-active-horizontal-block-placeholder]) { - [data-glpi-form-editor-toolbar] { - display: none !important; + &:not(:hover) { + [data-glpi-form-editor-toolbar] { + display: none !important; + } } } - border: 2px dashed var(--tblr-border-color); - border-radius: var(--tblr-border-radius); + &:not(:has(.glpi-form-editor-drag-question-placeholder)) { + border: 2px dashed var(--tblr-border-color); + border-radius: var(--tblr-border-radius); + } + min-height: 100px; flex: 1; - order: 10; display: flex; justify-content: center; align-items: center; @@ -210,11 +227,27 @@ @include media-breakpoint-down(sm) { flex-direction: column; } + + // Remove hover effect on buttons + button { + border: unset !important; + background-color: unset !important; + color: var(--tblr-btn-color) !important; + } + } + + .glpi-form-editor-drag-question-placeholder { + width: 100%; + max-width: unset !important; + height: 100% !important; + margin: unset !important; } } .glpi-form-editor-drag-question-placeholder { - width: 10%; + flex: 1; + height: unset !important; + margin: unset !important; } } } diff --git a/js/modules/Forms/EditorController.js b/js/modules/Forms/EditorController.js index 3abb4e66657..c818215cdd1 100644 --- a/js/modules/Forms/EditorController.js +++ b/js/modules/Forms/EditorController.js @@ -483,10 +483,14 @@ export class GlpiFormEditorController // If the item is a horizontal block, we need to find all questions and comments if (is_horizontal_block) { - blocks = $(item).find("[data-glpi-form-editor-block]"); + blocks = $(item).find("[data-glpi-form-editor-block], [data-glpi-form-editor-horizontal-block-placeholder]"); } blocks.each((horizontal_rank, block) => { + if ($(block).is("[data-glpi-form-editor-horizontal-block-placeholder]")) { + return; + } + // Determine the type of the block const itemType = $(block).is("[data-glpi-form-editor-question]") ? 'question' : 'comment'; @@ -841,11 +845,9 @@ export class GlpiFormEditorController destination = target; action = "append"; } else if (target.data('glpi-form-editor-horizontal-block-placeholder') !== undefined) { - // Adding a block at the end of a horizontal block - destination = target - .closest("[data-glpi-form-editor-horizontal-blocks-container]") - .find("[data-glpi-form-editor-horizontal-blocks]"); - action = "append"; + // Adding a block just after the horizontal layout placeholder + destination = target; + action = "after"; // Remove the placeholder just after adding the block setTimeout(() => this.#removeHorizontalLayoutSlot(target), 0); @@ -1590,14 +1592,14 @@ export class GlpiFormEditorController sections .each((index, section) => { const blocks_container = $(section) - .find("[data-glpi-form-editor-section-blocks], [data-glpi-form-editor-horizontal-blocks], [data-glpi-form-editor-question-drag-merge]"); + .find("[data-glpi-form-editor-section-blocks], [data-glpi-form-editor-horizontal-blocks], [data-glpi-form-editor-question-drag-merge], [data-glpi-form-editor-horizontal-block-placeholder]"); sortable(blocks_container, { // Drag and drop handle selector handle: '[data-glpi-form-editor-question-handle]', // Restrict sortable items - items: '[data-glpi-form-editor-block]', + items: '[data-glpi-form-editor-block], [data-glpi-form-editor-horizontal-block-placeholder]', // Limit the number of blocks in horizontal blocks maxItems: blocks_container.attr("data-glpi-form-editor-horizontal-blocks") !== typeof undefined ? 4 : 0, @@ -1606,13 +1608,13 @@ export class GlpiFormEditorController acceptFrom: '[data-glpi-form-editor-section-blocks], [data-glpi-form-editor-horizontal-blocks]', // Placeholder class - placeholderClass: 'glpi-form-editor-drag-question-placeholder', + placeholder: '
', }); }); // Keep track on unsaved changes if the sort order was updated sections - .find("[data-glpi-form-editor-section-blocks], [data-glpi-form-editor-horizontal-blocks], [data-glpi-form-editor-question-drag-merge]") + .find("[data-glpi-form-editor-section-blocks], [data-glpi-form-editor-horizontal-blocks], [data-glpi-form-editor-question-drag-merge], [data-glpi-form-editor-horizontal-block-placeholder]") .on('sortupdate', (e) => { // Trigger an action to make sure we use the main entry point // where common action related functions are excuted @@ -1629,7 +1631,7 @@ export class GlpiFormEditorController // Run the post move process if any item was dragged, even if it was not // moved in the end (= dragged on itself) sections - .find("[data-glpi-form-editor-section-blocks], [data-glpi-form-editor-horizontal-blocks], [data-glpi-form-editor-question-drag-merge]") + .find("[data-glpi-form-editor-section-blocks], [data-glpi-form-editor-horizontal-blocks], [data-glpi-form-editor-question-drag-merge], [data-glpi-form-editor-horizontal-block-placeholder]") .on('sortstop', (e) => { // The 'sortstop' event trigger twice for a single drag and drop // action. @@ -1648,11 +1650,12 @@ export class GlpiFormEditorController ); } - if ( - $(e.detail.item).parent().data('glpi-form-editor-horizontal-blocks') !== undefined - && $(e.detail.item).parent().find("[data-glpi-form-editor-horizontal-block-placeholder]").length > 0 - ) { - $(e.detail.item).parent().find("[data-glpi-form-editor-horizontal-block-placeholder]").first().remove(); + // Handle case where the item was dragged in a placeholder + // This is a special case where the item is not moved but replace the placeholder + if ($(e.detail.item).parent().data('glpi-form-editor-horizontal-block-placeholder') !== undefined) { + const placeholder = $(e.detail.item).parent(); + $(e.detail.item).insertAfter(placeholder); + placeholder.remove(); } // Handle case where the item was dragged in a drag and merge area @@ -1991,8 +1994,8 @@ export class GlpiFormEditorController const new_placeholder = this.#addBlock(target, template); - // Enable sortable on the new placeholder - this.#enableSortable(new_placeholder); + // Enable sortable + this.#enableSortable(target); // Set new placeholder as active this.#setActiveItem(new_placeholder); diff --git a/templates/pages/admin/form/form_horizontal_block.html.twig b/templates/pages/admin/form/form_horizontal_block.html.twig index 77bbac9c8df..22f0f667b51 100644 --- a/templates/pages/admin/form/form_horizontal_block.html.twig +++ b/templates/pages/admin/form/form_horizontal_block.html.twig @@ -52,9 +52,20 @@ data-glpi-form-editor-horizontal-blocks aria-label="{{ __("Horizontal blocks") }}" > + {% set previous_index = -1 %} {% for form_block in blocks %} {# Only 4 blocks are allowed in a horizontal layout #} {% if loop.index <= 4 %} + {% if form_block.fields.horizontal_rank > previous_index + 1 %} + {% for i in 1..(form_block.fields.horizontal_rank - (previous_index + 1)) %} + {{ include('pages/admin/form/form_horizontal_block_placeholder.html.twig', { + 'can_update' : can_update, + 'form' : form, + }, with_context = false) }} + {% endfor %} + {% endif %} + {% set previous_index = form_block.fields.horizontal_rank %} + {{ form_block.displayBlockForEditor() }} {% endif %} {% endfor %} diff --git a/templates/pages/admin/form/form_horizontal_block_toolbar.html.twig b/templates/pages/admin/form/form_horizontal_block_toolbar.html.twig index 1f503e9a59e..78c4b39288c 100644 --- a/templates/pages/admin/form/form_horizontal_block_toolbar.html.twig +++ b/templates/pages/admin/form/form_horizontal_block_toolbar.html.twig @@ -36,7 +36,7 @@ {% if can_update %}
+ + {# Remove horizontal layout action #} +
{% endif %} diff --git a/templates/pages/form_renderer.html.twig b/templates/pages/form_renderer.html.twig index 59954e212d9..49db1ee69f4 100644 --- a/templates/pages/form_renderer.html.twig +++ b/templates/pages/form_renderer.html.twig @@ -1,3 +1,4 @@ + {# # --------------------------------------------------------------------- # @@ -98,7 +99,15 @@ {% endif %}
+ {% set previous_index = -1 %} {% for form_block in form_group_blocks %} + {% if form_block.fields.horizontal_rank > previous_index + 1 %} + {% for i in 1..(form_block.fields.horizontal_rank - (previous_index + 1)) %} +
+ {% endfor %} + {% endif %} + {% set previous_index = form_block.fields.horizontal_rank %} + {% if form_block is instanceof('Glpi\\Form\\Question') %} {% set question_type = form_block.getQuestionType() %} {% endif %}