fix(@desktop): add missing visual identity elements

This commit is contained in:
Patryk Osmaczko 2022-03-16 22:20:03 +01:00 committed by osmaczko
parent 9c77f2162b
commit 7994faf756
5 changed files with 134 additions and 137 deletions

View File

@ -29,6 +29,7 @@ import StatusQ.Components 0.1
import shared 1.0
import shared.panels 1.0
import shared.controls.chat 1.0
Rectangle {
id: container
@ -200,15 +201,20 @@ Rectangle {
height: 42
radius: Style.current.radius
StatusSmartIdenticon {
UserImage {
id: accountImage
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: Style.current.smallPadding
image.width: 32
image.height: 32
image.source: model.icon
image.isIdenticon: model.isIdenticon
imageWidth: 32
imageHeight: 32
name: model.name
pubkey: model.publicKey
icon: model.icon
isIdenticon: model.isIdenticon
showRing: !model.isAdded
interactive: false
}
StyledText {

View File

@ -34,6 +34,7 @@ Item {
property string ensName: model.ensName
property string icon: model.icon
property bool isIdenticon: model.isIdenticon
property bool isAdded: model.isAdded
}
}
@ -72,7 +73,8 @@ Item {
alias: listItem.alias,
ensName: listItem.ensName,
icon: listItem.icon,
isIdenticon: listItem.isIdenticon
isIdenticon: listItem.isIdenticon,
isAdded: listItem.isAdded
}
if (all || isAcceptedItem(filter, item)) {
filterModel.append(item)

View File

@ -50,6 +50,9 @@ StatusAppTwoPanelLayout {
}
MyProfileView {
Layout.fillWidth: true
Layout.fillHeight: true
profileStore: profileView.store.profileStore
profileContentWidth: _internal.profileContentWidth
}

View File

@ -6,6 +6,7 @@ import utils 1.0
import shared 1.0
import shared.panels 1.0
import shared.popups 1.0
import shared.controls.chat 1.0
import "../popups"
import "../stores"
@ -15,121 +16,152 @@ import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
import StatusQ.Controls 0.1
Item {
ColumnLayout {
id: root
property ProfileStore profileStore
property int profileContentWidth
clip: true
height: parent.height
Layout.fillWidth: true
spacing: 16
Item {
id: profileImgNameContainer
anchors.top: parent.top
anchors.topMargin: 64
width: profileContentWidth
Layout.preferredHeight: 32
Layout.fillWidth: true
}
anchors.horizontalCenter: parent.horizontalCenter
height: this.childrenRect.height
Item {
id: profileImgContainer
width: profileImg.width
height: profileImg.height
RoundedImage {
id: profileImg
width: 64
height: 64
border.width: 1
border.color: Style.current.border
source: root.profileStore.icon
smooth: false
antialiasing: true
}
RoundedIcon {
source: Style.svg("pencil")
anchors.bottom: parent.bottom
anchors.bottomMargin: -3
anchors.right: parent.right
anchors.rightMargin: -3
width: 24
height: 24
border.width: 1
border.color: Style.current.background
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
Global.openChangeProfilePicPopup()
}
}
}
RowLayout {
Layout.alignment: Qt.AlignHCenter
Layout.maximumWidth: root.profileContentWidth
StatusBaseText {
id: profileName
text: root.profileStore.name
anchors.left: profileImgContainer.right
anchors.leftMargin: Style.current.halfPadding
anchors.top: profileImgContainer.top
anchors.topMargin: 4
font.weight: Font.Bold
font.pixelSize: 20
color: Theme.palette.directColor1
}
Component {
id: displayNamePopupComponent
DisplayNamePopup {
profileStore: root.profileStore
onClosed: {
destroy()
}
}
}
StatusButton {
id: "editDisplayName"
text: "Edit"
anchors.left: profileName.right
anchors.leftMargin: Style.current.halfPadding
onClicked: {
Global.openPopup(displayNamePopupComponent);
}
onClicked: Global.openPopup(displayNamePopupComponent)
}
Address {
id: pubkeyText
text: root.profileStore.ensName !== "" ? root.profileStore.username : root.profileStore.pubkey
anchors.bottom: profileImgContainer.bottom
anchors.left: profileName.left
anchors.bottomMargin: 4
width: 200
font.pixelSize: 15
Item {
Layout.fillWidth: true
}
StatusFlatRoundButton {
id: qrCodeButton
width: 32
height: 32
anchors.right: parent.right
anchors.verticalCenter: profileImgContainer.verticalCenter
Layout.preferredWidth: 32
Layout.preferredHeight: 32
icon.name: "qr"
type: StatusFlatRoundButton.Type.Quaternary
onClicked: qrCodePopup.open()
}
}
Separator {
id: lineSeparator
anchors.top: profileImgContainer.bottom
anchors.topMargin: 36
Separator {
Layout.alignment: Qt.AlignHCenter
Layout.preferredWidth: root.profileContentWidth
}
ProfileHeader {
id: profileImgNameContainer
Layout.alignment: Qt.AlignHCenter
Layout.preferredWidth: root.profileContentWidth
displayName: profileStore.name
pubkey: profileStore.pubkey
icon: profileStore.icon
isIdenticon: profileStore.isIdenticon
displayNameVisible: false
pubkeyVisible: false
imageWidth: 80
imageHeight: 80
emojiSize: "20x20"
imageOverlay: Item {
StatusFlatRoundButton {
width: 24
height: 24
anchors {
right: parent.right
bottom: parent.bottom
rightMargin: -8
}
type: StatusFlatRoundButton.Type.Secondary
icon.name: "pencil"
icon.color: Theme.palette.directColor1
icon.width: 12.5
icon.height: 12.5
onClicked: Global.openChangeProfilePicPopup()
}
}
}
StatusDescriptionListItem {
Layout.alignment: Qt.AlignHCenter
Layout.preferredWidth: root.profileContentWidth
title: qsTr("ENS username")
subTitle: root.profileStore.ensName
tooltip.text: qsTr("Copy to clipboard")
icon.name: "copy"
visible: !!root.profileStore.ensName
iconButton.onClicked: {
root.profileStore.copyToClipboard(root.profileStore.ensName)
tooltip.visible = !tooltip.visible
}
}
StatusDescriptionListItem {
Layout.alignment: Qt.AlignHCenter
Layout.preferredWidth: root.profileContentWidth
title: qsTr("Chat key")
subTitle: root.profileStore.pubkey
subTitleComponent.elide: Text.ElideMiddle
subTitleComponent.width: 320
subTitleComponent.font.family: Theme.palette.monoFont.name
tooltip.text: qsTr("Copy to clipboard")
icon.name: "copy"
iconButton.onClicked: {
root.profileStore.copyToClipboard(root.profileStore.pubkey)
tooltip.visible = !tooltip.visible
}
}
StatusDescriptionListItem {
Layout.alignment: Qt.AlignHCenter
Layout.preferredWidth: root.profileContentWidth
title: qsTr("Share Profile URL")
subTitle: `${Constants.userLinkPrefix}${root.profileStore.ensName !== "" ? root.profileStore.ensName : (root.profileStore.pubkey.substring(0, 5) + "..." + root.profileStore.pubkey.substring(root.profileStore.pubkey.length - 5))}`
tooltip.text: qsTr("Copy to clipboard")
icon.name: "copy"
iconButton.onClicked: {
root.profileStore.copyToClipboard(Constants.userLinkPrefix + (root.profileStore.ensName !== "" ? root.profileStore.ensName : root.profileStore.pubkey))
tooltip.visible = !tooltip.visible
}
}
Component {
id: displayNamePopupComponent
DisplayNamePopup {
profileStore: root.profileStore
onClosed: {
destroy()
}
}
}
@ -150,52 +182,5 @@ Item {
smooth: false
}
}
Column {
anchors.right: profileImgNameContainer.right
anchors.left: profileImgNameContainer.left
anchors.top: profileImgNameContainer.bottom
anchors.topMargin: 16
StatusDescriptionListItem {
title: qsTr("ENS username")
subTitle: root.profileStore.ensName
tooltip.text: qsTr("Copy to clipboard")
icon.name: "copy"
visible: !!root.profileStore.ensName
iconButton.onClicked: {
root.profileStore.copyToClipboard(root.profileStore.ensName)
tooltip.visible = !tooltip.visible
}
width: parent.width
}
StatusDescriptionListItem {
title: qsTr("Chat key")
subTitle: root.profileStore.pubkey
subTitleComponent.elide: Text.ElideMiddle
subTitleComponent.width: 320
subTitleComponent.font.family: Theme.palette.monoFont.name
tooltip.text: qsTr("Copy to clipboard")
icon.name: "copy"
iconButton.onClicked: {
root.profileStore.copyToClipboard(root.profileStore.pubkey)
tooltip.visible = !tooltip.visible
}
width: parent.width
}
StatusDescriptionListItem {
title: qsTr("Share Profile URL")
subTitle: `${Constants.userLinkPrefix}${root.profileStore.ensName !== "" ? root.profileStore.ensName : (root.profileStore.pubkey.substring(0, 5) + "..." + root.profileStore.pubkey.substring(root.profileStore.pubkey.length - 5))}`
tooltip.text: qsTr("Copy to clipboard")
icon.name: "copy"
iconButton.onClicked: {
root.profileStore.copyToClipboard(Constants.userLinkPrefix + (root.profileStore.ensName !== "" ? root.profileStore.ensName : root.profileStore.pubkey))
tooltip.visible = !tooltip.visible
}
width: parent.width
}
}
}

View File

@ -27,6 +27,7 @@ Item {
signal clicked()
height: visible ? contentContainer.height : 0
implicitHeight: contentContainer.implicitHeight
ColumnLayout {
id: contentContainer