git.iko.soy/unity8
on xenial help sign in
Redo visuals for greeter prompt box.

Now it's white and a little bigger. (LP: #1435923)

commit2fe35fd347e8d16cd87a5149ba699b5ce9bb573b authorMichael Terry <michael.terry@canonical.com> dateFri 17 Jun 2016, 01:16 (10 years ago) parent476455c6ecd8b8
8 files changed+275−110
compare with xenial
unifiedsplit
qml/Components/FadingLabel.qml+42 qml/Greeter/CoverPage.qml+1 qml/Greeter/GreeterPrompt.qml+142 qml/Greeter/LoginList.qml+59−76 qml/Greeter/WideView.qml+1−1 tests/mocks/IntegratedLightDM/liblightdm/UsersModelPrivate.cpp+1−1 tests/qmltests/Greeter/tst_WideView.qml+21−28 tests/qmltests/tst_Shell.qml+8−4
qml/Components/FadingLabel.qmlnew file+42
@@ -0,0 +1,42 @@
1+/*
2+ * Copyright (C) 2016 Canonical, Ltd.
3+ *
4+ * This program is free software; you can redistribute it and/or modify
5+ * it under the terms of the GNU General Public License as published by
6+ * the Free Software Foundation; version 3.
7+ *
8+ * This program is distributed in the hope that it will be useful,
9+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
10+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11+ * GNU General Public License for more details.
12+ *
13+ * You should have received a copy of the GNU General Public License
14+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
15+ */
16+
17+import QtQuick 2.4
18+import QtGraphicalEffects 1.0
19+import Ubuntu.Components 1.3
20+
21+Label {
22+ property real fadeDistance: units.gu(8)
23+
24+ layer.enabled: contentWidth > width
25+ layer.effect: ShaderEffect {
26+ property real fadeThreshold: Math.min(1, Math.max(0, 1 - fadeDistance / width))
27+
28+ fragmentShader: "
29+ varying highp vec2 qt_TexCoord0;
30+ uniform lowp float qt_Opacity;
31+ uniform sampler2D source;
32+ uniform lowp float fadeThreshold;
33+ void main(void)
34+ {
35+ highp vec4 sourceColor = texture2D(source, qt_TexCoord0);
36+ lowp float alpha = 1.0;
37+ if (qt_TexCoord0.x > fadeThreshold && fadeThreshold < 1.0)
38+ alpha = (1.0 - qt_TexCoord0.x) / (1.0 - fadeThreshold);
39+ gl_FragColor = sourceColor * alpha * qt_Opacity;
40+ }"
41+ }
42+}
qml/Greeter/CoverPage.qml+1
@@ -88,6 +88,7 @@ Showable {
8888 sourceSize.width: width
8989 }
9090
91+ // Darkens wallpaper so that we can read text on it and see infographic
9192 Rectangle {
9293 anchors.fill: parent
9394 color: "black"
qml/Greeter/GreeterPrompt.qmlnew file+142
@@ -0,0 +1,142 @@
1+/*
2+ * Copyright (C) 2016 Canonical, Ltd.
3+ *
4+ * This program is free software; you can redistribute it and/or modify
5+ * it under the terms of the GNU General Public License as published by
6+ * the Free Software Foundation; version 3.
7+ *
8+ * This program is distributed in the hope that it will be useful,
9+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
10+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11+ * GNU General Public License for more details.
12+ *
13+ * You should have received a copy of the GNU General Public License
14+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
15+ */
16+
17+import QtQuick 2.4
18+import Ubuntu.Components 1.3
19+
20+FocusScope {
21+ id: root
22+ implicitHeight: units.gu(5)
23+ focus: true
24+
25+ property bool isPrompt
26+ property bool isAlphanumeric
27+ property string text
28+ property bool isSecret
29+
30+ signal clicked()
31+ signal canceled()
32+ signal responded(string text)
33+
34+ function reset() {
35+ passwordInput.text = "";
36+ d.enabled = true;
37+ }
38+
39+ StyledItem {
40+ id: d
41+
42+ property bool enabled: true
43+ readonly property color textColor: passwordInput.enabled ? theme.palette.normal.raisedText
44+ : theme.palette.disabled.raisedText
45+ readonly property color selectedColor: passwordInput.enabled ? theme.palette.normal.raised
46+ : theme.palette.disabled.raised
47+ readonly property color drawColor: passwordInput.enabled ? theme.palette.normal.raisedSecondaryText
48+ : theme.palette.disabled.raisedSecondaryText
49+ readonly property color errorColor: passwordInput.enabled ? theme.palette.normal.negative
50+ : theme.palette.disabled.negative
51+ }
52+
53+ Rectangle {
54+ anchors.fill: parent
55+ border.width: units.dp(1)
56+ border.color: d.drawColor
57+ radius: units.gu(0.5)
58+ color: "transparent"
59+ }
60+
61+ AbstractButton {
62+ objectName: "promptButton"
63+ anchors.fill: parent
64+ visible: !root.isPrompt
65+ enabled: d.enabled
66+ focus: visible
67+
68+ onClicked: root.clicked()
69+
70+ Label {
71+ anchors.centerIn: parent
72+ color: d.textColor
73+ text: root.text
74+ }
75+ }
76+
77+ TextField {
78+ id: passwordInput
79+ objectName: "promptField"
80+ anchors.fill: parent
81+ visible: root.isPrompt
82+ enabled: d.enabled
83+ focus: visible
84+
85+ inputMethodHints: root.isAlphanumeric ? Qt.ImhNone : Qt.ImhDigitsOnly
86+ echoMode: root.isSecret ? TextInput.Password : TextInput.Normal
87+ hasClearButton: false
88+
89+ readonly property real frameSpacing: units.gu(0.5)
90+
91+ style: Item {
92+ property color color: d.textColor
93+ property color selectedTextColor: d.selectedColor
94+ property color selectionColor: d.textColor
95+ property color borderColor: "transparent"
96+ property color backgroundColor: "transparent"
97+ property color errorColor: d.errorColor
98+ property real frameSpacing: passwordInput.frameSpacing
99+ anchors.fill: parent
100+ }
101+
102+ secondaryItem: [
103+ Icon {
104+ id: capsIcon
105+ name: "keyboard-caps-enabled"
106+ height: units.gu(3)
107+ width: units.gu(3)
108+ color: d.textColor
109+ visible: root.isSecret && false // TODO: detect when caps lock is on
110+ }
111+ ]
112+
113+ onAccepted: {
114+ if (!enabled)
115+ return;
116+ d.enabled = false;
117+ root.responded(text);
118+ }
119+
120+ Keys.onEscapePressed: root.canceled()
121+
122+ // We use our own custom placeholder label instead of the standard
123+ // TextField one because the standard one hardcodes baseText as the
124+ // palette color, whereas we want raisedSecondaryText.
125+ Label {
126+ id: hint
127+ anchors {
128+ left: parent.left
129+ right: parent.right
130+ verticalCenter: parent.verticalCenter
131+ leftMargin: units.gu(1.5)
132+ rightMargin: anchors.leftMargin +
133+ (capsIcon.visible ? capsIcon.width + passwordInput.frameSpacing
134+ : 0)
135+ }
136+ text: root.text
137+ visible: passwordInput.text == "" && !passwordInput.inputMethodComposing
138+ color: d.drawColor
139+ elide: Text.ElideRight
140+ }
141+ }
142+}
qml/Greeter/LoginList.qml+59−76
@@ -1,5 +1,5 @@
11/*
2− * Copyright (C) 2013 Canonical, Ltd.
2+ * Copyright (C) 2013-2016 Canonical, Ltd.
33 *
44 * This program is free software; you can redistribute it and/or modify
55 * it under the terms of the GNU General Public License as published by
@@ -15,10 +15,11 @@
1515 */
1616
1717import QtQuick 2.4
18+import QtGraphicalEffects 1.0
1819import Ubuntu.Components 1.3
1920import "../Components"
2021
21−Item {
22+StyledItem {
2223 id: root
2324
2425 property alias model: userList.model
@@ -28,7 +29,7 @@ Item {
2829
2930 readonly property int numAboveBelow: 4
3031 readonly property int cellHeight: units.gu(5)
31− readonly property int highlightedHeight: units.gu(10)
32+ readonly property int highlightedHeight: units.gu(15)
3233 readonly property int moveDuration: 200
3334 readonly property string currentUser: userList.currentItem.username
3435 property bool wasPrompted: false
@@ -57,10 +58,9 @@ Item {
5758 }
5859
5960 function showPrompt(text, isSecret, isDefaultPrompt) {
60− passwordInput.text = "";
61− passwordInput.promptText = text;
62− passwordInput.enabled = true;
63− passwordInput.echoMode = isSecret ? TextInput.Password : TextInput.Normal;
61+ d.promptText = text;
62+ passwordInput.reset();
63+ passwordInput.isSecret = isSecret;
6464 if (wasPrompted) // stay in text field if second prompt
6565 passwordInput.focus = true;
6666 wasPrompted = true;
@@ -78,6 +78,16 @@ Item {
7878 root.resetAuthentication();
7979 }
8080
81+ QtObject {
82+ id: d
83+
84+ property string promptText
85+ }
86+
87+ theme: ThemeSettings {
88+ name: "Ubuntu.Components.Themes.Ambiance"
89+ }
90+
8191 Keys.onEscapePressed: {
8292 selected(currentIndex);
8393 }
@@ -86,19 +96,30 @@ Item {
8696 userList.currentIndex = currentIndex;
8797 }
8898
89− Rectangle {
99+ BorderImage {
100+ anchors {
101+ fill: highlightItem
102+ topMargin: -units.gu(1)
103+ leftMargin: -units.gu(1.5)
104+ rightMargin: -units.gu(1.5)
105+ bottomMargin: -units.gu(1.5)
106+ }
107+ source: "../Stages/graphics/dropshadow2gu.sci"
108+ opacity: 0.35
109+ }
110+
111+ UbuntuShape {
90112 id: highlightItem
91113 anchors {
92114 left: parent.left
115+ leftMargin: units.gu(2)
93116 right: parent.right
117+ rightMargin: units.gu(2)
94118 verticalCenter: parent.verticalCenter
95119 }
96120 height: root.highlightedHeight
97− color: Qt.rgba(0.1, 0.1, 0.1, 0.4)
98− border.color: Qt.rgba(0.4, 0.4, 0.4, 0.4)
99− border.width: units.dp(1)
100− radius: units.gu(1.5)
101− antialiasing: true
121+ aspect: UbuntuShape.Flat
122+ backgroundColor: theme.palette.normal.raised
102123 }
103124
104125 ListView {
@@ -106,6 +127,8 @@ Item {
106127 objectName: "userList"
107128
108129 anchors.fill: parent
130+ anchors.leftMargin: units.gu(2)
131+ anchors.rightMargin: units.gu(2)
109132
110133 preferredHighlightBegin: userList.height / 2 - root.highlightedHeight / 2
111134 preferredHighlightEnd: userList.height / 2 - root.highlightedHeight / 2
@@ -151,7 +174,7 @@ Item {
151174 return 1 - Math.min(1, (Math.abs(highlightDist) + root.cellHeight) / ((root.numAboveBelow + 1) * root.cellHeight))
152175 }
153176
154− Label {
177+ FadingLabel {
155178 objectName: "username" + index
156179
157180 anchors {
@@ -159,13 +182,12 @@ Item {
159182 leftMargin: units.gu(2)
160183 right: parent.right
161184 rightMargin: units.gu(2)
162− top: parent.top
163− // Add an offset to topMargin for any items below the highlight
164− topMargin: units.gu(1) + (parent.belowHighlight ? parent.belowOffset : 0)
185+ bottom: parent.top
186+ // Add an offset to bottomMargin for any items below the highlight
187+ bottomMargin: -(units.gu(4) + (parent.belowHighlight ? parent.belowOffset : 0))
165188 }
166189 text: realName
167− color: "white"
168− elide: Text.ElideRight
190+ color: userList.currentIndex !== index ? theme.palette.normal.raised : theme.palette.normal.raisedText
169191
170192 Behavior on anchors.topMargin { NumberAnimation { duration: root.moveDuration; easing.type: Easing.InOutQuad; } }
171193 }
@@ -196,23 +218,22 @@ Item {
196218 }
197219 }
198220
199− Label {
221+ FadingLabel {
200222 id: infoLabel
201223 objectName: "infoLabel"
202224 anchors {
203225 bottom: passwordInput.top
204− left: parent.left
226+ left: highlightItem.left
205227 topMargin: units.gu(1)
206228 bottomMargin: units.gu(1)
207229 leftMargin: units.gu(2)
208230 rightMargin: units.gu(1)
209231 }
210232
211− color: "white"
233+ color: theme.palette.normal.raisedText
212234 width: root.width - anchors.leftMargin - anchors.rightMargin
213235 fontSize: "small"
214236 textFormat: Text.StyledText
215− clip: true
216237
217238 opacity: (userList.movingInternally || text == "") ? 0 : 1
218239 Behavior on opacity {
@@ -220,72 +241,36 @@ Item {
220241 }
221242 }
222243
223− TextField {
244+ GreeterPrompt {
224245 id: passwordInput
225246 objectName: "passwordInput"
226247 anchors {
227248 bottom: highlightItem.bottom
228− horizontalCenter: parent.horizontalCenter
229− margins: units.gu(1)
249+ horizontalCenter: highlightItem.horizontalCenter
250+ margins: units.gu(2)
230251 }
231− height: units.gu(4.5)
232− width: parent.width - anchors.margins * 2
252+ width: highlightItem.width - anchors.margins * 2
233253 opacity: userList.movingInternally ? 0 : 1
234254
235− inputMethodHints: root.alphanumeric ? Qt.ImhNone : Qt.ImhDigitsOnly
255+ isPrompt: root.wasPrompted
256+ isAlphanumeric: root.alphanumeric
236257
237− property string promptText
238− placeholderText: root.wasPrompted ? promptText
239− : (root.locked ? i18n.tr("Retry")
240− : i18n.tr("Tap to unlock"))
258+ text: root.wasPrompted ? d.promptText
259+ : (root.locked ? i18n.tr("Retry")
260+ : i18n.tr("Log In"))
261+
262+ onClicked: root.tryToUnlock()
263+ onResponded: root.responded(text)
264+ onCanceled: root.selected(currentIndex)
241265
242266 Behavior on opacity {
243267 NumberAnimation { duration: 100 }
244268 }
245269
246− onAccepted: {
247− if (!enabled)
248− return;
249− root.focus = true; // so that it can handle Escape presses for us
250− enabled = false;
251− root.responded(text);
252− }
253− Keys.onEscapePressed: {
254− root.selected(currentIndex);
255− }
256−
257− Image {
258− anchors {
259− right: parent.right
260− rightMargin: units.gu(2)
261− verticalCenter: parent.verticalCenter
262− }
263− visible: !root.wasPrompted
264− source: "graphics/icon_arrow.png"
265− }
266−
267270 WrongPasswordAnimation {
268271 id: wrongPasswordAnimation
269272 target: passwordInput
270273 }
271−
272− Connections {
273− target: Qt.inputMethod
274− onVisibleChanged: {
275− if (!Qt.inputMethod.visible) {
276− passwordInput.focus = false;
277− }
278− }
279− }
280−
281− }
282−
283− MouseArea {
284− id: passwordMouseArea
285− objectName: "passwordMouseArea"
286− anchors.fill: passwordInput
287− enabled: !root.wasPrompted
288− onClicked: root.tryToUnlock()
289274 }
290275
291276 function resetAuthentication() {
@@ -293,10 +278,8 @@ Item {
293278 return;
294279 }
295280 infoLabel.text = "";
296− passwordInput.promptText = "";
297− passwordInput.text = "";
298− passwordInput.focus = false;
299− passwordInput.enabled = true;
281+ d.promptText = "";
282+ passwordInput.reset();
300283 root.wasPrompted = false;
301284 }
302285}
qml/Greeter/WideView.qml+1−1
@@ -121,7 +121,7 @@ FocusScope {
121121 leftMargin: Math.min(parent.width * 0.16, units.gu(20))
122122 top: parent.top
123123 }
124− width: units.gu(29)
124+ width: units.gu(40)
125125 height: inputMethod && inputMethod.visible ? parent.height - inputMethod.keyboardRectangle.height
126126 : parent.height
127127 Behavior on height { UbuntuNumberAnimation {} }
tests/mocks/IntegratedLightDM/liblightdm/UsersModelPrivate.cpp+1−1
@@ -89,7 +89,7 @@ void UsersModelPrivate::resetEntries_full()
8989 { "long-info-prompt", "Long Info Prompt", 0, 0, false, false, 0, 0 },
9090 { "wide-info-prompt", "Wide Info Prompt", 0, 0, false, false, 0, 0 },
9191 { "multi-info-prompt", "Multi Info Prompt", 0, 0, false, false, 0, 0 },
92− { "long-name", "Long name (far far too long to fit)", 0, 0, false, false, 0, 0 },
92+ { "long-name", "Long name (far far too long to fit, seriously this would never fit on the screen, you will never see this part of the name)", 0, 0, false, false, 0, 0 },
9393 { "color-background", "Color Background", "#dd4814", 0, false, false, 0, 0 },
9494 // white and black are a bit redundant, but useful for manually testing if UI is still readable
9595 { "white-background", "White Background", "#ffffff", 0, false, false, 0, 0 },
tests/qmltests/Greeter/tst_WideView.qml+21−28
@@ -1,5 +1,5 @@
11/*
2− * Copyright 2014 Canonical Ltd.
2+ * Copyright 2014-2016 Canonical Ltd.
33 *
44 * This program is free software; you can redistribute it and/or modify
55 * it under the terms of the GNU General Public License as published by
@@ -22,11 +22,13 @@ import IntegratedLightDM 0.1 as LightDM
2222import Ubuntu.Components 1.3
2323import Unity.Test 0.1 as UT
2424
25−Item {
25+StyledItem {
2626 id: root
2727 width: units.gu(120)
2828 height: units.gu(80)
2929
30+ theme.name: "Ubuntu.Components.Themes.SuruDark"
31+
3032 Binding {
3133 target: LightDM.Users
3234 property: "mockMode"
@@ -103,7 +105,7 @@ Item {
103105
104106 Rectangle {
105107 id: controls
106− color: "white"
108+ color: theme.palette.normal.background
107109 width: units.gu(40)
108110 height: parent.height
109111
@@ -392,8 +394,8 @@ Item {
392394 view.locked = true;
393395 view.showPrompt("Prompt", true, true);
394396 var passwordInput = findChild(view, "passwordInput");
395− compare(passwordInput.placeholderText, "Prompt");
396− compare(passwordInput.echoMode, TextInput.Password);
397+ compare(passwordInput.text, "Prompt");
398+ verify(passwordInput.isSecret);
397399 tap(passwordInput);
398400 typeString("password");
399401 keyClick(Qt.Key_Enter);
@@ -405,8 +407,8 @@ Item {
405407 view.locked = true;
406408 view.showPrompt("otp", false, false);
407409 var passwordInput = findChild(view, "passwordInput");
408− compare(passwordInput.placeholderText, "otp");
409− compare(passwordInput.echoMode, TextInput.Normal);
410+ compare(passwordInput.text, "otp");
411+ verify(!passwordInput.isSecret);
410412 tap(passwordInput);
411413 typeString("foo");
412414 keyClick(Qt.Key_Enter);
@@ -439,7 +441,6 @@ Item {
439441 var infoLabel = findChild(view, "infoLabel");
440442 compare(infoLabel.text, "Welcome to Unity Greeter<br><font color=\"#df382c\">This is an error</font><br>You should have seen three messages and this is a really long message too. wow so long much length");
441443 compare(infoLabel.textFormat, Text.StyledText);
442− compare(infoLabel.clip, true);
443444 verify(infoLabel.contentWidth > infoLabel.width);
444445 verify(infoLabel.opacity < 1);
445446 tryCompare(infoLabel, "opacity", 1);
@@ -451,15 +452,15 @@ Item {
451452 selectedSpy.clear();
452453 view.locked = true;
453454 view.showPrompt("Prompt", true, true);
454− var passwordInput = findChild(view, "passwordInput");
455− tap(passwordInput);
456− compare(passwordInput.focus, true);
457− compare(passwordInput.enabled, true);
455+ var promptField = findChild(view, "promptField");
456+ tap(promptField);
457+ compare(promptField.focus, true);
458+ compare(promptField.enabled, true);
458459
459460 typeString("password");
460461 keyClick(Qt.Key_Enter);
461− compare(passwordInput.focus, false);
462− compare(passwordInput.enabled, false);
462+ compare(promptField.focus, true);
463+ compare(promptField.enabled, false);
463464
464465 compare(selectedSpy.count, 0);
465466 keyClick(Qt.Key_Escape);
@@ -467,8 +468,8 @@ Item {
467468 compare(selectedSpy.signalArguments[0][0], 1);
468469
469470 view.reset();
470− compare(passwordInput.focus, false);
471− compare(passwordInput.enabled, true);
471+ compare(promptField.focus, false);
472+ compare(promptField.enabled, true);
472473 }
473474
474475 function test_unicode() {
@@ -477,17 +478,11 @@ Item {
477478 tryCompare(label, "text", "가나다라마");
478479 }
479480
480− function test_longName() {
481− var index = selectUser("long-name");
482− var label = findChild(view, "username" + index);
483− tryCompare(label, "truncated", true);
484− }
485−
486481 function test_promptless() {
487482 var passwordInput = findChild(view, "passwordInput");
488483
489484 view.locked = true;
490− compare(passwordInput.placeholderText, "Retry");
485+ compare(passwordInput.text, "Retry");
491486 tap(passwordInput);
492487 compare(respondedSpy.count, 0);
493488 compare(selectedSpy.count, 1);
@@ -495,7 +490,7 @@ Item {
495490 selectedSpy.clear();
496491
497492 view.locked = false;
498− compare(passwordInput.placeholderText, "Tap to unlock");
493+ compare(passwordInput.text, "Log In");
499494 tap(passwordInput);
500495 compare(selectedSpy.count, 0);
501496 compare(respondedSpy.count, 1);
@@ -527,11 +522,9 @@ Item {
527522 var passwordInput = findChild(view, "passwordInput");
528523
529524 verify(view.alphanumeric);
530− compare(passwordInput.inputMethodHints, Qt.ImhNone);
525+ verify(passwordInput.isAlphanumeric);
531526 view.alphanumeric = false;
532− compare(passwordInput.inputMethodHints, Qt.ImhDigitsOnly);
533− view.alphanumeric = true;
534− compare(passwordInput.inputMethodHints, Qt.ImhNone);
527+ verify(!passwordInput.isAlphanumeric);
535528 }
536529 }
537530}
tests/qmltests/tst_Shell.qml+8−4
@@ -810,10 +810,14 @@ Rectangle {
810810 var greeter = findChild(shell, "greeter")
811811 tryCompare(greeter, "fullyShown", true);
812812
813− var passwordMouseArea = findChild(shell, "passwordMouseArea")
814− tryCompare(passwordMouseArea, "enabled", isButton)
813+ var passwordInput = findChild(shell, "passwordInput");
814+
815+ var promptButton = findChild(passwordInput, "promptButton");
816+ tryCompare(promptButton, "visible", isButton);
817+
818+ var promptField = findChild(passwordInput, "promptField");
819+ tryCompare(promptField, "visible", !isButton);
815820
816− var passwordInput = findChild(shell, "passwordInput")
817821 mouseClick(passwordInput)
818822 }
819823
@@ -2370,7 +2374,7 @@ Rectangle {
23702374 function test_switchKeymap() {
23712375 // start with phone shell
23722376 loadShell("phone");
2373− shell.usageScenario = "shell";
2377+ shell.usageScenario = "phone";
23742378 waitForRendering(shell);
23752379 swipeAwayGreeter();
23762380