Add Hover Effect to Buttons
This commit is contained in:
@@ -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
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
@@ -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
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user