Clicking outside of a popup window

[seve-andre]

I know that you can close a Widget.Window using ESC when popup=True. But how can I close it by clicking with a mouse outside of it too?

[linkfrg]

Solution №1

1. Make a window "full screen" by setting anchor to ["top", "right", "bottom", "left"]
2. Set a Widget.Box as a child of the window
3. Place the actual "content" of the window in it
4. Place the Widget.Buttons in the free space, set on_click=lambda x: app.close_window("WINDOW_NAME") or something like this. Also set vexpand=True and hexpand=True.
5. Hard to explain, but depending on the layout you want (where the content will be located), you will need to arrange these same buttons and content, and also set the required valign and halign

For example:

Widget.Window(
    anchor=["top", "right", "bottom", "left"],
    namespace="my-window",
    child=Widget.Box(
        child=[
            Widget.Button(
                vexpand=True,
                hexpand=True,
                css_classes=["unset"],
                on_click=lambda x: app.close_window("my-window"),
            ),
            ACTUAL_CONTENT,
        ],
    ),
)

This will put the actual content to the right, and if you click on the empty space on the left, the window will close

In other layouts the code will be different, but the principle is the same

Solution №2

It might be easier & better for most cases

1. Make a window "full screen" by setting anchor to ["top", "right", "bottom", "left"]
2. Set a Widget.Overlay as a child of the window
3. Set a Widget.Button that closes the window as a child for Widget.Overlay
4. Add the actual content to the overlays

For example:

Widget.Window(
    namespace="my-window",
    anchor=["left", "right", "top", "bottom"],
    child=Widget.Overlay(
        child=Widget.Button(
            vexpand=True,
            hexpand=True,
            can_focus=False,
            on_click=lambda x: app.close_window("my-window"),
        ),
        overlays=[ACTUAL_CONTENT],
    ),
)

[seve-andre]

Looking at your powermenu dotfiles, I came across another solution, which I think it's quite nice.
The window child is gonna be an overlay, which has the button that closes the window as its child and the actual content as overlays.
Does it depend on the context which solution fits best?

[linkfrg]

Looking at your powermenu dotfiles, I came across another solution, which I think it's quite nice. The window child is gonna be an overlay, which has the button that closes the window as its child and the actual content as overlays. Does it depend on the context which solution fits best?

Ohhh, forgot about this, sorry. Both solutions fit good, so it depends on your preference. But the solution with Widget.Overlay will probably be easier for most people

[seve-andre]

Ok thank you again for the quick response