[Lock Screen] Match OSD fade out to desktop

The Lock Screen implements its own OSD as the OSD will not render ontop of the lock screen.
This patch makes it apply the same long fadeout it has in the normal window.
Also add some spacing to the bottom of the screen. I did not place it exactly where the regular one would be
as the bottom placement was somewhat done to avoid it covering the password input.

Differential Revision: https://phabricator.kde.org/D12549

lookandfeel/contents/lockscreen/LockOsd.qml

@@ -43,7 +43,7 @@ PlasmaCore.FrameSvgItem {
 
     function show() {
         osd.visible = true;
-        hideTimer.restart();
+        hideAnimation.restart();
     }
 
     // avoid leaking ColorScope of lock screen theme into the OSD "popup"
@@ -59,13 +59,25 @@ PlasmaCore.FrameSvgItem {
         }
     }
 
-    Timer {
+    SequentialAnimation {
-        id: hideTimer
+        id: hideAnimation
-        interval: osd.timeout
+        // prevent press and hold from flickering
-        onTriggered: {
+        PauseAnimation { duration: 100 }
-            osd.visible = false;
+        NumberAnimation {
-            osd.icon = "";
+            target: osd
-            osd.osdValue = 0;
+            property: "opacity"
+            from: 1
+            to: 0
+            duration: osd.timeout
+            easing.type: Easing.InQuad
+        }
+        ScriptAction {
+            script: {
+                osd.visible = false;
+                osd.opacity = 1;
+                osd.icon = "";
+                osd.osdValue = 0;
+            }
         }
     }
 }

lookandfeel/contents/lockscreen/LockScreenUi.qml

@@ -424,6 +424,7 @@ PlasmaCore.ColorScope {
             anchors {
                 horizontalCenter: parent.horizontalCenter
                 bottom: parent.bottom
+                bottomMargin: units.largeSpacing
             }
         }