Update Responsive Layouts Example

Fixes: QTBUG-119388
Change-Id: I66c7bf0e0aaba13a04b9cc7e6f042ded47e0b0b1
Reviewed-by: Jan Arve Sæther <jan-arve.saether@qt.io>

7 files changed, 69 insertions, 42 deletions

diff --git a/examples/quick/responsivelayouts/CMakeLists.txt b/examples/quick/responsivelayouts/CMakeLists.txt
index 481a1f9460..9404987e0f 100644
--- a/examples/quick/responsivelayouts/CMakeLists.txt
+++ b/examples/quick/responsivelayouts/CMakeLists.txt
@@ -24,6 +24,10 @@ qt_add_qml_module(responsivelayoutsexample
     URI responsivelayouts
     QML_FILES
         "responsivelayouts.qml"
+    RESOURCES
+        "icons/grid.svg"
+        "icons/text.svg"
+        "icons/settings.svg"
 )
 
 target_link_libraries(responsivelayoutsexample PRIVATE
diff --git a/examples/quick/responsivelayouts/doc/images/qtquicklayouts-example-responsivelayouts.png b/examples/quick/responsivelayouts/doc/images/qtquicklayouts-example-responsivelayouts.png
index f08ef1d6cb..4cc8c14098 100644
--- a/examples/quick/responsivelayouts/doc/images/qtquicklayouts-example-responsivelayouts.png
+++ b/examples/quick/responsivelayouts/doc/images/qtquicklayouts-example-responsivelayouts.png
diff --git a/examples/quick/responsivelayouts/icons/grid.svg b/examples/quick/responsivelayouts/icons/grid.svg
new file mode 100644
index 0000000000..fd542d7dc4
--- /dev/null
+++ b/examples/quick/responsivelayouts/icons/grid.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 13C2.89543 13 2 13.8954 2 15V20C2 21.1046 2.89543 22 4 22H9C10.1046 22 11 21.1046 11 20V15C11 13.8954 10.1046 13 9 13H4ZM15 13C13.8954 13 13 13.8954 13 15V20C13 21.1046 13.8954 22 15 22H20C21.1046 22 22 21.1046 22 20V15C22 13.8954 21.1046 13 20 13H15Z" fill="#0D0D0D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 2C2.89543 2 2 2.89543 2 4V9C2 10.1046 2.89543 11 4 11H9C10.1046 11 11 10.1046 11 9V4C11 2.89543 10.1046 2 9 2H4ZM15 2C13.8954 2 13 2.89543 13 4V9C13 10.1046 13.8954 11 15 11H20C21.1046 11 22 10.1046 22 9V4C22 2.89543 21.1046 2 20 2H15Z" fill="#0D0D0D"/>
+</svg>
diff --git a/examples/quick/responsivelayouts/icons/settings.svg b/examples/quick/responsivelayouts/icons/settings.svg
new file mode 100644
index 0000000000..3a13ccae16
--- /dev/null
+++ b/examples/quick/responsivelayouts/icons/settings.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.84998 4C8.84998 2.89543 9.74541 2 10.85 2H13.1222C14.2268 2 15.1222 2.89543 15.1222 4V4.59509C15.1229 4.59732 15.125 4.6023 15.1306 4.61031C15.1434 4.62838 15.1691 4.65242 15.2077 4.66935C15.852 4.95163 16.4515 5.31609 16.9931 5.74921C17.0261 5.77554 17.0594 5.787 17.0815 5.78982C17.0912 5.79106 17.0966 5.79055 17.0989 5.79008L17.9363 5.33741C18.8691 4.8332 20.0332 5.14455 20.5897 6.04706L21.6744 7.80604C22.2777 8.78435 21.9342 10.0686 20.9231 10.6152L19.9875 11.1209C19.9859 11.1226 19.9824 11.1269 19.9781 11.1358C19.9683 11.156 19.9595 11.1904 19.9636 11.2327C19.9877 11.4855 20 11.7414 20 12C20 12.2586 19.9877 12.5145 19.9636 12.7673C19.9595 12.8096 19.9683 12.844 19.9781 12.8642C19.9824 12.8732 19.9859 12.8774 19.9875 12.8791L20.923 13.3848C21.9341 13.9314 22.2776 15.2157 21.6743 16.194L20.5897 17.9529C20.0331 18.8554 18.869 19.1668 17.9362 18.6626L17.0989 18.2099C17.0966 18.2095 17.0912 18.209 17.0815 18.2102C17.0594 18.213 17.026 18.2245 16.9931 18.2508C16.4515 18.6839 15.852 19.0484 15.2077 19.3306C15.1691 19.3476 15.1434 19.3716 15.1306 19.3897C15.125 19.3977 15.1229 19.4027 15.1222 19.4049V20C15.1222 21.1046 14.2268 22 13.1222 22H10.85C9.74541 22 8.84998 21.1046 8.84998 20V19.3928C8.84931 19.3906 8.84725 19.3857 8.84163 19.3777C8.82894 19.3597 8.80351 19.3357 8.76508 19.3187C8.12675 19.0362 7.53272 18.6729 6.99586 18.242C6.96292 18.2156 6.92951 18.2041 6.90737 18.2012C6.89759 18.2 6.8922 18.2005 6.8899 18.201L6.03592 18.6626C5.10317 19.1668 3.93904 18.8554 3.38251 17.9529L2.29784 16.194C1.69457 15.2156 2.03805 13.9314 3.04914 13.3848L4.01099 12.8649C4.01265 12.8632 4.01607 12.859 4.02042 12.85C4.03023 12.8299 4.03897 12.7956 4.03503 12.7534C4.0118 12.5051 3.99995 12.2538 3.99995 12C3.99995 11.7462 4.0118 11.4949 4.03503 11.2466C4.03897 11.2045 4.03022 11.1701 4.02042 11.15C4.01607 11.1411 4.01265 11.1368 4.01098 11.1352L3.04909 10.6152C2.038 10.0686 1.69452 8.78435 2.29779 7.80604L3.38245 6.04707C3.93898 5.14456 5.10312 4.83322 6.03587 5.33742L6.88988 5.79907C6.89218 5.79953 6.89757 5.80005 6.90735 5.79879C6.92949 5.79594 6.9629 5.78441 6.99584 5.75797C7.53271 5.32709 8.12674 4.96379 8.76508 4.68128C8.80351 4.66427 8.82894 4.64029 8.84163 4.62231C8.84725 4.61434 8.84931 4.60938 8.84998 4.60716V4ZM8.85024 4.60578C8.85029 4.60578 8.85026 4.60619 8.85001 4.60703L8.85024 4.60578ZM6.88852 5.79864C6.88854 5.7986 6.88898 5.79869 6.88977 5.79904L6.88852 5.79864ZM4.00988 11.1343C4.00991 11.1342 4.01026 11.1344 4.0109 11.1351L4.00988 11.1343ZM4.00989 12.8658C4.00988 12.8657 4.01021 12.8654 4.01091 12.865L4.00989 12.8658ZM6.88854 18.2014C6.88851 18.2013 6.8889 18.2012 6.88979 18.201L6.88854 18.2014ZM19.9886 12.88C19.9885 12.88 19.9881 12.8797 19.9876 12.8792L19.9886 12.88ZM19.9886 11.12C19.9887 11.12 19.9883 11.1204 19.9876 11.1208L19.9886 11.12ZM17.1003 5.78965C17.1003 5.78968 17.0999 5.78986 17.099 5.79006L17.1003 5.78965ZM15.122 4.5937C15.122 4.59371 15.1221 4.59414 15.1222 4.59496L15.122 4.5937ZM13.1222 4L10.85 4V4.60808C10.85 5.49562 10.2774 6.19908 9.57449 6.51017C9.09654 6.7217 8.65096 6.99408 8.24769 7.31774C7.63839 7.80676 6.73261 7.98755 5.93958 7.55888L5.08481 7.09682L4.00015 8.8558L4.9628 9.37617C5.7538 9.80375 6.09888 10.6574 6.02633 11.4329C6.00889 11.6193 5.99995 11.8085 5.99995 12C5.99995 12.1915 6.00889 12.3807 6.02633 12.5671C6.09889 13.3426 5.75381 14.1963 4.9628 14.6239L4.0002 15.1442L5.08486 16.9032L5.9396 16.4411C6.73263 16.0125 7.63841 16.1933 8.2477 16.6823C8.65097 17.0059 9.09654 17.2783 9.57449 17.4898C10.2774 17.8009 10.85 18.5044 10.85 19.3919V20H13.1222V19.404C13.1222 18.5133 13.6987 17.8083 14.4051 17.4988C14.8875 17.2874 15.3372 17.0142 15.744 16.6889C16.3532 16.2017 17.2575 16.0222 18.0492 16.4501L18.8873 16.9032L19.972 15.1442L19.0357 14.6381C18.2434 14.2098 17.8986 13.3541 17.9726 12.5776C17.9907 12.3878 18 12.1951 18 12C18 11.8049 17.9907 11.6123 17.9726 11.4224C17.8986 10.6459 18.2434 9.79023 19.0357 9.36192L19.972 8.85579L18.8874 7.09681L18.0492 7.54989C17.2575 7.97786 16.3532 7.79836 15.744 7.31116C15.3372 6.98582 14.8875 6.71259 14.4051 6.50124C13.6987 6.19173 13.1222 5.48675 13.1222 4.596L13.1222 4Z" fill="#0D0D0D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z" fill="#0D0D0D"/>
+</svg>
diff --git a/examples/quick/responsivelayouts/icons/text.svg b/examples/quick/responsivelayouts/icons/text.svg
new file mode 100644
index 0000000000..a5066b7aff
--- /dev/null
+++ b/examples/quick/responsivelayouts/icons/text.svg
@@ -0,0 +1,4 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 11C3.94772 11 3.5 11.4477 3.5 12C3.5 12.5523 3.94772 13 4.5 13H20.5C21.0523 13 21.5 12.5523 21.5 12C21.5 11.4477 21.0523 11 20.5 11H4.5ZM3.5 16C3.5 15.4477 3.94772 15 4.5 15H20.5C21.0523 15 21.5 15.4477 21.5 16C21.5 16.5523 21.0523 17 20.5 17H4.5C3.94772 17 3.5 16.5523 3.5 16ZM3.5 20C3.5 19.4477 3.94772 19 4.5 19H20.5C21.0523 19 21.5 19.4477 21.5 20C21.5 20.5523 21.0523 21 20.5 21H4.5C3.94772 21 3.5 20.5523 3.5 20Z" fill="#0D0D0D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 3C3.94772 3 3.5 3.44772 3.5 4C3.5 4.55228 3.94772 5 4.5 5H20.5C21.0523 5 21.5 4.55228 21.5 4C21.5 3.44772 21.0523 3 20.5 3H4.5ZM4.5 7C3.94772 7 3.5 7.44772 3.5 8C3.5 8.55228 3.94772 9 4.5 9H20.5C21.0523 9 21.5 8.55228 21.5 8C21.5 7.44772 21.0523 7 20.5 7H4.5Z" fill="#0D0D0D"/>
+</svg>
diff --git a/examples/quick/responsivelayouts/responsivelayouts.qml b/examples/quick/responsivelayouts/responsivelayouts.qml
index f15ca6e729..4762c2c923 100644
--- a/examples/quick/responsivelayouts/responsivelayouts.qml
+++ b/examples/quick/responsivelayouts/responsivelayouts.qml
@@ -14,65 +14,72 @@ Window {
     minimumHeight: 500
     minimumWidth: 250
 
-    component AnnotatedRect : Rectangle {
-        implicitWidth: 36
-        implicitHeight: 36
-        Layout.minimumWidth: 36
-        Layout.minimumHeight: 36
-        Layout.alignment: Qt.AlignHCenter
-        property string text: ""
-        border.color: "#EEE"
-        border.width: hh.hovered ? 2 : 0
-        HoverHandler { id: hh }
-        Text {
-            font.pixelSize: 18
-            font.bold: true
-            anchors.centerIn: parent
-            text: parent.text
-            color: "#333"
-        }
-    }
-
     //! [item definition]
-    AnnotatedRect {
+    Rectangle {
         id: contentItem
-        text: "Content Item"
         Layout.fillWidth: true
-        implicitHeight: 1000
-        implicitWidth: 500
-        gradient: Gradient {
-            GradientStop { position: 0.0; color: "tomato" }
-            GradientStop { position: 0.5; color: "navajowhite" }
-            GradientStop { position: 1.0; color: "darkseagreen" }
+        implicitHeight: grid.implicitHeight
+        implicitWidth: grid.implicitWidth
+        color: "#00414A"
+
+        GridLayout {
+            anchors.fill: parent
+            id: grid
+            columns: 2
+            anchors.margins: 8
+            Repeater {
+                model: 18
+                Rectangle {
+                    Layout.fillWidth: true
+                    Layout.margins: 8
+                    implicitWidth: 200
+                    implicitHeight: width
+                    radius: width / 10
+                    gradient: Gradient {
+                        GradientStop { position: -0.2; color: "#2CDE85" }
+                        GradientStop { position: 1.2; color: "#00414A" }
+                    }
+                    Text {
+                        color: "#ffffff"
+                        font.pointSize: 22
+                        anchors.centerIn: parent
+                        text: index
+                    }
+                }
+            }
         }
     }
 
-    AnnotatedRect {
+    Button {
         id: a
-        text: "A"
-        color: "lightskyblue"
+        text: "Text"
+        icon.source: "./icons/text.svg"
         Layout.fillWidth: true
+        Layout.margins: 3
     }
 
-    AnnotatedRect {
+    Button {
         id: b
-        text: "B"
-        color: "lightskyblue"
+        text: "Grid 1"
+        icon.source: "./icons/grid.svg"
         Layout.fillWidth: true
+        Layout.margins: 3
     }
 
-    AnnotatedRect {
+    Button {
         id: c
-        text: "C"
-        color: "lightskyblue"
+        text: "Grid 2"
+        icon.source: "./icons/grid.svg"
         Layout.fillWidth: true
+        Layout.margins: 3
     }
 
-    AnnotatedRect {
+    Button {
         id: d
-        text: "D"
-        color: "lightskyblue"
+        text: "Settings"
+        icon.source: "./icons/settings.svg"
         Layout.fillWidth: true
+        Layout.margins: 3
     }
     //! [item definition]
 
@@ -102,11 +109,12 @@ Window {
         RowLayout {
             Layout.fillHeight: false
             Layout.fillWidth: true
+            Layout.margins: 5
             //! [layout property on proxy]
-            LayoutItemProxy{ target: a; Layout.bottomMargin: 5 }
+            LayoutItemProxy{ target: a; }
             //! [layout property on proxy]
-            LayoutItemProxy{ target: b; Layout.bottomMargin: 5 }
-            LayoutItemProxy{ target: c; Layout.bottomMargin: 5 }
+            LayoutItemProxy{ target: b; }
+            LayoutItemProxy{ target: c; }
         }
         //! [proxy in layout]
     }
diff --git a/examples/quick/responsivelayouts/responsivelayouts.qrc b/examples/quick/responsivelayouts/responsivelayouts.qrc
index 72cc239cc2..76c435692a 100644
--- a/examples/quick/responsivelayouts/responsivelayouts.qrc
+++ b/examples/quick/responsivelayouts/responsivelayouts.qrc
@@ -1,5 +1,8 @@
 <!DOCTYPE RCC><RCC version="1.0">
 <qresource prefix="/qt/qml/responsivelayouts">
   <file>responsivelayouts.qml</file>
+  <file>icons/grid.svg</file>
+  <file>icons/text.svg</file>
+  <file>icons/settings.svg</file>
 </qresource>
 </RCC>