status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: make profile popup look like the design

This commit is contained in:
Jonathan Rainville 2021-01-12 15:51:00 -05:00
parent 56f9b79834
commit 3f63ded1b2
6 changed files with 127 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/app/AppLayouts/Chat/ChatLayout.qml
View File

@ -102,7 +102,7 @@ SplitView {
property Component profilePopupComponent: ProfilePopup {
id: profilePopup
height: 450
height: 504
onClosed: {
if(profilePopup.parentPopup){
profilePopup.parentPopup.close();

24
ui/app/AppLayouts/Chat/components/NicknamePopup.qml
View File

@ -17,12 +17,14 @@ ModalPopup {
width: 400
height: 390
noTopMargin: true
onOpened: {
nicknameInput.forceActiveFocus(Qt.MouseFocusReason)
}
header: Item {
height: childrenRect.height
height: 78
width: parent.width
StyledText {
@ -30,11 +32,11 @@ ModalPopup {
//% "Nickname"
text: qsTrId("nickname")
anchors.top: parent.top
anchors.topMargin: 18
anchors.topMargin: Style.current.padding
anchors.left: parent.left
anchors.leftMargin: Style.current.smallPadding
anchors.leftMargin: Style.current.padding
font.bold: true
font.pixelSize: 14
font.pixelSize: 17
}
StyledText {
@ -42,11 +44,19 @@ ModalPopup {
width: 160
elide: !isEnsVerified ? Text.ElideMiddle : Text.ElideNone
anchors.left: nicknameTitle.left
anchors.top: nicknameTitle.bottom
anchors.topMargin: 2
font.pixelSize: 14
anchors.bottom: parent.bottom
anchors.bottomMargin: Style.current.padding
font.pixelSize: 15
color: Style.current.secondaryText
}
Separator {
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.leftMargin: -Style.current.padding
anchors.right: parent.right
anchors.rightMargin: -Style.current.padding
}
}
StyledText {

214
ui/app/AppLayouts/Chat/components/ProfilePopup.qml
View File

@ -18,6 +18,8 @@ ModalPopup {
property var fromAuthor: ""
property var text: ""
property var alias: ""
readonly property int innerMargin: 20
property bool isEnsVerified: false
property bool noFooter: false
@ -32,6 +34,9 @@ ModalPopup {
signal contactAdded(publicKey: string)
signal contactRemoved(publicKey: string)
clip: true
noTopMargin: true
function openPopup(showFooter, userNameParam, fromAuthorParam, identiconParam, textParam, nicknameParam) {
userName = userNameParam || ""
nickname = nicknameParam || ""
@ -47,15 +52,16 @@ ModalPopup {
}
header: Item {
height: children[0].height
height: 78
width: parent.width
RoundedImage {
id: profilePic
width: 40
height: 40
border.color: Style.current.border
border.width: 1
anchors.top: parent.top
anchors.verticalCenter: parent.verticalCenter
source: identicon
}
@ -63,40 +69,49 @@ ModalPopup {
id: profileName
text: Utils.removeStatusEns(userName)
anchors.top: parent.top
anchors.topMargin: 2
anchors.topMargin: Style.current.padding
anchors.left: profilePic.right
anchors.leftMargin: Style.current.smallPadding
anchors.leftMargin: Style.current.halfPadding
font.bold: true
font.pixelSize: 14
font.pixelSize: 17
readOnly: true
wrapMode: Text.WordWrap
}
StyledText {
text: isEnsVerified ? alias : fromAuthor
width: 160
elide: !isEnsVerified ? Text.ElideMiddle : Text.ElideNone
anchors.left: profilePic.right
anchors.leftMargin: Style.current.smallPadding
anchors.top: profileName.bottom
anchors.bottom: parent.bottom
anchors.bottomMargin: Style.current.padding
anchors.right: qrCodeButton.left
anchors.rightMargin: Style.current.padding
anchors.topMargin: 2
font.pixelSize: 14
color: Style.current.secondaryText
}
StatusIconButton {
id: reloadBtn
id: qrCodeButton
icon.name: "qr-code-icon"
anchors.top: parent.top
anchors.topMargin: -4
anchors.verticalCenter: profileName.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 32 + Style.current.smallPadding
anchors.rightMargin: 52
iconColor: Style.current.textColor
onClicked: qrCodePopup.open()
width: 32
height: 32
}
Separator {
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.leftMargin: -Style.current.padding
anchors.right: parent.right
anchors.rightMargin: -Style.current.padding
}
ModalPopup {
id: qrCodePopup
width: 320
@ -114,80 +129,18 @@ ModalPopup {
}
}
Item {
BlockContactConfirmationDialog {
id: blockContactConfirmationDialog
onBlockButtonClicked: {
profileModel.contacts.blockContact(fromAuthor)
blockContactConfirmationDialog.close();
popup.close()
contactBlocked(fromAuthor)
}
}
UnblockContactConfirmationDialog {
id: unblockContactConfirmationDialog
onUnblockButtonClicked: {
profileModel.unblockContact(fromAuthor)
unblockContactConfirmationDialog.close();
popup.close()
contactUnblocked(fromAuthor)
}
}
ConfirmationDialog {
id: removeContactConfirmationDialog
// % "Remove contact"
title: qsTrId("remove-contact")
//% "Are you sure you want to remove this contact?"
confirmationText: qsTrId("are-you-sure-you-want-to-remove-this-contact-")
onConfirmButtonClicked: {
if (profileModel.contacts.isAdded(fromAuthor)) {
profileModel.contacts.removeContact(fromAuthor);
}
removeContactConfirmationDialog.close();
popup.close();
contactRemoved(fromAuthor);
}
}
}
Item {
anchors.fill: parent
anchors.leftMargin: Style.current.smallPadding
StyledText {
id: labelEnsUsername
height: isEnsVerified ? 20 : 0
visible: isEnsVerified
TextWithLabel {
id: ensText
//% "ENS username"
text: qsTrId("ens-username")
font.pixelSize: 13
font.weight: Font.Medium
color: Style.current.secondaryText
label: qsTrId("ens-username")
text: userName
anchors.top: parent.top
anchors.topMargin: Style.current.smallPadding
}
StyledText {
id: valueEnsName
visible: isEnsVerified
height: isEnsVerified ? 20 : 0
text: userName.substr(1)
font.pixelSize: 14
anchors.top: labelEnsUsername.bottom
anchors.topMargin: Style.current.smallPadding
}
CopyToClipBoardButton {
visible: isEnsVerified
height: isEnsVerified ? 20 : 0
anchors.top: labelEnsUsername.bottom
anchors.left: valueEnsName.right
textToCopy: valueEnsName.text
height: visible ? implicitHeight : 0
textToCopy: userName
}
StyledText {
@ -197,8 +150,8 @@ ModalPopup {
font.pixelSize: 13
font.weight: Font.Medium
color: Style.current.secondaryText
anchors.top: isEnsVerified ? valueEnsName.bottom : parent.top
anchors.topMargin: Style.current.padding
anchors.top: ensText.bottom
anchors.topMargin: ensText.visible ? popup.innerMargin : 0
}
Address {
@ -207,9 +160,9 @@ ModalPopup {
width: 160
maxWidth: parent.width - (3 * Style.current.smallPadding) - copyBtn.width
color: Style.current.textColor
font.pixelSize: 14
font.pixelSize: 15
anchors.top: labelChatKey.bottom
anchors.topMargin: Style.current.smallPadding
anchors.topMargin: 4
}
CopyToClipBoardButton {
@ -222,67 +175,41 @@ ModalPopup {
Separator {
id: separator
anchors.top: valueChatKey.bottom
anchors.topMargin: Style.current.padding
anchors.topMargin: popup.innerMargin
anchors.left: parent.left
anchors.leftMargin: -Style.current.padding
anchors.right: parent.right
anchors.rightMargin: -Style.current.padding
}
StyledText {
id: labelShareURL
//% "Share Profile URL"
text: qsTrId("share-profile-url")
font.pixelSize: 13
font.weight: Font.Medium
color: Style.current.secondaryText
anchors.top: separator.bottom
anchors.topMargin: Style.current.padding
}
StyledText {
TextWithLabel {
id: valueShareURL
label: qsTr("Share Profile URL")
text: "https://join.status.im/u/" + fromAuthor.substr(
0, 4) + "..." + fromAuthor.substr(fromAuthor.length - 5)
font.pixelSize: 14
anchors.top: labelShareURL.bottom
anchors.topMargin: Style.current.smallPadding
}
CopyToClipBoardButton {
anchors.top: labelShareURL.bottom
anchors.left: valueShareURL.right
anchors.top: separator.top
anchors.topMargin: popup.innerMargin
textToCopy: "https://join.status.im/u/" + fromAuthor
}
Separator {
id: separator2
anchors.top: valueShareURL.bottom
anchors.topMargin: Style.current.padding
anchors.topMargin: popup.innerMargin
anchors.left: parent.left
anchors.leftMargin: -Style.current.padding
anchors.right: parent.right
anchors.rightMargin: -Style.current.padding
}
StyledText {
TextWithLabel {
id: chatSettings
//% "Chat settings"
text: qsTrId("chat-settings")
font.pixelSize: 13
font.weight: Font.Medium
color: Style.current.secondaryText
anchors.top: separator2.bottom
anchors.topMargin: Style.current.padding
}
StyledText {
id: nicknameTitle
label: qsTrId("chat-settings")
//% "Nickname"
text: qsTrId("nickname")
font.pixelSize: 14
anchors.top: chatSettings.bottom
anchors.topMargin: Style.current.smallPadding
anchors.top: separator2.top
anchors.topMargin: popup.innerMargin
}
SVGImage {
@ -291,7 +218,8 @@ ModalPopup {
rotation: -90
anchors.right: parent.right
anchors.rightMargin: Style.current.padding
anchors.verticalCenter: nicknameTitle.verticalCenter
anchors.bottom: chatSettings.bottom
anchors.bottomMargin: 5
width: 13
fillMode: Image.PreserveAspectFit
ColorOverlay {
@ -307,16 +235,16 @@ ModalPopup {
text: nickname ? nickname : qsTrId("none")
anchors.right: nicknameCaret.left
anchors.rightMargin: Style.current.padding
anchors.verticalCenter: nicknameTitle.verticalCenter
anchors.verticalCenter: nicknameCaret.verticalCenter
color: Style.current.secondaryText
}
MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.left: nicknameTitle.left
anchors.left: chatSettings.left
anchors.right: nicknameCaret.right
anchors.top: nicknameTitle.top
anchors.bottom: nicknameTitle.bottom
anchors.top: chatSettings.top
anchors.bottom: chatSettings.bottom
onClicked: {
nicknamePopup.open()
}
@ -409,5 +337,43 @@ ModalPopup {
popup.close()
}
}
BlockContactConfirmationDialog {
id: blockContactConfirmationDialog
onBlockButtonClicked: {
profileModel.contacts.blockContact(fromAuthor)
blockContactConfirmationDialog.close();
popup.close()
contactBlocked(fromAuthor)
}
}
UnblockContactConfirmationDialog {
id: unblockContactConfirmationDialog
onUnblockButtonClicked: {
profileModel.unblockContact(fromAuthor)
unblockContactConfirmationDialog.close();
popup.close()
contactUnblocked(fromAuthor)
}
}
ConfirmationDialog {
id: removeContactConfirmationDialog
// % "Remove contact"
title: qsTrId("remove-contact")
//% "Are you sure you want to remove this contact?"
confirmationText: qsTrId("are-you-sure-you-want-to-remove-this-contact-")
onConfirmButtonClicked: {
if (profileModel.contacts.isAdded(fromAuthor)) {
profileModel.contacts.removeContact(fromAuthor);
}
removeContactConfirmationDialog.close();
popup.close();
contactRemoved(fromAuthor);
}
}
}
}

6
ui/shared/Address.qml
View File

@ -10,7 +10,7 @@ StyledText {
text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
font.pixelSize: 13
font.family: Style.current.fontHexRegular.name
elide: expanded ? Text.ElideNone : Text.ElideMiddle
elide: Text.ElideMiddle
color: Style.current.secondaryText
MouseArea {
@ -23,8 +23,8 @@ StyledText {
this.width = addressComponent.width
} else {
addressComponent.oldWidth = addressComponent.width
addressComponent.width = addressComponent.maxWidth > 0 && addressComponent.implicitWidth > addressComponent.maxWidth ?
addressComponent.maxWidth :
addressComponent.width = addressComponent.maxWidth > 0 ?
Math.min(addressComponent.implicitWidth, addressComponent.maxWidth) :
addressComponent.implicitWidth
this.width = addressComponent.width
}

22
ui/shared/ModalPopup.qml
View File

@ -6,6 +6,7 @@ import "../imports"
Popup {
property string title
property bool noTopMargin: false
default property alias content: popupContent.children
property alias contentWrapper: popupContent
property alias header: headerContent.children
@ -33,14 +34,18 @@ Popup {
Item {
id: headerContent
height: {
var idx = !!title ? 0 : 1
return children[idx] && children[idx].height
const count = children.length
let h = 0
for (let i = 0; i < count; i++) {
h += children[i] ? children[i].height : 0
}
return h
}
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.topMargin: Style.current.padding
anchors.topMargin: popup.noTopMargin ? 0 : Style.current.padding
anchors.bottomMargin: Style.current.padding
anchors.rightMargin: Style.current.padding
anchors.leftMargin: Style.current.padding
@ -51,7 +56,7 @@ Popup {
anchors.left: parent.left
font.bold: true
font.pixelSize: 17
height: 24
height: visible ? 24 : 0
visible: !!title
verticalAlignment: Text.AlignVCenter
}
@ -62,10 +67,10 @@ Popup {
property bool hovered: false
height: 32
width: 32
anchors.top: headerContent.top
anchors.topMargin: -4
anchors.right: headerContent.right
anchors.rightMargin: -4
anchors.top: parent.top
anchors.topMargin: 12
anchors.right: parent.right
anchors.rightMargin: 12
radius: 8
color: hovered ? Style.current.backgroundHover : Style.current.transparent
@ -103,6 +108,7 @@ Popup {
Separator {
id: separator
anchors.top: headerContent.bottom
anchors.topMargin: visible ? Style.current.padding : 0
visible: title.length > 0
}

4
ui/shared/TextWithLabel.qml
View File

@ -12,7 +12,7 @@ Item {
property bool wrap: false
id: infoText
height: this.childrenRect.height
implicitHeight: this.childrenRect.height
width: parent.width
StyledText {
@ -30,7 +30,7 @@ Item {
font.family: fontFamily
readOnly: true
anchors.top: inputLabel.bottom
anchors.topMargin: 7
anchors.topMargin: 4
font.pixelSize: 15
wrapMode: infoText.wrap ? Text.WordWrap : Text.NoWrap
anchors.left: parent.left