Update customdialogs example to work with Quick Controls 2

Task-number: QTBUG-93666
Change-Id: I3716454d7a0560f58a0e2da363b1d053babe824b
Reviewed-by: Michal Klocek <michal.klocek@qt.io>
(cherry picked from commit 37cb5c751e85cb39c9098008ea21d5977c6364bc)
Reviewed-by: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org>

24 files changed, 70 insertions, 83 deletions

diff --git a/examples/webengine/customdialogs/CMakeLists.txt b/examples/webengine/customdialogs/CMakeLists.txt
index 7f8e61c98..93127f37d 100644
--- a/examples/webengine/customdialogs/CMakeLists.txt
+++ b/examples/webengine/customdialogs/CMakeLists.txt
@@ -39,10 +39,10 @@ set(customdialogs_resource_files
     "WebView.qml"
     "forms/Authentication.qml"
     "forms/AuthenticationForm.ui.qml"
-    "forms/Button.qml"
     "forms/ColorCell.qml"
     "forms/ColorPicker.qml"
     "forms/ColorPickerForm.ui.qml"
+    "forms/CustomButton.qml"
     "forms/FilePicker.qml"
     "forms/FilePickerForm.ui.qml"
     "forms/FileRow.qml"
diff --git a/examples/webengine/customdialogs/MessageRectangle.qml b/examples/webengine/customdialogs/MessageRectangle.qml
index d5a4621cc..880cf27d5 100644
--- a/examples/webengine/customdialogs/MessageRectangle.qml
+++ b/examples/webengine/customdialogs/MessageRectangle.qml
@@ -48,7 +48,7 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick
 
 Rectangle {
     property alias text: messageText.text
diff --git a/examples/webengine/customdialogs/SwitchButton.qml b/examples/webengine/customdialogs/SwitchButton.qml
index bb9a344f5..55005899a 100644
--- a/examples/webengine/customdialogs/SwitchButton.qml
+++ b/examples/webengine/customdialogs/SwitchButton.qml
@@ -48,9 +48,9 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
-import QtQuick.Controls 1.4 as Controls
-import QtQuick.Layouts 1.3
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
 
 Item {
     width: parent.width
@@ -62,7 +62,7 @@ Item {
             text: qsTr("Use default dialogs")
             font.pointSize: 12
         }
-        Controls.Switch {
+        Switch {
             id: switcher
             checked: true
         }
diff --git a/examples/webengine/customdialogs/WebView.qml b/examples/webengine/customdialogs/WebView.qml
index d754ea7dc..5d388e467 100644
--- a/examples/webengine/customdialogs/WebView.qml
+++ b/examples/webengine/customdialogs/WebView.qml
@@ -48,8 +48,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
-import QtWebEngine 1.10
+import QtQuick
+import QtWebEngine
 
 WebEngineView {
 
diff --git a/examples/webengine/customdialogs/customdialogs.qrc b/examples/webengine/customdialogs/customdialogs.qrc
index 5ab5b11cd..bb2677198 100644
--- a/examples/webengine/customdialogs/customdialogs.qrc
+++ b/examples/webengine/customdialogs/customdialogs.qrc
@@ -2,10 +2,10 @@
     <qresource prefix="/">
         <file>forms/AuthenticationForm.ui.qml</file>
         <file>forms/Authentication.qml</file>
-        <file>forms/Button.qml</file>
         <file>forms/ColorCell.qml</file>
         <file>forms/ColorPickerForm.ui.qml</file>
         <file>forms/ColorPicker.qml</file>
+        <file>forms/CustomButton.qml</file>
         <file>forms/FilePickerForm.ui.qml</file>
         <file>forms/FilePicker.qml</file>
         <file>forms/FileRow.qml</file>
diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-auth1.png b/examples/webengine/customdialogs/doc/images/customdialogs-auth1.png
index 5e8f8d6bd..042712f5c 100644
--- a/examples/webengine/customdialogs/doc/images/customdialogs-auth1.png
+++ b/examples/webengine/customdialogs/doc/images/customdialogs-auth1.png
diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-color1.png b/examples/webengine/customdialogs/doc/images/customdialogs-color1.png
deleted file mode 100644
index 9208045b2..000000000
--- a/examples/webengine/customdialogs/doc/images/customdialogs-color1.png
+++ /dev/null
diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-file1.png b/examples/webengine/customdialogs/doc/images/customdialogs-file1.png
deleted file mode 100644
index ba8bdf78c..000000000
--- a/examples/webengine/customdialogs/doc/images/customdialogs-file1.png
+++ /dev/null
diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-prompt1.png b/examples/webengine/customdialogs/doc/images/customdialogs-prompt1.png
index e36ba4a13..c34080b4d 100644
--- a/examples/webengine/customdialogs/doc/images/customdialogs-prompt1.png
+++ b/examples/webengine/customdialogs/doc/images/customdialogs-prompt1.png
diff --git a/examples/webengine/customdialogs/doc/src/customdialogs.qdoc b/examples/webengine/customdialogs/doc/src/customdialogs.qdoc
index 16eab0b6c..b75417456 100644
--- a/examples/webengine/customdialogs/doc/src/customdialogs.qdoc
+++ b/examples/webengine/customdialogs/doc/src/customdialogs.qdoc
@@ -253,7 +253,7 @@
 
     \section2  Color Dialog Requests
 
-    \image customdialogs-color1.png
+    Currently, Qt WebEngine does not provide Color Dialog, a custom dialog should be implemented.
 
     \l [QML]{ColorDialogRequest} is a request object that is passed as a
     parameter of the WebEngineView::colorDialogRequested signal:
@@ -273,8 +273,8 @@
     \printline }
 
     We use the \c onColorDialogRequested signal handler to check whether
-    we should use the default color picker dialog. If not, we accept the request
-    and switch the view to show the \c ColorPickerForm:
+    we should use the default color picker dialog (which currently is not provided).
+    If not, we accept the request and switch the view to show the \c ColorPickerForm:
 
     \image customdialogs-color2.png
 
@@ -294,7 +294,7 @@
 
     \section2  File Dialog Requests
 
-    \image customdialogs-file1.png
+    Currently, Qt WebEngine does not provide File Dialog, a custom dialog should be implemented.
 
     \l [QML]{FileDialogRequest} is a request object that is passed as a
     parameter of the WebEngineView::fileDialogRequested signal:
@@ -309,8 +309,8 @@
     \printuntil }
 
     We use the \c onFileDialogRequested signal handler to check whether
-    we should use the default color picker dialog. If not, we accept the request
-    and switch the view to show the \c FilePickerForm:
+    we should use the default file picker dialog (which currently is not provided).
+    If not, we accept the request and switch the view to show the \c FilePickerForm:
 
     \image customdialogs-file2.png
 
diff --git a/examples/webengine/customdialogs/forms/Authentication.qml b/examples/webengine/customdialogs/forms/Authentication.qml
index e8995eebc..6365db9c3 100644
--- a/examples/webengine/customdialogs/forms/Authentication.qml
+++ b/examples/webengine/customdialogs/forms/Authentication.qml
@@ -48,8 +48,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.4
-import QtWebEngine 1.4
+import QtQuick
+import QtWebEngine
 
 AuthenticationForm {
     property QtObject request
diff --git a/examples/webengine/customdialogs/forms/AuthenticationForm.ui.qml b/examples/webengine/customdialogs/forms/AuthenticationForm.ui.qml
index 8b8523388..ab334aae0 100644
--- a/examples/webengine/customdialogs/forms/AuthenticationForm.ui.qml
+++ b/examples/webengine/customdialogs/forms/AuthenticationForm.ui.qml
@@ -48,9 +48,9 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.4
-import QtQuick.Layouts 1.3
-import QtQuick.Controls 1.0 as Controls
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
 
 Item {
     id: item1
@@ -79,10 +79,7 @@ Item {
         Rectangle {
             id: rectangle
             height: 30
-            anchors.rightMargin: 0
-            anchors.leftMargin: 0
-            anchors.right: parent.right
-            anchors.left: parent.left
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
             gradient: Gradient {
                 GradientStop {
                     position: 0
@@ -116,7 +113,7 @@ Item {
             font.pointSize: 12
         }
 
-        Controls.TextField {
+        TextField {
             id: userName
             width: 300
             height: 22
@@ -130,7 +127,7 @@ Item {
             font.pointSize: 12
         }
 
-        Controls.TextField {
+        TextField {
             id: password
             width: 300
             height: 26
@@ -151,7 +148,7 @@ Item {
                 Layout.fillWidth: true
             }
 
-            Button {
+            CustomButton {
                 id: cancelButton
                 width: 90
                 height: 30
@@ -159,7 +156,7 @@ Item {
                 btnBlue: false
             }
 
-            Button {
+            CustomButton {
                 id: loginButton
                 width: 90
                 height: 30
diff --git a/examples/webengine/customdialogs/forms/ColorCell.qml b/examples/webengine/customdialogs/forms/ColorCell.qml
index 0da029357..495a2900c 100644
--- a/examples/webengine/customdialogs/forms/ColorCell.qml
+++ b/examples/webengine/customdialogs/forms/ColorCell.qml
@@ -48,7 +48,7 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.4
+import QtQuick
 
 Rectangle {
     id: rectangle
@@ -58,6 +58,6 @@ Rectangle {
     MouseArea {
         id: mouseArea
         anchors.fill: parent
-        onClicked: rectangle.clicked(color)
+        onClicked: rectangle.clicked()
     }
 }
diff --git a/examples/webengine/customdialogs/forms/ColorPicker.qml b/examples/webengine/customdialogs/forms/ColorPicker.qml
index 6684db2c6..7c1545c43 100644
--- a/examples/webengine/customdialogs/forms/ColorPicker.qml
+++ b/examples/webengine/customdialogs/forms/ColorPicker.qml
@@ -48,7 +48,7 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.4
+import QtQuick
 
 ColorPickerForm {
     property QtObject request
diff --git a/examples/webengine/customdialogs/forms/ColorPickerForm.ui.qml b/examples/webengine/customdialogs/forms/ColorPickerForm.ui.qml
index 611244867..c2de234e7 100644
--- a/examples/webengine/customdialogs/forms/ColorPickerForm.ui.qml
+++ b/examples/webengine/customdialogs/forms/ColorPickerForm.ui.qml
@@ -48,8 +48,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.4
-import QtQuick.Layouts 1.3
+import QtQuick
+import QtQuick.Layouts
 
 Item {
     property alias cancelButton: cancelButton
@@ -78,10 +78,7 @@ Item {
 
         Rectangle {
             height: 30
-            anchors.rightMargin: 0
-            anchors.leftMargin: 0
-            anchors.right: parent.right
-            anchors.left: parent.left
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
             gradient: Gradient {
                 GradientStop {
                     position: 0
@@ -215,7 +212,7 @@ Item {
                 Layout.fillWidth: true
             }
 
-            Button {
+            CustomButton {
                 id: cancelButton
                 width: 90
                 height: 30
@@ -223,7 +220,7 @@ Item {
                 btnBlue: false
             }
 
-            Button {
+            CustomButton {
                 id: okButton
                 width: 90
                 height: 30
diff --git a/examples/webengine/customdialogs/forms/Button.qml b/examples/webengine/customdialogs/forms/CustomButton.qml
index 474f514d2..3ab90a752 100644
--- a/examples/webengine/customdialogs/forms/Button.qml
+++ b/examples/webengine/customdialogs/forms/CustomButton.qml
@@ -48,7 +48,7 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.4
+import QtQuick
 
 Rectangle {
     id: root
diff --git a/examples/webengine/customdialogs/forms/FilePicker.qml b/examples/webengine/customdialogs/forms/FilePicker.qml
index 77a9c604c..97acda326 100644
--- a/examples/webengine/customdialogs/forms/FilePicker.qml
+++ b/examples/webengine/customdialogs/forms/FilePicker.qml
@@ -48,7 +48,7 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.4
+import QtQuick
 
 FilePickerForm {
     property QtObject request
diff --git a/examples/webengine/customdialogs/forms/FilePickerForm.ui.qml b/examples/webengine/customdialogs/forms/FilePickerForm.ui.qml
index 9c69204b4..8a230c982 100644
--- a/examples/webengine/customdialogs/forms/FilePickerForm.ui.qml
+++ b/examples/webengine/customdialogs/forms/FilePickerForm.ui.qml
@@ -48,8 +48,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.4
-import QtQuick.Layouts 1.3
+import QtQuick
+import QtQuick.Layouts
 
 Item {
     property alias cancelButton: cancelButton
@@ -78,10 +78,7 @@ Item {
         Rectangle {
             id: rectangle
             height: 30
-            anchors.rightMargin: 0
-            anchors.leftMargin: 0
-            anchors.right: parent.right
-            anchors.left: parent.left
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
             gradient: Gradient {
                 GradientStop {
                     position: 0
@@ -157,7 +154,7 @@ Item {
                 Layout.fillWidth: true
             }
 
-            Button {
+            CustomButton {
                 id: cancelButton
                 width: 90
                 height: 30
@@ -165,7 +162,7 @@ Item {
                 btnBlue: false
             }
 
-            Button {
+            CustomButton {
                 id: okButton
                 width: 90
                 height: 30
diff --git a/examples/webengine/customdialogs/forms/FileRow.qml b/examples/webengine/customdialogs/forms/FileRow.qml
index 6946c633d..0356dceae 100644
--- a/examples/webengine/customdialogs/forms/FileRow.qml
+++ b/examples/webengine/customdialogs/forms/FileRow.qml
@@ -48,9 +48,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.4
-import QtQuick.Layouts 1.3
-import QtQuick.Controls 1.0 as Controls
+import QtQuick
+import QtQuick.Layouts
 
 Item {
     id: root
diff --git a/examples/webengine/customdialogs/forms/JavaScript.qml b/examples/webengine/customdialogs/forms/JavaScript.qml
index 08d0227dc..61e009e54 100644
--- a/examples/webengine/customdialogs/forms/JavaScript.qml
+++ b/examples/webengine/customdialogs/forms/JavaScript.qml
@@ -48,8 +48,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.4
-import QtWebEngine 1.4
+import QtQuick
+import QtWebEngine
 
 JavaScriptForm {
     property QtObject request
diff --git a/examples/webengine/customdialogs/forms/JavaScriptForm.ui.qml b/examples/webengine/customdialogs/forms/JavaScriptForm.ui.qml
index 1c7fd29ed..14d9dc304 100644
--- a/examples/webengine/customdialogs/forms/JavaScriptForm.ui.qml
+++ b/examples/webengine/customdialogs/forms/JavaScriptForm.ui.qml
@@ -48,9 +48,9 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.4
-import QtQuick.Layouts 1.3
-import QtQuick.Controls 1.0 as Controls
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
 
 Item {
     id: item
@@ -80,10 +80,7 @@ Item {
         Rectangle {
             id: rectangle
             height: 30
-            anchors.rightMargin: 0
-            anchors.leftMargin: 0
-            anchors.right: parent.right
-            anchors.left: parent.left
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
             gradient: Gradient {
                 GradientStop {
                     position: 0
@@ -118,7 +115,7 @@ Item {
             font.pointSize: 12
         }
 
-        Controls.TextField {
+        TextField {
             id: prompt
             width: 300
             height: 22
@@ -139,7 +136,7 @@ Item {
                 Layout.fillWidth: true
             }
 
-            Button {
+            CustomButton {
                 id: cancelButton
                 width: 90
                 height: 30
@@ -147,7 +144,7 @@ Item {
                 btnBlue: false
             }
 
-            Button {
+            CustomButton {
                 id: okButton
                 width: 90
                 height: 30
diff --git a/examples/webengine/customdialogs/forms/Menu.qml b/examples/webengine/customdialogs/forms/Menu.qml
index f1b692e07..4f7f9f9e6 100644
--- a/examples/webengine/customdialogs/forms/Menu.qml
+++ b/examples/webengine/customdialogs/forms/Menu.qml
@@ -48,7 +48,7 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.4
+import QtQuick
 
 MenuForm {
     property QtObject request
diff --git a/examples/webengine/customdialogs/forms/MenuForm.ui.qml b/examples/webengine/customdialogs/forms/MenuForm.ui.qml
index 6126f0623..cba7a1b3f 100644
--- a/examples/webengine/customdialogs/forms/MenuForm.ui.qml
+++ b/examples/webengine/customdialogs/forms/MenuForm.ui.qml
@@ -48,8 +48,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.4
-import QtQuick.Layouts 1.3
+import QtQuick
+import QtQuick.Layouts
 
 Item {
     property alias followLink: followLink
@@ -73,41 +73,40 @@ Item {
             source: "qrc:/icon.svg"
         }
 
-        Button {
+        CustomButton {
             id: followLink
             btnText: qsTr("Follow")
         }
 
-        Button {
+        CustomButton {
             id: back
             btnText: qsTr("Back")
         }
 
-        Button {
+        CustomButton {
             id: forward
             btnText: qsTr("Forward")
         }
 
-        Button {
+        CustomButton {
             id: reload
             btnText: qsTr("Reload")
         }
 
-        Button {
+        CustomButton {
             id: copyLinkUrl
             btnText: qsTr("Copy Link URL")
         }
 
-        Button {
+        CustomButton {
             id: saveLink
             btnText: qsTr("Save Link")
         }
 
-        Button {
+        CustomButton {
             id: close
             btnBlue: false
             btnText: qsTr("Close")
         }
-
     }
 }
diff --git a/examples/webengine/customdialogs/main.qml b/examples/webengine/customdialogs/main.qml
index 00fa016c6..a5ff925b4 100644
--- a/examples/webengine/customdialogs/main.qml
+++ b/examples/webengine/customdialogs/main.qml
@@ -48,24 +48,25 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
-import QtQuick.Controls 1.4 as Controls
-import QtQuick.Layouts 1.3
-import QtQuick.Window 2.0
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
 
 Window {
+    id: mainWindow
     width: 350
     height: 550
     visible: true
 
-    Controls.StackView {
+    StackView {
         id: stackView
         anchors.fill: parent
         focus: true
         initialItem: Item {
             id: main
-            width: parent.width
-            height: parent.height
+            width: mainWindow.width
+            height: mainWindow.height
             ColumnLayout {
                 anchors.fill: parent
                 SwitchButton {
@@ -88,7 +89,7 @@ Window {
 
         function openForm(form)
         {
-            push(form);
+            push(form.item, form.properties);
             currentItem.closeForm.connect(closeForm);
         }