Kirigamify the dialer

dialer/src/qml/Call/CallPage.qml

@@ -22,10 +22,11 @@ import QtQuick 2.0
 import QtQuick.Layouts 1.1
 import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.plasma.components 2.0 as PlasmaComponents
+import org.kde.kirigami 2.5 as Kirigami
 
 import "../Dialpad"
 
-Item {
+Kirigami.Page {
     id: callPage
 
     property string status: dialerUtils.callState

dialer/src/qml/ContactsPage.qml

@@ -0,0 +1,80 @@
+/*
+ *   Copyright 2015 Martin Klapetek <mklapetek@kde.org>
+ *
+ *   This program is free software; you can redistribute it and/or modify
+ *   it under the terms of the GNU Library General Public License as
+ *   published by the Free Software Foundation; either version 2 or
+ *   (at your option) any later version.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *   GNU General Public License for more details
+ *
+ *   You should have received a copy of the GNU Library General Public
+ *   License along with this program; if not, write to the
+ *   Free Software Foundation, Inc.,
+ *   51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+import QtQuick 2.7
+import QtQuick.Controls 2.2 as Controls
+import QtQuick.Layouts 1.1
+import org.kde.kirigami 2.10 as Kirigami
+import org.kde.people 1.0 as KPeople
+
+Kirigami.Page {
+
+    title: i18n("Contacts")
+
+    header: Kirigami.SearchField {
+        id: searchField
+        onTextChanged: contactsProxyModel.setFilterFixedString(text)
+    }
+
+    Controls.Label {
+        anchors.centerIn: parent
+        text: i18n("No contacts")
+        visible: contactsList.count === 0
+    }
+
+    ListView {
+        id: contactsList
+
+        anchors.fill: parent
+
+        section.property: "display"
+        section.criteria: ViewSection.FirstCharacter
+        section.delegate: Kirigami.ListSectionHeader {text: section}
+        clip: true
+
+        model: KPeople.PersonsSortFilterProxyModel {
+            id: contactsProxyModel
+            sourceModel: KPeople.PersonsModel {
+                id: contactsModel
+            }
+            requiredProperties: "phoneNumber"
+            filterRole: Qt.DisplayRole
+            sortRole: Qt.DisplayRole
+            filterCaseSensitivity: Qt.CaseInsensitive
+            Component.onCompleted: sort(0)
+        }
+
+        boundsBehavior: Flickable.StopAtBounds
+
+        Component {
+            id: contactListDelegate
+
+            Kirigami.BasicListItem {
+                icon: model.decoration
+                label: model.display
+//                     onClicked: dialerUtils.dial(model.phoneNumber)
+            }
+        }
+
+        delegate: Kirigami.DelegateRecycler {
+            width: parent.width
+            sourceComponent: contactListDelegate
+        }
+    }
+}

dialer/src/qml/Dialer/ContactsList.qml

@@ -1,82 +0,0 @@
-/*
- *   Copyright 2015 Martin Klapetek <mklapetek@kde.org>
- *
- *   This program is free software; you can redistribute it and/or modify
- *   it under the terms of the GNU Library General Public License as
- *   published by the Free Software Foundation; either version 2 or
- *   (at your option) any later version.
- *
- *   This program is distributed in the hope that it will be useful,
- *   but WITHOUT ANY WARRANTY; without even the implied warranty of
- *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- *   GNU General Public License for more details
- *
- *   You should have received a copy of the GNU Library General Public
- *   License along with this program; if not, write to the
- *   Free Software Foundation, Inc.,
- *   51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-
-import QtQuick 2.7
-import QtQuick.Controls 2.2 as Controls
-import QtQuick.Layouts 1.1
-import org.kde.kirigami 2.10 as Kirigami
-import org.kde.people 1.0 as KPeople
-
-Item {
-    Controls.Label {
-        anchors.centerIn: parent
-        text: i18n("No contacts")
-        visible: contactsList.count === 0
-    }
-
-    ColumnLayout {
-        anchors.fill: parent
-
-        Kirigami.SearchField {
-            id: searchField
-            Layout.fillWidth: true
-            onTextChanged: contactsProxyModel.setFilterFixedString(text)
-        }
-
-        ListView {
-            id: contactsList
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-
-            section.property: "display"
-            section.criteria: ViewSection.FirstCharacter
-            section.delegate: Kirigami.ListSectionHeader {text: section}
-            clip: true
-
-            model: KPeople.PersonsSortFilterProxyModel {
-                id: contactsProxyModel
-                sourceModel: KPeople.PersonsModel {
-                    id: contactsModel
-                }
-                requiredProperties: "phoneNumber"
-                filterRole: Qt.DisplayRole
-                sortRole: Qt.DisplayRole
-                filterCaseSensitivity: Qt.CaseInsensitive
-                Component.onCompleted: sort(0)
-            }
-
-            boundsBehavior: Flickable.StopAtBounds
-
-            Component {
-                id: contactListDelegate
-
-                Kirigami.BasicListItem {
-                    icon: model.decoration
-                    label: model.display
-//                     onClicked: dialerUtils.dial(model.phoneNumber)
-                }
-            }
-
-            delegate: Kirigami.DelegateRecycler {
-                width: parent.width
-                sourceComponent: contactListDelegate
-            }
-        }
-    }
-}

dialer/src/qml/Dialer/DialPage.qml

@@ -1,65 +0,0 @@
-/*
- *   Copyright 2015 Marco Martin <mart@kde.org>
- *
- *   This program is free software; you can redistribute it and/or modify
- *   it under the terms of the GNU Library General Public License as
- *   published by the Free Software Foundation; either version 2, or
- *   (at your option) any later version.
- *
- *   This program is distributed in the hope that it will be useful,
- *   but WITHOUT ANY WARRANTY; without even the implied warranty of
- *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- *   GNU Library General Public License for more details
- *
- *   You should have received a copy of the GNU Library General Public
- *   License along with this program; if not, write to the
- *   Free Software Foundation, Inc.,
- *   51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-
-import QtQuick 2.0
-import QtQuick.Layouts 1.1
-import org.kde.plasma.core 2.0 as PlasmaCore
-import org.kde.plasma.components 2.0 as PlasmaComponents
-
-Column {
-    spacing: 0
-    anchors.fill: parent
-
-    PlasmaComponents.TabGroup {
-        height: parent.height - tabbar.height
-        width: parent.width
-
-        History {
-            id: history
-        }
-        ContactsList {
-            id: contacts
-        }
-        Dialer {
-            id: dialer
-        }
-    }
-    PlasmaComponents.TabBar {
-        id: tabbar
-        height: units.gridUnit * 5
-        width: parent.width
-
-        tabPosition: Qt.BottomEdge
-        PlasmaComponents.TabButton {
-            iconSource: "view-history"
-            text: i18n("History")
-            tab: history
-        }
-        PlasmaComponents.TabButton {
-            iconSource: "view-pim-contacts"
-            text: i18n("Contacts")
-            tab: contacts
-        }
-        PlasmaComponents.TabButton {
-            iconSource: "input-keyboard"
-            text: i18n("Dialpad")
-            tab: dialer
-        }
-    }
-}

dialer/src/qml/Dialer/RoundImage.qml

@@ -1,44 +0,0 @@
-/*
- * Copyright 2017-2019  Kaidan Developers and Contributors
- * Copyright 2019  Jonah Brüchert <jbb@kaidan.im>
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU General Public License as
- * published by the Free Software Foundation; either version 2 of
- * the License or (at your option) version 3 or any later version
- * accepted by the membership of KDE e.V. (or its successor approved
- * by the membership of KDE e.V.), which shall act as a proxy
- * defined in Section 14 of version 3 of the license.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import QtQuick 2.6
-import QtGraphicalEffects 1.0
-import org.kde.kirigami 2.6 as Kirigami
-
-Kirigami.Icon {
-	id: img
-	property bool isRound: true
-
-        layer.enabled: isRound
-        layer.effect: OpacityMask {
-        maskSource: Item {
-            width: img.width
-            height: img.height
-
-            Rectangle {
-                anchors.centerIn: parent
-                width: Math.min(img.width, img.height)
-                height: width
-                radius: Math.min(width, height)
-            }
-        }
-    }
-}

dialer/src/qml/DialerPage.qml

@@ -20,42 +20,40 @@
 
 import QtQuick 2.0
 import QtQuick.Layouts 1.1
+import QtQuick.Controls 2.5 as QQC2
 import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.plasma.components 2.0 as PlasmaComponents
-import "../Dialpad"
+import org.kde.kirigami 2.9 as Kirigami
+import "Dialpad"
 
-Item {
+Kirigami.Page {
     id: dialer
 
     property alias numberEntryText: status.text
 
-    Rectangle {
+    title: i18n("Dialer")
-        width: parent.width / 2
+    header: Kirigami.InlineMessage {
-        x: parent.width / 4
+        type: Kirigami.MessageType.Error
-        y: parent.height - callStatusNotification.paintedHeight
+        text: i18n("Unable to make a call at this moment")
-        color: PlasmaCore.ColorScope.backgroundColor
-        opacity: 0.6
         visible: dialerUtils.callState == "failed"
-
-        PlasmaComponents.Label {
-            id: callStatusNotification
-            anchors.fill: parent
-            text: "Unable to make a call at this moment"
-            horizontalAlignment: Text.AlignHCenter
-            wrapMode: Text.WordWrap
-            color: PlasmaCore.ColorScope.textColor
-        }
     }
 
     ColumnLayout {
         id: dialPadArea
         anchors.fill: parent
 
-        PhoneNumberInput {
+        QQC2.Label {
             id: status
 
+            onTextChanged: {
+                text = dialerUtils.formatNumber(text);
+            }
+
+            horizontalAlignment: Qt.AlignHCenter
+            verticalAlignment: Qt.AlignBottom
+
             Layout.fillWidth: true
-            Layout.topMargin: units.largeSpacing * 3
+            Layout.topMargin: units.largeSpacing * 2
             Layout.bottomMargin: units.largeSpacing
             Layout.minimumHeight: units.gridUnit * 3
             Layout.maximumHeight: Layout.minimumHeight
@@ -67,10 +65,12 @@ Item {
             Layout.fillHeight: true
 
             callback: function (string) {
-                status.append(string)
+                var newText = status.text + string
+                status.text = dialerUtils.formatNumber(newText);
             }
             deleteCallback: function () {
-                status.pop()
+                var newText = status.text.slice(0, -1)
+                status.text = dialerUtils.formatNumber(newText);
             }
             pressedCallback: function (string) {
                 // TODO

dialer/src/qml/Dialpad/PhoneNumberInput.qml

@@ -1,30 +0,0 @@
-import QtQuick 2.0
-import QtQuick.Controls 2.2 as Controls
-import QtQuick.Layouts 1.1
-
-// TODO: search through contacts while typing
-Controls.TextField {
-    id: root
-
-    horizontalAlignment: Qt.AlignHCenter
-    verticalAlignment: Qt.AlignBottom
-
-    background: Rectangle {
-        opacity: 0
-    }
-
-    // append some text to the end of this input
-    signal append(string digit)
-    onAppend: {
-        text += digit
-    }
-    onTextChanged: {
-        text = dialerUtils.formatNumber(text);
-    }
-
-    // remove last character from this text input
-    signal pop()
-    onPop: {
-        text = text.slice(0, -1)
-    }
-}

dialer/src/qml/HistoryPage.qml

@@ -1,31 +1,17 @@
-/*
+import QtQuick 2.3
- *   Copyright 2015 Marco Martin <mart@kde.org>
+import QtQuick.Controls 2.3
- *
- *   This program is free software; you can redistribute it and/or modify
- *   it under the terms of the GNU Library General Public License as
- *   published by the Free Software Foundation; either version 2, or
- *   (at your option) any later version.
- *
- *   This program is distributed in the hope that it will be useful,
- *   but WITHOUT ANY WARRANTY; without even the implied warranty of
- *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- *   GNU Library General Public License for more details
- *
- *   You should have received a copy of the GNU Library General Public
- *   License along with this program; if not, write to the
- *   Free Software Foundation, Inc.,
- *   51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-
-import QtQuick 2.4
 import QtQuick.Layouts 1.1
-import org.kde.plasma.core 2.0 as PlasmaCore
+
-import org.kde.plasma.components 2.0 as PlasmaComponents
 import org.kde.plasma.extras 2.0 as PlasmaExtras
+import org.kde.plasma.core 2.0 as PlasmaCore
+import org.kde.kirigami 2.0 as Kirigami
+import org.kde.plasma.components 2.0 as PlasmaComponents
 
 import org.kde.plasma.dialer 1.0
 
-Item {
+Kirigami.Page {
+
+    title: i18n("History")
 
     function secondsToTimeString(seconds) {
         var h = Math.floor(seconds / 3600);
@@ -37,7 +23,7 @@ Item {
         return '' + h + ':' + m + ':' + s;
     }
 
-    PlasmaComponents.Label {
+    Label {
         anchors.centerIn: parent
         text: i18n("No recent calls")
         visible: view.count == 0

dialer/src/qml/main.qml

@@ -28,7 +28,7 @@ import org.kde.kirigami 2.0 as Kirigami
 
 import org.kde.plasma.dialer 1.0
 
-ApplicationWindow {
+Kirigami.ApplicationWindow {
     id: root
 
 //BEGIN PROPERTIES
@@ -42,6 +42,7 @@ ApplicationWindow {
     //was the last call an incoming one?
     property bool isIncoming
 
+    pageStack.globalToolBar.style:Kirigami.ApplicationHeaderStyle.Titles
 //END PROPERTIES
 
 //BEGIN SIGNAL HANDLERS
@@ -82,40 +83,27 @@ ApplicationWindow {
 
 //END MODELS
 
-//BEGIN UI
+    pageStack.initialPage: dialerUtils.callState == "idle" || dialerUtils.callState == "failed" ? [Qt.resolvedUrl("HistoryPage.qml"), Qt.resolvedUrl("ContactsPage.qml"), Qt.resolvedUrl("DialerPage.qml")] : Qt.resolvedUrl("Call/CallPage.qml")
-    PlasmaExtras.ConditionalLoader {
-        anchors.fill: parent
 
-        property bool shouldShow: root.visible && (dialerUtils.callState == "idle" || dialerUtils.callState == "failed")
+    footer: TabBar {
+        height: 50
 
-        when: shouldShow
+        currentIndex: pageStack.currentIndex
-        source: Qt.resolvedUrl("Dialer/DialPage.qml")
+
-        z: shouldShow ? 2 : 0
+        TabButton {
-        opacity: shouldShow ? 1 : 0
+            text: "Foo"
-        Behavior on opacity {
+            icon.name: "view-pim-contacts"
-            OpacityAnimator {
+            onClicked: pageStack.currentIndex = 0
-                duration: Kirigami.Units.shortDuration
+        }
-                easing.type: Easing.InOutQuad
+        TabButton {
+            text: "Contacts"
+            icon.name: "view-pim-contacts"
+            onClicked: pageStack.currentIndex = 1
+        }
+        TabButton {
+            text: "Dialer"
+            icon.name: "view-pim-contacts"
+            onClicked: pageStack.currentIndex = 2
         }
     }
-    }
-
-    PlasmaExtras.ConditionalLoader {
-        anchors.fill: parent
-
-        property bool shouldShow: dialerUtils.callState != "idle" && dialerUtils.callState != "failed"
-
-        when: shouldShow
-        source: Qt.resolvedUrl("Call/CallPage.qml")
-        opacity: shouldShow ? 1 : 0
-        z:  shouldShow ? 2 : 0
-        Behavior on opacity {
-            OpacityAnimator {
-                duration: Kirigami.Units.shortDuration
-                easing.type: Easing.InOutQuad
-            }
-        }
-    }
-
-//END UI
 }

dialer/src/resources.qrc

@@ -1,15 +1,13 @@
 <RCC>
     <qresource prefix="/">
         <file alias="main.qml">qml/main.qml</file>
+        <file alias="DialerPage.qml">qml/DialerPage.qml</file>
+        <file alias="ContactsPage.qml">qml/ContactsPage.qml</file>
+        <file alias="HistoryPage.qml">qml/HistoryPage.qml</file>
         <file alias="Call/AnswerSwipe.qml">qml/Call/AnswerSwipe.qml</file>
         <file alias="Call/CallPage.qml">qml/Call/CallPage.qml</file>
         <file alias="Call/Avatar.qml">qml/Call/Avatar.qml</file>
-        <file alias="Dialer/Dialer.qml">qml/Dialer/Dialer.qml</file>
+        <file alias="HistoryDelegate.qml">qml/HistoryDelegate.qml</file>
-        <file alias="Dialer/ContactsList.qml">qml/Dialer/ContactsList.qml</file>
-        <file alias="Dialer/DialPage.qml">qml/Dialer/DialPage.qml</file>
-        <file alias="Dialer/RoundImage.qml">qml/Dialer/RoundImage.qml</file>
-        <file alias="Dialer/History.qml">qml/Dialer/History.qml</file>
-        <file alias="Dialer/HistoryDelegate.qml">qml/Dialer/HistoryDelegate.qml</file>
         <file alias="Dialpad/Dialpad.qml">qml/Dialpad/Dialpad.qml</file>
         <file alias="Dialpad/PhoneNumberInput.qml">qml/Dialpad/PhoneNumberInput.qml</file>
         <file alias="Dialpad/DialerButton.qml">qml/Dialpad/DialerButton.qml</file>