Multilingual Associations :Association > Hide Reference and Select Target buttons placement and font is not correct

[mangeshmane]

Pull Request for Issue #26905

[infograf768]

I am not in favor of this patch.
This reduces the Select Target button and not increase the Hide/Show Reference button.

If judged necessary to normalize these buttons size, it should rather be an increase for the Hide/Show Reference button and NOT reduce the Select Target one.

This should be done by taking off btn-sm in the edit.php file line 33
<button id="toogle-left-panel" class="btn btn-sm btn-secondary"

Note: I am not sure it is necessary at all.
As for the alignment matter as asked in #26905 it is quite difficult or maybe impossible as we have 2 Iframes and the Hide/Show Reference button has to remain out of the IFrame.

[Quy]

Would moving these 2 buttons to the toolbar be a solution?

[infograf768]

Would moving these 2 buttons to the toolbar be a solution?

Not sure about that as we may have 3 buttons and anyway a field for language concerning Target.

[Quy]

Moving Change Target and Clear buttons next to Select Target Language dropdown will fix the alignment.

[infograf768]

It is easy to regroup the 2 buttons with the field.
I can easily get this

And I can tweak it when reducing window size for the Select Target Language field

Remains to align them to Hide/Show Reference button
I could obtain this

But after Hiding reference I would get

and it would break in mobile view...

Putting them in toolbar would put the button fields very far way from the Target in mobile view.
Not a good idea imho.

[Quy]

How about leaving the drop down as it but moving the 2 buttons to the right of it?

[infograf768]

How about leaving the drop down as it but moving the 2 buttons to the right of it?

You mean solution one and just inverse the order?

[Quy]

Keep it how it is now, but move the 2 buttons to the right of the drop down. Target would be above the drop down and buttons.

[infograf768]

You mean something like this?

[Quy]

Yes, perfect! Maybe add a bottom margin to separate the dropdown/buttons from the box below.

[infograf768]

PR ready (including RTL) but I wonder.
In 3.x the reason why we added the button and language dropdown next to Target was to align the various fields in Reference and Target to make it easier to compare/modify.
When they are presented the way above (+ the margin) they lose this alignment.
Therefore the only way would be to create a margin-top for the Reference iframe which would be equal to the place used by the buttons in Target. That is possible but we would get a blank space.

Note: I also found an issue for the clear button as someone changed a lot of stuff in J4, i.e. the Clear button is supposed to undo the displayed association but also to clear totally the Target part. It does not do that anymore, even when we correct the call to the wrong js in the AssociationField type.

[Quy]

Field alignment takes precedence so the blank line will have to be.

[infograf768]

@Quy
Please test #27111

closing this one.