Add Hover Effect to Buttons

This commit is contained in:
Yuri Becker
2025-03-24 12:06:09 +01:00
parent 30493dbdbf
commit 7f5675c06d
3 changed files with 10 additions and 5 deletions

View File

@@ -43,7 +43,7 @@ T.Button {
border.color: Colors.interactive border.color: Colors.interactive
border.width: isFieldButton ? 1 : 0 border.width: isFieldButton ? 1 : 0
bottomLeftRadius: topLeftRadius bottomLeftRadius: topLeftRadius
color: Colors.primary color: !control.hovered ? Colors.primary : Colors.primaryLighter
radius: Dimensions.radius radius: Dimensions.radius
topLeftRadius: isFieldButton ? 0 : radius topLeftRadius: isFieldButton ? 0 : radius
} }

View File

@@ -8,9 +8,10 @@ QtObject {
property int theme: Application.styleHints.colorScheme === Qt.ColorScheme.Light ? light : dark property int theme: Application.styleHints.colorScheme === Qt.ColorScheme.Light ? light : dark
property color primary: "#b81a34" readonly property color primary: "#b81a34"
property color primaryContrast: "#fdfdfd" readonly property color primaryContrast: "#fdfdfd"
property color foreground: theme === dark ? "#fdfdfd" : "#110b0c" readonly property color primaryLighter: Qt.lighter(primary, 1.5)
readonly property color foreground: theme === dark ? "#fdfdfd" : "#110b0c"
readonly property color background: theme === dark ? "#303136" : "#eff1f5" readonly property color background: theme === dark ? "#303136" : "#eff1f5"
readonly property color mantle: theme === dark ? "#1e1f22" : "#e7e9ef" readonly property color mantle: theme === dark ? "#1e1f22" : "#e7e9ef"
readonly property color interactive: theme === dark ? "#878b97" : "#d9d9da" readonly property color interactive: theme === dark ? "#878b97" : "#d9d9da"

View File

@@ -19,6 +19,7 @@ RowLayout {
required property int index required property int index
required property var modelData required property var modelData
property bool hovered: false
property real padding: Dimensions.m property real padding: Dimensions.m
height: text.height + padding * 2 height: text.height + padding * 2
@@ -28,7 +29,7 @@ RowLayout {
anchors.fill: parent anchors.fill: parent
border.color: modelData.selected ? Colors.transparent : Colors.foreground border.color: modelData.selected ? Colors.transparent : Colors.foreground
border.width: 2 border.width: 2
color: modelData.selected ? Colors.primary : Colors.transparent color: modelData.selected || mouseArea.containsMouse ? Colors.primary : Colors.transparent
radius: parent.height radius: parent.height
} }
Text { Text {
@@ -41,6 +42,9 @@ RowLayout {
y: parent.padding y: parent.padding
} }
MouseArea { MouseArea {
id: mouseArea
hoverEnabled: true
anchors.fill: parent anchors.fill: parent
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor