From 2c6553fa5ea19e7861b31587ac879da83ebb0925 Mon Sep 17 00:00:00 2001 From: J-P Nurmi Date: Mon, 21 Nov 2016 15:54:55 +0100 Subject: 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 --- .../contactlist/ContactDelegate.ui.qml | 101 +++++---------------- .../quickcontrols2/contactlist/ContactDialog.qml | 5 +- .../quickcontrols2/contactlist/ContactView.ui.qml | 69 ++++---------- .../quickcontrols2/contactlist/contactlist.qml | 47 +++++++++- .../doc/images/qtquickcontrols2-contactlist.png | Bin 7827 -> 25824 bytes .../doc/src/qtquickcontrols2-contactlist.qdoc | 4 +- 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: [ @@ -161,19 +118,9 @@ AbstractButton { name: "expanded" 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 Binary files a/examples/quickcontrols2/contactlist/doc/images/qtquickcontrols2-contactlist.png and b/examples/quickcontrols2/contactlist/doc/images/qtquickcontrols2-contactlist.png differ 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. -- cgit v1.2.3