From 2656769a59606a53d83f01b8ec049a559f42f83a Mon Sep 17 00:00:00 2001
From: cberthet <capucine.berthet@savoirfairelinux.com>
Date: Wed, 8 Nov 2023 10:45:46 -0500
Subject: [PATCH] UserProfile popup: new design
GitLab: #1417
Change-Id: I1801f0e92e43679548ceb5be84041cba96ed7519
---
src/app/mainview/components/UserProfile.qml | 258 +++++++++++---------
1 file changed, 137 insertions(+), 121 deletions(-)
diff --git a/src/app/mainview/components/UserProfile.qml b/src/app/mainview/components/UserProfile.qml
index 2f8235c51..22f0afad7 100644
--- a/src/app/mainview/components/UserProfile.qml
+++ b/src/app/mainview/components/UserProfile.qml
@@ -17,6 +17,7 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import QtQuick
+import QtQuick.Controls
import QtQuick.Layouts
import net.jami.Constants 1.1
import "../../commoncomponents"
@@ -31,159 +32,174 @@ BaseModalDialog {
property int preferredImgSize: 80
- popupContent: GridLayout {
- id: userProfileDialogLayout
-
- anchors.margins: JamiTheme.preferredMarginSize
- width: JamiTheme.secondaryDialogDimension
-
- columns: 2
- rows: 6
- rowSpacing: 16
- columnSpacing: 24
-
- Avatar {
- id: contactImage
-
- Layout.alignment: Qt.AlignRight
- Layout.preferredWidth: preferredImgSize
- Layout.preferredHeight: preferredImgSize
+ title: JamiStrings.contactDetails
- imageId: convId !== "" ? convId : idText
- showPresenceIndicator: false
- mode: convId !== "" ? Avatar.Mode.Conversation : Avatar.Mode.Contact
- }
-
- // Visible when user alias is not empty and not equal to id.
- TextEdit {
- id: contactAlias
+ popupContent: Rectangle {
+ color: JamiTheme.backgroundRectangleColor
+ width: userProfileDialogLayout.width + 20
+ height: userProfileDialogLayout.height + 10
+ radius: 5
- Layout.alignment: Qt.AlignLeft
+ Rectangle{
+ id: qrImageBackground
+ radius: 5
+ anchors.right: parent.right
+ anchors.top: parent.top
+ anchors.rightMargin: 10
+ anchors.topMargin: 10
+ width: 90
+ height: 90
- font.pointSize: JamiTheme.titleFontSize
- font.kerning: true
- color: JamiTheme.textColor
- visible: aliasText ? (aliasText === idText ? false : true) : false
+ Image {
+ id: contactQrImage
- selectByMouse: true
- readOnly: true
+ anchors.centerIn: parent
+ horizontalAlignment: Image.AlignRight
+ fillMode: Image.PreserveAspectFit
- wrapMode: Text.NoWrap
- text: textMetricsContactAliasText.elidedText
+ sourceSize.width: preferredImgSize
+ sourceSize.height: preferredImgSize
- horizontalAlignment: Text.AlignLeft
- verticalAlignment: Text.AlignVCenter
+ mipmap: false
+ smooth: false
- TextMetrics {
- id: textMetricsContactAliasText
- font: contactAlias.font
- text: aliasText
- elideWidth: root.width - 200
- elide: Qt.ElideMiddle
- }
+ source: convId !== "" ? "image://qrImage/contact_" + convId : "image://qrImage/contact_" + idText
}
+ }
- Item {
- Layout.columnSpan: 2
- height: 8
- }
+ ColumnLayout {
+ id: userProfileDialogLayout
- Text {
- Layout.alignment: Qt.AlignRight
- font.pointSize: JamiTheme.menuFontSize
- text: JamiStrings.information
- color: JamiTheme.textColor
- }
+ width: Math.min(root.width, 400)
+ spacing: 10
+
+ RowLayout {
+ Layout.margins: 10
- Item {
Layout.fillWidth: true
- }
+ spacing: 10
- Text {
- Layout.alignment: Qt.AlignRight
- font.pointSize: JamiTheme.textFontSize
- text: JamiStrings.username
- visible: contactDisplayName.visible
- color: JamiTheme.faddedFontColor
- }
+ Avatar {
+ id: contactImage
- // Visible when user name is not empty or equals to id.
- TextEdit {
- id: contactDisplayName
+ Layout.preferredWidth: preferredImgSize
+ Layout.preferredHeight: preferredImgSize
- Layout.alignment: Qt.AlignLeft
+ imageId: convId !== "" ? convId : idText
+ showPresenceIndicator: false
+ mode: convId !== "" ? Avatar.Mode.Conversation : Avatar.Mode.Contact
+ }
- font.pointSize: JamiTheme.textFontSize
- font.kerning: true
- color: JamiTheme.textColor
- visible: registeredNameText ? (registeredNameText === idText ? false : true) : false
+ ColumnLayout {
+ spacing: 10
+ Layout.alignment: Qt.AlignLeft
+
+ // Visible when user alias is not empty and not equal to id.
+ TextEdit {
+ id: contactAlias
+
+ Layout.alignment: Qt.AlignLeft
+ font.pointSize: JamiTheme.settingsFontSize
+ font.kerning: true
+
+ color: JamiTheme.textColor
+ visible: aliasText ? (aliasText === idText ? false : true) : false
+
+ selectByMouse: true
+ readOnly: true
+
+ text: textMetricsContactAliasText.elidedText
+ horizontalAlignment: Text.AlignLeft
+ verticalAlignment: Text.AlignVCenter
+
+ TextMetrics {
+ id: textMetricsContactAliasText
+ font: contactAlias.font
+ text: aliasText
+ elideWidth: userProfileDialogLayout.width - qrImageBackground.width - 100
+ elide: Qt.ElideRight
+ }
+ }
+
+ // Visible when user name is not empty or equals to id.
+ TextEdit {
+ id: contactDisplayName
+
+ Layout.alignment: Qt.AlignLeft
+ font.pointSize: JamiTheme.textFontSize
+ font.kerning: true
+
+ color: JamiTheme.faddedFontColor
+ visible: registeredNameText ? (registeredNameText === aliasText ? false : true) : false
+ readOnly: true
+
+ selectByMouse: true
+ wrapMode: Text.NoWrap
+ text: textMetricsContactDisplayNameText.elidedText
+ horizontalAlignment: Text.AlignLeft
+ verticalAlignment: Text.AlignVCenter
+
+ TextMetrics {
+ id: textMetricsContactDisplayNameText
+ font: contactDisplayName.font
+ text: registeredNameText
+ elideWidth: root.width - 200
+ elide: Qt.ElideMiddle
+ }
+ }
+ }
+ }
- readOnly: true
- selectByMouse: true
- wrapMode: Text.NoWrap
- text: textMetricsContactDisplayNameText.elidedText
- horizontalAlignment: Text.AlignLeft
- verticalAlignment: Text.AlignVCenter
+ Rectangle {
+ Layout.preferredWidth: parent.width
+ Layout.alignment: Qt.AlignHCenter
+ radius: 5
- TextMetrics {
- id: textMetricsContactDisplayNameText
- font: contactDisplayName.font
- text: registeredNameText
- elideWidth: root.width - 200
- elide: Qt.ElideMiddle
- }
- }
+ color: root.backgroundColor
- Text {
- id: identifierText
- Layout.alignment: Qt.AlignRight
- font.pointSize: JamiTheme.textFontSize
- text: JamiStrings.identifier
- color: JamiTheme.faddedFontColor
- }
+ Layout.preferredHeight: contactId.height + 20
+ Layout.leftMargin: 10
- TextEdit {
- id: contactId
- Layout.alignment: Qt.AlignLeft
- Layout.preferredWidth: root.width - 250
- Layout.rightMargin: JamiTheme.preferredMarginSize
- font.pointSize: JamiTheme.textFontSize
- font.kerning: true
- color: JamiTheme.textColor
+ RowLayout {
+ id: idLayout
+ anchors.centerIn: parent
+ anchors.fill: parent
- readOnly: true
- selectByMouse: true
+ spacing: 15
- wrapMode: Text.Wrap
- text: idText
+ Text {
+ id: identifierText
- horizontalAlignment: Text.AlignLeft
- verticalAlignment: Text.AlignVCenter
- }
+ font.pointSize: JamiTheme.textFontSize
+ text: JamiStrings.identifier
+ color: JamiTheme.faddedFontColor
- Text {
- Layout.alignment: Qt.AlignRight
- font.pointSize: JamiTheme.textFontSize
- text: JamiStrings.qrCode
- color: JamiTheme.faddedFontColor
- }
+ horizontalAlignment: Text.AlignLeft
+ verticalAlignment: Text.AlignVCenter
+ Layout.leftMargin: 10
+ }
- Image {
- id: contactQrImage
+ Label {
+ id: contactId
+ Layout.alignment: Qt.AlignLeft
+ Layout.preferredWidth: parent.width - identifierText.width - 35
- Layout.alignment: Qt.AlignLeft
+ font.pointSize: JamiTheme.textFontSize
+ font.kerning: true
+ color: JamiTheme.textColor
- fillMode: Image.PreserveAspectFit
- sourceSize.width: preferredImgSize
- sourceSize.height: preferredImgSize
- mipmap: false
- smooth: false
+ elide: Text.ElideRight
+ text: idText
- source: convId !== "" ? "image://qrImage/contact_" + convId : "image://qrImage/contact_" + idText
+ horizontalAlignment: Text.AlignLeft
+ verticalAlignment: Text.AlignVCenter
+ }
+ }
}
}
}
+}
--
GitLab