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>

6 files changed, 89 insertions, 137 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
             }
         }
     ]
diff --git a/examples/quickcontrols2/contactlist/ContactDialog.qml b/examples/quickcontrols2/contactlist/ContactDialog.qml
index 1836ea28..54256e47 100644
--- a/examples/quickcontrols2/contactlist/ContactDialog.qml
+++ b/examples/quickcontrols2/contactlist/ContactDialog.qml
@@ -54,7 +54,6 @@ import QtQuick.Controls 2.1
 Dialog {
     id: dialog
 
-    property int index: -1
     signal finished(string fullName, string address, string city, string number)
 
     function createContact() {
@@ -64,18 +63,16 @@ Dialog {
         form.number.clear();
 
         dialog.title = qsTr("Add Contact");
-        dialog.index = -1;
         dialog.open();
     }
 
-    function editContact(index, contact) {
+    function editContact(contact) {
         form.fullName.text = contact.fullName;
         form.address.text = contact.address;
         form.city.text = contact.city;
         form.number.text = contact.number;
 
         dialog.title = qsTr("Edit Contact");
-        dialog.index = index;
         dialog.open();
     }
 
diff --git a/examples/quickcontrols2/contactlist/ContactView.ui.qml b/examples/quickcontrols2/contactlist/ContactView.ui.qml
index 30a72b65..2aaaa31d 100644
--- a/examples/quickcontrols2/contactlist/ContactView.ui.qml
+++ b/examples/quickcontrols2/contactlist/ContactView.ui.qml
@@ -52,65 +52,36 @@ import QtQuick 2.7
 import QtQuick.Controls 2.1
 import Backend 1.0
 
-Page {
-    id: page
+ListView {
+    id: listView
 
-    signal addContact()
-    signal editContact(int index)
-    signal removeContact(int index)
-
-    property alias model: contactModel
+    signal pressAndHold(int index)
 
     width: 320
     height: 480
 
-    ListView {
-        id: listView
-        anchors.fill: parent
-
-        focus: true
-        boundsBehavior: Flickable.StopAtBounds
-
-        section.property: "fullName"
-        section.criteria: ViewSection.FirstCharacter
-        section.delegate: SectionDelegate {
-            width: listView.width
-        }
-
-        delegate: ContactDelegate {
-            id: delegate
-            width: listView.width
+    focus: true
+    boundsBehavior: Flickable.StopAtBounds
 
-            Connections {
-                target: delegate.edit
-                onClicked: page.editContact(index)
-            }
+    section.property: "fullName"
+    section.criteria: ViewSection.FirstCharacter
+    section.delegate: SectionDelegate {
+        width: listView.width
+    }
 
-            Connections {
-                target: delegate.remove
-                onClicked: page.removeContact(index)
-            }
-        }
+    delegate: ContactDelegate {
+        id: delegate
+        width: listView.width
 
-        model: ContactModel {
-            id: contactModel
+        Connections {
+            target: delegate
+            onPressAndHold: listView.pressAndHold(index)
         }
-
-        ScrollBar.vertical: ScrollBar { }
     }
 
-    footer: ToolBar {
-        id: footer
-
-        ToolButton {
-            id: addButton
-            text: qsTr("Add Contact")
-            anchors.right: parent.right
-
-            Connections {
-                target: addButton
-                onClicked: page.addContact()
-            }
-        }
+    model: ContactModel {
+        id: contactModel
     }
+
+    ScrollBar.vertical: ScrollBar { }
 }
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()
+        }
     }
 }
diff --git a/examples/quickcontrols2/contactlist/doc/images/qtquickcontrols2-contactlist.png b/examples/quickcontrols2/contactlist/doc/images/qtquickcontrols2-contactlist.png
index 642cf2dc..d7424ed3 100644
--- a/examples/quickcontrols2/contactlist/doc/images/qtquickcontrols2-contactlist.png
+++ b/examples/quickcontrols2/contactlist/doc/images/qtquickcontrols2-contactlist.png
diff --git a/examples/quickcontrols2/contactlist/doc/src/qtquickcontrols2-contactlist.qdoc b/examples/quickcontrols2/contactlist/doc/src/qtquickcontrols2-contactlist.qdoc
index 2b4de68b..17e1aec2 100644
--- a/examples/quickcontrols2/contactlist/doc/src/qtquickcontrols2-contactlist.qdoc
+++ b/examples/quickcontrols2/contactlist/doc/src/qtquickcontrols2-contactlist.qdoc
@@ -36,9 +36,9 @@
     For the declarative parts of the UI, .ui.qml files are used that can be edited
     visually in the Qt Quick Designer.
 
-    \section1 C++ Backend
+    \image qtquickcontrols2-contactlist.png
 
-    \borderedimage qtquickcontrols2-contactlist.png
+    \section1 C++ Backend
 
     The contact list application allows the user to add, edit, and remove contacts.
     The actual implementation is done in C++ and exposed as a QAbstractListModel.