summaryrefslogtreecommitdiffstats
path: root/app
diff options
context:
space:
mode:
authorMatt Porter <mporter@konsulko.com>2018-05-21 11:54:33 -0400
committerMatt Porter <mporter@konsulko.com>2018-05-22 11:34:53 +0000
commit14b2f421da514a3d8584f7983884a9027ac06cbb (patch)
treed813469bfcbb353c4d3ba919804c9cbef41bbc8b /app
parent87c3378a8b716b896ca0cb72ccfb2e13f748058a (diff)
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>
Diffstat (limited to 'app')
-rw-r--r--app/ContactsView.qml18
-rw-r--r--app/Dialer.qml13
-rw-r--r--app/Phone.qml58
-rw-r--r--app/Recents.qml79
-rw-r--r--app/TabImageButton.qml84
-rw-r--r--app/app.pro2
-rw-r--r--app/calltype.h32
-rw-r--r--app/images/ic_call_made_48px.svg1
-rw-r--r--app/images/ic_call_missed_48px.svg1
-rw-r--r--app/images/ic_call_received_48px.svg1
-rw-r--r--app/images/ic_contacts_48px.svg1
-rw-r--r--app/images/ic_dialpad_48px.svg1
-rw-r--r--app/images/ic_schedule_48px.svg1
-rw-r--r--app/images/images.qrc6
-rw-r--r--app/main.cpp2
-rw-r--r--app/models/CallHistoryModel.qml5
-rw-r--r--app/phone.qrc2
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>