feat(StatusQ/Controls): Adding StatusSeedPhraseInput control

Also added an example in Inputs page

Closes #567

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

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) ?
+                anchors.left: {
-                              statusIcon.right : emoji.visible ? emoji.right: parent.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

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;
+                    }
+                }
+            }
+        }
+    }
+}

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

ui/StatusQ/statusq.qrc

@@ -329,5 +329,6 @@
         <file>src/StatusQ/Controls/StatusPinInput.qml</file>
         <file>src/StatusQ/Controls/Validators/StatusRegularExpressionValidator.qml</file>
         <file>src/StatusQ/Controls/Validators/StatusIntValidator.qml</file>
+        <file>src/StatusQ/Controls/StatusSeedPhraseInput.qml</file>
     </qresource>
 </RCC>