From 43df7d2f771b04d2cad9cc12461a13a386f8cb1e Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Mon, 8 Jun 2020 15:30:22 -0400
Subject: [PATCH] feat: add TextArea to Input and set correct Modal height

---
 .../Wallet/Components/AddAccountWithSeed.qml  |  4 ++-
 ui/shared/Input.qml                           | 30 +++++++++++++++++--
 ui/shared/ModalPopup.qml                      |  2 +-
 3 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/ui/app/AppLayouts/Wallet/Components/AddAccountWithSeed.qml b/ui/app/AppLayouts/Wallet/Components/AddAccountWithSeed.qml
index 9118650c36..61111c004e 100644
--- a/ui/app/AppLayouts/Wallet/Components/AddAccountWithSeed.qml
+++ b/ui/app/AppLayouts/Wallet/Components/AddAccountWithSeed.qml
@@ -7,6 +7,7 @@ import "../../../../shared"
 ModalPopup {
     id: popup
     title: qsTr("Add account with a seed phrase")
+    height: 600
 
     property int marginBetweenInputs: 38
     property string selectedColor: Constants.accountColors[0]
@@ -25,12 +26,13 @@ ModalPopup {
 
 
     Input {
-        // TODO use a Textarea
         id: accountSeedInput
         anchors.top: passwordInput.bottom
         anchors.topMargin: marginBetweenInputs
         placeholderText: qsTr("Enter your seed phrase, separate words with commas or spaces...")
         label: qsTr("Seed phrase")
+        isTextArea: true
+        customHeight: 88
     }
 
     Input {
diff --git a/ui/shared/Input.qml b/ui/shared/Input.qml
index 6ef6298406..bba2acdccd 100644
--- a/ui/shared/Input.qml
+++ b/ui/shared/Input.qml
@@ -8,6 +8,7 @@ Item {
     property alias textField: inputValue
     property string placeholderText: "My placeholder"
     property alias text: inputValue.text
+    property alias textAreaText: textArea.text
     property string label: ""
     property color bgColor: Theme.grey
 
@@ -22,6 +23,8 @@ Item {
     readonly property int labelMargin: 7
     property var selectOptions
     property bool isSelect: !!selectOptions && selectOptions.length > 0
+    property int customHeight: 44
+    property bool isTextArea: false
 
     id: inputBox
     height: inputRectangle.height + (hasLabel ? inputLabel.height + labelMargin : 0)
@@ -42,7 +45,7 @@ Item {
 
     Rectangle {
         id: inputRectangle
-        height: 44
+        height: customHeight
         color: bgColor
         radius: 8
         anchors.top: inputBox.hasLabel ? inputLabel.bottom : parent.top
@@ -52,7 +55,7 @@ Item {
 
         TextField {
             id: inputValue
-            visible: !isSelect
+            visible: !inputBox.isTextArea && !inputBox.isSelect
             placeholderText: inputBox.placeholderText
             text: inputBox.text
             anchors.left: parent.left
@@ -64,6 +67,21 @@ Item {
             }
         }
 
+        TextArea {
+            id: textArea
+            text: ""
+            font.pixelSize: 15
+            wrapMode: Text.WordWrap
+            visible: inputBox.isTextArea
+            placeholderText: inputBox.placeholderText
+            anchors.rightMargin: Theme.padding
+            anchors.leftMargin: inputBox.hasIcon ? 36 : Theme.padding
+            anchors.bottomMargin: Theme.smallPadding
+            anchors.topMargin: Theme.smallPadding
+            anchors.fill: parent
+
+        }
+
         Menu {
             id: selectMenu
             width: parent.width
@@ -118,7 +136,13 @@ Item {
         id: mouseArea
         anchors.fill: parent
         onClicked: {
-            isSelect ? selectMenu.open() : inputValue.forceActiveFocus(Qt.MouseFocusReason)
+            if (inputBox.isSelect) {
+                selectMenu.open()
+            } else if (inputBox.isTextArea) {
+                textArea.forceActiveFocus(Qt.MouseFocusReason)
+            } else {
+                inputValue.forceActiveFocus(Qt.MouseFocusReason)
+            }
         }
     }
 }
diff --git a/ui/shared/ModalPopup.qml b/ui/shared/ModalPopup.qml
index 3a12e4b2ee..efb9015365 100644
--- a/ui/shared/ModalPopup.qml
+++ b/ui/shared/ModalPopup.qml
@@ -20,7 +20,7 @@ Popup {
   x: Math.round((parent.width - width) / 2)
   y: Math.round((parent.height - height) / 2)
   width: 480
-  height: 509
+  height: 510 // TODO find a way to make this dynamic
   background: Rectangle {
       color: Theme.white
       radius: 8