uiux(Contacts): add loading indicator when searching for contacts to add
This commit is contained in:
parent
9c1613acf8
commit
02dcc106e4
|
@ -9,6 +9,7 @@ import ../../status/status
|
||||||
import ../../status/devices as status_devices
|
import ../../status/devices as status_devices
|
||||||
import ../../status/ens as status_ens
|
import ../../status/ens as status_ens
|
||||||
import ../../status/chat/chat
|
import ../../status/chat/chat
|
||||||
|
import ../../status/threads
|
||||||
import ../../status/libstatus/types
|
import ../../status/libstatus/types
|
||||||
import ../../status/libstatus/accounts/constants as accountConstants
|
import ../../status/libstatus/accounts/constants as accountConstants
|
||||||
import qrcode/qrcode
|
import qrcode/qrcode
|
||||||
|
@ -256,11 +257,13 @@ QtObject:
|
||||||
if value == "":
|
if value == "":
|
||||||
return
|
return
|
||||||
|
|
||||||
var id = value
|
spawnAndSend(self, "ensResolved") do: # Call self.ensResolved(string) when ens is resolved
|
||||||
|
var id = value
|
||||||
if not id.startsWith("0x"):
|
if not id.startsWith("0x"):
|
||||||
id = status_ens.pubkey(id)
|
id = status_ens.pubkey(id)
|
||||||
|
id
|
||||||
|
|
||||||
|
proc ensResolved(self: ProfileView, id: string) {.slot.} =
|
||||||
let contact = self.status.contacts.getContactByID(id)
|
let contact = self.status.contacts.getContactByID(id)
|
||||||
|
|
||||||
if contact != nil:
|
if contact != nil:
|
||||||
|
@ -273,7 +276,7 @@ QtObject:
|
||||||
ensVerified: false
|
ensVerified: false
|
||||||
)
|
)
|
||||||
self.contactToAddChanged()
|
self.contactToAddChanged()
|
||||||
|
|
||||||
proc addContact*(self: ProfileView, pk: string) {.slot.} =
|
proc addContact*(self: ProfileView, pk: string) {.slot.} =
|
||||||
discard self.status.contacts.addContact(pk)
|
discard self.status.contacts.addContact(pk)
|
||||||
|
|
||||||
|
|
|
@ -10,6 +10,7 @@ Item {
|
||||||
id: contactsContainer
|
id: contactsContainer
|
||||||
Layout.fillHeight: true
|
Layout.fillHeight: true
|
||||||
property alias searchStr: searchBox.text
|
property alias searchStr: searchBox.text
|
||||||
|
property bool isPending: false
|
||||||
|
|
||||||
SearchBox {
|
SearchBox {
|
||||||
id: searchBox
|
id: searchBox
|
||||||
|
@ -103,11 +104,30 @@ Item {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Connections {
|
||||||
|
target: profileModel
|
||||||
|
onContactToAddChanged: {
|
||||||
|
contactsContainer.isPending = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Component {
|
||||||
|
id: loadingIndicator
|
||||||
|
LoadingImage {
|
||||||
|
width: 12
|
||||||
|
height: 12
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
ModalPopup {
|
ModalPopup {
|
||||||
id: addContactModal
|
id: addContactModal
|
||||||
//% "Add contact"
|
//% "Add contact"
|
||||||
title: qsTrId("add-contact")
|
title: qsTrId("add-contact")
|
||||||
|
|
||||||
|
property var lookupContact: Backpressure.debounce(addContactSearchInput, 400, function (value) {
|
||||||
|
profileModel.lookupContact(value)
|
||||||
|
})
|
||||||
|
|
||||||
Input {
|
Input {
|
||||||
id: addContactSearchInput
|
id: addContactSearchInput
|
||||||
//% "Enter ENS username or chat key"
|
//% "Enter ENS username or chat key"
|
||||||
|
@ -115,8 +135,26 @@ Item {
|
||||||
customHeight: 44
|
customHeight: 44
|
||||||
fontPixelSize: 15
|
fontPixelSize: 15
|
||||||
onEditingFinished: {
|
onEditingFinished: {
|
||||||
profileModel.lookupContact(inputValue)
|
contactsContainer.isPending = true
|
||||||
|
profileModel.lookupContact(inputValue)
|
||||||
|
contactsContainer.isPending = false
|
||||||
}
|
}
|
||||||
|
onTextChanged: {
|
||||||
|
if (addContactSearchInput.text !== "") {
|
||||||
|
contactsContainer.isPending = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Keys.onReleased: {
|
||||||
|
Qt.callLater(addContactModal.lookupContact, addContactSearchInput.text)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Loader {
|
||||||
|
sourceComponent: loadingIndicator
|
||||||
|
anchors.top: addContactSearchInput.bottom
|
||||||
|
anchors.topMargin: Style.current.padding
|
||||||
|
anchors.horizontalCenter: parent.horizontalCenter
|
||||||
|
active: contactsContainer.isPending
|
||||||
}
|
}
|
||||||
|
|
||||||
Item {
|
Item {
|
||||||
|
@ -126,7 +164,18 @@ Item {
|
||||||
anchors.horizontalCenter: parent.horizontalCenter
|
anchors.horizontalCenter: parent.horizontalCenter
|
||||||
height: contactUsername.height
|
height: contactUsername.height
|
||||||
width: contactUsername.width + contactPubKey.width
|
width: contactUsername.width + contactPubKey.width
|
||||||
visible: profileModel.contactToAddPubKey !== ""
|
visible: !contactsContainer.isPending && !!addContactSearchInput.text
|
||||||
|
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
anchors.top: addContactSearchInput.bottom
|
||||||
|
anchors.topMargin: Style.current.padding
|
||||||
|
anchors.horizontalCenter: parent.horizontalCenter
|
||||||
|
font.pixelSize: 12
|
||||||
|
color: Style.current.darkGrey
|
||||||
|
text: qsTr("User not found")
|
||||||
|
visible: !contactsContainer.isPending && !!!profileModel.contactToAddUsername
|
||||||
|
}
|
||||||
|
|
||||||
StyledText {
|
StyledText {
|
||||||
id: contactUsername
|
id: contactUsername
|
||||||
|
@ -135,6 +184,7 @@ Item {
|
||||||
anchors.topMargin: Style.current.padding
|
anchors.topMargin: Style.current.padding
|
||||||
font.pixelSize: 12
|
font.pixelSize: 12
|
||||||
color: Style.current.darkGrey
|
color: Style.current.darkGrey
|
||||||
|
visible: !!profileModel.contactToAddPubKey
|
||||||
}
|
}
|
||||||
|
|
||||||
StyledText {
|
StyledText {
|
||||||
|
@ -145,6 +195,7 @@ Item {
|
||||||
font.pixelSize: 12
|
font.pixelSize: 12
|
||||||
elide: Text.ElideMiddle
|
elide: Text.ElideMiddle
|
||||||
color: Style.current.darkGrey
|
color: Style.current.darkGrey
|
||||||
|
visible: !!profileModel.contactToAddPubKey
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue