From 14b2f421da514a3d8584f7983884a9027ac06cbb Mon Sep 17 00:00:00 2001 From: Matt Porter Date: Mon, 21 May 2018 11:54:33 -0400 Subject: 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 --- app/ContactsView.qml | 18 +------- app/Dialer.qml | 13 +----- app/Phone.qml | 58 +++++++++++++++++++------ app/Recents.qml | 79 +++++++++++++++++++++++++++++++++ app/TabImageButton.qml | 84 ++++++++++++++++++++++++++++++++++++ app/app.pro | 2 +- app/calltype.h | 32 ++++++++++++++ app/images/ic_call_made_48px.svg | 1 + app/images/ic_call_missed_48px.svg | 1 + app/images/ic_call_received_48px.svg | 1 + app/images/ic_contacts_48px.svg | 1 + app/images/ic_dialpad_48px.svg | 1 + app/images/ic_schedule_48px.svg | 1 + app/images/images.qrc | 6 +++ app/main.cpp | 2 + app/models/CallHistoryModel.qml | 5 +++ app/phone.qrc | 2 + 17 files changed, 263 insertions(+), 44 deletions(-) create mode 100644 app/Recents.qml create mode 100644 app/TabImageButton.qml create mode 100644 app/calltype.h create mode 100644 app/images/ic_call_made_48px.svg create mode 100644 app/images/ic_call_missed_48px.svg create mode 100644 app/images/ic_call_received_48px.svg create mode 100644 app/images/ic_contacts_48px.svg create mode 100644 app/images/ic_dialpad_48px.svg create mode 100644 app/images/ic_schedule_48px.svg 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 + +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 @@ + \ 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 @@ + \ 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 @@ + \ 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 @@ + \ 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 @@ + \ 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 @@ + \ 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 @@ HMI_Phone_Contact_DividingLine.svg HMI_Phone_Contacts-01.svg HMI_Phone_Hangup.svg + ic_contacts_48px.svg + ic_schedule_48px.svg + ic_dialpad_48px.svg + ic_call_missed_48px.svg + ic_call_received_48px.svg + ic_call_made_48px.svg 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 #include +#include "calltype.h" #include "phone.h" #include "numbertype.h" @@ -99,6 +100,7 @@ int main(int argc, char *argv[]) } }); + qmlRegisterUncreatableType("CallType", 1, 0, "CallType", "Not creatable as it is an enum type"); qmlRegisterUncreatableType("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 @@ Phone.qml Dialer.qml + Recents.qml models/CallHistoryModel.qml models/ContactsModel.qml models/qmldir ContactsView.qml + TabImageButton.qml -- cgit 1.2.3-korg