examples: Increase hit area of LauncherList buttons; simplify

Pick-to: 6.5 6.6 6.7
Change-Id: Ife040f9c7e01fd8b8ce80595c2179d6b78648c6e
Reviewed-by: Tor Arne Vestbø <tor.arne.vestbo@qt.io>
Reviewed-by: Shawn Rutledge <shawn.rutledge@qt.io>

2 files changed, 36 insertions, 51 deletions

diff --git a/examples/quick/shared/LauncherList.qml b/examples/quick/shared/LauncherList.qml
index 876c828469..f86ab80446 100644
--- a/examples/quick/shared/LauncherList.qml
+++ b/examples/quick/shared/LauncherList.qml
@@ -174,9 +174,14 @@ Rectangle {
             id: back
             source: "images/back.png"
             anchors.verticalCenter: parent.verticalCenter
-            anchors.verticalCenterOffset: 2
+            anchors.verticalCenterOffset: 1
             anchors.left: parent.left
-            anchors.leftMargin: 16
+            anchors.leftMargin: 6
+            width: 38
+            height: 31
+            fillMode: Image.Pad
+            horizontalAlignment: Image.AlignHCenter
+            verticalAlignment: Image.AlignVCenter
 
             TapHandler {
                 id: tapHandler
@@ -188,10 +193,7 @@ Rectangle {
                 }
             }
             Rectangle {
-                anchors.centerIn: back
-                width: 38
-                height: 31
-                anchors.verticalCenterOffset: -1
+                anchors.fill: parent
                 opacity: tapHandler.pressed ? 1 : 0
                 Behavior on opacity { NumberAnimation{ duration: 100 }}
                 gradient: Gradient {
diff --git a/examples/quick/shared/SimpleLauncherDelegate.qml b/examples/quick/shared/SimpleLauncherDelegate.qml
index c6ca9802d2..a6ac090b34 100644
--- a/examples/quick/shared/SimpleLauncherDelegate.qml
+++ b/examples/quick/shared/SimpleLauncherDelegate.qml
@@ -9,7 +9,7 @@ Rectangle {
 
     property Item exampleItem
     width: ListView.view.width
-    height: button.implicitHeight + 22
+    height: col.implicitHeight + 22
 
     signal clicked()
 
@@ -22,10 +22,18 @@ Rectangle {
         GradientStop {
             position: 1
             Behavior on color {ColorAnimation { duration: 100 }}
-            color: tapHandler.pressed ? "#e0e0e0" : button.containsMouse ? "#f5f5f5" : "#eee"
+            color: tapHandler.pressed ? "#e0e0e0" : hoverHandler.hovered ? "#f5f5f5" : "#eee"
         }
     }
 
+    TapHandler {
+        id: tapHandler
+        onTapped: container.clicked()
+    }
+    HoverHandler {
+        id: hoverHandler
+    }
+
     Image {
         id: image
         opacity: 0.7
@@ -36,53 +44,28 @@ Rectangle {
         anchors.rightMargin: 16
     }
 
-    Item {
-        id: button
-        anchors.top: parent.top
+    Column {
+        id: col
+        spacing: 2
         anchors.left: parent.left
-        anchors.bottom: parent.bottom
         anchors.right:image.left
-        implicitHeight: col.height
-        height: implicitHeight
-        width: buttonLabel.width + 20
-        property alias containsMouse: hoverHandler.hovered
-
-        TapHandler {
-            id: tapHandler
-            onTapped: container.clicked()
-        }
-        HoverHandler {
-            id: hoverHandler
+        anchors.margins: 10
+        anchors.verticalCenter: parent.verticalCenter
+        Text {
+            width: parent.width
+            text: container.name
+            color: "black"
+            font.pixelSize: 22
+            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+            styleColor: "white"
+            style: Text.Raised
         }
-
-        Column {
-            spacing: 2
-            id: col
-            anchors.verticalCenter: parent.verticalCenter
+        Text {
             width: parent.width
-            Text {
-                id: buttonLabel
-                anchors.left: parent.left
-                anchors.leftMargin: 10
-                anchors.right: parent.right
-                anchors.rightMargin: 10
-                text: container.name
-                color: "black"
-                font.pixelSize: 22
-                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-                styleColor: "white"
-                style: Text.Raised
-
-            }
-            Text {
-                id: buttonLabel2
-                anchors.left: parent.left
-                anchors.leftMargin: 10
-                text: container.description
-                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-                color: "#666"
-                font.pixelSize: 12
-            }
+            text: container.description
+            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+            color: "#666"
+            font.pixelSize: 12
         }
     }