1
0

qml: use highlight pane for QR codes, refactor ReceiveDialog invoice select UI.

This commit is contained in:
Sander van Grieken
2023-11-13 11:37:05 +01:00
parent 86a45c668c
commit 3793a6b6b6
5 changed files with 145 additions and 114 deletions

View File

@@ -38,15 +38,20 @@ ElDialog {
width: parent.width width: parent.width
spacing: constants.paddingMedium spacing: constants.paddingMedium
Item { TextHighlightPane {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: qr.height Layout.leftMargin: constants.paddingMedium
Layout.topMargin: constants.paddingSmall Layout.rightMargin: constants.paddingMedium
Layout.bottomMargin: constants.paddingSmall padding: constants.paddingMedium
QRImage { ColumnLayout {
id: qr width: parent.width
qrdata: dialog.text_qr QRImage {
anchors.centerIn: parent id: qr
qrdata: dialog.text_qr
Layout.alignment: Qt.AlignHCenter
Layout.topMargin: constants.paddingMedium
Layout.bottomMargin: constants.paddingMedium
}
} }
} }

View File

@@ -42,28 +42,38 @@ ElDialog {
width: parent.width width: parent.width
spacing: constants.paddingMedium spacing: constants.paddingMedium
QRImage {
id: qr
render: dialog.enter ? false : true
qrdata: dialog.text_qr ? dialog.text_qr : dialog.text
Layout.alignment: Qt.AlignHCenter
Layout.topMargin: constants.paddingSmall
Layout.bottomMargin: constants.paddingSmall
}
TextHighlightPane { TextHighlightPane {
Layout.alignment: Qt.AlignHCenter
Layout.fillWidth: true
Layout.leftMargin: constants.paddingMedium Layout.leftMargin: constants.paddingMedium
Layout.rightMargin: constants.paddingMedium Layout.rightMargin: constants.paddingMedium
Layout.fillWidth: true
visible: dialog.text ColumnLayout {
Label {
width: parent.width width: parent.width
text: dialog.text
wrapMode: Text.Wrap QRImage {
font.pixelSize: constants.fontSizeLarge id: qr
font.family: FixedFont render: dialog.enter ? false : true
maximumLineCount: 4 qrdata: dialog.text_qr ? dialog.text_qr : dialog.text
elide: Text.ElideRight Layout.alignment: Qt.AlignHCenter
Layout.topMargin: constants.paddingMedium
Layout.bottomMargin: constants.paddingMedium
}
TextHighlightPane {
Layout.fillWidth: true
visible: dialog.text
Label {
width: parent.width
text: dialog.text
wrapMode: Text.Wrap
font.pixelSize: constants.fontSizeLarge
font.family: FixedFont
maximumLineCount: 4
elide: Text.ElideRight
}
}
} }
} }

View File

@@ -52,112 +52,124 @@ ElDialog {
State { State {
name: 'bolt11' name: 'bolt11'
PropertyChanges { target: qrloader; sourceComponent: qri_bolt11 } PropertyChanges { target: qrloader; sourceComponent: qri_bolt11 }
PropertyChanges { target: bolt11label; color: Material.accentColor; font.underline: true } // PropertyChanges { target: bolt11label; color: Material.accentColor; font.underline: true }
// PropertyChanges { target: bolt11Button; checked: true }
}, },
State { State {
name: 'bip21uri' name: 'bip21uri'
PropertyChanges { target: qrloader; sourceComponent: qri_bip21uri } PropertyChanges { target: qrloader; sourceComponent: qri_bip21uri }
PropertyChanges { target: bip21label; color: Material.accentColor; font.underline: true } // PropertyChanges { target: bip21label; color: Material.accentColor; font.underline: true }
// PropertyChanges { target: bip21Button; checked: true }
}, },
State { State {
name: 'address' name: 'address'
PropertyChanges { target: qrloader; sourceComponent: qri_address } PropertyChanges { target: qrloader; sourceComponent: qri_address }
PropertyChanges { target: addresslabel; color: Material.accentColor; font.underline: true } // PropertyChanges { target: addresslabel; color: Material.accentColor; font.underline: true }
// PropertyChanges { target: addressButton; checked: true }
} }
] ]
Rectangle { TextHighlightPane {
id: qrbg
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
Layout.topMargin: constants.paddingSmall Layout.fillWidth: true
Layout.bottomMargin: constants.paddingSmall
Layout.preferredWidth: dialog.width * 7/8 ColumnLayout {
Layout.preferredHeight: dialog.width * 7/8 width: parent.width
Rectangle {
id: qrbg
Layout.alignment: Qt.AlignHCenter
Layout.topMargin: constants.paddingSmall
Layout.bottomMargin: constants.paddingSmall
color: 'white' Layout.preferredWidth: dialog.width * 7/8
Layout.preferredHeight: dialog.width * 7/8
Loader { color: 'white'
id: qrloader
anchors.centerIn: parent
Component {
id: qri_bolt11
QRImage {
qrdata: _bolt11
render: _render_qr
enableToggleText: true
}
}
Component {
id: qri_bip21uri
QRImage {
qrdata: _bip21uri
render: _render_qr
enableToggleText: true
}
}
Component {
id: qri_address
QRImage {
qrdata: _address
render: _render_qr
enableToggleText: true
}
}
}
}
RowLayout { Loader {
Layout.alignment: Qt.AlignHCenter id: qrloader
spacing: constants.paddingLarge anchors.centerIn: parent
Label { Component {
id: bolt11label id: qri_bolt11
text: qsTr('Lightning') QRImage {
color: _bolt11 ? Material.foreground : constants.mutedForeground qrdata: _bolt11
MouseArea { render: _render_qr
anchors.fill: parent enableToggleText: true
enabled: _bolt11 }
onClicked: { }
rootLayout.state = 'bolt11' Component {
Config.preferredRequestType = 'bolt11' id: qri_bip21uri
QRImage {
qrdata: _bip21uri
render: _render_qr
enableToggleText: true
}
}
Component {
id: qri_address
QRImage {
qrdata: _address
render: _render_qr
enableToggleText: true
}
}
} }
} }
}
Rectangle { ButtonContainer {
Layout.preferredWidth: constants.paddingXXSmall Layout.fillWidth: true
Layout.preferredHeight: constants.paddingXXSmall showSeparator: false
radius: constants.paddingXXSmall / 2 Component {
color: Material.accentColor id: _ind
} Rectangle {
Label { color: Material.dialogColor
id: bip21label opacity: parent.checked ? 1 : 0
text: qsTr('URI') radius: 5
color: _bip21uri ? Material.foreground : constants.mutedForeground width: parent.width
MouseArea { height: parent.height
anchors.fill: parent
enabled: _bip21uri Behavior on opacity {
onClicked: { NumberAnimation { duration: 200 }
rootLayout.state = 'bip21uri' }
Config.preferredRequestType = 'bip21uri' }
} }
} TabButton {
} id: bolt11Button
Rectangle { Layout.fillWidth: true
Layout.preferredWidth: constants.paddingXXSmall Layout.preferredWidth: 1
Layout.preferredHeight: constants.paddingXXSmall text: qsTr('Lightning')
radius: constants.paddingXXSmall / 2 enabled: _bolt11
color: Material.accentColor checked: rootLayout.state == 'bolt11'
} indicator: _ind.createObject()
Label { onClicked: {
id: addresslabel rootLayout.state = 'bolt11'
text: qsTr('Address') Config.preferredRequestType = 'bolt11'
color: _address ? Material.foreground : constants.mutedForeground }
MouseArea { }
anchors.fill: parent TabButton {
enabled: _address id: bip21Button
onClicked: { Layout.fillWidth: true
rootLayout.state = 'address' Layout.preferredWidth: 1
Config.preferredRequestType = 'address' text: qsTr('URI')
enabled: _bip21uri
checked: rootLayout.state == 'bip21uri'
indicator: _ind.createObject()
onClicked: {
rootLayout.state = 'bip21uri'
Config.preferredRequestType = 'bip21uri'
}
}
TabButton {
id: addressButton
Layout.fillWidth: true
Layout.preferredWidth: 1
text: qsTr('Address')
checked: rootLayout.state == 'address'
indicator: _ind.createObject()
onClicked: {
rootLayout.state = 'address'
Config.preferredRequestType = 'address'
}
} }
} }
} }

View File

@@ -6,6 +6,8 @@ import QtQuick.Controls.Material
Container { Container {
id: root id: root
property bool showSeparator: true
property Item _layout property Item _layout
function fillContentItem() { function fillContentItem() {
@@ -48,7 +50,7 @@ Container {
required property int pheight required property int pheight
required property int master_idx required property int master_idx
Layout.fillWidth: false Layout.fillWidth: false
Layout.preferredWidth: 2 Layout.preferredWidth: showSeparator ? 2 : 0
Layout.preferredHeight: pheight Layout.preferredHeight: pheight
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
color: constants.darkerBackground color: constants.darkerBackground

View File

@@ -11,6 +11,8 @@ TabButton {
property bool textUnderIcon: true property bool textUnderIcon: true
font.pixelSize: constants.fontSizeSmall font.pixelSize: constants.fontSizeSmall
icon.width: constants.iconSizeMedium
icon.height: constants.iconSizeMedium
display: textUnderIcon ? IconLabel.TextUnderIcon : IconLabel.TextBesideIcon display: textUnderIcon ? IconLabel.TextUnderIcon : IconLabel.TextBesideIcon
contentItem: IconLabel { contentItem: IconLabel {