Members of the KDE Community are recommended to subscribe to the kde-community mailing list at https://mail.kde.org/mailman/listinfo/kde-community to allow them to participate in important discussions and receive other important announcements

Commit d9532e80 authored by Nate Graham's avatar Nate Graham 🔩

[Login and Lock screens] Improve UI elements' contrast a bit

Summary:
As requested in D16031, tweak the login and lock screens in only fairly non-controversial ways:
- Add a dark background behind the user avatar and a shadow behind the username
- Tweak the clock shadow to make it a tiny bit stronger
- Reduce clock shadow redundancy by moving it into the `Clock` item and out of the clients
- Don't use hardcoded shadow colors anymore

With the existing UI, these are very subtle changes that should barely be visible.

This diff does **NOT** include the following changes from D16031:
- Blur-less login screen
- New icons for the buttons
- Horizontal bar on the bottom to hold the buttons for the virtual keyboard, session chooser, and battery status

Test Plan:
Login screen:
{F6424115, size=full}

Lock screen:
{F6435507, size=full}

{F6435506, size=full}

{F6435519, size=full}

{F6435518, size=full}

{F6435517, size=full}

{F6435516, size=full}

{F6435515, size=full}

{F6435514, size=full}

{F6435513, size=full}

{F6435512, size=full}

{F6435511, size=full}

{F6435510, size=full}

{F6435523, size=full}

{F6435522, size=full}

{F6435521, size=full}

{F6435509, size=full}

{F6424114, size=full}

Reviewers: davidedmundson, #vdg, #plasma

Reviewed By: davidedmundson, #plasma

Subscribers: mart, rooty, plasma-devel

Tags: #plasma

Differential Revision: https://phabricator.kde.org/D16879
parent 5779dde8
......@@ -19,28 +19,46 @@
import QtQuick 2.0
import QtQuick.Layouts 1.1
import QtGraphicalEffects 1.0
import org.kde.plasma.core 2.0
import org.kde.plasma.components 2.0
ColumnLayout {
Label {
text: Qt.formatTime(timeSource.data["Local"]["DateTime"])
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: 24
font.weight: Font.Light
Layout.alignment: Qt.AlignHCenter
Item {
width: clock.implicitWidth
height: clock.implicitHeight
DropShadow {
id: clockShadow
anchors.fill: clock
source: clock
horizontalOffset: 0
verticalOffset: 2
radius: 14
samples: 32
spread: 0.3
color: ColorScope.backgroundColor
}
DataSource {
id: timeSource
engine: "time"
connectedSources: ["Local"]
interval: 1000
ColumnLayout {
id: clock
Label {
text: Qt.formatTime(timeSource.data["Local"]["DateTime"])
font.pointSize: 48
font.weight: Font.Light
Layout.alignment: Qt.AlignHCenter
}
Label {
text: Qt.formatDate(timeSource.data["Local"]["DateTime"], Qt.DefaultLocaleLongDate)
font.pointSize: 24
font.weight: Font.Light
Layout.alignment: Qt.AlignHCenter
}
DataSource {
id: timeSource
engine: "time"
connectedSources: ["Local"]
interval: 1000
}
}
}
......@@ -19,6 +19,7 @@
*/
import QtQuick 2.8
import QtGraphicalEffects 1.0
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 2.0 as PlasmaComponents
......@@ -46,6 +47,18 @@ Item {
}
}
// Draw a translucent background circle under the user picture
Rectangle {
anchors.centerIn: imageSource
width: imageSource.width + 2
height: width
radius: width / 2
color: PlasmaCore.ColorScope.backgroundColor
opacity: 0.9
}
Item {
id: imageSource
anchors.horizontalCenter: parent.horizontalCenter
......@@ -131,7 +144,17 @@ Item {
}
DropShadow {
id: labelShadow
anchors.fill: usernameDelegate
source: usernameDelegate
horizontalOffset: 0
verticalOffset: 1
radius: 12
samples: 32
spread: 0.35
color: PlasmaCore.ColorScope.backgroundColor
}
PlasmaComponents.Label {
id: usernameDelegate
anchors {
......
......@@ -161,24 +161,6 @@ PlasmaCore.ColorScope {
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
......
......@@ -19,25 +19,46 @@
import QtQuick 2.0
import QtQuick.Layouts 1.1
import QtGraphicalEffects 1.0
import org.kde.plasma.core 2.0
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?
Layout.alignment: Qt.AlignHCenter
}
Label {
text: Qt.formatDate(timeSource.data["Local"]["DateTime"], Qt.DefaultLocaleLongDate)
font.pointSize: 18
Layout.alignment: Qt.AlignHCenter
Item {
width: clock.implicitWidth
height: clock.implicitHeight
DropShadow {
id: clockShadow
anchors.fill: clock
source: clock
horizontalOffset: 0
verticalOffset: 2
radius: 14
samples: 32
spread: 0.3
color: ColorScope.backgroundColor
}
DataSource {
id: timeSource
engine: "time"
connectedSources: ["Local"]
interval: 1000
ColumnLayout {
id: clock
Label {
text: Qt.formatTime(timeSource.data["Local"]["DateTime"])
font.pointSize: 48
font.weight: Font.Light
Layout.alignment: Qt.AlignHCenter
}
Label {
text: Qt.formatDate(timeSource.data["Local"]["DateTime"], Qt.DefaultLocaleLongDate)
font.pointSize: 24
font.weight: Font.Light
Layout.alignment: Qt.AlignHCenter
}
DataSource {
id: timeSource
engine: "time"
connectedSources: ["Local"]
interval: 1000
}
}
}
......@@ -110,28 +110,9 @@ PlasmaCore.ColorScope {
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
visible: y > 0
property Item shadow: clockShadow
y: (userListComponent.userList.y + mainStack.y)/2 - height/2
anchors.horizontalCenter: parent.horizontalCenter
}
......
Markdown is supported
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