shift-shell/dialer/package/contents/ui/Dialpad/PhoneNumberInput.qml
Michael Eden 9e68bc049b Improve dialer UI and format phone number
Summary:
This makes the buttons more evenly spaced and formats the number as you type!

old: {F6084821}
new (updated): {F6084822}

The plan is to bring the entire dialer page down to about half its current size to support searching through contacts as one dials a number.

Reviewers: bshah, #plasma:_mobile, mart

Reviewed By: #plasma:_mobile, mart

Subscribers: ngraham

Differential Revision: https://phabricator.kde.org/D13936
2018-08-02 15:48:21 -04:00

62 lines
1.7 KiB
QML

import QtQuick 2.0
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.1
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 2.0 as PlasmaComponents
PlasmaComponents.TextField {
id: root
horizontalAlignment: Qt.AlignHCenter
verticalAlignment: Qt.AlignBottom
style: TextFieldStyle {
background: Rectangle {
opacity: 0
}
}
signal append(string digit)
onAppend: {
text += digit
}
onTextChanged: {
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);
}
}
}
}
}
}