Contact List example: make ContactDelegate.ui.qml designable

Replace the MouseArea and its onClicked signal handler with a checkable
AbstractButton to achieve declarative bindings and that way make it
possible to open ContactDelegate.ui.qml in Qt Quick Designer.

Change-Id: I764e0adc23d4a0d44dd6660ed14e224a4e0e30c7
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>

examples/quickcontrols2/contactlist/ContactDelegate.ui.qml

@@ -51,8 +51,10 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.1
 
-Item {
+AbstractButton {
     clip: true
+    checkable: true
+    autoExclusive: true
 
     id: delegate
 
@@ -61,22 +63,6 @@ Item {
     property alias edit: edit
     width: 300
 
-    MouseArea {
-        id: mouseArea
-        anchors.fill: parent
-    }
-
-    Connections {
-        target: mouseArea
-
-        onClicked: {
-            if (delegate.ListView.view.currentIndex === index)
-                delegate.ListView.view.currentIndex = -1
-            else
-                delegate.ListView.view.currentIndex = index
-        }
-    }
-
     Column {
         id: column1
         height: 400
@@ -174,11 +160,11 @@ Item {
     states: [
         State {
             name: "collapsed"
-            when: !delegate.ListView.isCurrentItem
+            when: !delegate.checked
         },
         State {
             name: "expanded"
-            when: delegate.ListView.isCurrentItem
+            when: delegate.checked
 
             PropertyChanges {
                 target: delegate