@@ -19,16 +19,12 @@ import Ubuntu.Components 0.1
1919import Ubuntu.Components.ListItems 0.1
2020import "../Components"
2121
22−Column {
22+Item {
2323 id: root
24− y: units.gu(4)
25− spacing: units.gu(2)
2624
2725 property string infoText
2826 property string retryText
2927 property string errorText
30− property int padWidth: units.gu(34)
31− property int padHeight: units.gu(28)
3228 property int minPinLength: -1
3329 property int maxPinLength: -1
3430 property bool showCancelButton: true
@@ -49,123 +45,151 @@ Column {
4945 }
5046
5147 Column {
52− id: shakeContainer
53− anchors.horizontalCenter: parent.horizontalCenter
54− width: parent.width
55− spacing: units.gu(1)
56−
57− Label {
58− id: infoField
59− objectName: "infoTextLabel"
60− fontSize: "large"
61− color: "#f3f3e7"
62− anchors.horizontalCenter: parent.horizontalCenter
63− text: root.infoText
48+ anchors {
49+ left: parent.left;
50+ right: parent.right;
51+ verticalCenter: parent.verticalCenter;
52+ verticalCenterOffset: Math.max(-units.gu(10), -(root.height - height) / 2) + units.gu(4)
6453 }
54+ spacing: units.gu(2)
6555
66− Item {
67− id: pinContainer
68− anchors { left: parent.left; right: parent.right; margins: units.gu(2) }
69− height: units.gu(4)
56+ Column {
57+ id: shakeContainer
58+ anchors.horizontalCenter: parent.horizontalCenter
59+ width: parent.width
60+ spacing: units.gu(1)
7061
71− Row {
72− id: pinentryField
73− objectName: "pinentryField"
62+ Label {
63+ id: infoField
64+ objectName: "infoTextLabel"
65+ fontSize: "large"
66+ color: "#f3f3e7"
7467 anchors.horizontalCenter: parent.horizontalCenter
75− anchors.verticalCenter: parent.verticalCenter
76− spacing: Math.max(0, Math.min(units.gu(3), (parent.width / root.maxPinLength) - units.gu(3)))
68+ text: root.infoText
69+ }
7770
78− property string text
79− property bool incorrectOverride: false
71+ Item {
72+ id: pinContainer
73+ anchors { left: parent.left; right: parent.right; margins: units.gu(2) }
74+ height: units.gu(4)
75+
76+ Row {
77+ id: pinentryField
78+ objectName: "pinentryField"
79+ anchors.horizontalCenter: parent.horizontalCenter
80+ anchors.verticalCenter: parent.verticalCenter
81+ spacing: Math.max(0, Math.min(units.gu(3), (parent.width / root.maxPinLength) - units.gu(3)))
82+
83+ property string text
84+ property bool incorrectOverride: false
85+
86+ Repeater {
87+ model: pinentryField.text.length
88+ delegate: Rectangle {
89+ color: "#f3f3e7"
90+ width: Math.min(units.gu(2), (pinContainer.width - pinContainer.height*2 ) / (root.maxPinLength >= 0 ? root.maxPinLength : 16))
91+ height: width
92+ radius: width / 2
93+ }
94+ }
8095
81− Repeater {
82− model: pinentryField.text.length
83− delegate: Rectangle {
84− color: "#f3f3e7"
85− width: Math.min(units.gu(2), (pinContainer.width - pinContainer.height*2 ) / (root.maxPinLength >= 0 ? root.maxPinLength : 16))
86− height: width
87− radius: width / 2
96+ function appendNumber(number) {
97+ if (incorrectOverride) {
98+ incorrectOverride = false;
99+ }
100+
101+ pinentryField.text = pinentryField.text + number
102+
103+ if (root.minPinLength > 0 && root.maxPinLength > 0
104+ && root.minPinLength == root.maxPinLength && pinentryField.text.length == root.minPinLength) {
105+ root.entered(pinentryField.text)
106+ }
107+ }
108+
109+ function backspace() {
110+ pinentryField.text = pinentryField.text.substring(0, pinentryField.text.length-1)
88111 }
89112 }
113+ Label {
114+ id: wrongNoticeLabel
115+ objectName: "wrongNoticeLabel"
116+ fontSize: "x-large"
117+ color: "#f3f3e7"
118+ anchors.horizontalCenter: parent.horizontalCenter
119+ horizontalAlignment: Text.AlignHCenter
120+ text: root.errorText
121+ visible: pinentryField.incorrectOverride
122+ scale: Math.min(1, parent.width / width)
123+ }
124+
125+ AbstractButton {
126+ objectName: "backspaceIcon"
127+ anchors { right: parent.right; top: parent.top; bottom: parent.bottom }
128+ width: height
129+ enabled: root.entryEnabled
90130
91− function appendNumber(number) {
92− if (incorrectOverride) {
93− incorrectOverride = false;
131+ Icon {
132+ anchors.fill: parent
133+ name: "erase"
134+ color: "#f3f3e7"
94135 }
95136
96− pinentryField.text = pinentryField.text + number
137+ opacity: (pinentryField.text.length > 0 && !pinentryField.incorrectOverride) ? 1 : 0
97138
98− if (root.minPinLength > 0 && root.maxPinLength > 0
99− && root.minPinLength == root.maxPinLength && pinentryField.text.length == root.minPinLength) {
100− root.entered(pinentryField.text)
139+ Behavior on opacity {
140+ UbuntuNumberAnimation {}
101141 }
102− }
103142
104− function backspace() {
105− pinentryField.text = pinentryField.text.substring(0, pinentryField.text.length-1)
143+ onClicked: pinentryField.backspace()
106144 }
107145 }
146+
108147 Label {
109− id: wrongNoticeLabel
110− objectName: "wrongNoticeLabel"
111− fontSize: "x-large"
148+ objectName: "retryLabel"
149+ fontSize: "x-small"
112150 color: "#f3f3e7"
113151 anchors.horizontalCenter: parent.horizontalCenter
114− horizontalAlignment: Text.AlignHCenter
115− text: root.errorText
116− visible: pinentryField.incorrectOverride
117− scale: Math.min(1, parent.width / width)
118− }
119−
120− AbstractButton {
121− objectName: "backspaceIcon"
122− anchors { right: parent.right; top: parent.top; bottom: parent.bottom }
123− width: height
124− enabled: root.entryEnabled
125−
126− Icon {
127− anchors.fill: parent
128− name: "erase"
129− color: "#f3f3e7"
130− }
131−
132− opacity: (pinentryField.text.length > 0 && !pinentryField.incorrectOverride) ? 1 : 0
133−
134− Behavior on opacity {
135− UbuntuNumberAnimation {}
136− }
137−
138− onClicked: pinentryField.backspace()
152+ text: root.retryText || " "
139153 }
140154 }
141155
142− Label {
143− objectName: "retryLabel"
144− fontSize: "x-small"
145− color: "#f3f3e7"
146− anchors.horizontalCenter: parent.horizontalCenter
147− text: root.retryText || " "
156+ ThinDivider {
157+ anchors { left: parent.left; right: parent.right; margins: units.gu(2) }
148158 }
149− }
150−
151− ThinDivider {
152− anchors { left: parent.left; right: parent.right; margins: units.gu(2) }
153− }
154−
155− Grid {
156− id: numbersGrid
157− anchors { horizontalCenter: parent.horizontalCenter }
158− columns: 3
159−
160− property int buttonHeight: units.gu(8)
161− property int buttonWidth: units.gu(12)
162−
163− Repeater {
164− model: 9
165159
160+ Grid {
161+ id: numbersGrid
162+ objectName: "numbersGrid"
163+ anchors { horizontalCenter: parent.horizontalCenter }
164+ columns: 3
165+
166+ property int maxWidth: Math.min(units.gu(50), root.width - units.gu(8))
167+ property int buttonWidth: maxWidth / 3
168+ property int buttonHeight: buttonWidth * 2 / 3
169+
170+ Repeater {
171+ model: 9
172+
173+ PinPadButton {
174+ objectName: "pinPadButton" + text
175+ text: index + 1
176+ height: numbersGrid.buttonHeight
177+ width: numbersGrid.buttonWidth
178+ enabled: root.entryEnabled && (root.maxPinLength == -1 ||
179+ pinentryField.text.length < root.maxPinLength ||
180+ pinentryField.incorrectOverride)
181+
182+ onClicked: {
183+ pinentryField.appendNumber(index + 1)
184+ }
185+ }
186+ }
187+ Item {
188+ height: numbersGrid.buttonHeight
189+ width: numbersGrid.buttonWidth
190+ }
166191 PinPadButton {
167− objectName: "pinPadButton" + text
168− text: index + 1
192+ text: "0"
169193 height: numbersGrid.buttonHeight
170194 width: numbersGrid.buttonWidth
171195 enabled: root.entryEnabled && (root.maxPinLength == -1 ||
@@ -173,56 +197,41 @@ Column {
173197 pinentryField.incorrectOverride)
174198
175199 onClicked: {
176− pinentryField.appendNumber(index + 1)
200+ pinentryField.appendNumber(0)
177201 }
178202 }
179− }
180− Item {
181− height: numbersGrid.buttonHeight
182− width: numbersGrid.buttonWidth
183− }
184− PinPadButton {
185− text: "0"
186− height: numbersGrid.buttonHeight
187− width: numbersGrid.buttonWidth
188− enabled: root.entryEnabled && (root.maxPinLength == -1 ||
189− pinentryField.text.length < root.maxPinLength ||
190− pinentryField.incorrectOverride)
191−
192− onClicked: {
193− pinentryField.appendNumber(0)
203+ Item {
204+ height: numbersGrid.buttonHeight
205+ width: numbersGrid.buttonWidth
194206 }
195− }
196− Item {
197− height: numbersGrid.buttonHeight
198− width: numbersGrid.buttonWidth
199− }
200− PinPadButton {
201− iconName: "close"
202− height: units.gu(5) // visual spec has this row a little closer in
203− width: numbersGrid.buttonWidth
207+ PinPadButton {
208+ iconName: "close"
209+ height: units.gu(5) // visual spec has this row a little closer in
210+ width: numbersGrid.buttonWidth
204211
205− onClicked: root.cancel()
206− visible: root.showCancelButton
207− }
208− Item {
209− height: units.gu(5)
210− width: numbersGrid.buttonWidth
212+ onClicked: root.cancel()
213+ visible: root.showCancelButton
214+ }
215+ Item {
216+ height: units.gu(5)
217+ width: numbersGrid.buttonWidth
218+ }
219+ PinPadButton {
220+ iconName: "tick"
221+ objectName: "confirmButton"
222+ height: units.gu(5)
223+ width: numbersGrid.buttonWidth
224+ enabled: root.enabled && pinentryField.text.length >= root.minPinLength
225+ visible: root.minPinLength == -1 || root.minPinLength !== root.maxPinLength
226+
227+ onClicked: root.entered(pinentryField.text)
228+ }
211229 }
212− PinPadButton {
213− iconName: "tick"
214− objectName: "confirmButton"
215− height: units.gu(5)
216− width: numbersGrid.buttonWidth
217− enabled: root.enabled && pinentryField.text.length >= root.minPinLength
218− visible: root.minPinLength == -1 || root.minPinLength !== root.maxPinLength
219−
220− onClicked: root.entered(pinentryField.text)
230+ WrongPasswordAnimation {
231+ id: wrongPasswordAnimation
232+ objectName: "wrongPasswordAnimation"
233+ target: shakeContainer
221234 }
222235 }
223− WrongPasswordAnimation {
224− id: wrongPasswordAnimation
225− objectName: "wrongPasswordAnimation"
226− target: shakeContainer
227− }
228236}
237+