[Feature] Popup: move related child in corresponding popup_lizmap_dd_relation div

[mind84]

When a Popup is displayed with the QGIS Drag and Drop configuration, for each relations configured in the layout a container HTML element (div.popup_lizmap_dd_relation) is added to the Popup (see 3liz/qgis-lizmap-server-plugin@6a42400)

This PR moves the related child (or children) popup in corresponding popup_lizmap_dd_relation div. The feature covers both 1:n and n:m relations

Ticket : fix #4407

Backport to 3.8

Funded by Faunalia

[mind84]

As side effect, the background-color for the children popups is inherited from this rule:

https://github.com/3liz/qgis-lizmap-server-plugin/blob/b17cd00abbdf7b2274c2aea3fafb2c817588553a/lizmap_server/tooltip.py#L447

The display effect is to much "heavy" IMHO and could be better.

I guess there are two options here:

1. change CSS rule in lizmap-server-plugin
2. let users add custom css.

Since class popup_lizmap_dd_relation is never get involved until now, I think that option 1 is the best because there is little chance that adding some specific rules for this class will break the UI of someone

What do you think about it?

[rldhont]

@Gustry any advice about the CSS ?

[Gustry]

@Gustry any advice about the CSS ?

You mean about the styling side ?
About the technical side, we can return different CSS. I think we can add a flag to see if we are inside a previous container, to remove the transparency.

[mind84]

@Gustry,

just for trying, I've added a couple of css rules in tooltip.py, only for the relations case (groupbox is good with dark background IMHO):

div.popup_lizmap_dd div.tab-content div.tab-pane div.popup_lizmap_dd_relation div, 
div.popup_lizmap_dd div.tab-content div.tab-pane div.popup_lizmap_dd_relation 
{
    border: 0px;
    border-radius: 0px;
    background-color:white;
}

result is:

What do you think about it?

Thanks

[mdouchin]

Thanks for your contribution. I would really like to spend some time to make this automatic popup look like the editing form, with labels aside the values, and a more compact UX. We should modify LWC PHP code but also the Python plugin (I think) to improve the automatic "form-like" view of the popup

[mind84]

@mdouchin,

I agree, I'm thinking about it too but there's probably a lot work to do and, with the new feature component coming, I'm wondering if it's better to focus effort on that.

Anyway, basically with this PR nothing changes :), just put things in the right place (or at least, try to)

Thanks

[mdouchin]

Ok for me. I will spend some time when implementing the lizmap-features-table component.