diff --git a/ui/StatusQ/sandbox/pages/StatusInputPage.qml b/ui/StatusQ/sandbox/pages/StatusInputPage.qml
index 16f1699657..64078a6319 100644
--- a/ui/StatusQ/sandbox/pages/StatusInputPage.qml
+++ b/ui/StatusQ/sandbox/pages/StatusInputPage.qml
@@ -57,6 +57,33 @@ Column {
input.clearable: true
}
+ Item {
+ implicitWidth: 480
+ implicitHeight: 102
+ z: 100000
+ StatusSeedPhraseInput {
+ id: statusSeedInput
+ anchors.left: parent.left
+ anchors.right: parent.right
+ textEdit.input.anchors.leftMargin: 16
+ textEdit.input.anchors.rightMargin: 16
+ textEdit.input.anchors.topMargin: 11
+ textEdit.label: "Input with drop down selection list"
+ leftComponentText: "1"
+ inputList: ListModel {
+ ListElement {
+ seedWord: "panda"
+ }
+ ListElement {
+ seedWord: "posible"
+ }
+ ListElement {
+ seedWord: "wing"
+ }
+ }
+ }
+ }
+
StatusInput {
label: "Label"
charLimit: 30
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusBaseInput.qml b/ui/StatusQ/src/StatusQ/Controls/StatusBaseInput.qml
index a14df161c3..4326900f3e 100644
--- a/ui/StatusQ/src/StatusQ/Controls/StatusBaseInput.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusBaseInput.qml
@@ -66,6 +66,7 @@ Item {
}
}
+ property Item leftComponent
property Item component
signal iconClicked()
@@ -79,6 +80,12 @@ Item {
}
}
+ onLeftComponentChanged: {
+ if (!!leftComponent) {
+ leftComponent.parent = statusBaseInputLeftComponentSlot;
+ }
+ }
+
onComponentChanged: {
if (!!component) {
component.parent = statusBaseInputComponentSlot
@@ -158,19 +165,38 @@ Item {
visible: !!statusBaseInput.icon.name && !statusBaseInput.isIconSelectable
}
+ Item {
+ id: statusBaseInputLeftComponentSlot
+ anchors.left: parent.left
+ anchors.leftMargin: 12
+ width: childrenRect.width
+ height: childrenRect.height
+ anchors.verticalCenter: parent.verticalCenter
+ }
+
Flickable {
id: flick
anchors.top: parent.top
anchors.bottom: parent.bottom
- anchors.left: (statusIcon.visible && statusBaseInput.leftIcon) ?
- statusIcon.right : emoji.visible ? emoji.right: parent.left
+ anchors.left: {
+ if (statusIcon.visible && statusBaseInput.leftIcon) {
+ return statusIcon.right;
+ } else if (emoji.visible) {
+ return emoji.right;
+ } else if (!!statusBaseInput.leftComponent) {
+ return statusBaseInputLeftComponentSlot.right;
+ } else {
+ return parent.left;
+ }
+ }
anchors.right: {
if (!!statusBaseInput.component) {
return statusBaseInputComponentSlot.left
}
return statusIcon.visible && !statusBaseInput.leftIcon ? statusIcon.left : parent.right
}
- anchors.leftMargin: statusIcon.visible && statusBaseInput.leftIcon ? 8
+ anchors.leftMargin: (statusIcon.visible && statusBaseInput.leftIcon)
+ || !!statusBaseInput.leftComponent ? 8
: statusBaseInput.leftPadding
anchors.rightMargin: {
return clearable ? clearButtonLoader.width + 12 :
@@ -194,6 +220,7 @@ Item {
TextEdit {
id: edit
property string previousText: text
+ property var keyEvent
width: flick.width
height: flick.height
verticalAlignment: Text.AlignVCenter
@@ -212,6 +239,10 @@ Item {
}
}
+ Keys.onPressed: {
+ edit.keyEvent = event.key;
+ }
+
Keys.onReturnPressed: {
if (multiline) {
event.accepted = false
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusSeedPhraseInput.qml b/ui/StatusQ/src/StatusQ/Controls/StatusSeedPhraseInput.qml
new file mode 100644
index 0000000000..2ed0d5925d
--- /dev/null
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusSeedPhraseInput.qml
@@ -0,0 +1,125 @@
+import QtQuick 2.12
+import QtGraphicalEffects 1.13
+
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+Item {
+ id: root
+ width: 162
+ height: 44
+ property alias textEdit: seedWordInput
+ property alias text: seedWordInput.text
+ property string leftComponentText: ""
+ property ListModel inputList: ListModel { }
+ property ListModel filteredList: ListModel { }
+ signal doneInsertingWord(string word)
+
+ StatusInput {
+ id: seedWordInput
+ implicitWidth: parent.width
+ implicitHeight: parent.height
+ input.anchors.topMargin: 0
+ input.anchors.leftMargin: 0
+ input.anchors.rightMargin: 0
+ input.leftComponent: StatusBaseText {
+ text: root.leftComponentText
+ color: seedWordInput.input.edit.activeFocus ?
+ Theme.palette.primaryColor1 : Theme.palette.baseColor1
+ font.pixelSize: 15
+ }
+ onTextChanged: {
+ filteredList.clear();
+ if (text !== "") {
+ for (var i = 0; i < inputList.count;i++) {
+ if (inputList.get(i).seedWord.startsWith(text)) {
+ filteredList.insert(filteredList.count, {"seedWord": inputList.get(i).seedWord});
+ }
+ }
+ seedSuggestionsList.model = filteredList;
+ if ((text.length === 3) && (filteredList.count === 1) &&
+ ((input.edit.keyEvent !== Qt.Key_Backspace) && (input.edit.keyEvent !== Qt.Key_Delete))) {
+ seedWordInput.text = filteredList.get(0).seedWord;
+ seedWordInput.input.edit.cursorPosition = seedWordInput.text.length;
+ seedSuggestionsList.model = 0;
+ root.doneInsertingWord(seedWordInput.text);
+ }
+ } else {
+ seedSuggestionsList.model = 0;
+ }
+ }
+ }
+
+ Item {
+ id: suggListContainer
+ width: seedSuggestionsList.width
+ height: (seedSuggestionsList.count*34) + 16
+ anchors.left: parent.left
+ anchors.leftMargin: 16
+ anchors.top: seedWordInput.bottom
+ anchors.topMargin: 4
+ visible: ((seedSuggestionsList.count > 0) && seedWordInput.input.edit.activeFocus)
+ Rectangle {
+ id: statusPopupMenuBackgroundContent
+ anchors.fill: parent
+ color: Theme.palette.statusPopupMenu.backgroundColor
+ radius: 8
+ layer.enabled: true
+ layer.effect: DropShadow {
+ anchors.fill: parent
+ source: statusPopupMenuBackgroundContent
+ horizontalOffset: 0
+ verticalOffset: 4
+ radius: 12
+ samples: 25
+ spread: 0.2
+ color: Theme.palette.dropShadow
+ }
+ }
+ ListView {
+ id: seedSuggestionsList
+ width: ((seedSuggestionsList.contentItem.childrenRect.width + 24) > root.width) ? root.width
+ : (seedSuggestionsList.contentItem.childrenRect.width + 24)
+ anchors.top: parent.top
+ anchors.topMargin: 8
+ anchors.bottom: parent.bottom
+ anchors.bottomMargin: 8
+ clip: true
+ delegate: Item {
+ id: txtDelegate
+ width: suggWord.contentWidth
+ height: 34
+ Rectangle {
+ width: seedSuggestionsList.width
+ height: parent.height
+ color: mouseArea.containsMouse? Theme.palette.primaryColor1 : "transparent"
+ }
+ StatusBaseText {
+ id: suggWord
+ anchors.left: parent.left
+ anchors.leftMargin: 14
+ anchors.verticalCenter: parent.verticalCenter
+ text: seedWord
+ color: mouseArea.containsMouse ? Theme.palette.indirectColor1 : Theme.palette.directColor1
+ font.pixelSize: 13
+ elide: Text.ElideRight
+ }
+ MouseArea {
+ id: mouseArea
+ width: seedSuggestionsList.width
+ height: parent.height
+ cursorShape: Qt.PointingHandCursor
+ hoverEnabled: true
+ onClicked: {
+ seedWordInput.text = seedWord;
+ seedWordInput.input.edit.cursorPosition = seedWordInput.text.length;
+ root.doneInsertingWord(seedWord);
+ seedSuggestionsList.model = 0;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/ui/StatusQ/src/StatusQ/Controls/qmldir b/ui/StatusQ/src/StatusQ/Controls/qmldir
index f4512cf5e6..012df95ad8 100644
--- a/ui/StatusQ/src/StatusQ/Controls/qmldir
+++ b/ui/StatusQ/src/StatusQ/Controls/qmldir
@@ -34,3 +34,4 @@ StatusSelectableText 0.1 StatusSelectableText.qml
StatusWalletColorButton 0.1 StatusWalletColorButton.qml
StatusWalletColorSelect 0.1 StatusWalletColorSelect.qml
StatusColorSelectorGrid 0.1 StatusColorSelectorGrid.qml
+StatusSeedPhraseInput 0.1 StatusSeedPhraseInput.qml
diff --git a/ui/StatusQ/statusq.qrc b/ui/StatusQ/statusq.qrc
index 00821eaf31..e1a2118ef3 100644
--- a/ui/StatusQ/statusq.qrc
+++ b/ui/StatusQ/statusq.qrc
@@ -329,5 +329,6 @@
src/StatusQ/Controls/StatusPinInput.qml
src/StatusQ/Controls/Validators/StatusRegularExpressionValidator.qml
src/StatusQ/Controls/Validators/StatusIntValidator.qml
+ src/StatusQ/Controls/StatusSeedPhraseInput.qml