Skip to content

Visual tweaks to the fee selector in the send form #466

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 6, 2025
Merged

Visual tweaks to the fee selector in the send form #466

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 48 additions & 19 deletions src/qml/components/FeeSelection.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ RowLayout {

property int selectedIndex: 1
property string selectedLabel: feeModel.get(root.selectedIndex).feeLabel
property string selectedDuration: feeModel.get(root.selectedIndex).feeDuration

signal feeChanged(int target)

Expand All @@ -22,30 +23,49 @@ RowLayout {
CoreText {
Layout.fillWidth: true
horizontalAlignment: Text.AlignLeft
font.pixelSize: 15
font.pixelSize: 18
text: qsTr("Fee")
}

Button {
id: dropDownButton
text: root.selectedLabel
font.pixelSize: 15
font.pixelSize: 18

hoverEnabled: true

leftPadding: 10
rightPadding: 4
topPadding: 2
bottomPadding: 2
height: 28

HoverHandler {
cursorShape: Qt.PointingHandCursor
}

onPressed: feePopup.open()

contentItem: RowLayout {
spacing: 5
spacing: 0

CoreText {
id: value
text: root.selectedLabel
font.pixelSize: 15
font.pixelSize: 18

Behavior on color {
ColorAnimation { duration: 150 }
}
}

Item { width: 5 }

CoreText {
id: duration
text: root.selectedDuration
font.pixelSize: 18
color: dropDownButton.enabled ? Theme.color.neutral7 : Theme.color.neutral4

Behavior on color {
ColorAnimation { duration: 150 }
Expand Down Expand Up @@ -98,13 +118,14 @@ RowLayout {
background: Rectangle {
color: Theme.color.background
radius: 6
border.color: Theme.color.neutral3
border.color: Theme.color.neutral4
}

width: 260
height: Math.min(feeModel.count * 40 + 20, 300)
height: Math.min(feeModel.count * 36 + 10, 300)
x: feePopup.parent.width - feePopup.width
y: feePopup.parent.height
y: feePopup.parent.height + 2
padding: 5

contentItem: ListView {
id: feeList
Expand All @@ -115,35 +136,42 @@ RowLayout {
delegate: ItemDelegate {
id: delegate
required property string feeLabel
required property string feeDuration
required property int index
required property int target

width: ListView.view.width
height: 40
height: 36

leftPadding: 10
rightPadding: 4
topPadding: 2
bottomPadding: 2

background: Item {
Rectangle {
anchors.fill: parent
radius: 6
color: Theme.color.neutral3
visible: delegate.hovered
}
Separator {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is removing the Separator intentional? I mainly ask because it wasn't in your description of the changes.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes. Separators are great for grouping/separating different types of options, but are not necessary for ones that go together. Like here in view menu of the MacOS calendar app.
image

width: parent.width
anchors.top: parent.top
color: Theme.color.neutral2
visible: delegate.index > 0
visible: delegate.hovered
}
}

contentItem: RowLayout {
spacing: 10
spacing: 5

CoreText {
text: feeLabel
horizontalAlignment: Text.AlignLeft
font.pixelSize: 15
}

CoreText {
text: feeDuration
horizontalAlignment: Text.AlignLeft
Layout.fillWidth: true
font.pixelSize: 15
color: Theme.color.neutral7
}

Icon {
Expand All @@ -161,6 +189,7 @@ RowLayout {
onClicked: {
root.selectedIndex = delegate.index
root.selectedLabel = feeLabel
root.selectedDuration = feeDuration
root.feeChanged(target)
feePopup.close()
}
Expand All @@ -170,8 +199,8 @@ RowLayout {

ListModel {
id: feeModel
ListElement { feeLabel: qsTr("High (~10 mins)"); target: 1 }
ListElement { feeLabel: qsTr("Default (~60 mins)"); target: 6 }
ListElement { feeLabel: qsTr("Low (~24 hrs)"); target: 144 }
ListElement { feeLabel: qsTr("High"); feeDuration: qsTr("(~10 mins)"); target: 1 }
ListElement { feeLabel: qsTr("Default"); feeDuration: qsTr("(~60 mins)"); target: 6 }
ListElement { feeLabel: qsTr("Low"); feeDuration: qsTr("(~24 hrs)"); target: 144 }
}
}
Loading