Update addressbook

- Add basic view to add contact
- Add few useful ui elements

examples/addressbook/qml/AddContactView.qml

@@ -1,7 +1,34 @@
 import QtQuick 2.0
 import QtQuick.Controls 2.4
 
-Item {
-    anchors.fill: parent
+StackItem {
+    id: root
+    Flickable {
+        anchors.fill: parent
+        Column {
+            width: root.width
+            TextInputRow {
+                id: firstName
+                width: root.width
+                label: qsTr("First name")
+            }
+            TextInputRow {
+                width: root.width
+                label: qsTr("Middle name")
+            }
+            TextInputRow {
+                width: root.width
+                label: qsTr("Last name")
+            }
+        }
+    }
 
+    FloatingRoundButton {
+        id: addContactButton
+        enabled: firstName.text.length > 0
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        anchors.margins: 10
+        icon: "qrc:/images/check.png"
+    }
 }

examples/addressbook/qml/ContactList.qml

@@ -27,9 +27,9 @@ import QtQuick 2.9
 import QtQuick.Layouts 1.1
 import qtprotobuf.examples.addressbook 1.0
 
-Item {
+StackItem {
     id: root
-    anchors.fill: parent
+    hasBack: false
     property alias model: contactList.model
     signal requestAddContact()
     ListView {
@@ -39,70 +39,58 @@ Item {
             id: contactDelegate
             property Contact contact: model.modelData
             width: contactList.width
-            height: 80
+            height: 70
             ColumnLayout {
                 anchors.fill: parent
                 anchors.margins: 10
                 Row {
                     Layout.alignment: Qt.AlignVCenter
                     spacing: 5
-                    Text {
+                    PrimaryText {
                         id: firstName
-                        color: "#FFFFFF"
                         text: contactDelegate.contact.firstName
-                        font.pointSize: 12
-                        font.weight: Font.Bold
                     }
-                    Text {
+                    PrimaryText {
                         id: middleName
-                        anchors.verticalCenter: parent.verticalCenter
-                        color: "#FFFFFF"
                         text: contactDelegate.contact.middleName
-                        font.pointSize: 12
-                        font.weight: Font.Bold
                     }
-                    Text {
+                    PrimaryText {
                         id: lastName
-                        anchors.verticalCenter: parent.verticalCenter
-                        color: "#FFFFFF"
                         text: contactDelegate.contact.lastName
-                        font.pointSize: 12
-                        font.weight: Font.Bold
                     }
                 }
                 Row {
                     Layout.alignment: Qt.AlignVCenter
-                    Text {
+                    SecondaryText {
                         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"
+                color:"#cfdfe7"
                 anchors.left: parent.left
                 anchors.right: parent.right
-                height: 2
+                height: 1
             }
 
             Rectangle {
-                color:"#EEEEEE"
+                color:"#cfdfe7"
                 anchors.left: parent.left
                 anchors.right: parent.right
                 anchors.top: parent.bottom
-                height: 2
+                height: 1
                 visible: (contactList.count - 1) === model.index
             }
         }
     }
 
     FloatingRoundButton {
+        enabled: !contactList.moving
         anchors.bottom: parent.bottom
         anchors.right: parent.right
         anchors.margins: 10

examples/addressbook/qml/FloatingRoundButton.qml

@@ -2,14 +2,19 @@ import QtQuick 2.0
 
 Rectangle {
     id: root
+    signal clicked()
+    property alias icon: iconItem.source
+    property color primaryColor: "#2196F3"
+    property color secondaryColor: "#03A9F4"
     width: 70
-    property color primaryColor: "#03A9F4"
-    property color secondaryColor: "#2196F3"
     height: width
     radius: width/2
-    signal clicked()
-    property alias icon: iconItem.source
+    opacity: enabled ? 1.0 : 0.3
     color: control.pressed ? root.secondaryColor : root.primaryColor
+    Behavior on opacity {
+        NumberAnimation { duration: 300 }
+    }
+
     Image {
         anchors.centerIn: parent
         id: iconItem

examples/addressbook/qml/PrimaryText.qml

@@ -0,0 +1,7 @@
+import QtQuick 2.0
+
+Text {
+    color: "#FFFFFF"
+    font.pointSize: 12
+    font.weight: Font.Bold
+}

examples/addressbook/qml/SecondaryText.qml

@@ -0,0 +1,6 @@
+import QtQuick 2.0
+
+Text {
+    color: "#EEEEEE"
+    font.pointSize: 12
+}

examples/addressbook/qml/StackItem.qml

@@ -0,0 +1,23 @@
+import QtQuick 2.0
+import QtQuick.Controls 2.9
+
+Item {
+    property StackView stack: null
+    property alias hasBack: backButton.visible
+    default property alias implicitChildren: dafaultItem.children
+    Item {
+        id: dafaultItem
+        anchors.fill: parent
+    }
+
+    FloatingRoundButton {
+        id: backButton
+        primaryColor: "#d31a5b"
+        secondaryColor: "#E91E63"
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.margins: 10
+        icon: "qrc:/images/back.png"
+        onClicked: stack.pop()
+    }
+}

examples/addressbook/qml/TextInputRow.qml

@@ -0,0 +1,30 @@
+import QtQuick 2.9
+import QtQuick.Layouts 1.2
+
+RowLayout {
+    property alias label: labelItem.text
+    property alias text: inputItem.text
+    height: 70
+    spacing: 10
+    PrimaryText {
+        id: labelItem
+        Layout.alignment: Qt.AlignVCenter
+        Layout.minimumWidth: 100
+        Layout.maximumWidth: 100
+        Layout.margins: 10
+    }
+    TextInput {
+        id: inputItem
+        Layout.fillWidth: true
+        Layout.margins: 10
+        Layout.alignment: Qt.AlignVCenter
+        font.pointSize: 12
+        color: "#ffffff"
+        Rectangle {
+            anchors.top: inputItem.bottom
+            width: inputItem.width
+            color: "#cfdfe7"
+            height: 1
+        }
+    }
+}

examples/addressbook/qml/main.qml

@@ -29,11 +29,13 @@ import qtprotobuf.examples.addressbook 1.0
 import examples.addressbook 1.0
 
 ApplicationWindow {
+    id: mainWindow
     visible: true
     width: 640
     height: 480
     title: qsTr("QtProtobuf Address Book Example")
     Rectangle {
+        id: background
         anchors.fill: parent
         color: "#B0BEC5"
     }
@@ -46,23 +48,25 @@ ApplicationWindow {
     Component {
         id: contactList
         ContactList {
+            anchors.fill: background
             model: abEngine.contacts
             Component.onCompleted: {
                 console.log("abEngine.contacts.list.length " + abEngine.contacts.count)
             }
             onRequestAddContact: {
-                mainStack.push(addContactView)
+                mainStack.push(addContactView, {"stack": mainStack})
             }
         }
     }
     Component {
         id: addContactView
         AddContactView {
+            anchors.fill: background
         }
     }
 
     Component.onCompleted: {
-        mainStack.push(contactList)
+        mainStack.push(contactList, {"stack": mainStack})
     }
 }
 

examples/addressbook/resources.qrc

@@ -5,5 +5,11 @@
         <file>qml/AddContactView.qml</file>
         <file>qml/FloatingRoundButton.qml</file>
         <file>images/plus.png</file>
+        <file>qml/StackItem.qml</file>
+        <file>images/back.png</file>
+        <file>qml/PrimaryText.qml</file>
+        <file>qml/SecondaryText.qml</file>
+        <file>qml/TextInputRow.qml</file>
+        <file>images/check.png</file>
     </qresource>
 </RCC>