status-desktop/ui/app/AppLayouts/Chat/components/ProfilePopup.qml

292 lines
8.8 KiB
QML

import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import "../../../../imports"
import "../../../../shared"
import "./"
ModalPopup {
id: popup
property var identicon: ""
property var userName: ""
property var fromAuthor: ""
property bool showQR: false
property bool isEnsVerified: false
function openPopup(userNameParam, fromAuthorParam, identiconParam) {
this.showQR = false
this.userName = userNameParam
this.fromAuthor = fromAuthorParam
this.identicon = identiconParam
this.isEnsVerified = chatsModel.isEnsVerified(this.fromAuthor)
popup.open()
}
header: Item {
height: children[0].height
width: parent.width
Rectangle {
id: profilePic
width: 40
height: 40
radius: 30
border.color: "#10000000"
border.width: 1
color: Theme.transparent
anchors.top: parent.top
anchors.topMargin: Theme.padding
SVGImage {
width: parent.width
height: parent.height
fillMode: Image.PreserveAspectFit
source: identicon
}
}
StyledTextEdit {
id: profileName
text: userName
anchors.top: parent.top
anchors.topMargin: 18
anchors.left: profilePic.right
anchors.leftMargin: Theme.smallPadding
font.bold: true
font.pixelSize: 14
readOnly: true
wrapMode: Text.WordWrap
}
StyledText {
text: fromAuthor
width: 160
elide: Text.ElideMiddle
anchors.left: profilePic.right
anchors.leftMargin: Theme.smallPadding
anchors.top: profileName.bottom
anchors.topMargin: 2
font.pixelSize: 14
color: Theme.darkGrey
}
Rectangle {
id: qrCodeButton
height: 32
width: 32
anchors.top: parent.top
anchors.topMargin: Theme.padding
anchors.right: parent.right
anchors.rightMargin: 32 + Theme.smallPadding
radius: 8
SVGImage {
source: "../../../img/qr-code-icon.svg"
width: 25
height: 25
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
hoverEnabled: true
onExited: {
qrCodeButton.color = Theme.white
}
onEntered: {
qrCodeButton.color = Theme.grey
}
onClicked: {
showQR = true
}
}
}
}
Item {
anchors.fill: parent
visible: showQR
Image {
asynchronous: true
fillMode: Image.PreserveAspectFit
source: profileModel.qrCode(fromAuthor)
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
height: 212
width: 212
mipmap: true
smooth: false
}
}
Item {
anchors.fill: parent
visible: !showQR
StyledText {
id: labelEnsUsername
height: isEnsVerified ? 20 : 0
visible: isEnsVerified
text: qsTr("ENS username")
font.pixelSize: 13
font.weight: Font.Medium
color: Theme.darkGrey
anchors.left: parent.left
anchors.leftMargin: Theme.smallPadding
anchors.top: parent.top
anchors.topMargin: Theme.smallPadding
}
StyledText {
id: valueEnsName
visible: isEnsVerified
height: isEnsVerified ? 20 : 0
text: userName
font.pixelSize: 14
anchors.left: parent.left
anchors.leftMargin: Theme.smallPadding
anchors.top: labelEnsUsername.bottom
anchors.topMargin: Theme.smallPadding
}
CopyToClipBoardIcon {
visible: isEnsVerified
height: isEnsVerified ? 20 : 0
anchors.top: labelEnsUsername.bottom
anchors.left: valueEnsName.right
anchors.leftMargin: Theme.smallPadding
onClick: function (){
chatsModel.copyToClipboard(valueEnsName.text)
}
}
StyledText {
id: labelChatKey
text: qsTr("Chat key")
font.pixelSize: 13
font.weight: Font.Medium
color: Theme.darkGrey
anchors.left: parent.left
anchors.leftMargin: Theme.smallPadding
anchors.top: isEnsVerified ? valueEnsName.bottom : parent.top
anchors.topMargin: Theme.padding
}
StyledText {
id: valueChatKey
text: fromAuthor
width: 160
elide: Text.ElideMiddle
font.pixelSize: 14
anchors.left: parent.left
anchors.leftMargin: Theme.smallPadding
anchors.top: labelChatKey.bottom
anchors.topMargin: Theme.smallPadding
}
CopyToClipBoardIcon {
anchors.top: labelChatKey.bottom
anchors.left: valueChatKey.right
anchors.leftMargin: Theme.smallPadding
onClick: function (){
chatsModel.copyToClipboard(valueChatKey.text)
}
}
Separator {
id: separator
anchors.top: valueChatKey.bottom
anchors.topMargin: Theme.padding
anchors.left: parent.left
anchors.leftMargin: -Theme.padding
anchors.right: parent.right
anchors.rightMargin: -Theme.padding
}
StyledText {
id: labelShareURL
text: qsTr("Share Profile URL")
font.pixelSize: 13
font.weight: Font.Medium
color: Theme.darkGrey
anchors.left: parent.left
anchors.leftMargin: Theme.smallPadding
anchors.top: separator.bottom
anchors.topMargin: Theme.padding
}
StyledText {
id: valueShareURL
text: "https://join.status.im/u/" + fromAuthor.substr(
0, 4) + "..." + fromAuthor.substr(fromAuthor.length - 5)
font.pixelSize: 14
anchors.left: parent.left
anchors.leftMargin: Theme.smallPadding
anchors.top: labelShareURL.bottom
anchors.topMargin: Theme.smallPadding
}
CopyToClipBoardIcon {
anchors.top: labelShareURL.bottom
anchors.left: valueShareURL.right
anchors.leftMargin: Theme.smallPadding
onClick: function (){
chatsModel.copyToClipboard("https://join.status.im/u/" + fromAuthor)
}
}
}
footer: Item {
width: parent.width
height: children[0].height
StyledButton {
anchors.left: parent.left
anchors.leftMargin: 20
label: qsTr("Send Message")
anchors.bottom: parent.bottom
onClicked: {
profilePopup.close()
if (tabBar.currentIndex !== 0)
tabBar.currentIndex = 0
chatsModel.joinChat(fromAuthor, Constants.chatTypeOneToOne)
}
}
StyledButton {
anchors.right: parent.right
anchors.rightMargin: addToContactsButton.width + 32
btnColor: "white"
btnBorderWidth: 1
btnBorderColor: Theme.grey
textColor: Theme.red
label: qsTr("Block User")
anchors.bottom: parent.bottom
onClicked: {
chatsModel.blockContact(fromAuthor)
// TODO(pascal): Change block user button state based
// on :contact/blocked state
profilePopup.close()
}
}
StyledButton {
id: addToContactsButton
anchors.right: parent.right
anchors.rightMargin: Theme.smallPadding
label: profileModel.isAdded(
fromAuthor) ? qsTr("Remove Contact") : qsTr(
"Add to contacts")
anchors.bottom: parent.bottom
onClicked: {
if (profileModel.isAdded(fromAuthor)) {
chatsModel.removeContact(fromAuthor)
} else {
chatsModel.addContact(fromAuthor)
}
profilePopup.close()
}
}
}
}