Merge lp:~mterry/unity8/lockscreen-nits into lp:unity8/rtm-14.09

[Michał Sawicz]

trunk/r1143: Fix a variety of design nits with the current lockscreen

=== modified file 'qml/Greeter/Greeter.qml'
--- qml/Greeter/Greeter.qml	2014-08-06 14:33:50 +0000
+++ qml/Greeter/Greeter.qml	2014-08-12 11:40:17 +0000
@@ -26,11 +26,12 @@
     created: greeterContentLoader.status == Loader.Ready && greeterContentLoader.item.ready
 
     property url defaultBackground
+    property bool loadContent: required
 
     // 1 when fully shown and 0 when fully hidden
     property real showProgress: MathUtils.clamp((width - Math.abs(x)) / width, 0, 1)
 
-    showAnimation: StandardAnimation { property: "x"; to: 0 }
+    showAnimation: StandardAnimation { property: "x"; to: 0; duration: UbuntuAnimation.FastDuration }
     hideAnimation: __leftHideAnimation
 
     property alias dragHandleWidth: dragHandle.width
@@ -58,10 +59,8 @@
 
     onRequiredChanged: {
         // Reset hide animation to default once we're finished with it
-        if (!required) {
-            // Put back on left for reliable show direction and so that
-            // if normal hide() is called, we don't animate from right.
-            x = -width
+        if (required) {
+            // Reset hide animation so that a hide() call is reliably left
             hideAnimation = __leftHideAnimation
         }
     }
@@ -90,12 +89,13 @@
         onPressAndHold: {} // eat event, but no need to tease, as drag will cover it
 
         onDragEnd: {
-            if (rightEvaluator.shouldAutoComplete())
+            if (greeter.x > 0 && rightEvaluator.shouldAutoComplete()) {
                 greeter.hideRight()
-            else if (leftEvaluator.shouldAutoComplete())
+            } else if (greeter.x < 0 && leftEvaluator.shouldAutoComplete()) {
                 greeter.hide();
-            else
+            } else {
                 greeter.show(); // undo drag
+            }
         }
 
         onDragValueChanged: {
@@ -127,7 +127,7 @@
         property var infographicModel: LightDM.Infographic
         readonly property int backgroundTopMargin: -greeter.y
 
-        source: required ? "GreeterContent.qml" : ""
+        source: loadContent ? "GreeterContent.qml" : ""
 
         onLoaded: {
             selected(currentIndex);

=== modified file 'qml/Greeter/Infographics.qml'
--- qml/Greeter/Infographics.qml	2014-06-11 15:36:51 +0000
+++ qml/Greeter/Infographics.qml	2014-08-12 11:40:17 +0000
@@ -26,6 +26,9 @@
 
     property int animDuration: 10
 
+    property bool __useDotAnimation: true
+    property int __circleModifier: __useDotAnimation ? 1 : 2
+
     Connections {
         target: model
 
@@ -41,19 +44,24 @@
 
     function startShowAnimation() {
         dotHideAnimTimer.stop()
-        circleShrinkAnimTimer.stop()
         notification.hideAnim.stop()
 
-        dotShowAnimTimer.startFromBeginning()
+        if (__useDotAnimation) {
+            dotShowAnimTimer.startFromBeginning()
+        }
         notification.showAnim.start()
     }
 
     function startHideAnimation() {
         dotShowAnimTimer.stop()
-        circleGrowAnimTimer.stop()
+        circleChangeAnimTimer.stop()
         notification.showAnim.stop()
 
-        dotHideAnimTimer.startFromBeginning()
+        if (__useDotAnimation) {
+            dotHideAnimTimer.startFromBeginning()
+        } else {
+            circleChangeAnimTimer.startFromBeginning()
+        }
         notification.hideAnim.start()
     }
 
@@ -73,22 +81,22 @@
         anchors.centerIn: parent
 
         Timer {
-            id: circleGrowAnimTimer
+            id: circleChangeAnimTimer
 
             property int pastCircleCounter
             property int presentCircleCounter
 
-            interval: animDuration
+            interval: notification.duration
             running: false
             repeat: true
             onTriggered: {
                 if (pastCircleCounter < pastCircles.count) {
                     var nextCircle = pastCircles.itemAt(pastCircleCounter++)
-                    if (nextCircle !== null) nextCircle.pastCircleGrowAnim.start()
+                    if (nextCircle !== null) nextCircle.pastCircleChangeAnim.start()
                 }
                 if (pastCircleCounter > pastCircles.count / 2) {
                     var nextCircle = presentCircles.itemAt(presentCircleCounter++)
-                    if (nextCircle !== null) nextCircle.presentCircleGrowAnim.start()
+                    if (nextCircle !== null) nextCircle.presentCircleChangeAnim.start()
                 }
                 if (presentCircleCounter > infographic.model.currentDay && pastCircleCounter >= pastCircles.count) {
                     stop()
@@ -96,39 +104,8 @@
             }
 
             function startFromBeginning() {
-                circleGrowAnimTimer.pastCircleCounter = 0
-                circleGrowAnimTimer.presentCircleCounter = 0
-                start()
-            }
-        }
-
-        Timer {
-            id: circleShrinkAnimTimer
-
-            property int pastCircleCounter
-            property int presentCircleCounter
-
-            interval: animDuration
-            running: false
-            repeat: true
-            onTriggered: {
-                if (pastCircleCounter >= 0) {
-                    var nextCircle = pastCircles.itemAt(pastCircleCounter--)
-                    if (nextCircle !== null) nextCircle.pastCircleShrinkAnim.start()
-                }
-                if (pastCircleCounter < pastCircles.count / 2) {
-                    var nextCircle = presentCircles.itemAt(presentCircleCounter--)
-                    if (nextCircle !== null) nextCircle.presentCircleShrinkAnim.start()
-                }
-                if (presentCircleCounter < 0) {
-                    stop()
-                    infographic.model.readyForDataChange()
-                }
-            }
-
-            function startFromBeginning() {
-                pastCircleCounter = pastCircles.count - 1
-                presentCircleCounter = model.currentDay
+                circleChangeAnimTimer.pastCircleCounter = 0
+                circleChangeAnimTimer.presentCircleCounter = 0
                 start()
             }
         }
@@ -139,8 +116,7 @@
             model: infographic.model.secondMonth
 
             delegate: ObjectPositioner {
-                property alias pastCircleGrowAnim: pastCircleGrowAnim
-                property alias pastCircleShrinkAnim: pastCircleShrinkAnim
+                property alias pastCircleChangeAnim: pastCircleChangeAnim
 
                 index: model.index
                 count: pastCircles.count
@@ -160,52 +136,33 @@
                     opacity: 0.0
                     scale: 0.0
                     visible: modelData !== undefined
-                    color: Gradient.threeColorByIndex(index, count, infographic.model.secondColor)
+                    color: "transparent"
 
                     SequentialAnimation {
-                        id: pastCircleGrowAnim
+                        id: pastCircleChangeAnim
 
                         loops: 1
                         ParallelAnimation {
                             PropertyAnimation {
                                 target: pastCircle
                                 property: "opacity"
-                                from: 0.0
                                 to: pastCircle.circleOpacity
                                 easing.type: Easing.OutCurve
-                                duration: circleGrowAnimTimer.interval * 4
+                                duration: circleChangeAnimTimer.interval * __circleModifier
                             }
                             PropertyAnimation {
                                 target: pastCircle
                                 property: "scale"
-                                from: 0.0
                                 to: modelData
                                 easing.type: Easing.OutCurve
-                                duration: circleGrowAnimTimer.interval * 4
-                            }
-                        }
-                    }
-
-                    SequentialAnimation {
-                        id: pastCircleShrinkAnim
-
-                        loops: 1
-                        ParallelAnimation {
-                            PropertyAnimation {
-                                target: pastCircle
-                                property: "opacity"
-                                from: pastCircle.circleOpacity
-                                to: 0.0
-                                easing.type: Easing.OutCurve
-                                duration: circleShrinkAnimTimer.interval * 4
-                            }
-                            PropertyAnimation {
-                                target: pastCircle
-                                property: "scale"
-                                from: modelData
-                                to: 0.0
-                                easing.type: Easing.OutCurve
-                                duration: circleShrinkAnimTimer.interval * 4
+                                duration: circleChangeAnimTimer.interval * __circleModifier
+                            }
+                            ColorAnimation {
+                                target: pastCircle
+                                property: "color"
+                                to: Gradient.threeColorByIndex(index, count, infographic.model.secondColor)
+                                easing.type: Easing.OutCurve
+                                duration: circleChangeAnimTimer.interval * __circleModifier
                             }
                         }
                     }
@@ -219,8 +176,7 @@
             model: infographic.model.firstMonth
 
             delegate: ObjectPositioner {
-                property alias presentCircleGrowAnim: presentCircleGrowAnim
-                property alias presentCircleShrinkAnim: presentCircleShrinkAnim
+                property alias presentCircleChangeAnim: presentCircleChangeAnim
 
                 index: model.index
                 count: presentCircles.count
@@ -240,10 +196,10 @@
                     opacity: 0.0
                     scale: 0.0
                     visible: modelData !== undefined
-                    color: Gradient.threeColorByIndex(index, infographic.model.currentDay, infographic.model.firstColor)
+                    color: "transparent"
 
                     SequentialAnimation {
-                        id: presentCircleGrowAnim
+                        id: presentCircleChangeAnim
 
                         loops: 1
 
@@ -253,36 +209,21 @@
                                 property: "opacity"
                                 to: presentCircle.circleOpacity
                                 easing.type: Easing.OutCurve
-                                duration: circleGrowAnimTimer.interval * 4
+                                duration: circleChangeAnimTimer.interval * __circleModifier
                             }
                             PropertyAnimation {
                                 target: presentCircle
                                 property: "scale"
                                 to: modelData
                                 easing.type: Easing.OutCurve
-                                duration: circleGrowAnimTimer.interval * 4
-                            }
-                        }
-                    }
-
-                    SequentialAnimation {
-                        id: presentCircleShrinkAnim
-
-                        loops: 1
-                        ParallelAnimation {
-                            PropertyAnimation {
-                                target: presentCircle
-                                property: "opacity"
-                                to: 0.0
-                                easing.type: Easing.OutCurve
-                                duration: circleShrinkAnimTimer.interval * 4
-                            }
-                            PropertyAnimation {
-                                target: presentCircle
-                                property: "scale"
-                                to: 0.0
-                                easing.type: Easing.OutCurve
-                                duration: circleShrinkAnimTimer.interval * 4
+                                duration: circleChangeAnimTimer.interval * __circleModifier
+                            }
+                            ColorAnimation {
+                                target: presentCircle
+                                property: "color"
+                                to: Gradient.threeColorByIndex(index, infographic.model.currentDay, infographic.model.firstColor)
+                                easing.type: Easing.OutCurve
+                                duration: circleChangeAnimTimer.interval * __circleModifier
                             }
                         }
                     }
@@ -313,7 +254,7 @@
                     stop()
                 }
                 if (dotCounter == Math.round(dots.count / 2)) {
-                    circleGrowAnimTimer.startFromBeginning()
+                    circleChangeAnimTimer.startFromBeginning()
                 }
             }
 
@@ -340,8 +281,8 @@
                 } else {
                     stop()
                 }
-                if (dotCounter == Math.round(dots.count / 2)) {
-                    circleShrinkAnimTimer.startFromBeginning()
+                if (dotCounter == 0) {
+                    infographic.model.readyForDataChange()
                 }
             }
 
@@ -413,6 +354,7 @@
             property alias showAnim: increaseOpacity
 
             property real baseOpacity: 0.6
+            property real duration: dotShowAnimTimer.interval * 5
 
             height: 0.7 * backgroundCircle.width
             width: notification.height
@@ -432,7 +374,7 @@
                 property: "opacity"
                 from: 0.0
                 to: notification.baseOpacity
-                duration: dotShowAnimTimer.interval * dots.count * 5
+                duration: notification.duration * dots.count
             }
 
             PropertyAnimation {
@@ -442,7 +384,8 @@
                 property: "opacity"
                 from: notification.baseOpacity
                 to: 0.0
-                duration: dotShowAnimTimer.interval * dots.count * 5
+                duration: notification.duration * dots.count
+                onStopped: if (!__useDotAnimation) infographic.model.readyForDataChange()
             }
         }
     }
@@ -453,9 +396,10 @@
         onDoubleClicked: {
             if (!dotHideAnimTimer.running &&
                     !dotShowAnimTimer.running &&
-                    !circleShrinkAnimTimer.running &&
-                    !circleGrowAnimTimer.running)
+                    !circleChangeAnimTimer.running) {
+                __useDotAnimation = false
                 infographic.model.nextDataSource()
+            }
         }
 
         onClicked: mouse.accepted = false

=== modified file 'qml/Shell.qml'
--- qml/Shell.qml	2014-08-06 19:39:07 +0000
+++ qml/Shell.qml	2014-08-12 11:40:17 +0000
@@ -48,6 +48,8 @@
     property url background
     readonly property real panelHeight: panel.panelHeight
 
+    readonly property bool locked: LightDM.Greeter.active && !LightDM.Greeter.authenticated
+
     property bool sideStageEnabled: shell.width >= units.gu(100)
     readonly property string focusedApplicationId: ApplicationManager.focusedApplicationId
 
@@ -323,6 +325,7 @@
             available: true
             hides: [launcher, panel.indicators]
             shown: true
+            loadContent: required || lockscreen.required // keeps content in memory for quick show()
 
             defaultBackground: shell.background
 
@@ -412,7 +415,7 @@
     }
 
     function showDash() {
-        if (LightDM.Greeter.active && !LightDM.Greeter.promptless) {
+        if (shell.locked) {
             return;
         }
         if (greeter.shown) {
@@ -436,7 +439,7 @@
             anchors.fill: parent //because this draws indicator menus
             indicators {
                 hides: [launcher]
-                available: edgeDemo.panelEnabled && greeter.fakeActiveForApp === ""
+                available: edgeDemo.panelEnabled && !shell.locked
                 contentEnabled: edgeDemo.panelContentEnabled
                 width: parent.width > units.gu(60) ? units.gu(40) : parent.width
                 panelHeight: units.gu(3)
@@ -460,7 +463,7 @@
             anchors.bottom: parent.bottom
             width: parent.width
             dragAreaWidth: shell.edgeSize
-            available: edgeDemo.launcherEnabled && greeter.fakeActiveForApp === ""
+            available: edgeDemo.launcherEnabled && !shell.locked
 
             onShowDashHome: showHome()
             onDash: showDash()

=== modified file 'tests/autopilot/unity8/shell/emulators/greeter.py'
--- tests/autopilot/unity8/shell/emulators/greeter.py	2014-07-30 18:22:44 +0000
+++ tests/autopilot/unity8/shell/emulators/greeter.py	2014-08-12 11:40:17 +0000
@@ -28,6 +28,7 @@
     def swipe(self):
         """Swipe the greeter screen away."""
         self.created.wait_for(True)
+        self.showProgress.wait_for(1)
 
         rect = self.globalRect
         start_x = rect[0] + rect[2] - 3
@@ -36,7 +37,7 @@
         stop_y = start_y
         self.pointing_device.drag(start_x, start_y, stop_x, stop_y)
 
-        self.created.wait_for(False)
+        self.showProgress.wait_for(0)
 
     def get_prompt(self):
         return self.select_single(

=== modified file 'tests/qmltests/tst_ShellWithPin.qml'
--- tests/qmltests/tst_ShellWithPin.qml	2014-07-29 11:35:10 +0000
+++ tests/qmltests/tst_ShellWithPin.qml	2014-08-12 11:40:17 +0000
@@ -116,6 +116,14 @@
             tryCompare(sessionSpy, "count", 1)
         }
 
+        function test_disabledEdges() {
+            var launcher = findChild(shell, "launcher")
+            tryCompare(launcher, "available", false)
+
+            var indicators = findChild(shell, "indicators")
+            tryCompare(indicators, "available", false)
+        }
+
         function test_emergencyCall() {
             var greeter = findChild(shell, "greeter")
             var lockscreen = findChild(shell, "lockscreen")
@@ -130,10 +138,13 @@
             tryCompare(greeter, "fakeActiveForApp", "dialer-app")
             tryCompare(lockscreen, "shown", false)
             tryCompare(panel, "fullscreenMode", true)
-            tryCompare(indicators, "available", false)
-            tryCompare(launcher, "available", false)
             tryCompare(stage, "spreadEnabled", false)
 
+            // These are normally false anyway, but confirm they remain so in
+            // emergency mode.
+            tryCompare(launcher, "available", false)
+            tryCompare(indicators, "available", false)
+
             // Cancel emergency mode, and go back to normal
             waitForRendering(greeter)
             LightDM.Greeter.showGreeter()
@@ -142,8 +153,6 @@
             tryCompare(greeter, "fakeActiveForApp", "")
             tryCompare(lockscreen, "shown", true)
             tryCompare(panel, "fullscreenMode", false)
-            tryCompare(indicators, "available", true)
-            tryCompare(launcher, "available", true)
             tryCompare(stage, "spreadEnabled", true)
         }