How to change QML ApplicationWindow Overlay size?

Question

Since Qt 5.10 it's possible setting up Overlay attached property for the Popup element. There is an example available here https://doc.qt.io/qt-5/qml-qtquick-controls2-overlay.html#modal-attached-prop . It's really useful for cases when there is a need for changing background for Popup having dim: property set to true. But there is no clue (at least for me) on how can I change Overlay size. For example, I have a custom ApplicationWindow overriding contents: property to be able drawing shadow over the window (my custom window doesn't have borders) and place MouseArea beyond borders to mimic the behavior of native windows. The sad part is - Overlay drawn over the entire window area that makes it ugly for the area beyond borders.

Does anyone knows a way to adjust overlay size (I mean background shadow at least) when using dim: property in Popup?

Here is a typical Popup code:

Popup {
        id: popupReleaseNotes
        x: Math.round(parent.width/2 - width/2)
        y: Math.round(parent.height/2 - height/2)
        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
        modal: true
        dim: true
    }

Here you can see how it looks like in my app:

Overlay background goes over my custom boundaries, which means it's taking all the ApplicationWindow area. And this is what I'm trying to change. I didn't find any documented way so far.

@eyllanesc I added a screenshot and `Popup` code. I won't add window element code cause it has nothing to do with the problem. I just implemented custom transparent borders to place `MouseArea` there. — user3417815, Apr 04 '20 at 23:52

Marco Medri · Answer 1 · 2020-04-06T14:14:46.497

1

I suggest you use ColorOverlay.

https://doc.qt.io/qt-5/qml-qtgraphicaleffects-coloroverlay.html

Anyway seems to me that you missed the Overlay.Modal. Reading the documentation(), I was expecting something like:

Popup {
        id: popupReleaseNotes
        x: Math.round(parent.width/2 - width/2)
        y: Math.round(parent.height/2 - height/2)
        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
        modal: true

        visible: true

        Overlay.modal: Rectangle {
               anchors.fill: parent
               color: "#aacfdbe7"
        }
}

PS have a look to the Popup and its Layout in order to understand where it could be a problem of Content item vs Background. Maybe your dimming ha been done on the background that is bigger than the content. https://doc.qt.io/qt-5/qml-qtquick-controls2-popup.html

edited Apr 06 '20 at 14:14

answered Apr 05 '20 at 14:13

Marco Medri

176
3

Thank you for suggestion, but I've tried it before posting a question. This `Rectangle` doesn't allow changing overlay area size. – user3417815 Apr 05 '20 at 19:46
Regarding the second thing (about `background` size). Yes, it's true. My custom window background equal to the window size. Is there anything I can do to `dim` on another item? Sadly, I have no idea how it could be done. Or lack of documenation. – user3417815 Apr 05 '20 at 20:29
Not even with anchors.fill, as I added? You should be able to change the size of the rectangle as you want. Anyway, could you post the whole page? So could be easy to help you – Marco Medri Apr 06 '20 at 14:16
No, it's not. Sadly, it still takes the whole window and can't be anchored to the other items. – user3417815 Apr 06 '20 at 18:56
Thank you for your efforts anyway. I guess I have to post it on Qt bugreports and ask for a possible solution (or confirmation about this behavior) – user3417815 Apr 06 '20 at 18:57

How to change QML ApplicationWindow Overlay size?

1 Answers1