From 7994faf756f83597290cd03f62ff3dd9b105f971 Mon Sep 17 00:00:00 2001 From: Patryk Osmaczko Date: Wed, 16 Mar 2022 22:20:03 +0100 Subject: [PATCH] fix(@desktop): add missing visual identity elements --- .../Chat/panels/SuggestionBoxPanel.qml | 16 +- .../Chat/panels/SuggestionFilterPanel.qml | 4 +- ui/app/AppLayouts/Profile/ProfileLayout.qml | 3 + .../Profile/views/MyProfileView.qml | 247 ++++++++---------- .../shared/controls/chat/ProfileHeader.qml | 1 + 5 files changed, 134 insertions(+), 137 deletions(-) diff --git a/ui/app/AppLayouts/Chat/panels/SuggestionBoxPanel.qml b/ui/app/AppLayouts/Chat/panels/SuggestionBoxPanel.qml index a65c0211c9..080f658f5d 100644 --- a/ui/app/AppLayouts/Chat/panels/SuggestionBoxPanel.qml +++ b/ui/app/AppLayouts/Chat/panels/SuggestionBoxPanel.qml @@ -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 { diff --git a/ui/app/AppLayouts/Chat/panels/SuggestionFilterPanel.qml b/ui/app/AppLayouts/Chat/panels/SuggestionFilterPanel.qml index f4c59f6bc0..8e3f9ed270 100644 --- a/ui/app/AppLayouts/Chat/panels/SuggestionFilterPanel.qml +++ b/ui/app/AppLayouts/Chat/panels/SuggestionFilterPanel.qml @@ -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) diff --git a/ui/app/AppLayouts/Profile/ProfileLayout.qml b/ui/app/AppLayouts/Profile/ProfileLayout.qml index f53a7cf23a..b883634e6d 100644 --- a/ui/app/AppLayouts/Profile/ProfileLayout.qml +++ b/ui/app/AppLayouts/Profile/ProfileLayout.qml @@ -50,6 +50,9 @@ StatusAppTwoPanelLayout { } MyProfileView { + Layout.fillWidth: true + Layout.fillHeight: true + profileStore: profileView.store.profileStore profileContentWidth: _internal.profileContentWidth } diff --git a/ui/app/AppLayouts/Profile/views/MyProfileView.qml b/ui/app/AppLayouts/Profile/views/MyProfileView.qml index 3c50d43b6b..e435a3da08 100644 --- a/ui/app/AppLayouts/Profile/views/MyProfileView.qml +++ b/ui/app/AppLayouts/Profile/views/MyProfileView.qml @@ -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 - } - } } diff --git a/ui/imports/shared/controls/chat/ProfileHeader.qml b/ui/imports/shared/controls/chat/ProfileHeader.qml index a6ed328e1a..546cb97081 100644 --- a/ui/imports/shared/controls/chat/ProfileHeader.qml +++ b/ui/imports/shared/controls/chat/ProfileHeader.qml @@ -27,6 +27,7 @@ Item { signal clicked() height: visible ? contentContainer.height : 0 + implicitHeight: contentContainer.implicitHeight ColumnLayout { id: contentContainer