Commit bf7eec47 authored by Noah Davis's avatar Noah Davis 🌵
Browse files

[DelegateBackground]Fix ListView highlight detection, animate color to normal state

I managed to figure out a way to detect when a ListView has its own
highlight, but it's a bit ugly.

I've also prevented the items from going invisible until the animation
finishes.
parent 8473f655
......@@ -3,58 +3,65 @@
*/
import QtQuick 2.15
import QtQuick.Templates 2.15 as T
import org.kde.kirigami 2.14 as Kirigami
// TODO: I'm currently unsatisfied with the appearance of this
Loader {
id: root
property alias control: root.parent
property bool isCurrentItem: isInListView && control.ListView.isCurrentItem
property bool isInListView: control.ListView.view
property bool listViewHasHighlight: isInListView && control.ListView.view.highlight
property int currentIndex: isInListView ? control.ListView.view.currentIndex : 0
property int count: isInListView ? control.ListView.view.count : 0
property T.AbstractButton control: root.parent
// God, this code is ugly. Somehow this works, but `control.ListView.view && control.ListView.view.highlight` doesn't.
property bool isInListView: control.ListView.view ?? false
property bool listViewHasHighlight: isInListView && (control.ListView.view.highlight ?? false)
property color normalColor: control instanceof T.SwipeDelegate ? Kirigami.Theme.backgroundColor
: Qt.rgba(
Kirigami.Theme.backgroundColor.r,
Kirigami.Theme.backgroundColor.g,
Kirigami.Theme.backgroundColor.b,
0
)
property bool highlightBorder: control.hovered || control.visualFocus || control.down || control.highlighted
// Rectangle compatibility properties. 3rd party devs might assume that these properties are available.
property color color: {
if (control.down ) {
if (control.down || control.highlighted) {
return Kirigami.Theme.alternateBackgroundColor
} else if (control.highlighted) {
return Kirigami.Theme.highlightColor
} else {
return Qt.rgba(
Kirigami.Theme.backgroundColor.r,
Kirigami.Theme.backgroundColor.g,
Kirigami.Theme.backgroundColor.b,
0)
return normalColor
}
}
property real radius: 0
property real radius: Kirigami.Units.smallRadius
property QtObject border: QtObject {
property real width: 0
property real width: highlightBorder ? Kirigami.Units.smallBorder : 0
property color color: Kirigami.Theme.focusColor
}
visible: control.highlighted || control.down || control.hovered || control.visualFocus
sourceComponent: visible ? backgroundComponent : null
property bool backgroundAnimationRunning: false
property bool borderAnimationRunning: false
Component {
id: backgroundComponent
visible: (highlightBorder || backgroundAnimationRunning || borderAnimationRunning || control instanceof T.SwipeDelegate) && !listViewHasHighlight
active: visible
sourceComponent: Component {
Kirigami.ShadowedRectangle {
id: mainBackground
readonly property bool isCurrentItem: root.isInListView && control.ListView.isCurrentItem
readonly property int currentIndex: root.isInListView ? control.ListView.view.currentIndex : 0
// readonly property int count: root.isInListView ? control.ListView.view.count : 0
readonly property bool horizontalListView: root.isInListView && control.ListView.view.orientation === ListView.Horizontal
implicitHeight: Kirigami.Units.mediumControlHeight
anchors.fill: parent
radius: root.radius
// readonly property real topRadius: root.isCurrentItem && root.currentIndex == 0 ? Kirigami.Units.smallRadius : 0
//readonly property real bottomRadius: root.isCurrentItem && root.currentIndex == root.count-1 ? Kirigami.Units.smallRadius : 0
readonly property real topRadius: !root.isInListView || (isCurrentItem && currentIndex == 0) ? radius : 0
readonly property real bottomRadius: !root.isInListView || (isCurrentItem && currentIndex == control.ListView.view.count-1) ? radius : 0
//corners {
//topLeftRadius: Kirigami.Units.smallRadius//root.topRadius
//topRightRadius: Kirigami.Units.smallRadius//root.topRadius
//bottomLeftRadius: Kirigami.Units.smallRadius//root.bottomRadius
//bottomRightRadius: Kirigami.Units.smallRadius//root.bottomRadius
//}
corners {
topLeftRadius: topRadius
topRightRadius: topRadius
bottomLeftRadius: bottomRadius
bottomRightRadius: bottomRadius
}
color: root.color
......@@ -64,29 +71,20 @@ Loader {
}
Behavior on color {
enabled: control.down
ColorAnimation {
duration: Kirigami.Units.shortDuration
easing.type: Easing.OutCubic
onRunningChanged: root.backgroundAnimationRunning = running
}
}
Rectangle {
height: Kirigami.Units.smallBorder
anchors {
left: parent.left
right: parent.right
top: parent.top
}
color: mainBackground.border.color
}
Rectangle {
height: Kirigami.Units.smallBorder
anchors {
left: parent.left
right: parent.right
bottom: parent.bottom
Behavior on border.color {
enabled: highlightBorder
ColorAnimation {
duration: Kirigami.Units.shortDuration
easing.type: Easing.OutCubic
onRunningChanged: root.borderAnimationRunning = running
}
color: mainBackground.border.color
}
}
}
......
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