Alex Jbanca ee5e72b088 fix(HoldingsDropdown): Add basic focus management and keyboard support
Closing #9967

When Holdings dropdown is open, activate focus to searcher in assets and collectibles. Changes focus to ENS input in case ENS tab is active.
In Holdings dropdown, when ENS tab is active and Add button is enabled, pressing enter key should behave same than clicking on the button itself.
In Holdings dropdown, when one asset or collectible has been selected, activate focus in the amount input, then when Add button is enabled, pressing enter key should behave same than clicking on the button itself.
2023-03-23 12:24:05 +02:00

136 lines
3.6 KiB
QML

import QtQuick 2.14
import QtQuick.Layouts 1.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Controls.Validators 0.1
ColumnLayout {
id: root
property int mode: HoldingTypes.Mode.Add
property alias domainName: domainNameInput.text
property alias domainNameValid: domainNameInput.valid
property alias addButtonEnabled: addOrUpdateButton.enabled
property var reservedNames: []
signal addClicked
signal updateClicked
signal removeClicked
spacing: 0
onReservedNamesChanged: domainNameInput.validate()
StatusInput {
id: domainNameInput
Layout.fillWidth: true
Layout.topMargin: 23
minimumHeight: 36
maximumHeight: 36
topPadding: 0
bottomPadding: 0
font.pixelSize: 13
input.placeholderText: "name.eth"
errorMessageCmp.visible: false
validators: StatusRegularExpressionValidator {
// TODO: check ens domain validator
regularExpression: /^(\*\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)?$/i
errorMessage: alreadyUsed
? qsTr("This condition has already been added")
: qsTr("This is not ENS name")
property bool alreadyUsed: false
validate: function (value) {
alreadyUsed = reservedNames.includes(value)
return (value === "*.eth" || regularExpression.test(value))
&& !alreadyUsed
}
}
onVisibleChanged: {
if(visible)
forceActiveFocus()
}
onKeyPressed: {
if(!addOrUpdateButton.enabled) return
if(event.key === Qt.Key_Enter || event.key === Qt.Key_Return)
addOrUpdateButton.clicked()
}
Component.onCompleted: {
if (text) {
input.dirty = true
validate()
}
forceActiveFocus()
}
}
StatusBaseText {
Layout.fillWidth: true
Layout.topMargin: 17
text: qsTr("Put *. before ENS name to include all subdomains in permission")
wrapMode: Text.Wrap
color: Theme.palette.baseColor1
font.pixelSize: 13
lineHeight: 18
lineHeightMode: Text.FixedHeight
}
Item {
Layout.topMargin: 8
Layout.fillWidth: true
Layout.preferredHeight: Math.max(18, errorText.height) // by design
StatusBaseText {
id: errorText
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
text: domainNameInput.errorMessageCmp.text
font.pixelSize: 13
lineHeight: 18
lineHeightMode: Text.FixedHeight
color: Theme.palette.dangerColor1
wrapMode: Text.Wrap
}
}
StatusButton {
id: addOrUpdateButton
text: (root.mode === HoldingTypes.Mode.Add) ? qsTr("Add") : qsTr("Update")
Layout.topMargin: 13 // by design
Layout.preferredHeight: 44 // by design
Layout.fillWidth: true
onClicked: root.mode === HoldingTypes.Mode.Add
? root.addClicked() : root.updateClicked()
}
StatusFlatButton {
text: qsTr("Remove")
Layout.topMargin: 16 // by design
Layout.preferredHeight: 44 // by design
Layout.fillWidth: true
visible: root.mode === HoldingTypes.Mode.UpdateOrRemove
type: StatusBaseButton.Type.Danger
onClicked: root.removeClicked()
}
}