messaging: change application to pages format

Allow multiple pages in application for various functions
(e.g. notifications/alerts, message threads, compose message)

TODO: Change from placeholder phone applicaion icons

Bug-AGL: SPEC-2566
Change-Id: Ic2759716f47f75f43f775a98c44f447989c2e30f
Signed-off-by: Matt Ranostay <matt.ranostay@konsulko.com>

12 files changed, 181 insertions, 47 deletions

diff --git a/app/Messaging.qml b/app/Messaging.qml
index 611f044..58abf1c 100644
--- a/app/Messaging.qml
+++ b/app/Messaging.qml
@@ -1,4 +1,5 @@
 /*
+ * Copyright (C) 2016 The Qt Company Ltd.
  * Copyright (C) 2019 Konsulko Group
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -17,66 +18,40 @@
 import QtQuick 2.11
 import QtQuick.Layouts 1.11
 import QtQuick.Controls 2.4
-import AGL.Demo.Controls 1.0
 
 ApplicationWindow {
     id: root
 
-    width: 1080 * container.scale
-    height: 1487 * container.scale
-
-    Connections {
-        target: messaging
-
-        onNotificationEvent: {
-            notificationModel.append({"name": message.sender.fn, "message": message.message })
-            notificationView.currentIndex = notificationModel.count - 1
-        }
-    }
-
-    ListModel {
-        id: notificationModel
-    }
+    width: container.width * container.scale
+    height: container.height * container.scale
 
     Item {
         id: container
+        anchors.centerIn: parent
         width: 1080
         height: 1487
         scale: screenInfo.scale_factor()
-        anchors.centerIn: parent
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.top: parent.top
-        anchors.bottom: parent.bottom
-
-        // ----- Childs
-        Label {
-            id: title
-            font.pixelSize: 48
-            text: "Notifications"
-            anchors.horizontalCenter: parent.horizontalCenter
-        }
 
-        ListView {
-            id: notificationView
-            model: notificationModel
+        TabBar {
+            id: bar
+            width: parent.width
+            contentHeight: 160
 
-            anchors.margins: 50
-            anchors.top: title.bottom
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.bottom: parent.bottom
-            spacing: 40
-
-            highlight: Rectangle {
-                color: "transparent"
-                radius: 5
-                border.color: "white"
-                border.width: 1
+            TabImageButton {
+                icon: "./images/ic_contacts_48px.svg"
+                text: "Alerts"
+                font.pixelSize: 50
             }
-            highlightFollowsCurrentItem: true
+        }
 
-            delegate: Notification { }
+        StackLayout {
+            anchors.top: bar.bottom
+            width: parent.width
+            height: parent.height - bar.height
+            currentIndex: bar.currentIndex
+            NotificationPage {
+                id: alerts
+            }
         }
     }
 }
diff --git a/app/Messaging.qrc b/app/Messaging.qrc
index 6c16a61..39d7216 100644
--- a/app/Messaging.qrc
+++ b/app/Messaging.qrc
@@ -2,5 +2,7 @@
 	<qresource prefix="/">
 		<file>Messaging.qml</file>
 		<file>Notification.qml</file>
+		<file>NotificationPage.qml</file>
+		<file>TabImageButton.qml</file>
 	</qresource>
 </RCC>
diff --git a/app/NotificationPage.qml b/app/NotificationPage.qml
new file mode 100644
index 0000000..6ce5e4a
--- /dev/null
+++ b/app/NotificationPage.qml
@@ -0,0 +1,55 @@
+/*
+ * Copyright (C) 2019 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.11
+import QtQuick.Layouts 1.11
+import QtQuick.Controls 2.4
+import AGL.Demo.Controls 1.0
+
+Item {
+    id: root
+
+    Connections {
+        target: messaging
+
+        onNotificationEvent: {
+            notificationModel.append({"name": message.sender.fn, "message": message.message })
+            notificationView.currentIndex = notificationModel.count - 1
+        }
+    }
+
+    ListModel {
+        id: notificationModel
+    }
+
+    ListView {
+        anchors.fill: parent
+        anchors.margins: 20
+
+        id: notificationView
+        model: notificationModel
+
+        highlight: Rectangle {
+            color: "transparent"
+            radius: 5
+            border.color: "white"
+            border.width: 1
+        }
+        highlightFollowsCurrentItem: true
+
+        delegate: Notification { }
+    }
+}
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 b64584b..1b596ff 100644
--- a/app/app.pro
+++ b/app/app.pro
@@ -6,6 +6,8 @@ SOURCES = main.cpp
 CONFIG += link_pkgconfig
 PKGCONFIG += libhomescreen qlibwindowmanager qtappfw libafbwsc
 
-RESOURCES += Messaging.qrc
+RESOURCES += \
+    Messaging.qrc \
+    images/images.qrc
 
 include(app.pri)
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
new file mode 100644
index 0000000..2a3d89d
--- /dev/null
+++ b/app/images/images.qrc
@@ -0,0 +1,10 @@
+<RCC>
+    <qresource prefix="/images">
+	<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>