Commit 6258f33f authored by Nate Graham's avatar Nate Graham
Browse files

[GridViewKCM] improve contrast and legibility for delegates' inline hover buttons

Right now the delegates' inline hover buttons can be very difficult to see, because they're
(mostly) white and don't get much background contrast. A gradient appears on the bottom of
the thumbnail on hover, which provides a bit of visual differentiation, but no real contrast.

This patch improves the situation by using real buttons (with a built-in background) instead
of toolbuttons.

BUG: 395510
FIXED-IN: 5.56

Test Plan:
{F6589836, autoplay=true}

{F6589841, autoplay=true}

Reviewers: #vdg, #plasma, broulik, GB_2, ndavis

Reviewed By: #vdg, GB_2, ndavis

Subscribers: Codezela, bruns, rizzitello, ndavis, andreask, filipf, abetts, GB_2, kde-frameworks-devel

Tags: #frameworks

Differential Revision:
parent 856672f3
......@@ -116,9 +116,6 @@ T2.ItemDelegate {
radius: Kirigami.Units.smallSpacing
color: Kirigami.Settings.isMobile ? "transparent" : Qt.rgba(1, 1, 1, 0.2)
Kirigami.Theme.inherit: false
Kirigami.Theme.colorSet: Kirigami.Theme.Complementary
Behavior on opacity {
PropertyAnimation {
duration: Kirigami.Units.longDuration
......@@ -126,43 +123,30 @@ T2.ItemDelegate {
Rectangle {
visible: actionsRow.children.length > 1
anchors {
left: parent.left
right: parent.right
bottom: parent.bottom
gradient: Gradient {
GradientStop { position: 0.0; color: "transparent" }
GradientStop { position: 1.0; color: Qt.rgba(0, 0, 0, 0.4) }
FocusScope {
id: actionsScope
anchors {
right: parent.right
rightMargin: Kirigami.Units.smallSpacing
bottom: parent.bottom
bottomMargin: Kirigami.Units.smallSpacing
width: actionsRow.width
height: actionsRow.height
RowLayout {
id: actionsRow
Repeater {
model: delegate.actions
delegate: Controls.ToolButton {
Kirigami.Icon {
Kirigami.Theme.inherit: false
Kirigami.Theme.colorSet: Kirigami.Theme.Complementary
anchors.centerIn: parent
width: Kirigami.Units.iconSizes.smallMedium
height: width
source: modelData.iconName
delegate: Controls.Button { modelData.iconName
activeFocusOnTab: focus || delegate.focus
onClicked: modelData.trigger()
onClicked: {
enabled: modelData.enabled
visible: modelData.visible
//NOTE: there aren't any global settings where to take "official" tooltip timeouts
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