import QtQuick 2.14 import QtQuick.Layouts 1.14 import utils 1.0 import shared.panels 1.0 import shared.controls 1.0 import StatusQ.Controls 0.1 import StatusQ.Components 0.1 import StatusQ.Popups 0.1 import StatusQ.Core.Utils 0.1 as StatusQUtils Item { id: root enum ImageSize { Compact, Middle, Big } property var store property string displayName property string pubkey property string icon property url previewIcon: icon property int trustStatus property bool isContact: false property bool isCurrentUser property bool userIsEnsVerified property rect cropRect property int imageSize: ProfileHeader.ImageSize.Compact property bool displayNameVisible: true property bool displayNamePlusIconsVisible: false property bool pubkeyVisible: true property bool pubkeyVisibleWithCopy: false property bool emojiHashVisible: true property bool editImageButtonVisible: false property bool editButtonVisible: displayNamePlusIconsVisible property bool loading: false readonly property bool compact: root.imageSize === ProfileHeader.ImageSize.Compact signal clicked() signal editClicked() Binding on previewIcon { value: icon } implicitWidth: contentContainer.implicitWidth implicitHeight: contentContainer.implicitHeight QtObject { id: d function getSize(compact, normal, big) { switch(root.imageSize) { case ProfileHeader.ImageSize.Compact: return compact; case ProfileHeader.ImageSize.Middle: return normal; case ProfileHeader.ImageSize.Big: return big; } } } Item { id: tmpCroppedImageHelper visible: false Image { id: tmpImage mipmap: true cache: false } property var keepGrabResultAlive; function setCroppedTmpIcon(source, x, y, width, height) { tmpCroppedImageHelper.width = width tmpCroppedImageHelper.height = height tmpImage.x = -x tmpImage.y = -y tmpImage.source = source tmpCroppedImageHelper.grabToImage(result => { keepGrabResultAlive = result root.previewIcon = result.url tmpImage.source = "" }) } } ColumnLayout { id: contentContainer spacing: root.compact ? 4 : 12 anchors { left: parent.left right: parent.right leftMargin: Style.current.smallPadding rightMargin: Style.current.smallPadding } Item { Layout.alignment: Qt.AlignHCenter implicitWidth: userImage.width implicitHeight: userImage.height UserImage { id: userImage objectName: "ProfileHeader_userImage" name: root.displayName pubkey: root.pubkey image: root.previewIcon interactive: false imageWidth: d.getSize(36, 64, 170) imageHeight: imageWidth ensVerified: root.userIsEnsVerified loading: root.loading } StatusRoundButton { id: editButton visible: root.editImageButtonVisible anchors.top: userImage.top anchors.right: userImage.right anchors.rightMargin: Math.round(userImage.width / 10) width: d.getSize(10, 24, 40) height: width type: StatusRoundButton.Type.Secondary icon.name: "edit_pencil" icon.width: d.getSize(8, 12, 24) icon.height: d.getSize(8, 12, 24) onClicked: { if (!!root.store.profileLargeImage) Global.openMenu(editImageMenuComponent, this) else Global.openChangeProfilePicPopup(tempIcon); } function tempIcon(image, aX, aY, bX, bY) { root.icon = image root.cropRect = Qt.rect(aX, aY, bX - aX, bY - aY) tmpCroppedImageHelper.setCroppedTmpIcon( image, aX, aY, bX - aX, bY - aY) } } } Item { Layout.fillWidth: true implicitHeight: displayNameLabel.implicitHeight visible: root.displayNameVisible StyledText { id: displayNameLabel width: parent.width height: parent.height text: root.displayName visible: !root.loading horizontalAlignment: Text.AlignHCenter elide: Text.ElideRight maximumLineCount: 3 wrapMode: Text.Wrap font { bold: true pixelSize: 17 } } Loader { anchors.centerIn: parent height: parent.height width: 100 visible: root.loading active: visible sourceComponent: LoadingComponent { radius: 4 } } } RowLayout { spacing: compact ? 4 : Style.current.halfPadding Layout.fillWidth: true Layout.alignment: Qt.AlignHCenter visible: root.displayNamePlusIconsVisible StyledText { objectName: "ProfileHeader_displayName" Layout.maximumWidth: root.width - Style.current.xlPadding text: root.displayName elide: Text.ElideRight font { weight: Font.Medium pixelSize: Style.current.primaryTextFontSize } } StatusContactVerificationIcons { Layout.alignment: Qt.AlignVCenter visible: !root.isCurrentUser isContact: root.isContact trustIndicator: root.trustStatus } Loader { sourceComponent: SVGImage { objectName: "ProfileHeader_displayNameEditIcon" height: compact ? 10 : 16 width: compact ? 10 : 16 source: Style.svg("edit-message") MouseArea { anchors.fill: parent cursorShape: Qt.PointingHandCursor acceptedButtons: Qt.LeftButton onClicked: { root.editClicked() } } } active: root.editButtonVisible visible: active } } StyledText { Layout.fillWidth: true Layout.alignment: Qt.AlignHCenter visible: root.pubkeyVisible text: Utils.getElidedCompressedPk(pubkey) horizontalAlignment: Text.AlignHCenter font.pixelSize: 13 color: Style.current.secondaryText } RowLayout { Layout.alignment: Qt.AlignHCenter visible: root.pubkeyVisibleWithCopy StyledText { id: txtChatKey text: qsTr("Chatkey:%1...").arg(pubkey.substring(0, 32)) horizontalAlignment: Text.AlignHCenter font.pixelSize: Style.current.primaryTextFontSize color: Style.current.secondaryText } CopyToClipBoardButton { id: copyBtn Layout.preferredWidth: 20 Layout.preferredHeight: 20 color: Style.current.transparent textToCopy: pubkey onCopyClicked: root.store.copyToClipboard(textToCopy) } } EmojiHash { id: emojiHash Layout.alignment: Qt.AlignHCenter visible: root.emojiHashVisible compact: root.compact publicKey: root.pubkey } } Component { id: editImageMenuComponent StatusMenu { StatusAction { text: qsTr("Select different image") assetSettings.name: "image" onTriggered: Global.openChangeProfilePicPopup(editButton.tempIcon) } StatusAction { text: qsTr("Use an NFT") assetSettings.name: "nft-profile" onTriggered: Global.openChangeProfilePicPopup(editButton.tempIcon) enabled: false // TODO enable this with the profile showcase } StatusMenuSeparator {} StatusAction { text: qsTr("Remove image") type: StatusAction.Danger assetSettings.name: "delete" onTriggered: root.icon = "" } } } }