feat: add very basic sendModal content

ui/app/AppLayouts/Chat/components/PrivateChatPopup.qml

@@ -6,20 +6,20 @@ import "../../../../shared"
 import "./"
 
 Item {
-  function open(){
+  function open() {
     popup.open()
     chatKey.text = "";
     chatKey.forceActiveFocus(Qt.MouseFocusReason)
   }
 
-  function close(){
+  function close() {
     popup.close()
   }
 
   Popup {
     id: popup
     modal: true
-    closePolicy: Popup.NoAutoClose
+    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
     Overlay.modal: Rectangle {
         color: "#60000000"
     }

ui/app/AppLayouts/Chat/components/PublicChatPopup.qml

@@ -19,7 +19,7 @@ Item {
   Popup {
     id: popup
     modal: true
-    closePolicy: Popup.NoAutoClose
+    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
     Overlay.modal: Rectangle {
         color: "#60000000"
     }

ui/app/AppLayouts/Wallet/Components/SendModalContent.qml

@@ -0,0 +1,129 @@
+import QtQuick 2.3
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.3
+import Qt.labs.platform 1.1
+import "../../../../imports"
+import "../../../../shared"
+
+Item {
+    property alias txtValue: txtValue
+
+
+    Text {
+        id: modalDialogTitle
+        text: "Send"
+        anchors.top: parent.top
+        anchors.left: parent.left
+        font.bold: true
+        font.pixelSize: 17
+        anchors.leftMargin: 16
+        anchors.topMargin: 16
+    }
+
+    Image {
+        id: closeModalImg
+        anchors.top: parent.top
+        anchors.right: parent.right
+        anchors.rightMargin: 16
+        anchors.topMargin: 16
+        source: "../../img/close.svg"
+        MouseArea {
+            id: closeModalMouseArea
+            cursorShape: Qt.PointingHandCursor
+            anchors.fill: parent
+            onClicked: {
+                popup.close()
+            }
+        }
+    }
+
+    Separator {
+        id: headerSeparator
+        anchors.top: modalDialogTitle.bottom
+    }
+
+    Item {
+        id: modalBody
+        anchors.right: parent.right
+        anchors.rightMargin: 32
+        anchors.top: headerSeparator.bottom
+        anchors.topMargin: Theme.padding
+        anchors.bottom: footerSeparator.top
+        anchors.bottomMargin: 16
+        anchors.left: parent.left
+        anchors.leftMargin: 32
+
+        TextField {
+            id: txtValue
+            anchors.top: parent.top
+            anchors.topMargin: 0
+            anchors.right: parent.right
+            anchors.rightMargin: 0
+            anchors.left: parent.left
+            anchors.leftMargin: 0
+            placeholderText: qsTr("Enter ETH")
+        }
+
+        TextField {
+            id: txtFrom
+            text: assetsModel.getDefaultAccount()
+            placeholderText: qsTr("Send from (account)")
+            anchors.top: txtValue.bottom
+            anchors.topMargin: Theme.padding
+            anchors.right: parent.right
+            anchors.rightMargin: 0
+            anchors.left: parent.left
+            anchors.leftMargin: 0
+        }
+
+        TextField {
+            id: txtTo
+            text: assetsModel.getDefaultAccount()
+            placeholderText: qsTr("Send to")
+            anchors.top: txtFrom.bottom
+            anchors.topMargin: Theme.padding
+            anchors.right: parent.right
+            anchors.rightMargin: 0
+            anchors.left: parent.left
+            anchors.leftMargin: 0
+        }
+
+        TextField {
+            id: txtPassword
+            text: "qwerty"
+            placeholderText: "Enter Password"
+            anchors.top: txtTo.bottom
+            anchors.topMargin: Theme.padding
+            anchors.right: parent.right
+            anchors.rightMargin: 0
+            anchors.left: parent.left
+            anchors.leftMargin: 0
+        }
+    }
+
+    Separator {
+        id: footerSeparator
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 76
+    }
+
+    Button {
+        text: "Send"
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 16
+        onClicked: {
+            let result = assetsModel.onSendTransaction(txtFrom.text,
+                                                       txtTo.text,
+                                                       txtValue.text,
+                                                       txtPassword.text)
+            console.log(result)
+        }
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;autoSize:true;height:480;width:640}
+}
+##^##*/

ui/app/AppLayouts/Wallet/Components/qmldir

@@ -0,0 +1 @@
+SendModalContent 1.0 SendModalContent.qml

ui/app/AppLayouts/Wallet/SendModal.qml

@@ -4,67 +4,38 @@ import QtQuick.Layouts 1.3
 import Qt.labs.platform 1.1
 import "../../../imports"
 import "../../../shared"
+import "./Components"
 
 Item {
-    TextField {
-        id: txtValue
-        x: 19
-        y: 41
-        placeholderText: qsTr("Enter ETH")
-        anchors.leftMargin: 24
-        anchors.topMargin: 32
-        width: 239
-        height: 40
+    function open() {
+        popup.open()
+        sendModalContent.txtValue.text = ""
+        sendModalContent.txtValue.forceActiveFocus(Qt.MouseFocusReason)
     }
 
-    TextField {
-        id: txtFrom
-        x: 340
-        y: 41
-        width: 239
-        height: 40
-        text: assetsModel.getDefaultAccount()
-        placeholderText: qsTr("Send from (account)")
-        anchors.topMargin: 32
-        anchors.leftMargin: 24
+    function close() {
+        popup.close()
     }
 
-    TextField {
-        id: txtTo
-        x: 340
-        y: 99
-        width: 239
-        height: 40
-        text: assetsModel.getDefaultAccount()
-        placeholderText: qsTr("Send to")
-        anchors.topMargin: 32
-        anchors.leftMargin: 24
-    }
-
-    TextField {
-        id: txtPassword
-        x: 19
-        y: 99
-        width: 239
-        height: 40
-        text: "qwerty"
-        placeholderText: "Enter Password"
-        anchors.topMargin: 32
-        anchors.leftMargin: 24
-    }
-
-    Button {
-        x: 19
-        y: 159
-        text: "Send"
-        onClicked: {
-            let result = assetsModel.onSendTransaction(
-                    txtFrom.text,
-                    txtTo.text,
-                    txtValue.text,
-                    txtPassword.text
-                    );
-            console.log(result);
+    Popup {
+        id: popup
+        modal: true
+        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
+        Overlay.modal: Rectangle {
+            color: "#60000000"
+        }
+        parent: Overlay.overlay
+        x: Math.round((parent.width - width) / 2)
+        y: Math.round((parent.height - height) / 2)
+        width: 480
+        height: 510
+        background: Rectangle {
+            color: Theme.white
+            radius: Theme.radius
+        }
+        padding: 0
+        contentItem: SendModalContent {
+            id: sendModalContent
         }
     }
 }
@@ -74,3 +45,4 @@ Designer {
     D{i:0;autoSize:true;height:480;width:640}
 }
 ##^##*/
+

ui/app/AppLayouts/Wallet/WalletHeader.qml

@@ -63,11 +63,14 @@ Item {
         color: Theme.darkGrey
     }
 
+    SendModal{
+        id: sendModal
+    }
+
     Item {
         property int btnMargin: 8
         property int btnOuterMargin: 32
         id: walletMenu
-        // TODO unhardcode this
         width: sendBtn.width + receiveBtn.width + settingsBtn.width
                + walletMenu.btnOuterMargin * 2
         anchors.top: parent.top
@@ -78,6 +81,7 @@ Item {
         Item {
             id: sendBtn
             width: sendImg.width + sendText.width + walletMenu.btnMargin
+            height: sendText.height
 
             Image {
                 id: sendImg
@@ -95,6 +99,15 @@ Item {
                 font.pixelSize: 13
                 color: Theme.blue
             }
+            MouseArea {
+                anchors.rightMargin: -Theme.smallPadding
+                anchors.leftMargin: -Theme.smallPadding
+                anchors.bottomMargin: -Theme.smallPadding
+                anchors.topMargin: -Theme.smallPadding
+                anchors.fill: parent
+                onClicked: sendModal.open()
+                cursorShape: Qt.PointingHandCursor
+            }
         }
         Item {
             id: receiveBtn

ui/nim-status-client.pro

@@ -79,6 +79,8 @@ DISTFILES += \
     app/AppLayouts/Profile/ProfileLayout.qml \
     app/AppLayouts/Wallet/AssetsTab.qml \
     app/AppLayouts/Wallet/CollectiblesTab.qml \
+    app/AppLayouts/Wallet/Components/SendModalContent.qml \
+    app/AppLayouts/Wallet/Components/qmldir \
     app/AppLayouts/Wallet/HistoryTab.qml \
     app/AppLayouts/Profile/Sections/AboutContainer.qml \
     app/AppLayouts/Profile/Sections/AdvancedContainer.qml \

ui/shared/Separator.qml

@@ -6,5 +6,5 @@ Rectangle {
       width: parent.width
       height: 1
       color: Theme.grey
-      anchors.topMargin: 16
-}
+      anchors.topMargin: Theme.padding
+}