Commit 99dd9263 authored by Filip Fila's avatar Filip Fila 🌆

[Lock, Login, and Logout screen] Adjust visual feedback of action buttons

Summary:
Unlike in the logout screen, our action buttons in the SDDM theme currently offer no visual feedback when interacted with. This patch adds a minimal yet effective amount of opacity shifting, as well as a transparent circle behind the button. The same circle is added to logout screen, where it remains always visible to better indicate the chosen option.

BUG: 393048

Test Plan:
Logout:
{F6664346}

Lock:
{F6664347}

Login:
{F6664348}

Reviewers: rooty, ngraham, #vdg, #plasma

Reviewed By: rooty, ngraham, #vdg

Subscribers: davidedmundson, plasma-devel

Tags: #plasma

Maniphest Tasks: T10325

Differential Revision: https://phabricator.kde.org/D19479
parent 06793f21
......@@ -28,6 +28,8 @@ Item {
property alias containsMouse: mouseArea.containsMouse
property alias font: label.font
property alias labelRendering: label.renderType
property alias circleOpacity: iconCircle.opacity
property alias circleVisiblity: iconCircle.visible
signal clicked
activeFocusOnTab: true
......@@ -37,6 +39,30 @@ Item {
implicitWidth: Math.max(iconSize + units.largeSpacing * 2, label.contentWidth)
implicitHeight: iconSize + units.smallSpacing + label.implicitHeight
opacity: activeFocus || containsMouse ? 1 : 0.85
Behavior on opacity {
PropertyAnimation { // OpacityAnimator makes it turn black at random intervals
duration: units.longDuration * 2
easing.type: Easing.InOutQuad
}
}
Rectangle {
id: iconCircle
anchors.centerIn: icon
width: iconSize + units.smallSpacing
height: width
radius: width / 2
color: PlasmaCore.ColorScope.textColor
opacity: activeFocus || containsMouse ? 0.15 : 0
Behavior on opacity {
PropertyAnimation { // OpacityAnimator makes it turn black at random intervals
duration: units.longDuration * 3
easing.type: Easing.InOutQuad
}
}
}
PlasmaCore.IconItem {
id: icon
anchors {
......
......@@ -30,6 +30,8 @@ ActionButton {
onClicked: action()
Layout.alignment: Qt.AlignTop
iconSize: units.iconSizes.huge
circleVisiblity: activeFocus || containsMouse
circleOpacity: 0.15 // Selected option's circle is instantly visible
opacity: activeFocus || containsMouse ? 1 : 0.5
labelRendering: opacity != 1 ? Text.QtRendering : Text.NativeRendering // Remove once we've solved Qt bug: https://bugreports.qt.io/browse/QTBUG-70138 (KDE bug: https://bugs.kde.org/show_bug.cgi?id=401644)
font.underline: false
......
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