phone: add tabbed view

Adds support for a tabbed view of contacts, recent call,
and the dialpad. This adjusts the UI to look more like a
modern mobile phone app. The same models populate the
contacts view and the recent call view as before with
the latter being a more useful full screen list. The recent
call history also includes type of call information (missed,
incoming, outgoing) and the UI displays icons accordingly
to indicate type of call that occured as well as a time
stamp. For now, the icons are placeholders but will be
replaced by icons design to match the AGL look and feel.

Bug-AGL: SPEC-1435

Change-Id: I521155a11208e92ece83f20f7f3dd643deb92099
Signed-off-by: Matt Porter <mporter@konsulko.com>

17 files changed, 263 insertions, 44 deletions

diff --git a/app/ContactsView.qml b/app/ContactsView.qml
index cab8f09..3dabe3b 100644
--- a/app/ContactsView.qml
+++ b/app/ContactsView.qml
@@ -38,26 +38,9 @@ Item {
     }
 
     signal call(var cname, var cnumber)
-    signal cancel
 
     ListView {
         anchors.fill: parent
-        header: Item {
-            width: parent.width
-            height: 200
-            RowLayout {
-                anchors.fill: parent
-                anchors.margins: 50
-                Label {
-                    Layout.fillWidth: true
-                    text: 'Contacts'
-                }
-                ImageButton {
-                    offImage: './images/HMI_ContactScreen_X-01.svg'
-                    onClicked: root.cancel()
-                }
-            }
-        }
         model: ContactsModel {}
         delegate: MouseArea {
             width: ListView.view.width
@@ -105,3 +88,4 @@ Item {
         }
     }
 }
+
diff --git a/app/Dialer.qml b/app/Dialer.qml
index 4720e14..03e9b41 100644
--- a/app/Dialer.qml
+++ b/app/Dialer.qml
@@ -1,6 +1,6 @@
 /*
  * Copyright (C) 2016 The Qt Company Ltd.
- * Copyright (C) 2017 Konsulko Group
+ * Copyright (C) 2017-2018 Konsulko Group
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -56,7 +56,6 @@ Item {
         }
     }
 
-    signal showContacts
     function call(cname, cnumber) {
         name.text = cname
         var rawNumber = cnumber
@@ -64,16 +63,6 @@ Item {
         callButton.checked = true
     }
 
-    ImageButton {
-        anchors.left: parent.left
-        anchors.top: parent.top
-        anchors.margins: 60
-        width: 172
-        height: 172
-        offImage: './images/HMI_Phone_Contacts-01.svg'
-        onClicked: root.showContacts()
-    }
-
     ColumnLayout {
         anchors.fill: parent
         anchors.topMargin: 50
diff --git a/app/Phone.qml b/app/Phone.qml
index 0a23f2a..15af5b4 100644
--- a/app/Phone.qml
+++ b/app/Phone.qml
@@ -1,5 +1,6 @@
 /*
  * Copyright (C) 2016 The Qt Company Ltd.
+ * Copyright (C) 2018 Konsulko Group
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -15,29 +16,58 @@
  */
 
 import QtQuick 2.6
-import QtQuick.Layouts 1.1
+import QtQuick.Layouts 1.3
 import QtQuick.Controls 2.0
 
 ApplicationWindow {
     id: root
 
-    StackView {
-        id: stack
-        anchors.fill: parent
-        initialItem: dialer
-    }
-    Dialer {
-        id: dialer
-        onShowContacts: stack.push(contacts)
+    TabBar {
+        id: bar
+        width: parent.width
+        contentHeight: 160
+
+        TabImageButton {
+            icon: "./images/ic_contacts_48px.svg"
+            text: "Contacts"
+            font.pixelSize: 50
+        }
+
+        TabImageButton {
+            icon: "./images/ic_schedule_48px.svg"
+            text: "Recents"
+            font.pixelSize: 50
+        }
+
+        TabImageButton {
+            icon: "./images/ic_dialpad_48px.svg"
+            text: "Dialpad"
+            font.pixelSize: 50
+        }
+
     }
-    Component {
-        id: contacts
+
+    StackLayout {
+        anchors.top: bar.bottom
+        width: parent.width
+        height:parent.height - bar.height
+        currentIndex: bar.currentIndex
         ContactsView {
-            onCancel: stack.pop()
+            id: contacts
+            onCall: {
+                dialer.call(cname, cnumber)
+                bar.setCurrentIndex(2)
+            }
+        }
+        Recents {
+            id: recents
             onCall: {
-                dialer.call(contact)
-                stack.pop()
+                dialer.call(cname, cnumber)
+                bar.setCurrentIndex(2)
             }
         }
+        Dialer {
+            id: dialer
+        }
     }
 }
diff --git a/app/Recents.qml b/app/Recents.qml
new file mode 100644
index 0000000..848cdab
--- /dev/null
+++ b/app/Recents.qml
@@ -0,0 +1,79 @@
+/*
+ * Copyright (C) 2018 Konsulko Group
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import QtQuick 2.6
+import QtQuick.Layouts 1.1
+import QtQuick.Controls 2.0
+import AGL.Demo.Controls 1.0
+import CallType 1.0
+import 'models'
+
+Item {
+    id: root
+
+    function log_icon(type) {
+        if (type == CallType.Missed) {
+            return './images/ic_call_missed_48px.svg'
+        } else if (type == CallType.Incoming) {
+            return './images/ic_call_received_48px.svg'
+        } else if (type == CallType.Outgoing) {
+            return './images/ic_call_made_48px.svg'
+        }
+    }
+
+    signal call(var cname, var cnumber)
+
+    ListView {
+        anchors.fill: parent
+        anchors.margins: 100
+
+        model: CallHistoryModel { id: history }
+
+        delegate: MouseArea {
+            width: ListView.view.width
+            height: width / 5
+            RowLayout {
+                anchors.fill: parent
+                spacing: 50
+                Image {
+                    source: log_icon(model.type)
+                    Layout.preferredWidth: 150
+                    Layout.preferredHeight: 150
+                }
+                Image {
+                    source: './images/HMI_Phone_Contact_BlankPhoto.svg'
+                    Layout.preferredWidth: 150
+                    Layout.preferredHeight: 150
+                }
+                ColumnLayout {
+                    Label {
+                        Layout.fillWidth: true
+                        color: '#59FF7F'
+                        font.pixelSize: 50
+                        text: model.name
+                    }
+
+                    Label {
+                        Layout.fillWidth: true
+                        font.pixelSize: 50
+                        text: new Date(model.time).toLocaleString(Qt.locale(), "ddd MMM d 'at' HH':'mm")
+                    }
+                }
+            }
+            onClicked: root.call(model.name, model.number)
+        }
+    }
+}
diff --git a/app/TabImageButton.qml b/app/TabImageButton.qml
new file mode 100644
index 0000000..2176595
--- /dev/null
+++ b/app/TabImageButton.qml
@@ -0,0 +1,84 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+** Copyright (C) 2018 Konsulko Group
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+** Modified for AGL to match the behavior of the similar ImageButton control
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.9
+import QtQuick.Layouts 1.1
+import QtQuick.Controls 2.2
+import QtQuick.Controls.impl 2.2
+import QtQuick.Templates 2.2 as T
+
+T.TabButton {
+    id: control
+
+    implicitWidth: Math.max(background ? background.implicitWidth : 0,
+                            contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(background ? background.implicitHeight : 0,
+                             contentItem.implicitHeight + topPadding + bottomPadding)
+    baselineOffset: contentItem.y + contentItem.baselineOffset
+
+    padding: 6
+
+    property url icon
+
+    contentItem: ColumnLayout {
+        spacing: 20
+        Image {
+            Layout.alignment: Qt.AlignCenter
+            source: control.icon
+            width: 96
+            height: 96
+
+        }
+        Text {
+            Layout.alignment: Qt.AlignCenter
+            text: control.text
+            font: control.font
+            elide: Text.ElideRight 
+            opacity: enabled ? 1 : 0.3
+            color: !control.checked ? Default.textLightColor : control.down ? Default.textDarkColor : Default.textColor
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+        }
+    }
+    background: Rectangle {
+        implicitHeight: 160
+        color: control.down
+            ? (control.checked ? Default.tabButtonCheckedPressedColor : Default.tabButtonPressedColor)
+            : (control.checked ? "transparent" : Default.tabButtonColor)
+    }
+}
diff --git a/app/app.pro b/app/app.pro
index 41b90da..2b98232 100644
--- a/app/app.pro
+++ b/app/app.pro
@@ -2,7 +2,7 @@ TARGET = phone
 QT = quickcontrols2 websockets multimedia
 
 SOURCES = main.cpp phone.cpp
-HEADERS = phone.h numbertype.h
+HEADERS = calltype.h phone.h numbertype.h
 
 SUBDIRS = telephony-binding
 
diff --git a/app/calltype.h b/app/calltype.h
new file mode 100644
index 0000000..03eb152
--- /dev/null
+++ b/app/calltype.h
@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2018 Konsulko Group
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#include <QObject>
+
+class CallType
+{
+	Q_GADGET
+	public:
+		enum Value {
+			Missed,
+			Outgoing,
+			Incoming,
+		};
+		Q_ENUM(Value)
+
+	private:
+		CallType();
+};
diff --git a/app/images/ic_call_made_48px.svg b/app/images/ic_call_made_48px.svg
new file mode 100644
index 0000000..3d6076f
--- /dev/null
+++ b/app/images/ic_call_made_48px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M18 10v4h13.17L8 37.17 10.83 40 34 16.83V30h4V10z"/></svg>
\ No newline at end of file
diff --git a/app/images/ic_call_missed_48px.svg b/app/images/ic_call_missed_48px.svg
new file mode 100644
index 0000000..9be38f8
--- /dev/null
+++ b/app/images/ic_call_missed_48px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M39.17 14L24 29.17 12.83 18H22v-4H6v16h4v-9.17l14 14 18-18z"/></svg>
\ No newline at end of file
diff --git a/app/images/ic_call_received_48px.svg b/app/images/ic_call_received_48px.svg
new file mode 100644
index 0000000..6cfdc03
--- /dev/null
+++ b/app/images/ic_call_received_48px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M40 10.83L37.17 8 14 31.17V18h-4v20h20v-4H16.83z"/></svg>
\ No newline at end of file
diff --git a/app/images/ic_contacts_48px.svg b/app/images/ic_contacts_48px.svg
new file mode 100644
index 0000000..7f2a701
--- /dev/null
+++ b/app/images/ic_contacts_48px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M40 0H8v4h32V0zM8 48h32v-4H8v4zM40 8H8c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zm-16 5.5c2.48 0 4.5 2.02 4.5 4.5 0 2.49-2.02 4.5-4.5 4.5s-4.5-2.01-4.5-4.5c0-2.48 2.02-4.5 4.5-4.5zM34 34H14v-3c0-3.33 6.67-5 10-5s10 1.67 10 5v3z"/></svg>
\ No newline at end of file
diff --git a/app/images/ic_dialpad_48px.svg b/app/images/ic_dialpad_48px.svg
new file mode 100644
index 0000000..6e41063
--- /dev/null
+++ b/app/images/ic_dialpad_48px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24 38c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zM12 2C9.79 2 8 3.79 8 6s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 12c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 12c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm24-16c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zM24 26c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm12 0c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0-12c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm-12 0c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0-12c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"/></svg>
\ No newline at end of file
diff --git a/app/images/ic_schedule_48px.svg b/app/images/ic_schedule_48px.svg
new file mode 100644
index 0000000..ce72e77
--- /dev/null
+++ b/app/images/ic_schedule_48px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M23.99 4C12.94 4 4 12.95 4 24s8.94 20 19.99 20C35.04 44 44 35.05 44 24S35.04 4 23.99 4zM24 40c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16zm1-26h-3v12l10.49 6.3L34 29.84l-9-5.34z"/></svg>
\ No newline at end of file
diff --git a/app/images/images.qrc b/app/images/images.qrc
index 80fa584..43c5fb5 100644
--- a/app/images/images.qrc
+++ b/app/images/images.qrc
@@ -35,5 +35,11 @@
         <file>HMI_Phone_Contact_DividingLine.svg</file>
         <file>HMI_Phone_Contacts-01.svg</file>
         <file>HMI_Phone_Hangup.svg</file>
+	<file>ic_contacts_48px.svg</file>
+	<file>ic_schedule_48px.svg</file>
+	<file>ic_dialpad_48px.svg</file>
+	<file>ic_call_missed_48px.svg</file>
+	<file>ic_call_received_48px.svg</file>
+	<file>ic_call_made_48px.svg</file>
     </qresource>
 </RCC>
diff --git a/app/main.cpp b/app/main.cpp
index ea6c8b5..c945830 100644
--- a/app/main.cpp
+++ b/app/main.cpp
@@ -27,6 +27,7 @@
 #include <qlibwindowmanager.h>
 
 #include <telephony.h>
+#include "calltype.h"
 #include "phone.h"
 #include "numbertype.h"
 
@@ -99,6 +100,7 @@ int main(int argc, char *argv[])
             }
         });
 
+	qmlRegisterUncreatableType<CallType>("CallType", 1, 0, "CallType", "Not creatable as it is an enum type");
 	qmlRegisterUncreatableType<NumberType>("NumberType", 1, 0, "NumberType", "Not creatable as it is an enum type");
 
         engine.load(QUrl(QStringLiteral("qrc:/Phone.qml")));
diff --git a/app/models/CallHistoryModel.qml b/app/models/CallHistoryModel.qml
index ee11799..a1c00b0 100644
--- a/app/models/CallHistoryModel.qml
+++ b/app/models/CallHistoryModel.qml
@@ -6,29 +6,34 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import QtQml.Models 2.2
+import CallType 1.0
 
 ListModel {
     ListElement {
         name: "Droopy"
         number: "8003451234"
         time: "2015-01-05 07:15"
+        type: CallType.Missed
     }
 
     ListElement {
         name: "Doc"
         number: "8003451234"
         time: "2015-01-05 07:15"
+        type: CallType.Incoming
     }
 
     ListElement {
         name: "Grumpy"
         number: "8003451234"
         time: "2015-01-05 07:15"
+        type: CallType.Outgoing
     }
 
     ListElement {
         name: "Bashful"
         number: "8003451234"
         time: "2015-01-05 07:15"
+        type: CallType.Incoming
     }
 }
diff --git a/app/phone.qrc b/app/phone.qrc
index 50b3140..17a9ab6 100644
--- a/app/phone.qrc
+++ b/app/phone.qrc
@@ -2,9 +2,11 @@
     <qresource prefix="/">
         <file>Phone.qml</file>
         <file>Dialer.qml</file>
+	<file>Recents.qml</file>
         <file>models/CallHistoryModel.qml</file>
         <file>models/ContactsModel.qml</file>
         <file>models/qmldir</file>
         <file>ContactsView.qml</file>
+	<file>TabImageButton.qml</file>
     </qresource>
 </RCC>