status-desktop/ui/imports/shared/controls/chat/ProfileHeader.qml

303 lines
9.0 KiB
QML

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 = ""
}
}
}
}