Add Overlay attached properties and signals

[ChangeLog][Controls][ApplicationWindow] Deprecated the overlay grouped
property in favor of the newly introduced Overlay attached properties.

[ChangeLog][Controls][Overlay] Introduced Overlay attached properties
and signals that supersede the overlay grouped property in Application
Window. The Overlay attached type allows providing background dimming
for popups without requiring an ApplicationWindow instance.

Task-number: QTBUG-61336
Change-Id: I9df11bcb167e7725014d5f058fe24d70da4a10b3
Reviewed-by: Topi Reiniö <topi.reinio@qt.io>
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>

17 files changed, 142 insertions, 4 deletions

diff --git a/src/imports/controls/Dialog.qml b/src/imports/controls/Dialog.qml
index f2ebae34..28266670 100644
--- a/src/imports/controls/Dialog.qml
+++ b/src/imports/controls/Dialog.qml
@@ -76,4 +76,12 @@ T.Dialog {
     footer: DialogButtonBox {
         visible: count > 0
     }
+
+    T.Overlay.modal: Rectangle {
+        color: Default.overlayModalColor
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: Default.overlayDimColor
+    }
 }
diff --git a/src/imports/controls/Drawer.qml b/src/imports/controls/Drawer.qml
index 8368838a..e21de5b4 100644
--- a/src/imports/controls/Drawer.qml
+++ b/src/imports/controls/Drawer.qml
@@ -42,7 +42,7 @@ import QtQuick.Templates 2.3 as T
 T.Drawer {
     id: control
 
-    parent: T.ApplicationWindow.overlay
+    parent: T.Overlay.overlay
 
     implicitWidth: Math.max(background ? background.implicitWidth : 0, contentWidth + leftPadding + rightPadding)
     implicitHeight: Math.max(background ? background.implicitHeight : 0, contentHeight + topPadding + bottomPadding)
@@ -68,4 +68,12 @@ T.Drawer {
             y: control.edge === Qt.TopEdge ? parent.height - 1 : 0
         }
     }
+
+    T.Overlay.modal: Rectangle {
+        color: Default.overlayModalColor
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: Default.overlayDimColor
+    }
 }
diff --git a/src/imports/controls/Menu.qml b/src/imports/controls/Menu.qml
index 32cbfa3f..03503e0a 100644
--- a/src/imports/controls/Menu.qml
+++ b/src/imports/controls/Menu.qml
@@ -69,4 +69,12 @@ T.Menu {
         color: Default.backgroundColor
         border.color: Default.frameDarkColor
     }
+
+    T.Overlay.modal: Rectangle {
+        color: Default.overlayModalColor
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: Default.overlayDimColor
+    }
 }
diff --git a/src/imports/controls/Popup.qml b/src/imports/controls/Popup.qml
index 7a94aaab..58799744 100644
--- a/src/imports/controls/Popup.qml
+++ b/src/imports/controls/Popup.qml
@@ -55,4 +55,12 @@ T.Popup {
     background: Rectangle {
         border.color: Default.frameDarkColor
     }
+
+    T.Overlay.modal: Rectangle {
+        color: Default.overlayModalColor
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: Default.overlayDimColor
+    }
 }
diff --git a/src/imports/controls/fusion/Dialog.qml b/src/imports/controls/fusion/Dialog.qml
index a0c9ef18..b79b9254 100644
--- a/src/imports/controls/fusion/Dialog.qml
+++ b/src/imports/controls/fusion/Dialog.qml
@@ -92,4 +92,12 @@ T.Dialog {
     footer: DialogButtonBox {
         visible: count > 0
     }
+
+    T.Overlay.modal: Rectangle {
+        color: Fusion.topShadow
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: Fusion.topShadow
+    }
 }
diff --git a/src/imports/controls/fusion/Drawer.qml b/src/imports/controls/fusion/Drawer.qml
index 4115ec06..236c359a 100644
--- a/src/imports/controls/fusion/Drawer.qml
+++ b/src/imports/controls/fusion/Drawer.qml
@@ -44,7 +44,7 @@ import QtQuick.Controls.Fusion.impl 2.3
 T.Drawer {
     id: control
 
-    parent: T.ApplicationWindow.overlay
+    parent: T.Overlay.overlay
 
     implicitWidth: Math.max(background ? background.implicitWidth : 0, contentWidth + leftPadding + rightPadding)
     implicitHeight: Math.max(background ? background.implicitHeight : 0, contentHeight + topPadding + bottomPadding)
@@ -79,4 +79,12 @@ T.Drawer {
             y: control.edge === Qt.TopEdge ? parent.height : 0
         }
     }
+
+    T.Overlay.modal: Rectangle {
+        color: Fusion.topShadow
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: Fusion.topShadow
+    }
 }
diff --git a/src/imports/controls/fusion/Menu.qml b/src/imports/controls/fusion/Menu.qml
index 06886ad7..fe82e0e7 100644
--- a/src/imports/controls/fusion/Menu.qml
+++ b/src/imports/controls/fusion/Menu.qml
@@ -82,4 +82,12 @@ T.Menu {
             opacity: 0.2
         }
     }
+
+    T.Overlay.modal: Rectangle {
+        color: Fusion.topShadow
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: Fusion.topShadow
+    }
 }
diff --git a/src/imports/controls/fusion/Popup.qml b/src/imports/controls/fusion/Popup.qml
index 64c9fe49..30532e7e 100644
--- a/src/imports/controls/fusion/Popup.qml
+++ b/src/imports/controls/fusion/Popup.qml
@@ -59,4 +59,12 @@ T.Popup {
         border.color: control.palette.mid
         radius: 2
     }
+
+    T.Overlay.modal: Rectangle {
+        color: Fusion.topShadow
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: Fusion.topShadow
+    }
 }
diff --git a/src/imports/controls/material/Dialog.qml b/src/imports/controls/material/Dialog.qml
index 68f856c6..abad5662 100644
--- a/src/imports/controls/material/Dialog.qml
+++ b/src/imports/controls/material/Dialog.qml
@@ -103,4 +103,14 @@ T.Dialog {
     footer: DialogButtonBox {
         visible: count > 0
     }
+
+    T.Overlay.modal: Rectangle {
+        color: control.Material.backgroundDimColor
+        Behavior on opacity { NumberAnimation { duration: 150 } }
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: control.Material.backgroundDimColor
+        Behavior on opacity { NumberAnimation { duration: 150 } }
+    }
 }
diff --git a/src/imports/controls/material/Drawer.qml b/src/imports/controls/material/Drawer.qml
index 78b6f2b8..7ea52b46 100644
--- a/src/imports/controls/material/Drawer.qml
+++ b/src/imports/controls/material/Drawer.qml
@@ -42,7 +42,7 @@ import QtQuick.Controls.Material.impl 2.3
 T.Drawer {
     id: control
 
-    parent: T.ApplicationWindow.overlay
+    parent: T.Overlay.overlay
 
     implicitWidth: Math.max(background ? background.implicitWidth : 0, contentWidth + leftPadding + rightPadding)
     implicitHeight: Math.max(background ? background.implicitHeight : 0, contentHeight + topPadding + bottomPadding)
@@ -79,4 +79,14 @@ T.Drawer {
             fullHeight: true
         }
     }
+
+    T.Overlay.modal: Rectangle {
+        color: control.Material.backgroundDimColor
+        Behavior on opacity { NumberAnimation { duration: 150 } }
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: control.Material.backgroundDimColor
+        Behavior on opacity { NumberAnimation { duration: 150 } }
+    }
 }
diff --git a/src/imports/controls/material/Menu.qml b/src/imports/controls/material/Menu.qml
index 8410dfeb..9c8128a7 100644
--- a/src/imports/controls/material/Menu.qml
+++ b/src/imports/controls/material/Menu.qml
@@ -94,4 +94,14 @@ T.Menu {
             elevation: control.Material.elevation
         }
     }
+
+    T.Overlay.modal: Rectangle {
+        color: control.Material.backgroundDimColor
+        Behavior on opacity { NumberAnimation { duration: 150 } }
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: control.Material.backgroundDimColor
+        Behavior on opacity { NumberAnimation { duration: 150 } }
+    }
 }
diff --git a/src/imports/controls/material/Popup.qml b/src/imports/controls/material/Popup.qml
index 49b39a6c..e22b8b7c 100644
--- a/src/imports/controls/material/Popup.qml
+++ b/src/imports/controls/material/Popup.qml
@@ -75,4 +75,14 @@ T.Popup {
             elevation: control.Material.elevation
         }
     }
+
+    T.Overlay.modal: Rectangle {
+        color: control.Material.backgroundDimColor
+        Behavior on opacity { NumberAnimation { duration: 150 } }
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: control.Material.backgroundDimColor
+        Behavior on opacity { NumberAnimation { duration: 150 } }
+    }
 }
diff --git a/src/imports/controls/qtquickcontrols2plugin.cpp b/src/imports/controls/qtquickcontrols2plugin.cpp
index f9ee88d8..7a1651e4 100644
--- a/src/imports/controls/qtquickcontrols2plugin.cpp
+++ b/src/imports/controls/qtquickcontrols2plugin.cpp
@@ -48,6 +48,7 @@
 #if QT_CONFIG(quick_listview) && QT_CONFIG(quick_pathview)
 #include <QtQuickControls2/private/qquicktumblerview_p.h>
 #endif
+#include <QtQuickTemplates2/private/qquickoverlay_p.h>
 
 #include "qquickdefaultbusyindicator_p.h"
 #include "qquickdefaultdial_p.h"
@@ -157,6 +158,7 @@ void QtQuickControls2Plugin::registerTypes(const char *uri)
     // QtQuick.Controls 2.3 (new types in Qt 5.10)
     qmlRegisterType(selector.select(QStringLiteral("Action.qml")), uri, 2, 3, "Action");
     qmlRegisterType(selector.select(QStringLiteral("ActionGroup.qml")), uri, 2, 3, "ActionGroup");
+    qmlRegisterUncreatableType<QQuickOverlay>(uri, 2, 3, "Overlay", QStringLiteral("Overlay is only available as an attached property."));
 }
 
 static QObject *styleSingleton(QQmlEngine *engine, QJSEngine *scriptEngine)
diff --git a/src/imports/controls/universal/Dialog.qml b/src/imports/controls/universal/Dialog.qml
index 4f8a6180..dd463b83 100644
--- a/src/imports/controls/universal/Dialog.qml
+++ b/src/imports/controls/universal/Dialog.qml
@@ -84,4 +84,12 @@ T.Dialog {
     footer: DialogButtonBox {
         visible: count > 0
     }
+
+    T.Overlay.modal: Rectangle {
+        color: control.Universal.baseLowColor
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: control.Universal.baseLowColor
+    }
 }
diff --git a/src/imports/controls/universal/Drawer.qml b/src/imports/controls/universal/Drawer.qml
index 5ef0b325..40cfaadd 100644
--- a/src/imports/controls/universal/Drawer.qml
+++ b/src/imports/controls/universal/Drawer.qml
@@ -41,7 +41,7 @@ import QtQuick.Controls.Universal 2.3
 T.Drawer {
     id: control
 
-    parent: T.ApplicationWindow.overlay
+    parent: T.Overlay.overlay
 
     implicitWidth: Math.max(background ? background.implicitWidth : 0, contentWidth + leftPadding + rightPadding)
     implicitHeight: Math.max(background ? background.implicitHeight : 0, contentHeight + topPadding + bottomPadding)
@@ -68,4 +68,12 @@ T.Drawer {
             y: control.edge === Qt.TopEdge ? parent.height - 1 : 0
         }
     }
+
+    T.Overlay.modal: Rectangle {
+        color: control.Universal.baseLowColor
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: control.Universal.baseLowColor
+    }
 }
diff --git a/src/imports/controls/universal/Menu.qml b/src/imports/controls/universal/Menu.qml
index 8ffefb1b..8b69051f 100644
--- a/src/imports/controls/universal/Menu.qml
+++ b/src/imports/controls/universal/Menu.qml
@@ -70,4 +70,12 @@ T.Menu {
         border.color: control.Universal.chromeHighColor
         border.width: 1 // FlyoutBorderThemeThickness
     }
+
+    T.Overlay.modal: Rectangle {
+        color: control.Universal.baseLowColor
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: control.Universal.baseLowColor
+    }
 }
diff --git a/src/imports/controls/universal/Popup.qml b/src/imports/controls/universal/Popup.qml
index f844d8e1..e44e953c 100644
--- a/src/imports/controls/universal/Popup.qml
+++ b/src/imports/controls/universal/Popup.qml
@@ -56,4 +56,12 @@ T.Popup {
         border.color: control.Universal.chromeHighColor
         border.width: 1 // FlyoutBorderThemeThickness
     }
+
+    T.Overlay.modal: Rectangle {
+        color: control.Universal.baseLowColor
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: control.Universal.baseLowColor
+    }
 }