Popup with a blur around it

Question

This is a question partially related to this one: Cast a shadow with Popup

I have the same MWE as there. In addition to casting shadow, the Popup should blur everything in the main window. The question is, either I can blur something that is not an image, but for example a Text property?

Answer 1

You could do that with the overlay.modal property of ApplicationWindow (or the Overlay.modal attached property of your popup in Qt 5.10+). It defines a component to be used and instantiated when a model Popup is opened, (similarly, there's a modeless component property for popups with dim: true but modal: false).

This translate to this in your example:

import QtQuick 2.0
import QtQuick.Window 2.2
import QtQuick.Controls 2.3
import QtGraphicalEffects 1.0

ApplicationWindow {
    id: window
    width: 400
    height: 400
    visible: true

    Rectangle {
        id: rectMain;
        width: parent.width
        height: parent.height

        Canvas {
            anchors.fill: parent

            property real hue: 0
            RotationAnimation on hue {
                from: 0
                to: 360
                duration: 4000
                running: true
                loops: Animation.Infinite
            }
            onHueChanged: requestPaint()
            onPaint: {
                var ctx = getContext("2d");
                ctx.fillStyle = Qt.hsla(hue / 360, 1, 0.5, 1);
                ctx.fillRect(0, 0, width, height);
            }
        }
        Button {
            text: "Open"
            onClicked: popup.open()
        }

        Popup {
            id: popup

            x: 100
            y: 100
            width: 200
            height: 300
            modal: true
            focus: true
            closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside

            // new attached property in 5.10, in 5.9 and older use the overlay.modal property of ApplicationWindow.
            Overlay.modal: GaussianBlur {
                source: ShaderEffectSource { // you can just do source: window.contentItem if you just want a live blur.
                    sourceItem: window.contentItem
                    live: false
                }
                radius: 8
                samples: 16
            }

            padding: 0

            Rectangle {
                id: popRect;
                color: "red";

                width: parent.width
                height: parent.height
            }

            background: DropShadow {
                source: popup.contentItem

                horizontalOffset: 0
                verticalOffset: 5
                radius: 10
                samples: 7
                color: "black"
            }
        }
    }
}

Answer 2

I figured it out, here is an example:

import QtQuick.Window 2.2
import QtQuick.Controls 2.1
import QtQuick 2.0
import QtGraphicalEffects 1.0

ApplicationWindow
{
    id: window
    width: 400
    height: 400
    visible: true

    Rectangle
    {
        id: rectMain;
        width: parent.width;
        height: parent.height;

        Button
        {
            text: "Open"
            onClicked: popup.open()
        }

        Popup
        {
            id: popup

            x: 100
            y: 100
            width: 200
            height: 300
            modal: true
            focus: true
            closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside

            leftPadding: 0;
            rightPadding: 0;
            topPadding: 0;
            bottomPadding: 0;

            Rectangle
            {
                id: popRect;
                color: "red";

                //anchors.centerIn: parent
                width: parent.width;
                height: parent.height;
            }

            DropShadow
            {
                width: popup.width;
                height: popup.height;

                source: popRect;

                horizontalOffset: 0;
                verticalOffset: 5;
                radius: 10;
                samples: 7;
                color: "black";
            }

            onOpened: theBlur.visible = true;
            onClosed: theBlur.visible = false;
        }

        GaussianBlur
        {
            id: theBlur;
            visible: false;
            anchors.fill: rectMain;
            source: rectMain;
            radius: 8
            samples: 16
        }
    }
}