Skip to content
Snippets Groups Projects
Commit 2656769a authored by Capucine Berthet's avatar Capucine Berthet Committed by Sébastien Blin
Browse files

UserProfile popup: new design 

GitLab: #1417
Change-Id: I1801f0e92e43679548ceb5be84041cba96ed7519
parent 86c1bf83
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/app/mainview/components/UserProfile.qml
+ 137
− 121
View file @ 2656769a
......@@ -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
}
}
}
}
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment