Skip to content

Commit f3150f7

Browse files
hebastohebasto
committed
Merge #234: Add NavButton interaction color animation states
20edc75 qml: add NavButton interaction color animations (Jarol Rodriguez) d0a5296 qml: do not use NavButton for NodeSettings settings navigation buttons (jarolrod) Pull request description: Introduces the missing NavButton interaction color animation states as detailed in #231, except there are issues with the sizing of the components themselves. #### Dark Mode | Default | Hovered | Pressed | | ------- | ------- | ------- | | <img width="104" alt="Screen Shot 2023-01-29 at 4 41 48 AM" src="https://user-images.githubusercontent.com/23396902/215318084-676a8834-b7df-4ad0-8e0f-06bb763bf24f.png"> | <img width="104" alt="Screen Shot 2023-01-29 at 4 42 04 AM" src="https://user-images.githubusercontent.com/23396902/215318088-cab6d039-8532-4782-9198-e18be5cf1e78.png"> | <img width="104" alt="Screen Shot 2023-01-29 at 4 42 21 AM" src="https://user-images.githubusercontent.com/23396902/215318108-490d8bf6-5eb6-45c4-bc20-08b6cc4f854b.png"> | #### Dark Mode | Default | Hovered | Pressed | | ------- | ------- | ------- | | <img width="104" alt="Screen Shot 2023-01-29 at 4 43 40 AM" src="https://user-images.githubusercontent.com/23396902/215318182-cd81e393-5b34-4100-a714-773fe7b7b232.png"> | <img width="104" alt="Screen Shot 2023-01-29 at 4 44 00 AM" src="https://user-images.githubusercontent.com/23396902/215318189-57029f83-db97-434c-9eb6-1c31fc4caac0.png"> | <img width="104" alt="Screen Shot 2023-01-29 at 4 44 12 AM" src="https://user-images.githubusercontent.com/23396902/215318192-d20e0ec5-a16b-4c23-bb2f-7fd94cf30a22.png"> | As can be told from the screenshots the sizing of the component itself isn't correct; this needs to be addressed, potentially in a follow-up. The first commit allows for us to use the NavButton correctly with these new background states but also fixes an issue where the Right Caret buttons in the NodeSettings page were much bigger than in the other areas we use this button. A follow-up can contain this button in a nice component. [![Windows](https://img.shields.io/badge/OS-Windows-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/win64/insecure_win_gui.zip?branch=pull/<PR>) [![Intel macOS](https://img.shields.io/badge/OS-Intel%20macOS-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/macos/insecure_mac_gui.zip?branch=pull/<PR>) [![Apple Silicon macOS](https://img.shields.io/badge/OS-Apple%20Silicon%20macOS-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/macos_arm64/insecure_mac_arm64_gui.zip?branch=pull/<PR>) [![ARM64 Android](https://img.shields.io/badge/OS-Android-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/android/insecure_android_apk.zip?branch=pull/<PR>) ACKs for top commit: johnny9: ACK 20edc75 Tree-SHA512: 3e0b5c13fbb9d018159fdf9fff8a3f67549acbdca554939faa5bdebc68820012721cb17e0c926c4486cd38be426666aa50eff6604b334b9dc379747325d7df39
2 parents 075e216 + 20edc75 commit f3150f7

File tree

2 files changed

+59
-10
lines changed

2 files changed

+59
-10
lines changed

‎src/qml/controls/NavButton.qml

Lines changed: 44 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,32 @@ AbstractButton {
1414
property url iconSource: ""
1515

1616
padding: 0
17-
background: null
17+
background: Rectangle {
18+
id: bg
19+
height: root.height
20+
width: root.width
21+
radius: 5
22+
state:"DEFAULT"
23+
24+
states: [
25+
State {
26+
name: "DEFAULT"
27+
PropertyChanges { target: bg; color: Theme.color.background }
28+
},
29+
State {
30+
name: "HOVER"
31+
PropertyChanges { target: bg; color: Theme.color.neutral2 }
32+
},
33+
State {
34+
name: "PRESSED"
35+
PropertyChanges { target: bg; color: Theme.color.neutral3 }
36+
}
37+
]
38+
39+
Behavior on color {
40+
ColorAnimation { duration: 150 }
41+
}
42+
}
1843
contentItem: RowLayout {
1944
anchors.fill: parent
2045
spacing: 0
@@ -33,7 +58,6 @@ AbstractButton {
3358
icon.height: root.iconHeight
3459
icon.width: root.iconWidth
3560
background: null
36-
onClicked: root.clicked()
3761
}
3862
}
3963
Loader {
@@ -52,8 +76,24 @@ AbstractButton {
5276
color: Theme.color.neutral9
5377
text: root.text
5478
}
55-
onClicked: root.clicked()
5679
}
57-
}
80+
}
81+
}
82+
MouseArea {
83+
anchors.fill: parent
84+
hoverEnabled: true
85+
onEntered: {
86+
root.background.state = "HOVER"
87+
}
88+
onExited: {
89+
root.background.state = "DEFAULT"
90+
}
91+
onPressed: {
92+
root.background.state = "PRESSED"
93+
}
94+
onReleased: {
95+
root.background.state = "DEFAULT"
96+
root.clicked()
97+
}
5898
}
5999
}

‎src/qml/pages/node/NodeSettings.qml

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,11 @@ Item {
4848
Setting {
4949
Layout.fillWidth: true
5050
header: qsTr("About")
51-
actionItem: NavButton {
52-
iconSource: "image://images/caret-right"
51+
actionItem: Button {
52+
icon.source: "image://images/caret-right"
53+
icon.color: Theme.color.neutral9
54+
icon.height: 18
55+
icon.width: 18
5356
background: null
5457
onClicked: {
5558
nodeSettingsView.push(about_page)
@@ -59,8 +62,11 @@ Item {
5962
Setting {
6063
Layout.fillWidth: true
6164
header: qsTr("Storage")
62-
actionItem: NavButton {
63-
iconSource: "image://images/caret-right"
65+
actionItem: Button {
66+
icon.source: "image://images/caret-right"
67+
icon.color: Theme.color.neutral9
68+
icon.height: 18
69+
icon.width: 18
6470
background: null
6571
onClicked: {
6672
nodeSettingsView.push(storage_page)
@@ -70,8 +76,11 @@ Item {
7076
Setting {
7177
Layout.fillWidth: true
7278
header: qsTr("Connection")
73-
actionItem: NavButton {
74-
iconSource: "image://images/caret-right"
79+
actionItem: Button {
80+
icon.source: "image://images/caret-right"
81+
icon.color: Theme.color.neutral9
82+
icon.height: 18
83+
icon.width: 18
7584
background: null
7685
onClicked: {
7786
nodeSettingsView.push(connection_page)

0 commit comments

Comments
 (0)