Shapes example: use qqc2 components

Changing the example to use qt quick controls where it makes sense

Task-number: QTBUG-95739
Change-Id: Id0df227657693234de4481c2316dc6c3e0545043
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
(cherry picked from commit 5ae40afa970731ce976323f1a912b46bdff325d0)
Reviewed-by: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org>

25 files changed, 134 insertions, 122 deletions

diff --git a/examples/quick/shapes/content/clippedtigers.qml b/examples/quick/shapes/content/clippedtigers.qml
index c55efdc403..845eb959c1 100644
--- a/examples/quick/shapes/content/clippedtigers.qml
+++ b/examples/quick/shapes/content/clippedtigers.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the QtQuick module of the Qt Toolkit.
@@ -48,8 +48,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.9
-import QtQuick.Shapes 1.0
+import QtQuick
+import QtQuick.Shapes
 
 Rectangle {
     id: root
diff --git a/examples/quick/shapes/content/interactive.qml b/examples/quick/shapes/content/interactive.qml
index 1f7aad3ab0..015149c51d 100644
--- a/examples/quick/shapes/content/interactive.qml
+++ b/examples/quick/shapes/content/interactive.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the QtQuick module of the Qt Toolkit.
@@ -48,8 +48,9 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.9
-import QtQuick.Shapes 1.0
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Shapes
 
 Rectangle {
     id: root
@@ -72,88 +73,100 @@ Rectangle {
         x: 20
         y: 10
         spacing: 20
-        Rectangle {
-            border.color: "black"
-            color: root.mode === 0 ? "red" : "transparent"
+
+        Button {
+            id: radioButton1
+            checked: true
+            text: qsTr("Line")
+            onPressed: () => { root.mode = 0 }
+
             width: 100
             height: 40
-            Text {
-                anchors.centerIn: parent
-                text: "Line"
-            }
-            MouseArea {
+
+            background: Rectangle {
+                border.color: "black"
+                color: root.mode === 0 ? "red" : "transparent"
                 anchors.fill: parent
-                onClicked: root.mode = 0
             }
         }
-        Rectangle {
-            border.color: "black"
-            color: root.mode === 1 ? "red" : "transparent"
+
+        Button {
+            text: qsTr("Cubic")
+            onPressed: () => { root.mode = 1 }
+
             width: 100
             height: 40
-            Text {
-                anchors.centerIn: parent
-                text: "Cubic"
-            }
-            MouseArea {
+
+            background: Rectangle {
+                border.color: "black"
+                color: root.mode === 1 ? "red" : "transparent"
                 anchors.fill: parent
-                onClicked: root.mode = 1
             }
         }
-        Rectangle {
-            border.color: "black"
-            color: root.mode === 2 ? "red" : "transparent"
+
+        Button {
+            text: qsTr("Quadratic")
+            onPressed: () => { root.mode = 2 }
+
             width: 100
             height: 40
-            Text {
-                anchors.centerIn: parent
-                text: "Quadratic"
-            }
-            MouseArea {
+
+            background: Rectangle {
+                border.color: "black"
+                color: root.mode === 2 ? "red" : "transparent"
                 anchors.fill: parent
-                onClicked: root.mode = 2
             }
         }
 
-        Slider {
-            id: widthSlider
-            name: "Width"
-            min: 1
-            max: 60
-            init: 4
+        Row {
+            anchors.verticalCenter: radioButton1.verticalCenter
+            spacing: 12
+
+            Label {
+                text: qsTr("Width:")
+                anchors.verticalCenter: widthSlider.verticalCenter
+            }
+            Slider {
+                id: widthSlider
+                from: 1
+                to: 60
+                value: 4
+
+                anchors.verticalCenter: parent.verticalCenter
+            }
         }
 
-        Rectangle {
-            border.color: "black"
-            color: root.showResizers ? "yellow" : "transparent"
+        Button {
+            text: qsTr("Manip")
+            onPressed: () => {
+                  root.showResizers = !root.showResizers;
+                  for (var i = 0; i < canvas.resizers.length; ++i)
+                      canvas.resizers[i].visible = root.showResizers;
+            }
+
             width: 50
             height: 40
-            Text {
-                anchors.centerIn: parent
-                text: "Manip"
-            }
-            MouseArea {
+
+            background: Rectangle {
+                border.color: "black"
+                color: root.showResizers ? "yellow" : "transparent"
                 anchors.fill: parent
-                onClicked: {
-                    root.showResizers = !root.showResizers;
-                    for (var i = 0; i < canvas.resizers.length; ++i)
-                        canvas.resizers[i].visible = root.showResizers;
-                }
             }
         }
 
-        Rectangle {
-            border.color: "black"
-            color: root.fill ? "yellow" : "transparent"
+        Button {
+            text: qsTr("Fill")
+            onPressed: () => {
+                  root.fill = !root.fill
+            }
+
             width: 50
             height: 40
-            Text {
-                anchors.centerIn: parent
-                text: "Fill"
-            }
-            MouseArea {
+
+            background: Rectangle {
+                border.color: "black"
+                color: root.fill ? "yellow" : "transparent"
                 anchors.fill: parent
-                onClicked: root.fill = !root.fill
             }
         }
     }
diff --git a/examples/quick/shapes/content/item10.qml b/examples/quick/shapes/content/item10.qml
index e91342c2fe..38ecb302ba 100644
--- a/examples/quick/shapes/content/item10.qml
+++ b/examples/quick/shapes/content/item10.qml
@@ -48,8 +48,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.9
-import QtQuick.Shapes 1.0
+import QtQuick
+import QtQuick.Shapes
 
 Rectangle {
     color: "lightGray"
diff --git a/examples/quick/shapes/content/item11.qml b/examples/quick/shapes/content/item11.qml
index bdd08339e3..09cc2c8211 100644
--- a/examples/quick/shapes/content/item11.qml
+++ b/examples/quick/shapes/content/item11.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the QtQuick module of the Qt Toolkit.
@@ -48,8 +48,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.11
-import QtQuick.Shapes 1.0
+import QtQuick
+import QtQuick.Shapes
 
 Rectangle {
     color: "lightGray"
diff --git a/examples/quick/shapes/content/item12.qml b/examples/quick/shapes/content/item12.qml
index 8bdd1bfe50..6e39a90f55 100644
--- a/examples/quick/shapes/content/item12.qml
+++ b/examples/quick/shapes/content/item12.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the QtQuick module of the Qt Toolkit.
@@ -48,8 +48,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.9
-import QtQuick.Shapes 1.0
+import QtQuick
+import QtQuick.Shapes
 
 Rectangle {
     color: "lightGray"
diff --git a/examples/quick/shapes/content/item13.qml b/examples/quick/shapes/content/item13.qml
index 93160af7d8..2c0fdfa623 100644
--- a/examples/quick/shapes/content/item13.qml
+++ b/examples/quick/shapes/content/item13.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the QtQuick module of the Qt Toolkit.
@@ -48,8 +48,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.9
-import QtQuick.Shapes 1.0
+import QtQuick
+import QtQuick.Shapes
 
 Rectangle {
     color: "lightGray"
diff --git a/examples/quick/shapes/content/item14.qml b/examples/quick/shapes/content/item14.qml
index fd5b7d1048..b7fa8fa6ab 100644
--- a/examples/quick/shapes/content/item14.qml
+++ b/examples/quick/shapes/content/item14.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the QtQuick module of the Qt Toolkit.
@@ -48,8 +48,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.9
-import QtQuick.Shapes 1.0
+import QtQuick
+import QtQuick.Shapes
 
 Rectangle {
     color: "lightGray"
diff --git a/examples/quick/shapes/content/item15.qml b/examples/quick/shapes/content/item15.qml
index eb23b8b3c5..3530e5e0fb 100644
--- a/examples/quick/shapes/content/item15.qml
+++ b/examples/quick/shapes/content/item15.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the QtQuick module of the Qt Toolkit.
@@ -48,8 +48,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.9
-import QtQuick.Shapes 1.0
+import QtQuick
+import QtQuick.Shapes
 
 Rectangle {
     color: "lightGray"
diff --git a/examples/quick/shapes/content/item17.qml b/examples/quick/shapes/content/item17.qml
index 6ee03ddd04..366d8e329b 100644
--- a/examples/quick/shapes/content/item17.qml
+++ b/examples/quick/shapes/content/item17.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the QtQuick module of the Qt Toolkit.
@@ -48,8 +48,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.9
-import QtQuick.Shapes 1.0
+import QtQuick
+import QtQuick.Shapes
 
 Rectangle {
     color: "lightGray"
diff --git a/examples/quick/shapes/content/item18.qml b/examples/quick/shapes/content/item18.qml
index 192438408d..c61b070405 100644
--- a/examples/quick/shapes/content/item18.qml
+++ b/examples/quick/shapes/content/item18.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the QtQuick module of the Qt Toolkit.
@@ -48,8 +48,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.15
-import QtQuick.Shapes 1.0
+import QtQuick
+import QtQuick.Shapes
 
 Rectangle {
     color: "lightGray"
diff --git a/examples/quick/shapes/content/item2.qml b/examples/quick/shapes/content/item2.qml
index a033ba88c7..47841f1a68 100644
--- a/examples/quick/shapes/content/item2.qml
+++ b/examples/quick/shapes/content/item2.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the QtQuick module of the Qt Toolkit.
@@ -48,8 +48,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.9
-import QtQuick.Shapes 1.0
+import QtQuick
+import QtQuick.Shapes
 
 Rectangle {
     color: "lightGray"
diff --git a/examples/quick/shapes/content/item3.qml b/examples/quick/shapes/content/item3.qml
index 4274f260f3..bcf6c40c3c 100644
--- a/examples/quick/shapes/content/item3.qml
+++ b/examples/quick/shapes/content/item3.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2017 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the QtQuick module of the Qt Toolkit.
@@ -48,8 +48,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.9
-import QtQuick.Shapes 1.0
+import QtQuick
+import QtQuick.Shapes
 
 Rectangle {
     color: "lightGray"
diff --git a/examples/quick/shapes/content/item4.qml b/examples/quick/shapes/content/item4.qml
index 2b20c0a263..426fb144c2 100644
--- a/examples/quick/shapes/content/item4.qml
+++ b/examples/quick/shapes/content/item4.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the QtQuick module of the Qt Toolkit.
@@ -48,8 +48,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.9
-import QtQuick.Shapes 1.0
+import QtQuick
+import QtQuick.Shapes
 
 Rectangle {
     color: "lightGray"
diff --git a/examples/quick/shapes/content/item5.qml b/examples/quick/shapes/content/item5.qml
index 5fd25093ae..0eb9a4631e 100644
--- a/examples/quick/shapes/content/item5.qml
+++ b/examples/quick/shapes/content/item5.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the QtQuick module of the Qt Toolkit.
@@ -48,8 +48,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.9
-import QtQuick.Shapes 1.0
+import QtQuick
+import QtQuick.Shapes
 
 Rectangle {
     color: "lightGray"
diff --git a/examples/quick/shapes/content/item6.qml b/examples/quick/shapes/content/item6.qml
index f0791c30d2..6300ced608 100644
--- a/examples/quick/shapes/content/item6.qml
+++ b/examples/quick/shapes/content/item6.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the QtQuick module of the Qt Toolkit.
@@ -48,8 +48,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.9
-import QtQuick.Shapes 1.0
+import QtQuick
+import QtQuick.Shapes
 
 Rectangle {
     color: "lightGray"
diff --git a/examples/quick/shapes/content/item7.qml b/examples/quick/shapes/content/item7.qml
index ff5c5702da..ed34c1de77 100644
--- a/examples/quick/shapes/content/item7.qml
+++ b/examples/quick/shapes/content/item7.qml
@@ -48,8 +48,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.9
-import QtQuick.Shapes 1.0
+import QtQuick
+import QtQuick.Shapes
 
 Rectangle {
     color: "lightGray"
diff --git a/examples/quick/shapes/content/item8.qml b/examples/quick/shapes/content/item8.qml
index 07f633fa56..cc06a48501 100644
--- a/examples/quick/shapes/content/item8.qml
+++ b/examples/quick/shapes/content/item8.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the QtQuick module of the Qt Toolkit.
@@ -48,8 +48,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.9
-import QtQuick.Shapes 1.0
+import QtQuick
+import QtQuick.Shapes
 
 Rectangle {
     color: "lightGray"
diff --git a/examples/quick/shapes/content/item9.qml b/examples/quick/shapes/content/item9.qml
index 4e5b4022b6..c4ef8ccf79 100644
--- a/examples/quick/shapes/content/item9.qml
+++ b/examples/quick/shapes/content/item9.qml
@@ -48,8 +48,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.9
-import QtQuick.Shapes 1.0
+import QtQuick
+import QtQuick.Shapes
 
 Rectangle {
     color: "lightGray"
diff --git a/examples/quick/shapes/content/main.qml b/examples/quick/shapes/content/main.qml
index 8efa47d30b..b5ed88cc52 100644
--- a/examples/quick/shapes/content/main.qml
+++ b/examples/quick/shapes/content/main.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the QtQuick module of the Qt Toolkit.
@@ -48,7 +48,7 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick
 
 Item {
     width: 1280
diff --git a/examples/quick/shapes/content/sampling.qml b/examples/quick/shapes/content/sampling.qml
index 6b651f8a1d..ca45a3ab7c 100644
--- a/examples/quick/shapes/content/sampling.qml
+++ b/examples/quick/shapes/content/sampling.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the QtQuick module of the Qt Toolkit.
@@ -48,8 +48,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.9
-import QtQuick.Shapes 1.0
+import QtQuick
+import QtQuick.Shapes
 
 Rectangle {
     id: root
diff --git a/examples/quick/shapes/content/shapegallery.qml b/examples/quick/shapes/content/shapegallery.qml
index e5a7c51483..6870ea1465 100644
--- a/examples/quick/shapes/content/shapegallery.qml
+++ b/examples/quick/shapes/content/shapegallery.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the QtQuick module of the Qt Toolkit.
@@ -48,8 +48,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.9
-import QtQuick.Shapes 1.0
+import QtQuick
+import QtQuick.Shapes
 
 Rectangle {
     id: root
diff --git a/examples/quick/shapes/content/tapableTriangle.qml b/examples/quick/shapes/content/tapableTriangle.qml
index 22ed577bcb..cc33bae9a0 100644
--- a/examples/quick/shapes/content/tapableTriangle.qml
+++ b/examples/quick/shapes/content/tapableTriangle.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2018 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the QtQuick module of the Qt Toolkit.
@@ -48,8 +48,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.12
-import QtQuick.Shapes 1.12
+import QtQuick
+import QtQuick.Shapes
 
 Rectangle {
     width: 120
diff --git a/examples/quick/shapes/content/tiger.qml b/examples/quick/shapes/content/tiger.qml
index 371db791b0..0bdef97675 100644
--- a/examples/quick/shapes/content/tiger.qml
+++ b/examples/quick/shapes/content/tiger.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2018 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the QtQuick module of the Qt Toolkit.
@@ -48,8 +48,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.12
-import QtQuick.Shapes 1.12
+import QtQuick
+import QtQuick.Shapes
 
 Shape {
     asynchronous: true
diff --git a/examples/quick/shapes/main.cpp b/examples/quick/shapes/main.cpp
index 60f6c98f42..8e3e1137f8 100644
--- a/examples/quick/shapes/main.cpp
+++ b/examples/quick/shapes/main.cpp
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the examples of the Qt Toolkit.
diff --git a/examples/quick/shapes/shapes.qrc b/examples/quick/shapes/shapes.qrc
index 6de463dd33..ca8024e6af 100644
--- a/examples/quick/shapes/shapes.qrc
+++ b/examples/quick/shapes/shapes.qrc
@@ -5,7 +5,6 @@
         <file alias="images/next.png">../shared/images/next.png</file>
         <file alias="images/back.png">../shared/images/back.png</file>
         <file alias="images/slider_handle.png">../shared/images/slider_handle.png</file>
-        <file alias="Slider.qml">../shared/Slider.qml</file>
         <file alias="main.qml">content/main.qml</file>
         <file alias="shapegallery.qml">content/shapegallery.qml</file>
         <file alias="interactive.qml">content/interactive.qml</file>