fix dial pad UI by using density independent units

Summary:
I fixed the strange dialer on the phone, here's a picture:

{F6433134}

Now I have a few questions:

1. To get the '#', '*', & '+' symbols to show up I need to install a font that supports those glyphs. I've only found the font `fonts-mplus`. I can slice this font to only get those glyphs and package them here, or add this font as a dependency.

We should likely have a font like this installed anyway, so people can see weird glyphs on the internet.

2. Is the correct way to set font sizes `pixelSize: units.gridUnit`?

Test Plan: manual testing?

Reviewers: bshah, mart

Reviewed By: bshah

Differential Revision: https://phabricator.kde.org/D17037

dialer/package/contents/ui/Dialer/Dialer.qml

@@ -49,19 +49,17 @@ Item {
 
     ColumnLayout {
         id: dialPadArea
-
-        anchors {
-            fill: parent
-            margins: units.largeSpacing
-        }
+        anchors.fill: parent
 
         PhoneNumberInput {
             id: status
 
             Layout.fillWidth: true
-            Layout.minimumHeight: units.gridUnit * 3.5
+            Layout.topMargin: units.largeSpacing * 3
+            Layout.bottomMargin: units.largeSpacing
+            Layout.minimumHeight: units.gridUnit * 3
             Layout.maximumHeight: Layout.minimumHeight
-            font.pointSize: 30
+            font.pixelSize: units.gridUnit * 2.3
         }
 
         Dialpad {
@@ -71,12 +69,15 @@ Item {
             callback: function (string) {
                 status.append(string)
             }
+            deleteCallback: function () {
+                status.pop()
+            }
             pressedCallback: function (string) {
-                //TODO
-//                 ofonoWrapper.startTone(string);
+                // TODO
+                // ofonoWrapper.startTone(string);
             }
             releasedCallback: function (string) {
-//                 ofonoWrapper.stopTone();
+                // ofonoWrapper.stopTone();
             }
         }
     }

dialer/package/contents/ui/Dialpad/DialerButton.qml

@@ -89,11 +89,9 @@ Item {
         PlasmaComponents.Label {
             id: main
 
+            font.pixelSize: units.gridUnit * 2
             text: root.display || root.text
             opacity: special? 0.4 : 1.0
-            // anything higher for some reason makes number 4 not rendered
-            font.pointSize: 30
-            fontSizeMode: Text.VerticalFit
             Layout.minimumWidth: parent.width
             horizontalAlignment: Text.AlignHCenter
         }
@@ -103,8 +101,6 @@ Item {
 
             text: root.subdisplay || root.sub
             opacity: 0.4
-            font.pointSize: 16
-            fontSizeMode: Text.VerticalFit
             Layout.minimumWidth: parent.width
             horizontalAlignment: Text.AlignHCenter
         }

dialer/package/contents/ui/Dialpad/DialerIconButton.qml

@@ -35,6 +35,7 @@ Item {
     property string sub
     property alias source: icon.source
     property alias text: label.text
+    property int size
 
     Rectangle {
         anchors.fill: parent
@@ -56,13 +57,12 @@ Item {
             id: icon
             anchors.verticalCenter: parent.verticalCenter
             width: height
-            height: units.gridUnit * 3.5
+            height: buttonRoot.size || buttonRoot.height * 0.6
         }
         PlasmaComponents.Label {
             id: label
             height: buttonRoot.height
             anchors.verticalCenter: parent.verticalCenter
-            font.pointSize: 1024
             fontSizeMode: Text.VerticalFit
         }
     }

dialer/package/contents/ui/Dialpad/Dialpad.qml

@@ -19,7 +19,7 @@
  */
 
 import QtQuick 2.0
-import QtQuick.Layouts 1.1
+import QtQuick.Layouts 1.2
 import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.plasma.components 2.0 as PlasmaComponents
 
@@ -28,10 +28,13 @@ GridLayout {
     columns: 3
     rowSpacing: 10
     columnSpacing: 10
+    Layout.leftMargin: units.largeSpacing * 2
+    Layout.rightMargin: units.largeSpacing * 2
 
     property var callback
     property var pressedCallback
     property var releasedCallback
+    property var deleteCallback
 
     DialerButton { id: one; text: "1" }
     DialerButton { text: "2"; sub: "ABC" }
@@ -61,12 +64,20 @@ GridLayout {
         enabled: status.text.length > 0
         opacity: enabled ? 1 : 0.5
         source: "call-start"
+        size: units.gridUnit * 3
         callback: function() {
             call(status.text);
         }
     }
-    Item {
+    DialerIconButton {
+        id: delButton
         Layout.fillWidth: true
         Layout.fillHeight: true
+
+        enabled: status.text.length > 0
+        opacity: enabled ? 1 : 0.5
+        source: "edit-clear"
+        size: units.gridUnit * 2
+        callback: pad.deleteCallback
     }
 }

dialer/package/contents/ui/Dialpad/PhoneNumberInput.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.1
 import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.plasma.components 2.0 as PlasmaComponents
 
+// TODO: search through contacts while typing
 PlasmaComponents.TextField {
     id: root
 
@@ -16,6 +17,7 @@ PlasmaComponents.TextField {
         }
     }
 
+    // append some text to the end of this input
     signal append(string digit)
     onAppend: {
         text += digit
@@ -24,39 +26,9 @@ PlasmaComponents.TextField {
         text = dialerUtils.formatNumber(text);
     }
 
-    // TODO: search through contacts while typing
-
-    Row {
-        anchors {
-            right: parent.right
-            rightMargin: 6
-            verticalCenter: parent.verticalCenter
-        }
-
-        PlasmaCore.IconItem {
-            id: delBtn
-            // ltr confusingly refers to the direction of the arrow in the icon,
-            // not the text direction which it should be used in.
-            source: LayoutMirroring.enabled ?
-                    "edit-clear-locationbar-ltr" : "edit-clear-locationbar-rtl"
-            height: Math.max(root.height * 0.8, units.iconSizes.small)
-            width: height
-            opacity: (root.length > 0 && root.enabled) ? 1 : 0
-            visible: opacity > 0
-            Behavior on opacity {
-                NumberAnimation {
-                    duration: units.longDuration
-                    easing.type: Easing.InOutQuad
-                }
-            }
-            MouseArea {
-                anchors.fill: parent
-                onClicked: {
-                    if (text.length > 0) {
-                        text = text.slice(0, -1);
-                    }
-                }
-            }
-        }
+    // remove last character from this text input
+    signal pop()
+    onPop: {
+        text = text.slice(0, -1)
     }
 }