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, 42 insertions, 5 deletions

diff --git a/examples/quickcontrols2/contactlist/contactlist.qml b/examples/quickcontrols2/contactlist/contactlist.qml
index 04382407..13406fbe 100644
--- a/examples/quickcontrols2/contactlist/contactlist.qml
+++ b/examples/quickcontrols2/contactlist/contactlist.qml
@@ -54,6 +54,8 @@ import QtQuick.Controls 2.1
 ApplicationWindow {
     id: window
 
+    property int currentContact: -1
+
     width: 320
     height: 480
     visible: true
@@ -62,19 +64,54 @@ ApplicationWindow {
     ContactDialog {
         id: contactDialog
         onFinished: {
-            if (index === -1)
+            if (currentContact === -1)
                 contactView.model.append(fullName, address, city, number)
             else
-                contactView.model.set(index, fullName, address, city, number)
+                contactView.model.set(currentContact, fullName, address, city, number)
+        }
+    }
+
+    Menu {
+        id: contactMenu
+        x: parent.width / 2 - width / 2
+        y: parent.height / 2 - height / 2
+        modal: true
+
+        Label {
+            padding: 10
+            font.bold: true
+            width: parent.width
+            horizontalAlignment: Qt.AlignHCenter
+            text: currentContact >= 0 ? contactView.model.get(currentContact).fullName : ""
+        }
+        MenuItem {
+            text: qsTr("Edit...")
+            onTriggered: contactDialog.editContact(contactView.model.get(currentContact))
+        }
+        MenuItem {
+            text: qsTr("Remove")
+            onTriggered: contactView.model.remove(currentContact)
         }
     }
 
     ContactView {
         id: contactView
         anchors.fill: parent
+        onPressAndHold: {
+            currentContact = index
+            contactMenu.open()
+        }
+    }
 
-        onAddContact: contactDialog.createContact()
-        onEditContact: contactDialog.editContact(index, model.get(index))
-        onRemoveContact: model.remove(index)
+    RoundButton {
+        text: qsTr("+")
+        highlighted: true
+        anchors.margins: 10
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        onClicked: {
+            currentContact = -1
+            contactDialog.createContact()
+        }
     }
 }