Commit 7024f462 authored by Michael Eden's avatar Michael Eden

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
parent 0fbc1cba
......@@ -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();
}
}
}
......
......@@ -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
}
......
......@@ -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
}
}
......
......@@ -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
}
}
......@@ -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)
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment