Reordered QR/Tracking sections on the receive page

pages/Receive.qml

@@ -73,7 +73,7 @@ Rectangle {
 
     function update() {
         if (!appWindow.currentWallet || !trackingEnabled.checked) {
-            setTrackingLineText("-")
+            setTrackingLineText("")
             return
         }
         if (appWindow.currentWallet.connected() == Wallet.ConnectionStatus_Disconnected) {
@@ -156,7 +156,7 @@ Rectangle {
         property int labelWidth: 120 * scaleRatio
         property int editWidth: 400 * scaleRatio
         property int lineEditFontSize: 12 * scaleRatio
-        property int qrCodeSize: 240 * scaleRatio
+        property int qrCodeSize: 220 * scaleRatio
 
         ColumnLayout {
             id: addressRow
@@ -252,6 +252,7 @@ Rectangle {
                         inputDialog.open()
                     }
                 }
+
                 StandardButton {
                     small: true
                     enabled: table.currentIndex > 0
@@ -269,21 +270,49 @@ Rectangle {
             }
         }
 
+        GridLayout {
+            columns: (isMobile)? 1 : 2
+            Layout.fillWidth: true
+            columnSpacing: 32 * scaleRatio
+
             ColumnLayout {
-            id: amountRow
+                Layout.alignment: Qt.AlignTop
-            Label {
+                Layout.fillWidth: true
-                id: amountLabel
+                spacing: 20 * scaleRatio
-                text: qsTr("Amount") + translationManager.emptyString
+
-                width: mainLayout.labelWidth
+                LabelSubheader {
+                    Layout.fillWidth: true
+                    textFormat: Text.RichText
+                    text: "<style type='text/css'>a {text-decoration: none; color: #FF6C3C; font-size: 14px;}</style>" +
+                          qsTr("QR Code") +
+                          "<font size='2'> </font><a href='#'>" +
+                          qsTr("Help") + "</a>" +
+                          translationManager.emptyString
+                    onLinkActivated: {
+                        trackingHowToUseDialog.title  = qsTr("QR Code") + translationManager.emptyString;
+                        trackingHowToUseDialog.text = qsTr(
+                            "<p>This QR code includes the address you selected above and" +
+                            "the amount you entered below. Share it with others (right-click->Save) " +
+                            "so they can more easily send you exact amounts.</p>"
+                        )
+                        trackingHowToUseDialog.icon = StandardIcon.Information
+                        trackingHowToUseDialog.open()
+                    }
                 }
 
+                ColumnLayout {
+                    id: amountRow
+
+                    Layout.fillWidth: true
+                    Layout.minimumWidth: 200
 
                     LineEdit {
                         id: amountLine
-                placeholderText: qsTr("Amount to receive") + translationManager.emptyString
-                readOnly: false
-                width: mainLayout.editWidth
                         Layout.fillWidth: true
+                        labelText: qsTr("Amount") + translationManager.emptyString
+                        placeholderText: qsTr("Amount to receive") + translationManager.emptyString
+                        fontBold: true
+                        inlineIcon: true
                         validator: DoubleValidator {
                             bottom: 0.0
                             top: 18446744.073709551615
@@ -294,19 +323,60 @@ Rectangle {
                     }
                 }
 
+                Rectangle {
+                    color: "white"
+                    Layout.topMargin: parent.spacing
+                    Layout.fillWidth: true
+                    Layout.maximumWidth: mainLayout.qrCodeSize
+                    Layout.preferredHeight: width
+                    radius: 4
+
+                    Image {
+                        id: qrCode
+                        anchors.fill: parent
+                        anchors.margins: 6
+
+                        smooth: false
+                        fillMode: Image.PreserveAspectFit
+                        source: "image://qrcode/" + makeQRCodeString()
+                        MouseArea {
+                            anchors.fill: parent
+                            acceptedButtons: Qt.RightButton
+                            onClicked: {
+                                if (mouse.button == Qt.RightButton)
+                                    qrMenu.open()
+                            }
+                            onPressAndHold: qrFileDialog.open()
+                        }
+                    }
+
+                    Menu {
+                        id: qrMenu
+                        title: "QrCode"
+                        y: parent.height / 2
+
+                        MenuItem {
+                           text: qsTr("Save As") + translationManager.emptyString;
+                           onTriggered: qrFileDialog.open()
+                        }
+                    }
+                }
+            }
+
             ColumnLayout {
                 id: trackingRow
-            visible: !isAndroid && !isIOS
+                Layout.alignment: Qt.AlignTop
-            Label {
+                Layout.fillWidth: true
-                id: trackingLabel
+                spacing: 32 * scaleRatio
+
+                LabelSubheader {
+                    Layout.fillWidth: true
                     textFormat: Text.RichText
                     text: "<style type='text/css'>a {text-decoration: none; color: #FF6C3C; font-size: 14px;}</style>" +
                           qsTr("Tracking") +
-                      "<font size='2'> (</font><a href='#'>" +
+                          "<font size='2'> </font><a href='#'>" +
-                      qsTr("help") +
+                          qsTr("Help") + "</a>" +
-                      "</a><font size='2'>)</font>" +
                           translationManager.emptyString
-                width: mainLayout.labelWidth
                     onLinkActivated: {
                         trackingHowToUseDialog.title  = qsTr("Tracking payments") + translationManager.emptyString;
                         trackingHowToUseDialog.text = qsTr(
@@ -325,15 +395,23 @@ Rectangle {
                     }
                 }
 
+                RowLayout {
+                    Layout.fillWidth: true
+                    Layout.minimumWidth: 200
+
                     CheckBox {
                         id: trackingEnabled
                         text: qsTr("Enable") + translationManager.emptyString
                     }
+                }
+
+                RowLayout {
+                    Layout.fillWidth: true
+                    Layout.minimumWidth: 200
 
                     TextEdit {
                         id: trackingLine
                         readOnly: true
-                width: mainLayout.editWidth
                         Layout.fillWidth: true
                         textFormat: Text.RichText
                         text: ""
@@ -341,6 +419,8 @@ Rectangle {
                         color: 'white'
                     }
                 }
+            }
+        }
 
         MessageDialog {
             id: trackingHowToUseDialog
@@ -363,35 +443,6 @@ Rectangle {
                 }
             }
         }
-        ColumnLayout {
-            Menu {
-                id: qrMenu
-                title: "QrCode"
-                MenuItem {
-                   text: qsTr("Save As") + translationManager.emptyString;
-                   onTriggered: qrFileDialog.open()
-                }
-            }
-
-            Image {
-                id: qrCode
-                anchors.margins: 50 * scaleRatio
-                Layout.fillWidth: true
-                Layout.minimumHeight: mainLayout.qrCodeSize
-                smooth: false
-                fillMode: Image.PreserveAspectFit
-                source: "image://qrcode/" + makeQRCodeString()
-                MouseArea {
-                    anchors.fill: parent
-                    acceptedButtons: Qt.RightButton
-                    onClicked: {
-                        if (mouse.button == Qt.RightButton)
-                            qrMenu.popup()
-                    }
-                    onPressAndHold: qrFileDialog.open()
-                }
-            }
-        }
     }
 
     Timer {