Fix ripple and hover effekt for tiles and delegates with round corners

This commit is contained in:
Simon Stürz 2025-12-18 16:45:48 +01:00
parent 37b08fb84b
commit c6e8e7aa06
4 changed files with 29 additions and 2 deletions

View File

@ -53,6 +53,7 @@ BigTile {
text: root.thing.name
elide: Text.ElideRight
}
ThingStatusIcons {
thing: root.thing
}

View File

@ -26,6 +26,7 @@ import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import QtQuick.Controls.Material
import QtQuick.Controls.Material.impl
import Nymea
@ -101,6 +102,16 @@ Item {
: Style.tileBackgroundColor
}
}
Ripple {
anchors.fill: parent
clip: true
clipRadius: background.radius
pressed: content.pressed
anchor: content
active: content.pressed || content.visualFocus || content.hovered
color: content.Material.rippleColor
}
}
@ -129,6 +140,9 @@ Item {
root.pressAndHold()
}
}
background: Item {
implicitHeight: Style.delegateHeight
}
}
}
}

View File

@ -25,6 +25,7 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Material
import QtQuick.Controls.Material.impl
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
import Nymea
@ -102,7 +103,18 @@ Item {
maskSource: backgroundImgClipper
}
Ripple {
anchors.fill: background
clip: true
clipRadius: background.radius
pressed: delegate.pressed
anchor: delegate
active: delegate.pressed || delegate.visualFocus || delegate.hovered
color: delegate.Material.rippleColor
}
ItemDelegate {
id: delegate
anchors {
top: parent.top; left: parent.left; right: parent.right; bottom: innerContent.top
topMargin: app.margins / 2; leftMargin: app.margins / 2; rightMargin: app.margins / 2
@ -110,6 +122,7 @@ Item {
padding: 0; topPadding: 0; bottomPadding: 0
onClicked: root.clicked()
onPressAndHold: root.pressAndHold()
background: null
contentItem: ColumnLayout {
spacing: 0
@ -217,4 +230,3 @@ Item {
}
}
}

View File

@ -323,7 +323,7 @@ MainViewBase {
}
}
onClicked: {
onClicked: (mouse) => {
var ret = itemUnderMouse()
if (ret.item) {
dragArea.editIndex = ret.index