"word mnemonic input" with clipboard button and hint is reusable

component;

monero-core.pro

@@ -27,7 +27,7 @@ TRANSLATIONS = monero-core_en.ts \ # English (could be untranslated)
 
 # extra make targets for lupdate and lrelease invocation
 lupdate.commands = lupdate $$_PRO_FILE_
-lupdate.depends = $$SOURCES $$HEADERS $$TRANSLATIONS
+lupdate.depends = $$SOURCES $$HEADERS 
 lrelease.commands = lrelease $$_PRO_FILE_
 lrelease.depends = lupdate
 translate.commands = $(COPY) *.qm ${DESTDIR}
@@ -56,5 +56,6 @@ include(deployment.pri)
 
 DISTFILES += \
     wizard/WizardManageWalletUI.qml \
-    .gitignore
+    .gitignore \
+    wizard/WizardMemoTextInput.qml
 

qml.qrc

@@ -109,5 +109,6 @@
         <file>lang/flags/usa.png</file>
         <file>wizard/WizardManageWalletUI.qml</file>
         <file>wizard/WizardRecoveryWallet.qml</file>
+        <file>wizard/WizardMemoTextInput.qml</file>
     </qresource>
 </RCC>

wizard/WizardCreateWallet.qml

@@ -49,6 +49,10 @@ Item {
     WizardManageWalletUI {
         id: uiItem
         titleText: qsTr("A new wallet has been created for you")
-        wordsTextTitle: qsTr("This is the 24 word mnemonic for your wallet")
+        wordsTextTitle: qsTr("This is the 25 word mnemonic for your wallet")
+        wordsTextItem.clipboardButtonVisible: true
+        wordsTextItem.tipTextVisible: true
+        wordsTextItem.memoTextReadOnly: true
+
     }
 }

wizard/WizardManageWalletUI.qml

@@ -37,9 +37,8 @@ Item {
     property alias titleText: titleText.text
     property alias accountNameText: accountName.text
     property alias wordsTextTitle: frameHeader.text
-    property alias wordsText: wordsText.text
-    property alias wordsTextTip: tipRect
     property alias walletPath: fileUrlInput.text
+    property alias wordsTextItem : memoTextItem
 
 
     // TODO extend properties if needed
@@ -147,81 +146,21 @@ Item {
         //renderType: Text.NativeRendering
         color: "#4A4646"
         elide: Text.ElideRight
-
+        horizontalAlignment: Text.AlignHCenter
     }
 
-    Rectangle {
+
-        id: wordsRect
+    WizardMemoTextInput {
-        anchors.left: parent.left
+        id : memoTextItem
-        anchors.right: parent.right
+        width: parent.width
         anchors.top : frameHeader.bottom
         anchors.topMargin: 16
-        height: 182
-        border.width: 1
-        border.color: "#DBDBDB"
-
-        TextEdit {
-            id: wordsText
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.top: parent.top
-            anchors.bottom: tipRect.top
-            anchors.margins: 16
-            font.family: "Arial"
-            font.pixelSize: 24
-            wrapMode: Text.Wrap
-            selectByMouse: true
-            readOnly: true
-            color: "#3F3F3F"
-            text: "bound class paint gasp task soul forgot past pleasure physical circle appear shore bathroom glove women crap busy beauty bliss idea give needle burden"
-        }
-
-        Image {
-            anchors.right: parent.right
-            anchors.bottom: tipRect.top
-            source: "qrc:///images/greyTriangle.png"
-
-            Image {
-                anchors.centerIn: parent
-                source: "qrc:///images/copyToClipboard.png"
-            }
-
-            Clipboard { id: clipboard }
-            MouseArea {
-                anchors.fill: parent
-                cursorShape: Qt.PointingHandCursor
-                onClicked: clipboard.setText(wordsText.text)
-            }
-        }
-
-        Rectangle {
-            id: tipRect
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.bottom: parent.bottom
-            height: 65
-            color: "#DBDBDB"
-            property alias text: wordsTipText.text
-
-            Text {
-                id: wordsTipText
-                anchors.fill: parent
-                anchors.margins: 16
-                verticalAlignment: Text.AlignVCenter
-                horizontalAlignment: Text.AlignHCenter
-                font.family: "Arial"
-                font.pixelSize: 15
-                color: "#4A4646"
-                wrapMode: Text.Wrap
-                text: qsTr("It is very important to write it down as this is the only backup you will need for your wallet. You will be asked to confirm the seed in the next screen to ensure it has copied down correctly.")
-            }
-        }
     }
 
     Row {
         anchors.left: parent.left
         anchors.right: parent.right
-        anchors.top: wordsRect.bottom
+        anchors.top: memoTextItem.bottom
         anchors.topMargin: 24
         spacing: 16
 

wizard/WizardMemoTextInput.qml

@@ -0,0 +1,80 @@
+import QtQuick 2.0
+import moneroComponents 1.0
+
+Column {
+
+    property alias memoText : memoTextInput.text
+    property alias tipText: wordsTipText.text
+    property alias tipTextVisible: tipRect.visible
+    property alias memoTextReadOnly : memoTextInput.readOnly
+    property alias clipboardButtonVisible: clipboardButton.visible
+
+
+    Rectangle {
+        id: memoTextRect
+        width: parent.width
+        height:  {
+            memoTextInput.height
+                    // to have less gap between button and text input we reduce overall height by button height
+                    //+ (clipboardButton.visible ? clipboardButton.height : 0)
+                    + (tipRect.visible ? tipRect.height : 0)
+        }
+        border.width: 1
+        border.color: "#DBDBDB"
+
+        TextEdit {
+            id: memoTextInput
+            textMargin: 8
+            text: "bound class paint gasp task soul forgot past pleasure physical circle appear shore bathroom glove women crap busy beauty bliss idea give needle burden"
+            font.family: "Arial"
+            font.pointSize: 16
+            wrapMode: TextInput.Wrap
+            width: parent.width
+            selectByMouse: true
+            property int minimumHeight: 100
+            height: contentHeight > minimumHeight ? contentHeight : minimumHeight
+        }
+        Image {
+            id : clipboardButton
+            anchors.right: parent.right
+            anchors.bottom: tipRect.top
+            source: "qrc:///images/greyTriangle.png"
+            Image {
+                anchors.centerIn: parent
+                source: "qrc:///images/copyToClipboard.png"
+            }
+            Clipboard { id: clipboard }
+            MouseArea {
+                anchors.fill: parent
+                cursorShape: Qt.PointingHandCursor
+                onClicked: clipboard.setText(memoTextInput.text)
+            }
+        }
+        Rectangle {
+            id: tipRect
+            visible: true
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.bottom: memoTextRect.bottom
+            height: wordsTipText.contentHeight + wordsTipText.anchors.topMargin
+            color: "#DBDBDB"
+            property alias text: wordsTipText.text
+
+            Text {
+                id: wordsTipText
+                anchors.fill: parent
+                anchors.topMargin : 16
+                anchors.bottomMargin: 16
+                anchors.leftMargin: 16
+                anchors.rightMargin: 16
+                verticalAlignment: Text.AlignVCenter
+                horizontalAlignment: Text.AlignHCenter
+                font.family: "Arial"
+                font.pixelSize: 15
+                color: "#4A4646"
+                wrapMode: Text.Wrap
+                text: qsTr("It is very important to write it down as this is the only backup you will need for your wallet. You will be asked to confirm the seed in the next screen to ensure it has copied down correctly.")
+            }
+        }
+    }
+}

wizard/WizardRecoveryWallet.qml

@@ -50,6 +50,10 @@ Item {
         id: uiItem
         accountNameText: qsTr("My account name")
         titleText: qsTr("We're ready to recover your account")
-        wordsTextTitle: qsTr("This is the 25 word mnemonic for your wallet")
+        wordsTextTitle: qsTr("Please enter your 25 word private key")
+        wordsTextItem.clipboardButtonVisible: false
+        wordsTextItem.tipTextVisible: false
+        wordsTextItem.memoTextReadOnly: false
+        wordsTextItem.memoText: ""
     }
 }