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

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

Summary:
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: https://phabricator.kde.org/D18649
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
top: actionsScope.top
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 {
icon.name: modelData.iconName
activeFocusOnTab: focus || delegate.focus
onClicked: modelData.trigger()
onClicked: {
delegate.clicked()
modelData.trigger()
}
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