299 lines
8.8 KiB
QML
299 lines
8.8 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
|
|
}
|
|
|
|
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)
|
|
imageEditMenu.popup(this, mouse.x, mouse.y);
|
|
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
|
|
|
|
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
|
|
}
|
|
}
|
|
|
|
StatusMenu {
|
|
id: imageEditMenu
|
|
width: 200
|
|
|
|
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 = ""
|
|
}
|
|
}
|
|
}
|