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

412 lines
13 KiB
QML
Raw Normal View History

2020-06-17 19:18:31 +00:00
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import QtGraphicalEffects 1.13
import "../../../../imports"
import "../../../../shared"
import "./"
ModalPopup {
id: popup
2020-10-02 13:02:56 +00:00
property Popup parentPopup
2020-09-17 14:26:26 +00:00
property var identicon: ""
property var userName: ""
property string nickname: ""
2020-09-17 14:26:26 +00:00
property var fromAuthor: ""
property var text: ""
property var alias: ""
2020-07-09 17:47:36 +00:00
2020-06-23 17:17:58 +00:00
property bool showQR: false
property bool isEnsVerified: false
property bool noFooter: false
2020-06-17 21:43:26 +00:00
signal blockButtonClicked(name: string, address: string)
signal removeButtonClicked(address: string)
2020-10-02 14:37:51 +00:00
signal contactBlocked(publicKey: string)
signal contactAdded(publicKey: string)
signal contactRemoved(publicKey: string)
function openPopup(showFooter, userNameParam, fromAuthorParam, identiconParam, textParam, nicknameParam) {
userName = userNameParam || ""
nickname = nicknameParam || ""
fromAuthor = fromAuthorParam || ""
identicon = identiconParam || ""
text = textParam || ""
isEnsVerified = chatsModel.isEnsVerified(this.fromAuthor)
alias = chatsModel.alias(this.fromAuthor) || ""
2020-10-02 14:37:51 +00:00
showQR = false
2020-10-02 13:02:56 +00:00
noFooter = !showFooter;
2020-06-17 21:43:26 +00:00
popup.open()
}
header: Item {
2020-06-23 19:04:08 +00:00
height: children[0].height
width: parent.width
Rectangle {
id: profilePic
width: 40
height: 40
radius: 30
border.color: "#10000000"
border.width: 1
color: Style.current.transparent
2020-06-23 19:04:08 +00:00
anchors.top: parent.top
SVGImage {
2020-06-23 19:04:08 +00:00
width: parent.width
height: parent.height
fillMode: Image.PreserveAspectFit
source: identicon
}
}
StyledTextEdit {
id: profileName
text: Utils.removeStatusEns(userName)
2020-06-23 19:04:08 +00:00
anchors.top: parent.top
2020-10-26 15:55:29 +00:00
anchors.topMargin: 2
2020-06-23 19:04:08 +00:00
anchors.left: profilePic.right
anchors.leftMargin: Style.current.smallPadding
2020-06-23 19:04:08 +00:00
font.bold: true
font.pixelSize: 14
readOnly: true
wrapMode: Text.WordWrap
}
2020-06-23 19:04:08 +00:00
StyledText {
text: isEnsVerified ? alias : fromAuthor
2020-06-23 19:04:08 +00:00
width: 160
elide: !isEnsVerified ? Text.ElideMiddle : Text.ElideNone
2020-06-23 19:04:08 +00:00
anchors.left: profilePic.right
anchors.leftMargin: Style.current.smallPadding
2020-06-23 19:04:08 +00:00
anchors.top: profileName.bottom
anchors.topMargin: 2
font.pixelSize: 14
color: Style.current.secondaryText
2020-06-23 19:04:08 +00:00
}
2020-06-23 19:04:08 +00:00
Rectangle {
id: qrCodeButton
height: 32
width: 32
anchors.top: parent.top
anchors.topMargin: Style.current.padding
2020-06-23 19:04:08 +00:00
anchors.right: parent.right
anchors.rightMargin: 32 + Style.current.smallPadding
2020-06-23 19:04:08 +00:00
radius: 8
2020-06-23 17:17:58 +00:00
SVGImage {
2020-06-23 19:04:08 +00:00
source: "../../../img/qr-code-icon.svg"
width: 25
height: 25
2020-06-23 19:04:08 +00:00
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
2020-06-23 17:17:58 +00:00
2020-06-23 19:04:08 +00:00
MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
hoverEnabled: true
onExited: {
qrCodeButton.color = Style.current.white
2020-06-23 19:04:08 +00:00
}
onEntered: {
qrCodeButton.color = Style.current.grey
2020-06-23 19:04:08 +00:00
}
onClicked: {
showQR = true
}
}
}
}
2020-10-02 14:37:51 +00:00
Item {
BlockContactConfirmationDialog {
id: blockContactConfirmationDialog
onBlockButtonClicked: {
profileModel.blockContact(fromAuthor)
blockContactConfirmationDialog.close();
popup.close()
contactBlocked(fromAuthor)
}
}
ConfirmationDialog {
id: removeContactConfirmationDialog
// % "Remove contact"
title: qsTrId("remove-contact")
//% "Are you sure you want to remove this contact?"
confirmationText: qsTrId("are-you-sure-you-want-to-remove-this-contact-")
onConfirmButtonClicked: {
if (profileModel.isAdded(fromAuthor)) {
profileModel.removeContact(fromAuthor);
}
removeContactConfirmationDialog.close();
popup.close();
contactRemoved(fromAuthor);
}
}
}
2020-06-23 17:17:58 +00:00
Item {
2020-06-23 19:04:08 +00:00
anchors.fill: parent
visible: showQR
Image {
asynchronous: true
fillMode: Image.PreserveAspectFit
2020-06-23 19:04:08 +00:00
source: profileModel.qrCode(fromAuthor)
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
height: 212
width: 212
mipmap: true
smooth: false
}
}
2020-06-23 17:17:58 +00:00
Item {
2020-06-23 19:04:08 +00:00
anchors.fill: parent
anchors.leftMargin: Style.current.smallPadding
2020-06-23 19:04:08 +00:00
visible: !showQR
2020-06-23 19:04:08 +00:00
StyledText {
id: labelEnsUsername
height: isEnsVerified ? 20 : 0
visible: isEnsVerified
//% "ENS username"
text: qsTrId("ens-username")
2020-06-23 19:04:08 +00:00
font.pixelSize: 13
font.weight: Font.Medium
color: Style.current.secondaryText
2020-06-23 19:04:08 +00:00
anchors.top: parent.top
anchors.topMargin: Style.current.smallPadding
2020-06-23 19:04:08 +00:00
}
2020-06-23 19:04:08 +00:00
StyledText {
id: valueEnsName
visible: isEnsVerified
height: isEnsVerified ? 20 : 0
text: userName.substr(1)
2020-06-23 19:04:08 +00:00
font.pixelSize: 14
anchors.top: labelEnsUsername.bottom
anchors.topMargin: Style.current.smallPadding
2020-06-23 19:04:08 +00:00
}
CopyToClipBoardButton {
visible: isEnsVerified
height: isEnsVerified ? 20 : 0
anchors.top: labelEnsUsername.bottom
anchors.left: valueEnsName.right
textToCopy: valueEnsName.text
}
2020-06-23 19:04:08 +00:00
StyledText {
id: labelChatKey
//% "Chat key"
text: qsTrId("chat-key")
2020-06-23 19:04:08 +00:00
font.pixelSize: 13
font.weight: Font.Medium
color: Style.current.secondaryText
anchors.top: isEnsVerified ? valueEnsName.bottom : parent.top
anchors.topMargin: Style.current.padding
2020-06-23 19:04:08 +00:00
}
Address {
2020-06-23 19:04:08 +00:00
id: valueChatKey
text: fromAuthor
width: 160
maxWidth: parent.width - (3 * Style.current.smallPadding) - copyBtn.width
color: Style.current.textColor
2020-06-23 19:04:08 +00:00
font.pixelSize: 14
anchors.top: labelChatKey.bottom
anchors.topMargin: Style.current.smallPadding
2020-06-23 19:04:08 +00:00
}
2020-06-23 17:17:58 +00:00
CopyToClipBoardButton {
id: copyBtn
anchors.top: labelChatKey.bottom
anchors.left: valueChatKey.right
textToCopy: valueChatKey.text
}
2020-06-23 19:04:08 +00:00
Separator {
id: separator
anchors.top: valueChatKey.bottom
anchors.topMargin: Style.current.padding
2020-06-23 19:04:08 +00:00
anchors.left: parent.left
anchors.leftMargin: -Style.current.padding
2020-06-23 19:04:08 +00:00
anchors.right: parent.right
anchors.rightMargin: -Style.current.padding
2020-06-23 19:04:08 +00:00
}
2020-06-23 19:04:08 +00:00
StyledText {
id: labelShareURL
//% "Share Profile URL"
text: qsTrId("share-profile-url")
2020-06-23 19:04:08 +00:00
font.pixelSize: 13
font.weight: Font.Medium
color: Style.current.secondaryText
2020-06-23 19:04:08 +00:00
anchors.top: separator.bottom
anchors.topMargin: Style.current.padding
2020-06-23 19:04:08 +00:00
}
2020-06-23 17:17:58 +00:00
2020-06-23 19:04:08 +00:00
StyledText {
id: valueShareURL
text: "https://join.status.im/u/" + fromAuthor.substr(
0, 4) + "..." + fromAuthor.substr(fromAuthor.length - 5)
font.pixelSize: 14
anchors.top: labelShareURL.bottom
anchors.topMargin: Style.current.smallPadding
2020-06-23 19:04:08 +00:00
}
CopyToClipBoardButton {
anchors.top: labelShareURL.bottom
anchors.left: valueShareURL.right
textToCopy: "https://join.status.im/u/" + fromAuthor
}
Separator {
id: separator2
anchors.top: valueShareURL.bottom
anchors.topMargin: Style.current.padding
anchors.left: parent.left
anchors.leftMargin: -Style.current.padding
anchors.right: parent.right
anchors.rightMargin: -Style.current.padding
}
StyledText {
id: chatSettings
2020-09-22 07:53:03 +00:00
//% "Chat settings"
text: qsTrId("chat-settings")
font.pixelSize: 13
font.weight: Font.Medium
color: Style.current.secondaryText
anchors.top: separator2.bottom
anchors.topMargin: Style.current.padding
}
StyledText {
id: nicknameTitle
2020-09-22 07:53:03 +00:00
//% "Nickname"
text: qsTrId("nickname")
font.pixelSize: 14
anchors.top: chatSettings.bottom
anchors.topMargin: Style.current.smallPadding
}
SVGImage {
id: nicknameCaret
source: "../../../img/caret.svg"
rotation: -90
anchors.right: parent.right
anchors.rightMargin: Style.current.padding
anchors.verticalCenter: nicknameTitle.verticalCenter
width: 13
fillMode: Image.PreserveAspectFit
ColorOverlay {
anchors.fill: parent
source: parent
color: Style.current.secondaryText
}
}
StyledText {
id: nicknameText
2020-09-22 07:53:03 +00:00
//% "None"
text: nickname ? nickname : qsTrId("none")
anchors.right: nicknameCaret.left
anchors.rightMargin: Style.current.padding
anchors.verticalCenter: nicknameTitle.verticalCenter
color: Style.current.secondaryText
}
MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.left: nicknameTitle.left
anchors.right: nicknameCaret.right
anchors.top: nicknameTitle.top
anchors.bottom: nicknameTitle.bottom
onClicked: {
2020-09-16 16:00:21 +00:00
nicknamePopup.open()
}
}
NicknamePopup {
id: nicknamePopup
changeUsername: function (newUsername) {
popup.userName = newUsername
}
changeNickname: function (newNickname) {
popup.nickname = newNickname
}
}
}
footer: Item {
id: footerContainer
visible: !noFooter
width: parent.width
height: children[0].height
StyledButton {
2020-06-23 19:04:08 +00:00
anchors.left: parent.left
anchors.leftMargin: 20
//% "Send Message"
label: qsTrId("send-message")
2020-06-23 19:04:08 +00:00
anchors.bottom: parent.bottom
onClicked: {
if (tabBar.currentIndex !== 0)
tabBar.currentIndex = 0
chatsModel.joinChat(fromAuthor, Constants.chatTypeOneToOne)
2020-10-02 13:02:56 +00:00
popup.close()
2020-06-23 19:04:08 +00:00
}
}
StyledButton {
2020-06-23 19:04:08 +00:00
anchors.right: parent.right
anchors.rightMargin: addToContactsButton.width + 32
btnColor: Style.current.lightRed
2020-06-23 19:04:08 +00:00
btnBorderWidth: 1
btnBorderColor: Style.current.grey
textColor: Style.current.red
//% "Block User"
label: qsTrId("block-user")
2020-06-23 19:04:08 +00:00
anchors.bottom: parent.bottom
2020-10-02 14:37:51 +00:00
onClicked: {
blockContactConfirmationDialog.contactName = userName;
blockContactConfirmationDialog.contactAddress = fromAuthor;
blockContactConfirmationDialog.open();
}
}
StyledButton {
2020-06-23 19:04:08 +00:00
id: addToContactsButton
anchors.right: parent.right
anchors.rightMargin: Style.current.smallPadding
label: profileModel.isAdded(fromAuthor) ?
//% "Remove Contact"
qsTrId("remove-contact") :
//% "Add to contacts"
qsTrId("add-to-contacts")
2020-06-23 19:04:08 +00:00
anchors.bottom: parent.bottom
onClicked: {
if (profileModel.isAdded(fromAuthor)) {
2020-10-02 14:37:51 +00:00
removeContactConfirmationDialog.parentPopup = profilePopup;
removeContactConfirmationDialog.open();
2020-06-23 19:04:08 +00:00
} else {
2020-10-02 14:37:51 +00:00
profileModel.addContact(fromAuthor);
contactAdded(fromAuthor);
profilePopup.close();
2020-06-23 19:04:08 +00:00
}
}
2020-06-23 19:04:08 +00:00
}
}
}