diff --git a/ui/app/AppLayouts/Chat/ChatLayout.qml b/ui/app/AppLayouts/Chat/ChatLayout.qml index e36060aac0..eb54353830 100644 --- a/ui/app/AppLayouts/Chat/ChatLayout.qml +++ b/ui/app/AppLayouts/Chat/ChatLayout.qml @@ -102,7 +102,7 @@ SplitView { property Component profilePopupComponent: ProfilePopup { id: profilePopup - height: 450 + height: 504 onClosed: { if(profilePopup.parentPopup){ profilePopup.parentPopup.close(); diff --git a/ui/app/AppLayouts/Chat/components/NicknamePopup.qml b/ui/app/AppLayouts/Chat/components/NicknamePopup.qml index ad42cc4629..f05de9caff 100644 --- a/ui/app/AppLayouts/Chat/components/NicknamePopup.qml +++ b/ui/app/AppLayouts/Chat/components/NicknamePopup.qml @@ -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 { diff --git a/ui/app/AppLayouts/Chat/components/ProfilePopup.qml b/ui/app/AppLayouts/Chat/components/ProfilePopup.qml index 8d5afd8b2e..318e3419fb 100644 --- a/ui/app/AppLayouts/Chat/components/ProfilePopup.qml +++ b/ui/app/AppLayouts/Chat/components/ProfilePopup.qml @@ -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); + } + } } } diff --git a/ui/shared/Address.qml b/ui/shared/Address.qml index 601ed3ead9..758d601bee 100644 --- a/ui/shared/Address.qml +++ b/ui/shared/Address.qml @@ -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 } diff --git a/ui/shared/ModalPopup.qml b/ui/shared/ModalPopup.qml index 44845832cf..e3250f8f4e 100644 --- a/ui/shared/ModalPopup.qml +++ b/ui/shared/ModalPopup.qml @@ -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 } diff --git a/ui/shared/TextWithLabel.qml b/ui/shared/TextWithLabel.qml index 0928d63b92..9871d14dff 100644 --- a/ui/shared/TextWithLabel.qml +++ b/ui/shared/TextWithLabel.qml @@ -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