@@ -16,15 +16,17 @@
1616
1717import QtQuick 2.0
1818import Ubuntu.Components 0.1
19+import Ubuntu.Components.ListItems 0.1
1920import "../Components"
2021
2122Column {
2223 id: root
2324 anchors.centerIn: parent
24− spacing: units.gu(2.5)
25+ spacing: units.gu(3.5)
2526
2627 property alias placeholderText: pinentryField.placeholderText
27− property int padWidth: units.gu(32)
28+ property int padWidth: units.gu(34)
29+ property int padHeight: units.gu(28)
2830 property int pinLength: 4
2931
3032 signal entered(string passphrase)
@@ -37,70 +39,137 @@ Column {
3739 }
3840 }
3941
40− TextField {
42+
43+ UbuntuShape {
4144 id: pinentryField
4245 objectName: "pinentryField"
4346 anchors.horizontalCenter: parent.horizontalCenter
44− width: units.gu(32)
47+ color: "#55000000"
48+ width:root.padWidth
4549 height: units.gu(5)
46− echoMode: TextInput.Password
47− font.pixelSize: units.dp(44)
48− color: "white"
49− opacity: 0.9
50− hasClearButton: false
51− horizontalAlignment: Text.AlignHCenter
52−
50+ radius: "medium"
51+ property string text: ""
52+ property string placeholderText: ""
5353 onTextChanged: {
54− if (pinentryField.text.length === root.pinLength) {
55− root.entered(pinentryField.text);
54+ pinentryFieldLabel.text = "";
55+ for (var i = 0; i < text.length; ++i) {
56+ pinentryFieldLabel.text += "•";
57+ }
58+ if (text.length === root.pinLength) {
59+ root.entered(text);
5660 }
5761 }
5862
59− // Using a MouseArea to eat clicks. We don't want to disable the TextField for styling reasons
60− MouseArea {
61− anchors.fill: parent
63+ Label {
64+ id: pinentryFieldLabel
65+ anchors.centerIn: parent
66+ font.pixelSize: units.dp(44)
67+ color: "#f3f3e7"
68+ opacity: 0.6
69+ }
70+ Label {
71+ id: pinentryFieldPlaceHolder
72+ anchors.centerIn: parent
73+ color: "grey"
74+ text: parent.placeholderText
75+ visible: pinentryFieldLabel.text.length == 0
6276 }
6377 }
6478
65− Grid {
79+ UbuntuShape {
6680 anchors {
6781 left: parent.left
6882 right: parent.right
6983 margins: (parent.width - root.padWidth) / 2
7084 }
85+ height: root.padHeight
86+ color: "#55000000"
87+ radius: "medium"
88+
89+ ThinDivider {
90+ anchors {
91+ left: parent.left
92+ right: parent.right
93+ top: parent.top
94+ topMargin: root.padHeight / 4
95+ }
96+ }
97+ ThinDivider {
98+ anchors {
99+ left: parent.left
100+ right: parent.right
101+ verticalCenter: parent.verticalCenter
102+ }
103+ }
104+ ThinDivider {
105+ anchors {
106+ left: parent.left
107+ right: parent.right
108+ bottom: parent.bottom
109+ bottomMargin: root.padHeight / 4
110+ }
111+ }
71112
72− columns: 3
73− spacing: units.gu(1)
113+ ThinDivider {
114+ anchors.centerIn: parent
115+ anchors.horizontalCenterOffset: -root.padWidth / 6
116+ width: root.padHeight
117+ rotation: -90
118+ }
119+ ThinDivider {
120+ anchors.centerIn: parent
121+ anchors.horizontalCenterOffset: root.padWidth / 6
122+ width: root.padHeight
123+ rotation: -90
124+ }
74125
75− Repeater {
76− model: 9
126+ Grid {
127+ anchors {
128+ left: parent.left
129+ right: parent.right
130+ margins: (parent.width - root.padWidth) / 2
131+ }
77132
78− PinPadButton {
79− objectName: "pinPadButton" + (index + 1)
80− text: index + 1
133+ columns: 3
134+
135+ Repeater {
136+ model: 9
137+
138+ PinPadButton {
139+ objectName: "pinPadButton" + (index + 1)
140+ width: root.padWidth / 3
141+ height: root.padHeight / 4
142+ text: index + 1
81143
82− onClicked: {
83− pinentryField.text = pinentryField.text + text
144+ onClicked: {
145+ pinentryField.text = pinentryField.text + text;
146+ }
84147 }
85148 }
86− }
87149
88− PinPadButton {
89− objectName: "pinPadButtonBack"
90− iconName: "back"
91− onClicked: root.cancel();
150+ PinPadButton {
151+ objectName: "pinPadButtonBack"
152+ width: root.padWidth / 3
153+ height: root.padHeight / 4
154+ iconName: "back"
155+ onClicked: root.cancel();
156+ }
92157
93− }
94− PinPadButton {
95− objectName: "pinPadButton0"
96− text: "0"
97− onClicked: pinentryField.text = pinentryField.text + text
158+ PinPadButton {
159+ objectName: "pinPadButton0"
160+ width: root.padWidth / 3
161+ height: root.padHeight / 4
162+ text: "0"
163+ onClicked: pinentryField.text = pinentryField.text + text
164+ }
98165
99− }
100− PinPadButton {
101− objectName: "pinPadButtonErase"
102− iconName: "erase"
103− onClicked: pinentryField.text = pinentryField.text.substring(0, pinentryField.text.length-1)
166+ PinPadButton {
167+ objectName: "pinPadButtonErase"
168+ width: root.padWidth / 3
169+ height: root.padHeight / 4
170+ iconName: "erase"
171+ onClicked: pinentryField.text = pinentryField.text.substring(0, pinentryField.text.length-1)
172+ }
104173 }
105174 }
106175