on xenial help sign in
Make password box a little more to-spec and make user labels fade out rather than elipse if they are too long
commit6bb970453036b1de132c82dbc36f8c82f4bf11b6 authorMichael Terry <michael.terry@canonical.com> dateFri 6 May 2016, 11:22 (10 years ago) parent3baed3c
9 files changed+207−60
qml/Components/FadingLabel.qml+44 qml/Components/WallpaperResolver.qml+3−2 qml/Greeter/CoverPage.qml+9 qml/Greeter/Greeter.qml+7 qml/Greeter/GreeterPrompt.qml+116 qml/Greeter/LoginList.qml+24−58 qml/Greeter/NarrowView.qml+1 qml/Greeter/WideView.qml+2 qml/Shell.qml+1
qml/Components/FadingLabel.qmlnew file+44
@@ -0,0 +1,44 @@
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+ id: root
23+
24+ property real fadeDistance: units.gu(8)
25+
26+ layer.enabled: contentWidth > width
27+ layer.effect: ShaderEffect {
28+ property real fadeThreshold: Math.min(1, Math.max(0, 1 - fadeDistance / root.width))
29+
30+ fragmentShader: "
31+ varying highp vec2 qt_TexCoord0;
32+ uniform lowp float qt_Opacity;
33+ uniform sampler2D source;
34+ uniform lowp float fadeThreshold;
35+ void main(void)
36+ {
37+ highp vec4 sourceColor = texture2D(source, qt_TexCoord0);
38+ lowp float alpha = 1.0;
39+ if (qt_TexCoord0.x > fadeThreshold && fadeThreshold < 1.0)
40+ alpha = (1.0 - qt_TexCoord0.x) / (1.0 - fadeThreshold);
41+ gl_FragColor = sourceColor * alpha * qt_Opacity;
42+ }"
43+ }
44+}
qml/Components/WallpaperResolver.qml+3−2
@@ -29,8 +29,9 @@ QtObject {
2929 // Users should set their UI width here.
3030 property real width
3131
32− property url defaultBackground: Qt.resolvedUrl(width >= units.gu(60) ? "../graphics/tablet_background.jpg"
33− : "../graphics/phone_background.jpg")
32+ readonly property url defaultBackground: Qt.resolvedUrl(width >= units.gu(60)
33+ ? "../graphics/tablet_background.jpg"
34+ : "../graphics/phone_background.jpg")
3435
3536 // That's the property users of this component are going to consume.
3637 readonly property url background: asImageTester.status == Image.Ready ? asImageTester.source
qml/Greeter/CoverPage.qml+9
@@ -28,6 +28,7 @@ Showable {
2828 property real backgroundTopMargin
2929 property var infographicModel
3030 property bool draggable: true
31+ property bool blur
3132
3233 property alias infographics: infographics
3334
@@ -88,6 +89,14 @@ Showable {
8889 sourceSize.width: width
8990 }
9091
92+ // FIXME
93+ /*BlurLayer {
94+ anchors.fill: greeterBackground
95+ source: greeterBackground
96+ blurRadius: 60
97+ }*/
98+
99+ // Darkens wallpaper so that we can read text on it and see infographic
91100 Rectangle {
92101 anchors.fill: parent
93102 color: "black"
qml/Greeter/Greeter.qml+7
@@ -30,6 +30,7 @@ Showable {
3030 property real dragHandleLeftMargin: 0
3131
3232 property url background
33+ property bool customBackground
3334
3435 // How far to offset the top greeter layer during a launcher left-drag
3536 property real launcherOffset
@@ -333,6 +334,12 @@ Showable {
333334 value: root.background
334335 }
335336
337+ Binding {
338+ target: loader.item
339+ property: "customBackground"
340+ value: root.customBackground
341+ }
342+
336343 Binding {
337344 target: loader.item
338345 property: "locked"
qml/Greeter/GreeterPrompt.qmlnew file+116
@@ -0,0 +1,116 @@
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(4.5)
23+
24+ property bool isPrompt
25+ property bool isAlphanumeric
26+ property string text
27+ property bool isSecret
28+
29+ signal clicked()
30+ signal canceled()
31+ signal responded(string text)
32+
33+ function reset() {
34+ passwordInput.text = "";
35+ passwordInput.focus = false;
36+ passwordInput.enabled = true;
37+ }
38+
39+ Rectangle {
40+ anchors.fill: parent
41+ border.width: units.dp(1)
42+ border.color: UbuntuColors.porcelain
43+ radius: units.gu(0.5)
44+ color: "transparent"
45+ }
46+
47+ AbstractButton {
48+ anchors.fill: parent
49+ visible: !root.isPrompt
50+
51+ onClicked: root.clicked()
52+
53+ Label {
54+ anchors.centerIn: parent
55+ color: UbuntuColors.porcelain
56+ text: root.text
57+ }
58+ }
59+
60+ TextField {
61+ id: passwordInput
62+ anchors.fill: parent
63+ visible: root.isPrompt
64+
65+ inputMethodHints: root.isAlphanumeric ? Qt.ImhNone : Qt.ImhDigitsOnly
66+ echoMode: root.isSecret ? TextInput.Password : TextInput.Normal
67+ placeholderText: " " + root.text // add some spacing here
68+ hasClearButton: false
69+
70+ style: Item {
71+ property color color: UbuntuColors.porcelain
72+ property color selectedTextColor: styledItem.enabled ? theme.palette.selected.selectionText : theme.palette.disabled.selectionText
73+ property color selectionColor: styledItem.enabled ? theme.palette.selected.selection : theme.palette.disabled.selection
74+ property color borderColor: "transparent"
75+ property color backgroundColor: "transparent"
76+ property color errorColor: styledItem.enabled ? theme.palette.normal.negative : theme.palette.disabled.negative
77+ property real frameSpacing: units.gu(0.5)
78+ anchors.fill: parent
79+
80+ Rectangle {
81+ anchors.fill: parent
82+ color: "white"
83+ opacity: 0.1
84+ }
85+ }
86+
87+ secondaryItem: [
88+ Icon {
89+ name: "keyboard-caps-enabled"
90+ height: units.gu(2)
91+ width: units.gu(2)
92+ color: UbuntuColors.porcelain
93+ visible: false // TODO: detect when caps lock is on
94+ }
95+ ]
96+
97+ onAccepted: {
98+ if (!enabled)
99+ return;
100+ root.focus = true; // so that it can handle Escape presses for us
101+ enabled = false;
102+ root.responded(text);
103+ }
104+
105+ Keys.onEscapePressed: root.canceled()
106+
107+ Connections {
108+ target: Qt.inputMethod
109+ onVisibleChanged: {
110+ if (!Qt.inputMethod.visible) {
111+ passwordInput.focus = false;
112+ }
113+ }
114+ }
115+ }
116+}
qml/Greeter/LoginList.qml+24−58
@@ -57,10 +57,9 @@ Item {
5757 }
5858
5959 function showPrompt(text, isSecret, isDefaultPrompt) {
60− passwordInput.text = "";
61− passwordInput.promptText = text;
62− passwordInput.enabled = true;
63− passwordInput.echoMode = isSecret ? TextInput.Password : TextInput.Normal;
60+ d.promptText = text;
61+ passwordInput.reset();
62+ passwordInput.isSecret = isSecret;
6463 if (wasPrompted) // stay in text field if second prompt
6564 passwordInput.focus = true;
6665 wasPrompted = true;
@@ -78,6 +77,12 @@ Item {
7877 root.resetAuthentication();
7978 }
8079
80+ QtObject {
81+ id: d
82+
83+ property string promptText
84+ }
85+
8186 Keys.onEscapePressed: {
8287 selected(currentIndex);
8388 }
@@ -151,7 +156,7 @@ Item {
151156 return 1 - Math.min(1, (Math.abs(highlightDist) + root.cellHeight) / ((root.numAboveBelow + 1) * root.cellHeight))
152157 }
153158
154− Label {
159+ FadingLabel {
155160 objectName: "username" + index
156161
157162 anchors {
@@ -164,8 +169,7 @@ Item {
164169 topMargin: units.gu(1) + (parent.belowHighlight ? parent.belowOffset : 0)
165170 }
166171 text: realName
167− color: "white"
168− elide: Text.ElideRight
172+ color: UbuntuColors.porcelain
169173
170174 Behavior on anchors.topMargin { NumberAnimation { duration: root.moveDuration; easing.type: Easing.InOutQuad; } }
171175 }
@@ -208,7 +212,7 @@ Item {
208212 rightMargin: units.gu(1)
209213 }
210214
211− color: "white"
215+ color: UbuntuColors.porcelain
212216 width: root.width - anchors.leftMargin - anchors.rightMargin
213217 fontSize: "small"
214218 textFormat: Text.StyledText
@@ -220,7 +224,7 @@ Item {
220224 }
221225 }
222226
223− TextField {
227+ GreeterPrompt {
224228 id: passwordInput
225229 objectName: "passwordInput"
226230 anchors {
@@ -228,64 +232,28 @@ Item {
228232 horizontalCenter: parent.horizontalCenter
229233 margins: units.gu(1)
230234 }
231− height: units.gu(4.5)
232235 width: parent.width - anchors.margins * 2
233236 opacity: userList.movingInternally ? 0 : 1
234237
235− inputMethodHints: root.alphanumeric ? Qt.ImhNone : Qt.ImhDigitsOnly
238+ isPrompt: root.wasPrompted
239+ isAlphanumeric: root.alphanumeric
236240
237− property string promptText
238− placeholderText: root.wasPrompted ? promptText
239− : (root.locked ? i18n.tr("Retry")
240− : i18n.tr("Tap to unlock"))
241+ text: root.wasPrompted ? d.promptText
242+ : (root.locked ? i18n.tr("Retry")
243+ : i18n.tr("Log In"))
244+
245+ onClicked: root.tryToUnlock()
246+ onResponded: root.responded(text)
247+ onCanceled: root.selected(currentIndex)
241248
242249 Behavior on opacity {
243250 NumberAnimation { duration: 100 }
244251 }
245252
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−
267253 WrongPasswordAnimation {
268254 id: wrongPasswordAnimation
269255 target: passwordInput
270256 }
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()
289257 }
290258
291259 function resetAuthentication() {
@@ -293,10 +261,8 @@ Item {
293261 return;
294262 }
295263 infoLabel.text = "";
296− passwordInput.promptText = "";
297− passwordInput.text = "";
298− passwordInput.focus = false;
299− passwordInput.enabled = true;
264+ d.promptText = "";
265+ passwordInput.reset();
300266 root.wasPrompted = false;
301267 }
302268}
qml/Greeter/NarrowView.qml+1
@@ -27,6 +27,7 @@ FocusScope {
2727 property alias delayMinutes: lockscreen.delayMinutes
2828 property alias backgroundTopMargin: coverPage.backgroundTopMargin
2929 property url background
30+ property bool customBackground // unused
3031 property bool locked
3132 property bool alphanumeric
3233 property var userModel // unused
qml/Greeter/WideView.qml+2
@@ -26,6 +26,7 @@ FocusScope {
2626 property int delayMinutes // TODO
2727 property alias backgroundTopMargin: coverPage.backgroundTopMargin
2828 property alias background: coverPage.background
29+ property bool customBackground
2930 property bool locked
3031 property alias alphanumeric: loginList.alphanumeric
3132 property alias userModel: loginList.model
@@ -98,6 +99,7 @@ FocusScope {
9899 height: parent.height
99100 width: parent.width
100101 draggable: !root.locked
102+ blur: root.customBackground
101103
102104 infographics {
103105 height: 0.75 * parent.height
qml/Shell.qml+1
@@ -420,6 +420,7 @@ Item {
420420 launcherOffset: launcher.progress
421421 forcedUnlock: wizard.active
422422 background: wallpaperResolver.background
423+ customBackground: wallpaperResolver.background != wallpaperResolver.defaultBackground
423424
424425 // avoid overlapping with Launcher's edge drag area
425426 // FIXME: Fix TouchRegistry & friends and remove this workaround