Transfer - mobile redesign

pages/Transfer.qml

@@ -71,10 +71,10 @@ Rectangle {
     }
 
     function updateMixin() {
-        var fillLevel = privacyLevelItem.fillLevel
+        var fillLevel = (isMobile) ? privacyLevelItemSmall.fillLevel : privacyLevelItem.fillLevel
         var mixin = scaleValueToMixinCount(fillLevel)
-        print ("PrivacyLevel changed:"  + fillLevel)
+        console.log("PrivacyLevel changed:"  + fillLevel)
-        print ("mixin count: "  + mixin)
+        console.log("mixin count: "  + mixin)
         privacyLabel.text = qsTr("Privacy level (ringsize %1)").arg(mixin+1) + translationManager.emptyString
     }
 
@@ -107,45 +107,33 @@ Rectangle {
         }
     }
 
-    Item {
+    ColumnLayout {
       id: pageRoot
       anchors.top: parent.top
       anchors.left: parent.left
       anchors.right: parent.right
-      anchors.topMargin: 20
+      anchors.margins: 17 * scaleRatio
-      height: 400
+      spacing: 0
 
+      GridLayout {
+          columns: (isMobile)? 1 : 2
+          Layout.fillWidth: true
+
+          ColumnLayout {
+              Layout.fillWidth: true
               Label {
                   id: amountLabel
-          anchors.left: parent.left
-          anchors.top: parent.top
-          anchors.leftMargin: 17
-          anchors.rightMargin: 17
-          anchors.topMargin: 17
                   text: qsTr("Amount") + translationManager.emptyString
-          fontSize: 14
               }
 
-      Label {
+              RowLayout {
-          id: transactionPriority
+                  Layout.fillWidth: true
-          anchors.top: parent.top
-          anchors.topMargin: 17
-          fontSize: 14
-          x: (parent.width - 17) / 2 + 17
-          text: qsTr("Transaction priority") + translationManager.emptyString
-      }
-
-
-      Row {
                   id: amountRow
-          anchors.top: amountLabel.bottom
+                  Layout.minimumWidth: 200
-          anchors.topMargin: 5
-          anchors.left: parent.left
-          anchors.leftMargin: 7
-          width: (parent.width - 17) / 2 + 10
                   Item {
-              width: 37
+                      visible: !isMobile
-              height: 37
+                      width: 37 * scaleRatio
+                      height: 37 * scaleRatio
 
                       Image {
                           anchors.centerIn: parent
@@ -154,9 +142,10 @@ Rectangle {
                   }
                   // Amount input
                   LineEdit {
+                      Layout.fillWidth: true
                       id: amountLine
                       placeholderText: qsTr("") + translationManager.emptyString
-              width: parent.width - 37 - 17 - 60
+                      width:100
                       validator: DoubleValidator {
                           bottom: 0.0
                           top: 18446744.073709551615
@@ -168,10 +157,7 @@ Rectangle {
 
                   StandardButton {
                       id: amountAllButton
-              //anchors.left: amountLine.right
+                      width: 60 * scaleRatio
-              //anchors.top: amountLine.top
-              //anchors.bottom: amountLine.bottom
-              width: 60
                       text: qsTr("All") + translationManager.emptyString
                       shadowReleasedColor: "#FF4304"
                       shadowPressedColor: "#B32D00"
@@ -183,6 +169,14 @@ Rectangle {
               }
 
 
+          }
+
+          ColumnLayout {
+              Layout.fillWidth: true
+              Label {
+                  id: transactionPriority
+                  text: qsTr("Transaction priority") + translationManager.emptyString
+              }
               // Note: workaround for translations in listElements
               // ListElement: cannot use script for property value, so
               // code like this wont work:
@@ -211,47 +205,37 @@ Rectangle {
                }
 
               StandardDropdown {
+                  Layout.fillWidth: true
                   id: priorityDropdown
-          anchors.top: transactionPriority.bottom
-          anchors.right: parent.right
-          anchors.rightMargin: 17
-          anchors.topMargin: 5
-          anchors.left: transactionPriority.left
                   shadowReleasedColor: "#FF4304"
                   shadowPressedColor: "#B32D00"
                   releasedColor: "#FF6C3C"
                   pressedColor: "#FF4304"
-          z: 1
+              }
+          }
+          // Make sure dropdown is on top
+          z: parent.z + 1
       }
 
+      ColumnLayout {
+          Layout.fillWidth: true
           Label {
               id: addressLabel
-          anchors.left: parent.left
-          anchors.right: parent.right
-          anchors.top: amountRow.bottom
-          anchors.leftMargin: 17
-          anchors.rightMargin: 17
-          anchors.topMargin: 30
-          fontSize: 14
               textFormat: Text.RichText
               text: qsTr("<style type='text/css'>a {text-decoration: none; color: #FF6C3C; font-size: 14px;}</style>\
                           Address <font size='2'>  ( Paste in or select from </font> <a href='#'>Address book</a><font size='2'> )</font>")
                     + translationManager.emptyString
 
               onLinkActivated: appWindow.showPageRequest("AddressBook")
+              Layout.fillWidth: true
           }
           // recipient address input
           RowLayout {
               id: addressLineRow
-          anchors.left: parent.left
+              Layout.fillWidth: true
-          anchors.right: parent.right
-          anchors.top: addressLabel.bottom
 
               StandardButton {
                   id: qrfinderButton
-              anchors.left: parent.left
-              anchors.leftMargin: 17
-              anchors.topMargin: 5
                   text: qsTr("QR Code") + translationManager.emptyString
                   shadowReleasedColor: "#FF4304"
                   shadowPressedColor: "#B32D00"
@@ -259,7 +243,7 @@ Rectangle {
                   pressedColor: "#FF4304"
                   visible : appWindow.qrScannerEnabled
                   enabled : visible
-              width: visible ? 60 : 0
+                  width: visible ? 60 * scaleRatio : 0
                   onClicked: {
                       cameraUi.state = "Capture"
                       cameraUi.qrcode_decoded.connect(updateFromQrCode)
@@ -267,21 +251,15 @@ Rectangle {
               }
               LineEdit {
                   id: addressLine
-              anchors.left: qrfinderButton.right
+                  Layout.fillWidth: true
-              anchors.right: resolveButton.left
+                  anchors.topMargin: 5 * scaleRatio
-              //anchors.leftMargin: 17
-              anchors.topMargin: 5
                   placeholderText: "4..."
                   // validator: RegExpValidator { regExp: /[0-9A-Fa-f]{95}/g }
               }
 
               StandardButton {
                   id: resolveButton
-              anchors.right: parent.right
+                  width: 60 * scaleRatio
-              anchors.leftMargin: 17
-              anchors.topMargin: 17
-              anchors.rightMargin: 17
-              width: 60
                   text: qsTr("Resolve") + translationManager.emptyString
                   shadowReleasedColor: "#FF4304"
                   shadowPressedColor: "#B32D00"
@@ -324,80 +302,31 @@ Rectangle {
 
           Label {
               id: paymentIdLabel
-          anchors.left: parent.left
-          anchors.right: parent.right
-          anchors.top: addressLineRow.bottom
-          anchors.leftMargin: 17
-          anchors.rightMargin: 17
-          anchors.topMargin: 17
-          fontSize: 14
               text: qsTr("Payment ID <font size='2'>( Optional )</font>") + translationManager.emptyString
           }
 
           // payment id input
           LineEdit {
               id: paymentIdLine
-          anchors.left: parent.left
-          anchors.right: parent.right
-          anchors.top: paymentIdLabel.bottom
-          anchors.leftMargin: 17
-          anchors.rightMargin: 17
-          anchors.topMargin: 5
               placeholderText: qsTr("16 or 64 hexadecimal characters") + translationManager.emptyString
-          // validator: DoubleValidator { top: 0.0 }
+              Layout.fillWidth: true
           }
 
           Label {
-          id: descriptionLabel
-          anchors.left: parent.left
-          anchors.right: parent.right
-          anchors.top: paymentIdLine.bottom
-          anchors.leftMargin: 17
-          anchors.rightMargin: 17
-          anchors.topMargin: 17
-          fontSize: 14
               text: qsTr("Description <font size='2'>( Optional )</font>")
                     + translationManager.emptyString
           }
 
           LineEdit {
               id: descriptionLine
-          anchors.left: parent.left
-          anchors.right: parent.right
-          anchors.top: descriptionLabel.bottom
-          anchors.leftMargin: 17
-          anchors.rightMargin: 17
-          anchors.topMargin: 5
               placeholderText: qsTr("Saved to local wallet history") + translationManager.emptyString
+              Layout.fillWidth: true
           }
 
-      function checkInformation(amount, address, payment_id, testnet) {
-        address = address.trim()
-        payment_id = payment_id.trim()
-
-        var amount_ok = amount.length > 0
-        var address_ok = walletManager.addressValid(address, testnet)
-        var payment_id_ok = payment_id.length == 0 || walletManager.paymentIdValid(payment_id)
-        var ipid = walletManager.paymentIdFromAddress(address, testnet)
-        if (ipid.length > 0 && payment_id.length > 0)
-           payment_id_ok = false
-
-        addressLine.error = !address_ok
-        amountLine.error = !amount_ok
-        paymentIdLine.error = !payment_id_ok
-
-        return amount_ok && address_ok && payment_id_ok
-      }
-
-
-      RowLayout {
-          anchors.left: parent.left
-          anchors.top: descriptionLine.bottom
-          anchors.leftMargin: 17
-          anchors.topMargin: 17
-
           StandardButton {
               id: sendButton
+              Layout.bottomMargin: 17 * scaleRatio
+              Layout.topMargin: 17 * scaleRatio
               text: qsTr("Send") + translationManager.emptyString
               shadowReleasedColor: "#FF4304"
               shadowPressedColor: "#B32D00"
@@ -418,6 +347,23 @@ Rectangle {
           }
       }
 
+      function checkInformation(amount, address, payment_id, testnet) {
+        address = address.trim()
+        payment_id = payment_id.trim()
+
+        var amount_ok = amount.length > 0
+        var address_ok = walletManager.addressValid(address, testnet)
+        var payment_id_ok = payment_id.length == 0 || walletManager.paymentIdValid(payment_id)
+        var ipid = walletManager.paymentIdFromAddress(address, testnet)
+        if (ipid.length > 0 && payment_id.length > 0)
+           payment_id_ok = false
+
+        addressLine.error = !address_ok
+        amountLine.error = !amount_ok
+        paymentIdLine.error = !payment_id_ok
+
+        return amount_ok && address_ok && payment_id_ok
+      }
 
     } // pageRoot
 
@@ -482,10 +428,20 @@ Rectangle {
 
 
         PrivacyLevel {
-            visible: persistentSettings.transferShowAdvanced
+            visible: persistentSettings.transferShowAdvanced && !isMobile
             id: privacyLevelItem
             anchors.left: parent.left
             anchors.right: parent.right
+            anchors.rightMargin: 17 * scaleRatio
+            onFillLevelChanged: updateMixin()
+        }
+
+        PrivacyLevelSmall {
+            visible: persistentSettings.transferShowAdvanced && isMobile
+            id: privacyLevelItemSmall
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.rightMargin: 17 * scaleRatio
             onFillLevelChanged: updateMixin()
         }
 
@@ -722,6 +678,7 @@ Rectangle {
                 statusText.text = qsTr("Waiting on daemon synchronization to finish")
             } else {
                 // everything OK, enable transfer page
+                // Light wallet is always ready
                 pageRoot.enabled = true;
                 statusText.text = "";
             }