feat(forms): Horizontal layout

[ccailly]

Checklist before requesting a review

Please delete options that are not relevant.

• I have read the CONTRIBUTING document.
• I have performed a self-review of my code.
• I have added tests that prove my fix is effective or that my feature works.
• This change requires a documentation update.

Description

Added the possibility of grouping up to 4 questions (or comments) in a horizontal layout.

Screenshots (if appropriate):

Capture.video.du.20-11-2024.14.15.52.webm

[ccailly]

Horizontal layout behavior on form rendering.

Capture.video.du.20-11-2024.16.24.18.webm

[AdrienClairembault]

It seems impossible to drag a question between two horizontal layouts or at the top of the form if the first question use the horizontal layout:

[AdrienClairembault]

When dragging a question from a horizontal row, it can't be added next to a a question that is not on a row:

It only work with questions that are not from a row (you can see the extra space that allow the question to be inserted):

[AdrienClairembault]

Some UI suggestions, pinging @orthagh to confirm if he agrees with it.

1. I think the actions should be displayed when you hover on the empty blocks (rather than having to click inside of them to see the actions).

2. Not sure about the button styling, it feels a bit strange with the "straight" border radius.
   IMO, just using a cursor:pointer for the active state would be enough and we wouldn't need to use the active button styling.

3. The buttons are displayed in a muted style when inactive. It make them feel "disabled", I think displaying them at the normal opacity would be clearer.

I can't move my question into the open slots, not sure if it is on purpose ?
Also each time I drop it, a slot disappears.

Shouldn't deleting the second slot transform my field into a single row item since there is only one slot left ? The split row controls are still displayed here, it seems impossible to remove them.

It seems questions are always moved to the first slot, even when inserted into a specific slot.

[orthagh]

I think the actions should be displayed when you hover on the empty blocks (rather than having to click inside of them to see the actions).

Yes, but take into account a way to display them in responsive mode. We may have an active state in addition of hover.
Or just make behavior differ on both displays, hover on a big screen, active on mobile.

Shouldn't deleting the second slot transform my field into a single row item since there is only one slot left ? The split row controls are still displayed here, it seems impossible to remove them.

Agree

[AdrienClairembault]

Sometimes the drag and drop become very small (seems to happens randomly):

[AdrienClairembault]

I think you already known this one but the "vertical" styles are not applied sometimes:

[ccailly]

Sometimes the drag and drop become very small (seems to happens randomly):

I haven't been able to reproduce this bug, I've tried a lot of things but I never get this all-crushed display.

[AdrienClairembault]

Maybe we should force the height to be identical for a single row ?

[AdrienClairembault]

It feels very nice and easy to use. I think we are good overall and can merge once the tests go green.
Do you want to do a final review on your side @orthagh ?

Note that there are probably a few minors issues that can still be found, but we can fix them later to avoid keeping this PR open too long.

[orthagh]

I may want to make a final check yes.
Will try to do that this afternoon.

[orthagh]

I found a few minor bugs related to this pr:

• When a comment has been added in a slot and after selecting another slot, the vertical text is truncated. Note if you save and reload the form, the bug is not present anymore.
• After deleting a question in a slot, the tooltip of the delete button remains. If you delete more, they are stacked and remain in the dom. It also makes this additional deletion harder because the remained tooltip is above the delete button.. Same, saving and reloading the page "fixes" the issue.
• If the last deleted slot is a "comment", the layout container remains. It should be deleted as done for a "question"

More general bugs (probably affecting the main branch also):

• There are cases where the control bar is displayed twice:
  
• The delete button of a comment container has no tooltip.

[trasher]

Please review sonar issues

[ccailly]

Please review sonar issues

The issues reported by SonarQube don't seem to be related to my changes.
I've made changes to the Html.php file, but not to the method that's causing the problem.
I can look into it, but probably in another PR to avoid complicating this one.

[trasher]

Sonar issues are indeed now fixed (after you rebase). But now, database update is failing.