Commit 448455c3 authored by Marco Martin's avatar Marco Martin
Browse files

fade to blur when the login box appears

Summary:
for both lockscreen and login screen:

* display the wallpaper and the clock with a shadow by default
* at the first mouse or keyboard input, make the input fields appear
* the actual controls appear pretty fast
* the wallpaper starts to blur, desaturate and fade to darker
* after 10 seconds make the controls disappear again

* as soon as anything is written in the password field never fade out the controls
* if the virtual keyboard is open, never fade out the controls
* if anything is pushed on the stack, like "switch user", never fade the controls
* Esc clears the field and makes controls disappear (closing keyboard if needed)

the fade won't happen if the background is a simple color

BUG: 369676
BUG: 388622
FIXED-IN: 5.13

Depends on D12314

Recommended D11309 and D11308 to change the default wallpaper to plasma wallpaper

Test Plan: tested the behavior of all the above points

Reviewers: #plasma, #vdg, ngraham

Reviewed By: #vdg, ngraham

Subscribers: zzag, abetts, davidedmundson, ngraham, plasma-devel

Tags: #plasma

Differential Revision: https://phabricator.kde.org/D11928
parent 2fd43cdf
......@@ -26,13 +26,15 @@ import org.kde.plasma.components 2.0
ColumnLayout {
Label {
text: Qt.formatTime(timeSource.data["Local"]["DateTime"])
font.pointSize: 32 //Mockup says this, I'm not sure what to do?
font.pointSize: 48 //Mockup says this, I'm not sure what to do?
font.weight: Font.Light
Layout.alignment: Qt.AlignHCenter
renderType: Text.QtRendering
}
Label {
text: Qt.formatDate(timeSource.data["Local"]["DateTime"], Qt.DefaultLocaleLongDate)
font.pointSize: 18
font.pointSize: 24
font.weight: Font.Light
Layout.alignment: Qt.AlignHCenter
}
DataSource {
......
......@@ -63,7 +63,6 @@ Item {
default property alias _children: innerLayout.children
UserList {
id: userListView
visible: showUserList && y > 0
......
/********************************************************************
This file is part of the KDE project.
Copyright (C) 2014 Aleix Pol Gonzalez <aleixpol@blue-systems.com>
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*********************************************************************/
import QtQuick 2.6
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1
import QtGraphicalEffects 1.0
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 2.0 as PlasmaComponents
import org.kde.plasma.private.sessions 2.0
import "../components"
Item {
id: wallpaperFader
property Item clock
property Item mainStack
property Item footer
property alias source: wallpaperBlur.source
state: lockScreenRoot.uiVisible ? "on" : "off"
property real factor: 0
readonly property bool lightBackground: Math.max(PlasmaCore.ColorScope.backgroundColor.r, PlasmaCore.ColorScope.backgroundColor.g, PlasmaCore.ColorScope.backgroundColor.b) > 0.5
Behavior on factor {
NumberAnimation {
target: wallpaperFader
property: "factor"
duration: 1000
easing.type: Easing.InOutQuad
}
}
FastBlur {
id: wallpaperBlur
anchors.fill: parent
radius: 100 * wallpaperFader.factor
}
ShaderEffect {
id: wallpaperShader
anchors.fill: parent
supportsAtlasTextures: true
property var source: ShaderEffectSource {
sourceItem: wallpaperBlur
live: true
hideSource: true
textureMirroring: ShaderEffectSource.NoMirroring
}
readonly property real contrast: 0.45 * wallpaperFader.factor + (1 - wallpaperFader.factor)
readonly property real saturation: 1.7 * wallpaperFader.factor + (1 - wallpaperFader.factor)
readonly property real intensity: (wallpaperFader.lightBackground ? 1.7 : 0.45) * wallpaperFader.factor + (1 - wallpaperFader.factor)
readonly property real transl: (1.0 - contrast) / 2.0;
readonly property real rval: (1.0 - saturation) * 0.2126;
readonly property real gval: (1.0 - saturation) * 0.7152;
readonly property real bval: (1.0 - saturation) * 0.0722;
property var colorMatrix: Qt.matrix4x4(
contrast, 0, 0, 0.0,
0, contrast, 0, 0.0,
0, 0, contrast, 0.0,
transl, transl, transl, 1.0).times(Qt.matrix4x4(
rval + saturation, rval, rval, 0.0,
gval, gval + saturation, gval, 0.0,
bval, bval, bval + saturation, 0.0,
0, 0, 0, 1.0)).times(Qt.matrix4x4(
intensity, 0, 0, 0,
0, intensity, 0, 0,
0, 0, intensity, 0,
0, 0, 0, 1
));
fragmentShader: "
uniform mediump mat4 colorMatrix;
uniform mediump sampler2D source;
varying mediump vec2 qt_TexCoord0;
uniform lowp float qt_Opacity;
void main(void)
{
mediump vec4 tex = texture2D(source, qt_TexCoord0);
gl_FragColor = tex * colorMatrix * qt_Opacity;
}"
}
states: [
State {
name: "on"
PropertyChanges {
target: mainStack
opacity: 1
}
PropertyChanges {
target: footer
opacity: 1
}
PropertyChanges {
target: wallpaperFader
factor: 1
}
PropertyChanges {
target: clock.shadow
opacity: 0
}
},
State {
name: "off"
PropertyChanges {
target: mainStack
opacity: 0
}
PropertyChanges {
target: footer
opacity: 0
}
PropertyChanges {
target: wallpaperFader
factor: 0
}
PropertyChanges {
target: clock.shadow
opacity: 1
}
}
]
transitions: [
Transition {
from: "off"
to: "on"
//Note: can't use animators as they don't play well with parallelanimations
ParallelAnimation {
NumberAnimation {
target: mainStack
property: "opacity"
duration: units.longDuration
easing.type: Easing.InOutQuad
}
NumberAnimation {
target: footer
property: "opacity"
duration: units.longDuration
easing.type: Easing.InOutQuad
}
}
},
Transition {
from: "on"
to: "off"
ParallelAnimation {
NumberAnimation {
target: mainStack
property: "opacity"
duration: 500
easing.type: Easing.InOutQuad
}
NumberAnimation {
target: footer
property: "opacity"
duration: 500
easing.type: Easing.InOutQuad
}
}
}
]
}
......@@ -17,9 +17,10 @@ You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*********************************************************************/
import QtQuick 2.5
import QtQuick 2.6
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1
import QtGraphicalEffects 1.0
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 2.0 as PlasmaComponents
......@@ -68,13 +69,53 @@ PlasmaCore.ColorScope {
visible: false
}
Item {
MouseArea {
id: lockScreenRoot
property bool uiVisible: false
property bool blockUI: mainStack.depth > 1 || mainBlock.mainPasswordBox.text.length > 0 || inputPanel.keyboardActive
x: parent.x
y: parent.y
width: parent.width
height: parent.height
hoverEnabled: true
drag.filterChildren: true
onPressed: uiVisible = true;
onPositionChanged: uiVisible = true;
onUiVisibleChanged: {
if (blockUI) {
fadeoutTimer.running = false;
} else if (uiVisible) {
fadeoutTimer.restart();
}
}
onBlockUIChanged: {
if (blockUI) {
fadeoutTimer.running = false;
uiVisible = true;
} else {
fadeoutTimer.restart();
}
}
Keys.onEscapePressed: {
uiVisible = !uiVisible;
if (inputPanel.keyboardActive) {
inputPanel.showHide();
}
if (!uiVisible) {
mainBlock.mainPasswordBox.text = "";
}
}
Timer {
id: fadeoutTimer
interval: 10000
onTriggered: {
if (!lockScreenRoot.blockUI) {
lockScreenRoot.uiVisible = false;
}
}
}
Component.onCompleted: PropertyAnimation { id: launchAnimation; target: lockScreenRoot; property: "opacity"; from: 0; to: 1; duration: 1000 }
......@@ -92,23 +133,51 @@ PlasmaCore.ColorScope {
Transition {
// we only animate switchting to another session, because kscreenlocker doesn't get notified when
// coming from another session back and so we wouldn't know when to trigger the animation exactly
from: ""
to: "onOtherSession"
from: ""
to: "onOtherSession"
PropertyAnimation { id: stateChangeAnimation; properties: "y"; duration: 300; easing.type: Easing.InQuad}
PropertyAnimation { properties: "opacity"; duration: 300}
PropertyAnimation { id: stateChangeAnimation; properties: "y"; duration: 300; easing.type: Easing.InQuad}
PropertyAnimation { properties: "opacity"; duration: 300}
onRunningChanged: {
// after the animation has finished switch session: since we only animate the transition TO state "onOtherSession"
// and not the other way around, we don't have to check the state we transitioned into
if (/* lockScreenRoot.state == "onOtherSession" && */ !running) {
mainStack.currentItem.switchSession()
}
onRunningChanged: {
// after the animation has finished switch session: since we only animate the transition TO state "onOtherSession"
// and not the other way around, we don't have to check the state we transitioned into
if (/* lockScreenRoot.state == "onOtherSession" && */ !running) {
mainStack.currentItem.switchSession()
}
}
}
WallpaperFader {
anchors.fill: parent
state: lockScreenRoot.uiVisible ? "on" : "off"
source: wallpaper
mainStack: mainStack
footer: footer
clock: clock
}
DropShadow {
id: clockShadow
anchors.fill: clock
source: clock
horizontalOffset: 0
verticalOffset: 1
radius: 12
samples: 32
spread: 0.2
color: Qt.rgba(0, 0, 0, 1)
Behavior on opacity {
OpacityAnimator {
duration: 1000
easing.type: Easing.InOutQuad
}
}
}
Clock {
id: clock
property Item shadow: clockShadow
anchors.horizontalCenter: parent.horizontalCenter
y: (mainBlock.userList.y + mainStack.y)/2 - height/2
visible: y > 0
......@@ -127,7 +196,6 @@ PlasmaCore.ColorScope {
}
}
StackView {
id: mainStack
anchors {
......
......@@ -8,6 +8,8 @@ import org.kde.plasma.components 2.0 as PlasmaComponents
SessionManagementScreen {
property Item mainPasswordBox: passwordBox
property bool showUsernamePrompt: !showUserList
property string lastUserName
......
This diff is collapsed.
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment