Update addressbook examples

- Update styles
- Add "add new contact" buttom

examples/addressbook/qml/AddContactView.qml

@@ -0,0 +1,7 @@
+import QtQuick 2.0
+import QtQuick.Controls 2.4
+
+Item {
+    anchors.fill: parent
+
+}

examples/addressbook/qml/ContactList.qml

@@ -24,74 +24,89 @@
  */
 
 import QtQuick 2.9
-import QtQuick.Controls.Material 2.9
 import QtQuick.Layouts 1.1
 import qtprotobuf.examples.addressbook 1.0
 
-ListView {
-    id: contactList
+Item {
+    id: root
     anchors.fill: parent
-    delegate: Rectangle {
-        id: contactDelegate
-        property Contact contact: model.modelData
-        color: "#81D4FA"
-        width: contactList.width
-        height: 80
-        ColumnLayout {
-            anchors.fill: parent
-            anchors.margins: 10
-            Row {
-                Layout.alignment: Qt.AlignVCenter
-                Text {
-                    id: firstName
-                    color: "#FFFFFF"
-                    text: contactDelegate.contact.firstName
-                    font.pointSize: 12
+    property alias model: contactList.model
+    signal requestAddContact()
+    ListView {
+        id: contactList
+        anchors.fill: parent
+        delegate: Item {
+            id: contactDelegate
+            property Contact contact: model.modelData
+            width: contactList.width
+            height: 80
+            ColumnLayout {
+                anchors.fill: parent
+                anchors.margins: 10
+                Row {
+                    Layout.alignment: Qt.AlignVCenter
+                    spacing: 5
+                    Text {
+                        id: firstName
+                        color: "#FFFFFF"
+                        text: contactDelegate.contact.firstName
+                        font.pointSize: 12
+                        font.weight: Font.Bold
+                    }
+                    Text {
+                        id: middleName
+                        anchors.verticalCenter: parent.verticalCenter
+                        color: "#FFFFFF"
+                        text: contactDelegate.contact.middleName
+                        font.pointSize: 12
+                        font.weight: Font.Bold
+                    }
+                    Text {
+                        id: lastName
+                        anchors.verticalCenter: parent.verticalCenter
+                        color: "#FFFFFF"
+                        text: contactDelegate.contact.lastName
+                        font.pointSize: 12
+                        font.weight: Font.Bold
+                    }
                 }
-                Text {
-                    id: middleName
-                    anchors.verticalCenter: parent.verticalCenter
-                    color: "#FFFFFF"
-                    text: contactDelegate.contact.middleName
-                    font.pointSize: 12
-                }
-                Text {
-                    id: lastName
-                    anchors.verticalCenter: parent.verticalCenter
-                    color: "#FFFFFF"
-                    text: contactDelegate.contact.lastName
-                    font.pointSize: 12
+                Row {
+                    Layout.alignment: Qt.AlignVCenter
+                    Text {
+                        id: defaultPhoneNumberText
+                        property PhoneNumber defaultPhoneNumber: contactDelegate.contact.phonesData.length > 0 ?
+                                                                     contactDelegate.contact.phonesData[0] : null
+                        visible: defaultPhoneNumber != null
+                        color: "#EEEEEE"
+                        text: defaultPhoneNumber ?
+                                  "+" + defaultPhoneNumber.countryCode + " " + defaultPhoneNumber.number : ""
+                        font.pointSize: 12
+                    }
                 }
             }
-            Row {
-                Layout.alignment: Qt.AlignVCenter
-                Text {
-                    id: defaultPhoneNumberText
-                    property PhoneNumber defaultPhoneNumber: contactDelegate.contact.phonesData.length > 0 ?
-                                                                 contactDelegate.contact.phonesData[0] : null
-                    visible: defaultPhoneNumber != null
-                    color: "#EEEEEE"
-                    text: defaultPhoneNumber ?
-                              "+" + defaultPhoneNumber.countryCode + " " + defaultPhoneNumber.number : ""
-                    font.pointSize: 12
-                }
+            Rectangle {
+                color:"#EEEEEE"
+                anchors.left: parent.left
+                anchors.right: parent.right
+                height: 2
             }
-        }
-        Rectangle {
-            color:"#EEEEEE"
-            anchors.left: parent.left
-            anchors.right: parent.right
-            height: 2
-        }
 
-        Rectangle {
-            color:"#EEEEEE"
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.top: parent.bottom
-            height: 2
-            visible: (contactList.count - 1) === model.index
+            Rectangle {
+                color:"#EEEEEE"
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.top: parent.bottom
+                height: 2
+                visible: (contactList.count - 1) === model.index
+            }
         }
     }
-}
 
+    FloatingRoundButton {
+        anchors.bottom: parent.bottom
+        anchors.right: parent.right
+        anchors.margins: 10
+        icon: "qrc:/images/plus.png"
+        onClicked: root.requestAddContact()
+    }
+}

examples/addressbook/qml/FloatingRoundButton.qml

@@ -0,0 +1,22 @@
+import QtQuick 2.0
+
+Rectangle {
+    id: root
+    width: 70
+    property color primaryColor: "#03A9F4"
+    property color secondaryColor: "#2196F3"
+    height: width
+    radius: width/2
+    signal clicked()
+    property alias icon: iconItem.source
+    color: control.pressed ? root.secondaryColor : root.primaryColor
+    Image {
+        anchors.centerIn: parent
+        id: iconItem
+    }
+    MouseArea {
+        id: control
+        anchors.fill: parent
+        onClicked: root.clicked()
+    }
+}

examples/addressbook/qml/main.qml

@@ -25,28 +25,45 @@
 
 import QtQuick 2.9
 import QtQuick.Controls 2.9
-import QtQuick.Controls.Material 2.9
 import qtprotobuf.examples.addressbook 1.0
 import examples.addressbook 1.0
 
 ApplicationWindow {
-    Material.theme: Material.Light
-    Material.accent: Material.Blue
     visible: true
     width: 640
     height: 480
     title: qsTr("QtProtobuf Address Book Example")
     Rectangle {
         anchors.fill: parent
-        color: "#81D4FA"
+        color: "#B0BEC5"
     }
 
-    ContactList {
-        model: abEngine.contacts
-        Component.onCompleted: {
-            console.log("abEngine.contacts.list.length " + abEngine.contacts.count)
+    StackView {
+        id: mainStack
+        anchors.fill: parent
+    }
+
+    Component {
+        id: contactList
+        ContactList {
+            model: abEngine.contacts
+            Component.onCompleted: {
+                console.log("abEngine.contacts.list.length " + abEngine.contacts.count)
+            }
+            onRequestAddContact: {
+                mainStack.push(addContactView)
+            }
         }
     }
+    Component {
+        id: addContactView
+        AddContactView {
+        }
+    }
+
+    Component.onCompleted: {
+        mainStack.push(contactList)
+    }
 }
 
 

examples/addressbook/resources.qrc

@@ -2,5 +2,8 @@
     <qresource prefix="/">
         <file>qml/main.qml</file>
         <file>qml/ContactList.qml</file>
+        <file>qml/AddContactView.qml</file>
+        <file>qml/FloatingRoundButton.qml</file>
+        <file>images/plus.png</file>
     </qresource>
 </RCC>

examples/addressbookserver/main.cpp

@@ -21,21 +21,26 @@ public:
     {
         std::cout << "getContacts called" << std::endl;
         ::qtprotobuf::examples::Contact* contact = response->add_list();
-        contact->set_firstname("Test name 1");
+        contact->set_firstname("John");
+        contact->set_lastname("Doe");
         contact = response->add_list();
-        contact->set_firstname("Test name 2");
+        contact->set_firstname("Jane");
+        contact->set_lastname("Doe");
         contact = response->add_list();
-        contact->set_firstname("Test name 3");
+        contact->set_firstname("John");
+        contact->set_lastname("McClane");
         contact = response->add_list();
-        contact->set_firstname("Test name 4");
+        contact->set_firstname("Alexey");
+        contact->set_lastname("Edelev");
         contact = response->add_list();
-        contact->set_firstname("Test name 5");
+        contact->set_firstname("Ebenezer");
+        contact->set_lastname("Scrooge");
         ::qtprotobuf::examples::Job *job = new ::qtprotobuf::examples::Job;
         job->set_title("Job title");
         contact->set_allocated_job(job);
         ::qtprotobuf::examples::PhoneNumber home;
-        home.set_countrycode(7);
-        home.set_number(1232453467);
+        home.set_countrycode(49);
+        home.set_number(12324534679);
         (*contact->mutable_phones())[::qtprotobuf::examples::Contact::Home] = home;
         return ::grpc::Status();
     }