@@ -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,31 +39,89 @@ 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+ }
69+ Label {
70+ id: pinentryFieldPlaceHolder
71+ anchors.centerIn: parent
72+ color: "grey"
73+ text: parent.placeholderText
74+ visible: pinentryFieldLabel.text.length == 0
6275 }
6376 }
6477
78+ UbuntuShape {
79+ anchors {
80+ left: parent.left
81+ right: parent.right
82+ margins: (parent.width - root.padWidth) / 2
83+ }
84+ height: root.padHeight
85+ color: "#55000000"
86+ radius: "medium"
87+
88+ ThinDivider {
89+ anchors {
90+ left: parent.left
91+ right: parent.right
92+ top: parent.top
93+ topMargin: root.padHeight / 4
94+ }
95+ }
96+ ThinDivider {
97+ anchors {
98+ left: parent.left
99+ right: parent.right
100+ verticalCenter: parent.verticalCenter
101+ }
102+ }
103+ ThinDivider {
104+ anchors {
105+ left: parent.left
106+ right: parent.right
107+ bottom: parent.bottom
108+ bottomMargin: root.padHeight / 4
109+ }
110+ }
111+
112+ ThinDivider {
113+ anchors.centerIn: parent
114+ anchors.horizontalCenterOffset: -root.padWidth / 6
115+ width: root.padHeight
116+ rotation: -90
117+ }
118+ ThinDivider {
119+ anchors.centerIn: parent
120+ anchors.horizontalCenterOffset: root.padWidth / 6
121+ width: root.padHeight
122+ rotation: -90
123+ }
124+
65125 Grid {
66126 anchors {
67127 left: parent.left
@@ -70,13 +130,14 @@ Column {
70130 }
71131
72132 columns: 3
73− spacing: units.gu(1)
74133
75134 Repeater {
76135 model: 9
77136
78137 PinPadButton {
79138 objectName: "pinPadButton" + (index + 1)
139+ width: root.padWidth / 3
140+ height: root.padHeight / 4
80141 text: index + 1
81142
82143 onClicked: {
@@ -87,23 +148,31 @@ Column {
87148
88149 PinPadButton {
89150 objectName: "pinPadButtonBack"
151+ width: root.padWidth / 3
152+ height: root.padHeight / 4
90153 iconName: "back"
91154 onClicked: root.cancel();
92155
93156 }
94157 PinPadButton {
95158 objectName: "pinPadButton0"
159+ width: root.padWidth / 3
160+ height: root.padHeight / 4
96161 text: "0"
97162 onClicked: pinentryField.text = pinentryField.text + text
98163
99164 }
100165 PinPadButton {
101166 objectName: "pinPadButtonErase"
167+ width: root.padWidth / 3
168+ height: root.padHeight / 4
102169 iconName: "erase"
103170 onClicked: pinentryField.text = pinentryField.text.substring(0, pinentryField.text.length-1)
104171 }
105172 }
106173
174+ }
175+
107176 WrongPasswordAnimation {
108177 id: wrongPasswordAnimation
109178 target: pinentryField