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
6bb9704Michael Terry
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 {
29 // Users should set their UI width here.
29 // Users should set their UI width here.
30 property real width
30 property real width
31
31
32− property url defaultBackground: Qt.resolvedUrl(width >= units.gu(60) ? "../graphics/tablet_background.jpg"
32+ readonly property url defaultBackground: Qt.resolvedUrl(width >= units.gu(60)
33+ ? "../graphics/tablet_background.jpg"
33− : "../graphics/phone_background.jpg")
34+ : "../graphics/phone_background.jpg")
34
35
35 // That's the property users of this component are going to consume.
36 // That's the property users of this component are going to consume.
36 readonly property url background: asImageTester.status == Image.Ready ? asImageTester.source
37 readonly property url background: asImageTester.status == Image.Ready ? asImageTester.source
qml/Greeter/CoverPage.qml+9
@@ -28,6 +28,7 @@ Showable {
28 property real backgroundTopMargin
28 property real backgroundTopMargin
29 property var infographicModel
29 property var infographicModel
30 property bool draggable: true
30 property bool draggable: true
31+ property bool blur
31
32
32 property alias infographics: infographics
33 property alias infographics: infographics
33
34
@@ -88,6 +89,14 @@ Showable {
88 sourceSize.width: width
89 sourceSize.width: width
89 }
90 }
90
91
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
91 Rectangle {
100 Rectangle {
92 anchors.fill: parent
101 anchors.fill: parent
93 color: "black"
102 color: "black"
qml/Greeter/Greeter.qml+7
@@ -30,6 +30,7 @@ Showable {
30 property real dragHandleLeftMargin: 0
30 property real dragHandleLeftMargin: 0
31
31
32 property url background
32 property url background
33+ property bool customBackground
33
34
34 // How far to offset the top greeter layer during a launcher left-drag
35 // How far to offset the top greeter layer during a launcher left-drag
35 property real launcherOffset
36 property real launcherOffset
@@ -333,6 +334,12 @@ Showable {
333 value: root.background
334 value: root.background
334 }
335 }
335
336
337+ Binding {
338+ target: loader.item
339+ property: "customBackground"
340+ value: root.customBackground
341+ }
342+
336 Binding {
343 Binding {
337 target: loader.item
344 target: loader.item
338 property: "locked"
345 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 {
57 }
57 }
58
58
59 function showPrompt(text, isSecret, isDefaultPrompt) {
59 function showPrompt(text, isSecret, isDefaultPrompt) {
60− passwordInput.text = "";
61− passwordInput.promptText = text;
60+ d.promptText = text;
62− passwordInput.enabled = true;
61+ passwordInput.reset();
63− passwordInput.echoMode = isSecret ? TextInput.Password : TextInput.Normal;
62+ passwordInput.isSecret = isSecret;
64 if (wasPrompted) // stay in text field if second prompt
63 if (wasPrompted) // stay in text field if second prompt
65 passwordInput.focus = true;
64 passwordInput.focus = true;
66 wasPrompted = true;
65 wasPrompted = true;
@@ -78,6 +77,12 @@ Item {
78 root.resetAuthentication();
77 root.resetAuthentication();
79 }
78 }
80
79
80+ QtObject {
81+ id: d
82+
83+ property string promptText
84+ }
85+
81 Keys.onEscapePressed: {
86 Keys.onEscapePressed: {
82 selected(currentIndex);
87 selected(currentIndex);
83 }
88 }
@@ -151,7 +156,7 @@ Item {
151 return 1 - Math.min(1, (Math.abs(highlightDist) + root.cellHeight) / ((root.numAboveBelow + 1) * root.cellHeight))
156 return 1 - Math.min(1, (Math.abs(highlightDist) + root.cellHeight) / ((root.numAboveBelow + 1) * root.cellHeight))
152 }
157 }
153
158
154− Label {
159+ FadingLabel {
155 objectName: "username" + index
160 objectName: "username" + index
156
161
157 anchors {
162 anchors {
@@ -164,8 +169,7 @@ Item {
164 topMargin: units.gu(1) + (parent.belowHighlight ? parent.belowOffset : 0)
169 topMargin: units.gu(1) + (parent.belowHighlight ? parent.belowOffset : 0)
165 }
170 }
166 text: realName
171 text: realName
167− color: "white"
172+ color: UbuntuColors.porcelain
168− elide: Text.ElideRight
169
173
170 Behavior on anchors.topMargin { NumberAnimation { duration: root.moveDuration; easing.type: Easing.InOutQuad; } }
174 Behavior on anchors.topMargin { NumberAnimation { duration: root.moveDuration; easing.type: Easing.InOutQuad; } }
171 }
175 }
@@ -208,7 +212,7 @@ Item {
208 rightMargin: units.gu(1)
212 rightMargin: units.gu(1)
209 }
213 }
210
214
211− color: "white"
215+ color: UbuntuColors.porcelain
212 width: root.width - anchors.leftMargin - anchors.rightMargin
216 width: root.width - anchors.leftMargin - anchors.rightMargin
213 fontSize: "small"
217 fontSize: "small"
214 textFormat: Text.StyledText
218 textFormat: Text.StyledText
@@ -220,7 +224,7 @@ Item {
220 }
224 }
221 }
225 }
222
226
223− TextField {
227+ GreeterPrompt {
224 id: passwordInput
228 id: passwordInput
225 objectName: "passwordInput"
229 objectName: "passwordInput"
226 anchors {
230 anchors {
@@ -228,64 +232,28 @@ Item {
228 horizontalCenter: parent.horizontalCenter
232 horizontalCenter: parent.horizontalCenter
229 margins: units.gu(1)
233 margins: units.gu(1)
230 }
234 }
231− height: units.gu(4.5)
232 width: parent.width - anchors.margins * 2
235 width: parent.width - anchors.margins * 2
233 opacity: userList.movingInternally ? 0 : 1
236 opacity: userList.movingInternally ? 0 : 1
234
237
235− inputMethodHints: root.alphanumeric ? Qt.ImhNone : Qt.ImhDigitsOnly
238+ isPrompt: root.wasPrompted
239+ isAlphanumeric: root.alphanumeric
236
240
237− property string promptText
238− placeholderText: root.wasPrompted ? promptText
241+ text: root.wasPrompted ? d.promptText
239− : (root.locked ? i18n.tr("Retry")
242+ : (root.locked ? i18n.tr("Retry")
240− : i18n.tr("Tap to unlock"))
243+ : i18n.tr("Log In"))
244+
245+ onClicked: root.tryToUnlock()
246+ onResponded: root.responded(text)
247+ onCanceled: root.selected(currentIndex)
241
248
242 Behavior on opacity {
249 Behavior on opacity {
243 NumberAnimation { duration: 100 }
250 NumberAnimation { duration: 100 }
244 }
251 }
245
252
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−
267 WrongPasswordAnimation {
253 WrongPasswordAnimation {
268 id: wrongPasswordAnimation
254 id: wrongPasswordAnimation
269 target: passwordInput
255 target: passwordInput
270 }
256 }
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()
289 }
257 }
290
258
291 function resetAuthentication() {
259 function resetAuthentication() {
@@ -293,10 +261,8 @@ Item {
293 return;
261 return;
294 }
262 }
295 infoLabel.text = "";
263 infoLabel.text = "";
296− passwordInput.promptText = "";
264+ d.promptText = "";
297− passwordInput.text = "";
265+ passwordInput.reset();
298− passwordInput.focus = false;
299− passwordInput.enabled = true;
300 root.wasPrompted = false;
266 root.wasPrompted = false;
301 }
267 }
302}
268}
qml/Greeter/NarrowView.qml+1
@@ -27,6 +27,7 @@ FocusScope {
27 property alias delayMinutes: lockscreen.delayMinutes
27 property alias delayMinutes: lockscreen.delayMinutes
28 property alias backgroundTopMargin: coverPage.backgroundTopMargin
28 property alias backgroundTopMargin: coverPage.backgroundTopMargin
29 property url background
29 property url background
30+ property bool customBackground // unused
30 property bool locked
31 property bool locked
31 property bool alphanumeric
32 property bool alphanumeric
32 property var userModel // unused
33 property var userModel // unused
qml/Greeter/WideView.qml+2
@@ -26,6 +26,7 @@ FocusScope {
26 property int delayMinutes // TODO
26 property int delayMinutes // TODO
27 property alias backgroundTopMargin: coverPage.backgroundTopMargin
27 property alias backgroundTopMargin: coverPage.backgroundTopMargin
28 property alias background: coverPage.background
28 property alias background: coverPage.background
29+ property bool customBackground
29 property bool locked
30 property bool locked
30 property alias alphanumeric: loginList.alphanumeric
31 property alias alphanumeric: loginList.alphanumeric
31 property alias userModel: loginList.model
32 property alias userModel: loginList.model
@@ -98,6 +99,7 @@ FocusScope {
98 height: parent.height
99 height: parent.height
99 width: parent.width
100 width: parent.width
100 draggable: !root.locked
101 draggable: !root.locked
102+ blur: root.customBackground
101
103
102 infographics {
104 infographics {
103 height: 0.75 * parent.height
105 height: 0.75 * parent.height
qml/Shell.qml+1
@@ -420,6 +420,7 @@ Item {
420 launcherOffset: launcher.progress
420 launcherOffset: launcher.progress
421 forcedUnlock: wizard.active
421 forcedUnlock: wizard.active
422 background: wallpaperResolver.background
422 background: wallpaperResolver.background
423+ customBackground: wallpaperResolver.background != wallpaperResolver.defaultBackground
423
424
424 // avoid overlapping with Launcher's edge drag area
425 // avoid overlapping with Launcher's edge drag area
425 // FIXME: Fix TouchRegistry & friends and remove this workaround
426 // FIXME: Fix TouchRegistry & friends and remove this workaround