better layout in the dialpad

dialer/contents/ui/Call/CallPage.qml

@@ -30,8 +30,6 @@ Item {
     state: voiceCallmanager.activeVoiceCall ? voiceCallmanager.activeVoiceCall.statusText : "disconnected"
     property int status: voiceCallmanager.activeVoiceCall ? voiceCallmanager.activeVoiceCall.status : 0
 
-    property color textColor: "white"
-
     property string providerId: voiceCallmanager.providers.id(0)
 
     function secondsToTimeString(seconds) {
@@ -74,29 +72,29 @@ Item {
                 }
             }
         }
-        Text {
+        PlasmaComponents.Label {
             Layout.fillWidth: true
             Layout.minimumHeight: implicitHeight
             horizontalAlignment: Qt.AlignHCenter
             verticalAlignment: Qt.AlignVCenter
-            font.pixelSize: theme.defaultFont.pixelSize * 2
+            font.pointSize: theme.defaultFont.pointSize * 2
-            color: textColor
             text: voiceCallmanager.activeVoiceCall ? voiceCallmanager.activeVoiceCall.lineId : ""
         }
-        Text {
+        PlasmaComponents.Label {
             Layout.fillWidth: true
             Layout.minimumHeight: implicitHeight
             horizontalAlignment: Qt.AlignHCenter
             verticalAlignment: Qt.AlignVCenter
-            color: textColor
             text: {
                 if (!voiceCallmanager.activeVoiceCall) {
                     return '';
                 //STATUS_DIALING
                 } else if (voiceCallmanager.activeVoiceCall.status == 3) {
                     return i18n("Calling...");
-                } else {
+                } else if (voiceCallmanager.activeVoiceCall.duration > 0) {
                     return secondsToTimeString(voiceCallmanager.activeVoiceCall.duration);
+                } else {
+                    return '';
                 }
             }
         }

dialer/contents/ui/Dialer.qml

@@ -27,7 +27,6 @@ import org.nemomobile.voicecall 1.0
 Item {
     id: dialer
 
-    property color textColor: "white"
     property alias numberEntryText: status.text
 
     property string providerId: voiceCallmanager.providers.id(0)
@@ -61,28 +60,28 @@ Item {
 
         anchors {
             fill: parent
-            margins: 20
+            margins: units.largeSpacing
         }
         PlasmaComponents.Label {
             id: status
             Layout.fillWidth: true
+            Layout.minimumHeight: parent.height / 6
+            Layout.maximumHeight: Layout.minimumHeight
             horizontalAlignment: Qt.AlignRight
             verticalAlignment: Qt.AlignVCenter
-            font.pixelSize: one.font.pixelSize
+            font.pointSize: 1024
+            fontSizeMode: Text.Fit
         }
 
-        Grid {
+        GridLayout {
             id: pad
             columns: 3
-            spacing: 0
+
-            property int buttonHeight: height / 5
+            property int buttonHeight: parent.height / 6
 
             Layout.fillWidth: true
             Layout.fillHeight: true
 
-            height: parent.height - status.height
-            width: parent.width
-
             DialerButton { id: one; text: "1" } 
             DialerButton { text: "2" }
             DialerButton { text: "3" }
@@ -98,17 +97,35 @@ Item {
             DialerButton { text: "*"; } 
             DialerButton { text: "0"; sub: "+"; }
             DialerButton { text: "#" }
+        }
 
-            DialerIconButton {
+        RowLayout {
-                source: "im-user"
+            Layout.fillWidth: true
-                callback: fromContacts
+            Layout.minimumHeight: parent.height / 6
-            }
+            Layout.maximumHeight: Layout.minimumHeight
             DialerIconButton {
                 id: callButton
+                Layout.minimumWidth: dialPadArea.width/3
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                enabled: status.text.length > 0
+                opacity: enabled ? 1 : 0.5
                 source: "call-start"
                 callback: call
             }
+            DialerButton {
+                Layout.minimumWidth: dialPadArea.width/3
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                enabled: status.text.length > 0
+                opacity: enabled ? 1 : 0.5
+                text: i18n("Call")
+                callback: call
+            }
             DialerIconButton {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                Layout.minimumWidth: dialPadArea.width/3
                 source: "edit-clear"
                 callback: function() {
                     if (status.text.length > 0) {

dialer/contents/ui/DialerButton.qml

@@ -1,13 +1,20 @@
-import QtQuick 2.0
-import org.kde.plasma.core 2.0 as PlasmaCore
 
-Text {
+import QtQuick 2.0
-    width: parent.width / parent.columns
+import QtQuick.Layouts 1.1
-    height: parent.buttonHeight
+import org.kde.plasma.core 2.0 as PlasmaCore
+import org.kde.plasma.components 2.0 as PlasmaComponents
+
+PlasmaComponents.Label {
+    Layout.fillWidth: true
+    Layout.fillHeight: true
+
+    //This is 0 to override the Label default height that would cause a binding loop
+    height: 0
     horizontalAlignment: Qt.AlignHCenter
     verticalAlignment: Qt.AlignVCenter
-    color: dialer.textColor
+    font.pointSize: 1024
-    font.pixelSize: Math.floor((width - (units.largeSpacing)) / 2)
+    fontSizeMode: Text.VerticalFit
+
     property alias sub: longHold.text
     property var callback
 
@@ -33,19 +40,19 @@ Text {
         }
     }
 
-    Text {
+    PlasmaComponents.Label {
         id: longHold
         anchors {
-            top: parent.top
+            verticalCenter: parent.verticalCenter
             right: parent.right
         }
-        height: parent.height
+        height: parent.height * 0.6
         width: parent.width / 3
         verticalAlignment: Qt.AlignVCenter
         visible: text.length > 0
         opacity: 0.7
 
-        font.pixelSize: parent.pixelSize * .8
+        font.pointSize: 1024
-        color: parent.color
+        fontSizeMode: Text.Fit
     }
 }

dialer/contents/ui/DialerIconButton.qml

@@ -1,19 +1,34 @@
 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
 
 Item {
-    width: parent.width / parent.columns
+    id: buttonRoot
-    height: parent.buttonHeight
+
+    Layout.fillWidth: true
+    Layout.fillHeight: true
+
     property var callback
-    property string text
     property string sub
     property alias source: icon.source
+    property alias text: label.text
 
-    PlasmaCore.IconItem {
+    Row {
-        id: icon
-        width: units.iconSizes.medium
-        height: width
         anchors.centerIn: parent
+        PlasmaCore.IconItem {
+            id: icon
+            anchors.verticalCenter: parent.verticalCenter
+            width: height
+            height: buttonRoot.height * 0.6
+        }
+        PlasmaComponents.Label {
+            id: label
+            height: buttonRoot.height
+            anchors.verticalCenter: parent.verticalCenter
+            font.pointSize: 1024
+            fontSizeMode: Text.VerticalFit
+        }
     }
 
     MouseArea {

dialer/contents/ui/main.qml

@@ -31,7 +31,7 @@ ApplicationWindow {
     width: 600
     height: 800
     visible: true
-    color: Qt.rgba(0, 0, 0, 0.9)
+    //color: Qt.rgba(0, 0, 0, 0.9)
 
     property int status: voiceCallmanager.activeVoiceCall ? voiceCallmanager.activeVoiceCall.status : 0
 //END PROPERTIES