Overhaul the Contact List example - part II

Move the Edit and Remove buttons from the delegate to a context menu
that is triggered on press-and-hold. Get rid of a lot of custom font
sizes and hardcoded geometries. This ensures that the example looks
sensible on all platforms, styles, scale factors, system fonts...

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

1 files changed, 24 insertions, 77 deletions

diff --git a/examples/quickcontrols2/contactlist/ContactDelegate.ui.qml b/examples/quickcontrols2/contactlist/ContactDelegate.ui.qml
index cab26e63..383bb4ec 100644
--- a/examples/quickcontrols2/contactlist/ContactDelegate.ui.qml
+++ b/examples/quickcontrols2/contactlist/ContactDelegate.ui.qml
@@ -49,111 +49,68 @@
 ****************************************************************************/
 
 import QtQuick 2.7
+import QtQuick.Layouts 1.0
 import QtQuick.Controls 2.1
 
-AbstractButton {
+ItemDelegate {
     id: delegate
 
-    property alias remove: remove
-    property alias edit: edit
-
-    width: 300
-    height: 50
-    clip: true
     checkable: true
-    autoExclusive: true
-
-    Column {
-        id: column1
-        height: 400
-        width: parent.width - 20
-        spacing: 4
 
-        Row {
-            id: row1
-            spacing: 10
+    contentItem: ColumnLayout {
+        spacing: 10
 
-            Label {
-                text: fullName
-                font.pointSize: 16
-                anchors.verticalCenter: parent.verticalCenter
-                font.bold: true
-            }
+        Label {
+            text: fullName
+            font.bold: true
+            elide: Text.ElideRight
+            Layout.fillWidth: true
         }
 
-        Grid {
+        GridLayout {
             id: grid
-            opacity: 0
+            visible: false
 
-            x: 60
-            spacing: 10
             columns: 2
+            rowSpacing: 10
+            columnSpacing: 10
+
             Label {
                 text: qsTr("Address:")
-                font.bold: true
-                font.pixelSize: 16
+                Layout.leftMargin: 60
             }
 
             Label {
                 text: address
-                font.pixelSize: 16
                 font.bold: true
+                elide: Text.ElideRight
+                Layout.fillWidth: true
             }
 
             Label {
                 text: qsTr("City:")
-                font.pixelSize: 16
-                font.bold: true
+                Layout.leftMargin: 60
             }
 
             Label {
                 text: city
-                font.pixelSize: 16
                 font.bold: true
+                elide: Text.ElideRight
+                Layout.fillWidth: true
             }
 
             Label {
                 text: qsTr("Number:")
-                font.pixelSize: 16
-                font.bold: true
+                Layout.leftMargin: 60
             }
 
             Label {
                 text: number
-                font.pixelSize: 16
                 font.bold: true
+                elide: Text.ElideRight
+                Layout.fillWidth: true
             }
         }
-
-        Row {
-            id: row
-            spacing: 12
-            anchors.right: parent.right
-
-            Button {
-                id: remove
-                width: 60
-                height: 20
-                text: "Remove"
-            }
-
-            Button {
-                id: edit
-                width: 60
-                height: 20
-                text: "Edit"
-            }
-        }
-
-        MenuSeparator {
-            id: separator
-            opacity: 0
-            padding: 0
-            anchors.right: parent.right
-            anchors.rightMargin: 4
-            anchors.left: parent.left
-            anchors.leftMargin: 4
-        }
     }
 
     states: [
@@ -162,18 +119,8 @@ AbstractButton {
             when: delegate.checked
 
             PropertyChanges {
-                target: delegate
-                height: 160
-            }
-
-            PropertyChanges {
-                target: separator
-                opacity: 1
-            }
-
-            PropertyChanges {
                 target: grid
-                opacity: 1
+                visible: true
             }
         }
     ]