feat(StatusQ/Controls): Adding StatusSeedPhraseInput control
Also added an example in Inputs page Closes #567
This commit is contained in:
Alexandra Betouni
r4bbit.eth
parent
082bb8ef45
commit
f1eff6700a
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue