AddressBook mobile redesign

pages/AddressBook.qml

@@ -33,41 +33,26 @@ import moneroComponents.AddressBook 1.0
 import moneroComponents.AddressBookModel 1.0
 
 Rectangle {
-    color: "#F0EEEE"
     id: root
+    color: "#F0EEEE"
     property var model
 
-    Text {
-        id: newEntryText
+    ColumnLayout {
+        anchors.margins: 17 * scaleRatio
         anchors.left: parent.left
-        anchors.right: parent.right
         anchors.top: parent.top
-        anchors.leftMargin: 17
-        anchors.topMargin: 17
-
-        elide: Text.ElideRight
-        font.family: "Arial"
-        font.pixelSize: 18
-        color: "#4A4949"
-        text: qsTr("Add new entry") + translationManager.emptyString
-    }
+        anchors.right: parent.right
+        spacing: 10 * scaleRatio
 
         Label {
             id: addressLabel
             anchors.left: parent.left
-        anchors.top: newEntryText.bottom
-        anchors.leftMargin: 17
-        anchors.topMargin: 17
             text: qsTr("Address") + translationManager.emptyString
-        fontSize: 14
         }
 
+        RowLayout {
             StandardButton {
                 id: qrfinderButton
-        anchors.left: parent.left
-        anchors.leftMargin: 17
-        anchors.topMargin: 5
-        anchors.top: addressLabel.bottom
                 text: qsTr("QRCODE") + translationManager.emptyString
                 shadowReleasedColor: "#FF4304"
                 shadowPressedColor: "#B32D00"
@@ -75,7 +60,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)
@@ -83,66 +68,41 @@ Rectangle {
             }
 
             LineEdit {
+                Layout.fillWidth: true;
                 id: addressLine
-        anchors.left: qrfinderButton.right
-        anchors.right: parent.right
-        anchors.top: addressLabel.bottom
-        anchors.rightMargin: 17
-        anchors.topMargin: 5
                 error: true;
                 placeholderText: qsTr("4...") + translationManager.emptyString
             }
+        }
 
         Label {
             id: paymentIdLabel
-        anchors.left: parent.left
-        anchors.top: addressLine.bottom
-        anchors.leftMargin: 17
-        anchors.topMargin: 17
             text: qsTr("Payment ID <font size='2'>(Optional)</font>") + translationManager.emptyString
-        fontSize: 14
+            tipText: qsTr("<b>Payment ID</b><br/><br/>A unique user name used in<br/>the address book. It is not a<br/>transfer of information sent<br/>during the transfer")
+                    + translationManager.emptyString
         }
 
         LineEdit {
             id: paymentIdLine
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.top: paymentIdLabel.bottom
-        anchors.leftMargin: 17
-        anchors.rightMargin: 17
-        anchors.topMargin: 5
+            Layout.fillWidth: true;
             placeholderText: qsTr("Paste 64 hexadecimal characters") + translationManager.emptyString
         }
 
         Label {
             id: descriptionLabel
-        anchors.left: parent.left
-        anchors.top: paymentIdLine.bottom
-        anchors.leftMargin: 17
-        anchors.topMargin: 17
             text: qsTr("Description <font size='2'>(Optional)</font>") + translationManager.emptyString
-        fontSize: 14
         }
 
         LineEdit {
             id: descriptionLine
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.top: descriptionLabel.bottom
-        anchors.leftMargin: 17
-        anchors.rightMargin: 17
-        anchors.topMargin: 5
+            Layout.fillWidth: true;
             placeholderText: qsTr("Give this entry a name or description") + translationManager.emptyString
         }
 
 
         RowLayout {
             id: addButton
-        anchors.left: parent.left
-        anchors.top: descriptionLine.bottom
-        anchors.leftMargin: 17
-        anchors.topMargin: 17
-
+            Layout.bottomMargin: 17 * scaleRatio
             StandardButton {
                 shadowReleasedColor: "#FF4304"
                 shadowPressedColor: "#B32D00"
@@ -173,27 +133,6 @@ Rectangle {
             }
         }
 
-
-
-    Item {
-        id: expandItem
-        property bool expanded: false
-
-        anchors.right: parent.right
-        anchors.bottom: tableRect.top
-        width: 34
-        height: 34
-
-        Image {
-            anchors.centerIn: parent
-            source: "../images/expandTable.png"
-            rotation: parent.expanded ? 180 : 0
-        }
-
-        MouseArea {
-            anchors.fill: parent
-            onClicked: parent.expanded = !parent.expanded
-        }
     }
 
     Rectangle {
@@ -201,8 +140,7 @@ Rectangle {
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.bottom: parent.bottom
-        height: expandItem.expanded ? parent.height - newEntryText.y - newEntryText.height - 17 :
-                                      parent.height - addButton.y - addButton.height - 17
+        height: parent.height - addButton.y - addButton.height - 36 * scaleRatio
         color: "#FFFFFF"
 
         Behavior on height {
@@ -217,44 +155,6 @@ Rectangle {
             color: "#DBDBDB"
         }
 
-        ListModel {
-            id: columnsModel
-//            ListElement { columnName: qsTr("Address") + translationManager.emptyString; columnWidth: 148 }
-//            ListElement { columnName: qsTr("Payment ID") + translationManager.emptyString; columnWidth: 148 }
-//            ListElement { columnName: qsTr("Description") + translationManager.emptyString; columnWidth: 148 }
-//
-        }
-
-        TableHeader {
-            id: header
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.top: parent.top
-            anchors.topMargin: 17
-            anchors.leftMargin: 14
-            anchors.rightMargin: 14
-            dataModel: columnsModel
-            onSortRequest: console.log("column: " + column + " desc: " + desc)
-        }
-
-        ListModel {
-            id: testModel
-            ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
-            ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
-            ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
-            ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
-            ListElement { paymentId: ""; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "" }
-            ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
-            ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
-            ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
-            ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
-            ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
-            ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
-            ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
-            ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
-            ListElement { paymentId: ""; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "" }
-        }
-
         Scroll {
             id: flickableScroll
             anchors.right: table.right
@@ -268,7 +168,7 @@ Rectangle {
             id: table
             anchors.left: parent.left
             anchors.right: parent.right
-            anchors.top: header.bottom
+            anchors.top: parent.top
             anchors.bottom: parent.bottom
             anchors.leftMargin: 14
             anchors.rightMargin: 14