status-desktop/ui/shared/ContactSelector.qml

240 lines
7.9 KiB
QML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import QtGraphicalEffects 1.13
import utils 1.0
import "../shared/status"
Item {
id: root
property var contacts
property var selectedContact
height: select.height
property int dropdownWidth: width
//% "Please select a contact"
property string validationError: qsTrId("please-select-a-contact")
property alias validationErrorAlignment: select.validationErrorAlignment
property bool isValid: false
property alias isPending: ensResolver.isPending
property bool readOnly: false
property bool isResolvedAddress: false
//% "Select a contact"
property string selectAContact: qsTrId("select-a-contact")
//% "Contact does not have an ENS address. Please send a transaction in chat."
property string noEnsAddressMessage: qsTrId("contact-does-not-have-an-ens-address--please-send-a-transaction-in-chat-")
function resolveEns() {
if (selectedContact.ensVerified) {
root.isResolvedAddress = false
ensResolver.resolveEns(selectedContact.name)
}
}
onContactsChanged: {
if (root.readOnly) {
return
}
root.selectedContact = { name: selectAContact }
}
onSelectedContactChanged: validate()
function validate() {
if (!selectedContact) {
return root.isValid
}
let isValidAddress = Utils.isValidAddress(selectedContact.address)
let isDefaultValue = selectedContact.name === selectAContact
let isValid = (selectedContact.ensVerified && isValidAddress) || isPending || isValidAddress
select.validationError = ""
if (!isValid && !isDefaultValue &&
(
!selectedContact.ensVerified ||
(selectedContact.ensVerified && isResolvedAddress)
)
) {
select.validationError = !selectedContact.ensVerified ? noEnsAddressMessage : validationError
}
root.isValid = isValid
return isValid
}
Input {
id: inpReadOnly
visible: root.readOnly
width: parent.width
//% "No contact selected"
text: (root.selectedContact && root.selectedContact.name) ? root.selectedContact.name : qsTrId("no-contact-selected")
textField.leftPadding: 14
textField.topPadding: 18
textField.bottomPadding: 18
textField.verticalAlignment: TextField.AlignVCenter
textField.font.pixelSize: 15
textField.color: Style.current.secondaryText
readOnly: true
validationErrorAlignment: TextEdit.AlignRight
validationErrorTopMargin: 8
customHeight: 56
}
Select {
id: select
label: ""
model: root.contacts
width: parent.width
visible: !root.readOnly
menuAlignment: Select.MenuAlignment.Left
selectedItemView: Item {
anchors.fill: parent
StatusImageIdenticon {
id: iconImg
anchors.left: parent.left
anchors.leftMargin: 14
anchors.verticalCenter: parent.verticalCenter
height: 32
width: (!!selectedContact && !!selectedContact.identicon) ? 32 : 0
visible: !!selectedContact && !!selectedContact.identicon
source: (!!selectedContact && !!selectedContact.identicon) ? selectedContact.identicon : ""
}
StyledText {
id: selectedTextField
text: !!selectedContact ? selectedContact.name : ""
anchors.left: iconImg.right
anchors.leftMargin: 4
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 15
height: 22
verticalAlignment: Text.AlignVCenter
}
}
zeroItemsView: Item {
height: 186
StyledText {
anchors.fill: parent
//% "You dont have any contacts yet"
text: qsTrId("you-don-t-have-any-contacts-yet")
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 13
height: 18
color: Style.current.secondaryText
}
}
menu.delegate: menuItem
menu.width: dropdownWidth
}
EnsResolver {
id: ensResolver
anchors.top: select.bottom
anchors.right: select.right
anchors.topMargin: Style.current.halfPadding
debounceDelay: 0
onResolved: {
root.isResolvedAddress = true
var selectedContact = root.selectedContact
selectedContact.address = resolvedAddress
root.selectedContact = selectedContact
}
onIsPendingChanged: {
if (isPending) {
root.selectedContact.address = ""
}
}
}
Component {
id: menuItem
MenuItem {
id: itemContainer
property bool isFirstItem: index === 0
property bool isLastItem: index === contacts.rowCount() - 1
width: parent.width
height: visible ? 72 : 0
StatusImageIdenticon {
id: iconImg
anchors.left: parent.left
anchors.leftMargin: Style.current.padding
anchors.verticalCenter: parent.verticalCenter
source: identicon
}
Column {
anchors.left: iconImg.right
anchors.leftMargin: 12
anchors.verticalCenter: parent.verticalCenter
Text {
text: name
font.pixelSize: 15
font.family: Style.current.fontRegular.name
font.weight: Font.Medium
color: Style.current.textColor
height: 22
}
Row {
StyledText {
text: alias + " • "
visible: ensVerified
color: Style.current.secondaryText
font.pixelSize: 12
height: 16
}
StyledText {
text: address
width: 85
elide: Text.ElideMiddle
color: Style.current.secondaryText
font.pixelSize: 12
height: 16
}
}
}
background: Rectangle {
color: itemContainer.highlighted ? Style.current.backgroundHover : Style.current.background
radius: Style.current.radius
// cover bottom left/right corners with square corners
Rectangle {
visible: !isLastItem
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
height: parent.radius
color: parent.color
}
// cover top left/right corners with square corners
Rectangle {
visible: !isFirstItem
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
height: parent.radius
color: parent.color
}
}
MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.fill: itemContainer
onClicked: {
root.selectedContact = { address, name, alias, isContact, identicon, ensVerified }
resolveEns()
select.menu.close()
}
}
}
}
}
/*##^##
Designer {
D{i:0;autoSize:true;height:480;width:640}
}
##^##*/