Have part or dialog centered to the element clicked

[FlorianJacta]

Description

Here, I have clicked on an icon and I have a dropdown menu of labels next to where I clicked:

Here, I have clicked on icon and I see a dialog/part showing up next to where I clicked:

I want to do that generically to put anything in this part. If I click somewhere else, this dialog should disappear.

Acceptance Criteria

• If applicable, a new demo code is provided to show the new feature in action.
• Integration tests exhibiting how the functionality works are added.
• Any new code is covered by a unit tested.
• Check code coverage is at least 90%.
• Related issue(s) in taipy-doc are created for documentation and Release Notes are updated.

Code of Conduct

• I have checked the existing issues.
• I am willing to work on this issue (optional)

[FredLL-Avaiga]

it'a dialog then
But you want to position it relatively to another component.
Would it be acceptable to provide the id of the other component ? (would need to be defined in the other comp and dynamically in the dialog)

[jrobinAV]

This relates slightly to another issue: #2252. By the way, a contributor has proposed to help with it.

[FlorianJacta]

@FredLL-Avaiga That works for me. What do you mean by dynamically?

[FredLL-Avaiga]

I mean that you can change the id to which the dialog is related.
Maybe we should make it a selector so that you can relate to any component (while still supporting the id for simplicity).

[FlorianJacta]

Ok, I agree that the id should be dynamic. Now, I don't understand the part about the selector 😆

[FredLL-Avaiga]

The id is a string that allows to locate a component on a page and position a dialog based on it.
this string could also be treated as a CSS selector to locate components that don't have an id.

[FlorianJacta]

Got it, thanks!

[FredLL-Avaiga]

How about this ?
https://github.com/user-attachments/assets/a23cc134-126f-4a82-9fbd-33f97d8179a1

[FredLL-Avaiga]

from

from taipy.gui import Gui, State

ref_id = None
pop_open = False
val = None

def on_action(state: State, id: str):
  if id == "dialog":
    state.ref_id = None
    state.pop_open = False
  elif id:
    state.ref_id = f"#{id}"
    state.pop_open = True
  else:
      state.val = state.val +1 if state.val is not None else 1

page = """
<|button 1 |button|id=id1|>
<|button 2|button|id=id2|>


<|button |button|id=id3|>
<|button |button|id=id4|>
<|button |button|id=id5|>


<|button |button|id=id6|>
<|button |button|id=id7|>
<|button |button|id=id8|>
<|button |button|id=id9|>


<|button |button|id=id10|>
<|button |button|id=id11|>

<|{pop_open}|dialog|popup|ref_id={ref_id}|id=dialog|
<|inside the popup|button|>

<|{val}|>
|>
"""

if __name__ == "__main__":
  Gui(page).run(title="2293 popup")

[FredLL-Avaiga]

any remark @FlorianJacta ?

[FlorianJacta]

Do you have any screenshot? @FredLL-Avaiga What do you need id=dialog|?

[FredLL-Avaiga]

How about this ? https://github.com/user-attachments/assets/a23cc134-126f-4a82-9fbd-33f97d8179a1

better than a screen shot

[FlorianJacta]

What happens if you don't have your if id == "dialog": in the on_action. Does this stay open?

[FredLL-Avaiga]

yes,
in this ultra simple example I use a generic on_action but you can defined different on_action callbacks

[FlorianJacta]

The default behavior for the width is to fit the content?