mirror of
https://git.jami.net/savoirfairelinux/jami-client-qt.git
synced 2025-08-04 23:05:48 +02:00
UserProfile popup: new design
GitLab: #1417 Change-Id: I1801f0e92e43679548ceb5be84041cba96ed7519
This commit is contained in:
cberthet
Sébastien Blin
parent
86c1bf8373
commit
2656769a59
1 changed files with 156 additions and 140 deletions
|
|
@ -17,6 +17,7 @@
|
||||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
*/
|
*/
|
||||||
import QtQuick
|
import QtQuick
|
||||||
|
import QtQuick.Controls
|
||||||
import QtQuick.Layouts
|
import QtQuick.Layouts
|
||||||
import net.jami.Constants 1.1
|
import net.jami.Constants 1.1
|
||||||
import "../../commoncomponents"
|
import "../../commoncomponents"
|
||||||
|
|
@ -31,21 +32,56 @@ BaseModalDialog {
|
||||||
|
|
||||||
property int preferredImgSize: 80
|
property int preferredImgSize: 80
|
||||||
|
|
||||||
popupContent: GridLayout {
|
title: JamiStrings.contactDetails
|
||||||
|
|
||||||
|
popupContent: Rectangle {
|
||||||
|
color: JamiTheme.backgroundRectangleColor
|
||||||
|
width: userProfileDialogLayout.width + 20
|
||||||
|
height: userProfileDialogLayout.height + 10
|
||||||
|
radius: 5
|
||||||
|
|
||||||
|
Rectangle{
|
||||||
|
id: qrImageBackground
|
||||||
|
radius: 5
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.top: parent.top
|
||||||
|
anchors.rightMargin: 10
|
||||||
|
anchors.topMargin: 10
|
||||||
|
width: 90
|
||||||
|
height: 90
|
||||||
|
|
||||||
|
Image {
|
||||||
|
id: contactQrImage
|
||||||
|
|
||||||
|
anchors.centerIn: parent
|
||||||
|
horizontalAlignment: Image.AlignRight
|
||||||
|
fillMode: Image.PreserveAspectFit
|
||||||
|
|
||||||
|
sourceSize.width: preferredImgSize
|
||||||
|
sourceSize.height: preferredImgSize
|
||||||
|
|
||||||
|
mipmap: false
|
||||||
|
smooth: false
|
||||||
|
|
||||||
|
source: convId !== "" ? "image://qrImage/contact_" + convId : "image://qrImage/contact_" + idText
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ColumnLayout {
|
||||||
id: userProfileDialogLayout
|
id: userProfileDialogLayout
|
||||||
|
|
||||||
anchors.margins: JamiTheme.preferredMarginSize
|
width: Math.min(root.width, 400)
|
||||||
width: JamiTheme.secondaryDialogDimension
|
spacing: 10
|
||||||
|
|
||||||
columns: 2
|
RowLayout {
|
||||||
rows: 6
|
Layout.margins: 10
|
||||||
rowSpacing: 16
|
|
||||||
columnSpacing: 24
|
Layout.fillWidth: true
|
||||||
|
spacing: 10
|
||||||
|
|
||||||
Avatar {
|
Avatar {
|
||||||
id: contactImage
|
id: contactImage
|
||||||
|
|
||||||
Layout.alignment: Qt.AlignRight
|
|
||||||
Layout.preferredWidth: preferredImgSize
|
Layout.preferredWidth: preferredImgSize
|
||||||
Layout.preferredHeight: preferredImgSize
|
Layout.preferredHeight: preferredImgSize
|
||||||
|
|
||||||
|
|
@ -54,23 +90,25 @@ BaseModalDialog {
|
||||||
mode: convId !== "" ? Avatar.Mode.Conversation : Avatar.Mode.Contact
|
mode: convId !== "" ? Avatar.Mode.Conversation : Avatar.Mode.Contact
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ColumnLayout {
|
||||||
|
spacing: 10
|
||||||
|
Layout.alignment: Qt.AlignLeft
|
||||||
|
|
||||||
// Visible when user alias is not empty and not equal to id.
|
// Visible when user alias is not empty and not equal to id.
|
||||||
TextEdit {
|
TextEdit {
|
||||||
id: contactAlias
|
id: contactAlias
|
||||||
|
|
||||||
Layout.alignment: Qt.AlignLeft
|
Layout.alignment: Qt.AlignLeft
|
||||||
|
font.pointSize: JamiTheme.settingsFontSize
|
||||||
font.pointSize: JamiTheme.titleFontSize
|
|
||||||
font.kerning: true
|
font.kerning: true
|
||||||
|
|
||||||
color: JamiTheme.textColor
|
color: JamiTheme.textColor
|
||||||
visible: aliasText ? (aliasText === idText ? false : true) : false
|
visible: aliasText ? (aliasText === idText ? false : true) : false
|
||||||
|
|
||||||
selectByMouse: true
|
selectByMouse: true
|
||||||
readOnly: true
|
readOnly: true
|
||||||
|
|
||||||
wrapMode: Text.NoWrap
|
|
||||||
text: textMetricsContactAliasText.elidedText
|
text: textMetricsContactAliasText.elidedText
|
||||||
|
|
||||||
horizontalAlignment: Text.AlignLeft
|
horizontalAlignment: Text.AlignLeft
|
||||||
verticalAlignment: Text.AlignVCenter
|
verticalAlignment: Text.AlignVCenter
|
||||||
|
|
||||||
|
|
@ -78,52 +116,26 @@ BaseModalDialog {
|
||||||
id: textMetricsContactAliasText
|
id: textMetricsContactAliasText
|
||||||
font: contactAlias.font
|
font: contactAlias.font
|
||||||
text: aliasText
|
text: aliasText
|
||||||
elideWidth: root.width - 200
|
elideWidth: userProfileDialogLayout.width - qrImageBackground.width - 100
|
||||||
elide: Qt.ElideMiddle
|
elide: Qt.ElideRight
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Item {
|
|
||||||
Layout.columnSpan: 2
|
|
||||||
height: 8
|
|
||||||
}
|
|
||||||
|
|
||||||
Text {
|
|
||||||
Layout.alignment: Qt.AlignRight
|
|
||||||
font.pointSize: JamiTheme.menuFontSize
|
|
||||||
text: JamiStrings.information
|
|
||||||
color: JamiTheme.textColor
|
|
||||||
}
|
|
||||||
|
|
||||||
Item {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
}
|
|
||||||
|
|
||||||
Text {
|
|
||||||
Layout.alignment: Qt.AlignRight
|
|
||||||
font.pointSize: JamiTheme.textFontSize
|
|
||||||
text: JamiStrings.username
|
|
||||||
visible: contactDisplayName.visible
|
|
||||||
color: JamiTheme.faddedFontColor
|
|
||||||
}
|
|
||||||
|
|
||||||
// Visible when user name is not empty or equals to id.
|
// Visible when user name is not empty or equals to id.
|
||||||
TextEdit {
|
TextEdit {
|
||||||
id: contactDisplayName
|
id: contactDisplayName
|
||||||
|
|
||||||
Layout.alignment: Qt.AlignLeft
|
Layout.alignment: Qt.AlignLeft
|
||||||
|
|
||||||
font.pointSize: JamiTheme.textFontSize
|
font.pointSize: JamiTheme.textFontSize
|
||||||
font.kerning: true
|
font.kerning: true
|
||||||
color: JamiTheme.textColor
|
|
||||||
visible: registeredNameText ? (registeredNameText === idText ? false : true) : false
|
|
||||||
|
|
||||||
|
color: JamiTheme.faddedFontColor
|
||||||
|
visible: registeredNameText ? (registeredNameText === aliasText ? false : true) : false
|
||||||
readOnly: true
|
readOnly: true
|
||||||
selectByMouse: true
|
|
||||||
|
|
||||||
|
selectByMouse: true
|
||||||
wrapMode: Text.NoWrap
|
wrapMode: Text.NoWrap
|
||||||
text: textMetricsContactDisplayNameText.elidedText
|
text: textMetricsContactDisplayNameText.elidedText
|
||||||
|
|
||||||
horizontalAlignment: Text.AlignLeft
|
horizontalAlignment: Text.AlignLeft
|
||||||
verticalAlignment: Text.AlignVCenter
|
verticalAlignment: Text.AlignVCenter
|
||||||
|
|
||||||
|
|
@ -135,54 +147,58 @@ BaseModalDialog {
|
||||||
elide: Qt.ElideMiddle
|
elide: Qt.ElideMiddle
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
Layout.preferredWidth: parent.width
|
||||||
|
Layout.alignment: Qt.AlignHCenter
|
||||||
|
radius: 5
|
||||||
|
|
||||||
|
color: root.backgroundColor
|
||||||
|
|
||||||
|
Layout.preferredHeight: contactId.height + 20
|
||||||
|
Layout.leftMargin: 10
|
||||||
|
|
||||||
|
|
||||||
|
RowLayout {
|
||||||
|
id: idLayout
|
||||||
|
anchors.centerIn: parent
|
||||||
|
anchors.fill: parent
|
||||||
|
|
||||||
|
spacing: 15
|
||||||
|
|
||||||
Text {
|
Text {
|
||||||
id: identifierText
|
id: identifierText
|
||||||
Layout.alignment: Qt.AlignRight
|
|
||||||
font.pointSize: JamiTheme.textFontSize
|
font.pointSize: JamiTheme.textFontSize
|
||||||
text: JamiStrings.identifier
|
text: JamiStrings.identifier
|
||||||
color: JamiTheme.faddedFontColor
|
color: JamiTheme.faddedFontColor
|
||||||
|
|
||||||
|
horizontalAlignment: Text.AlignLeft
|
||||||
|
verticalAlignment: Text.AlignVCenter
|
||||||
|
Layout.leftMargin: 10
|
||||||
}
|
}
|
||||||
|
|
||||||
TextEdit {
|
Label {
|
||||||
id: contactId
|
id: contactId
|
||||||
|
|
||||||
Layout.alignment: Qt.AlignLeft
|
Layout.alignment: Qt.AlignLeft
|
||||||
Layout.preferredWidth: root.width - 250
|
Layout.preferredWidth: parent.width - identifierText.width - 35
|
||||||
Layout.rightMargin: JamiTheme.preferredMarginSize
|
|
||||||
font.pointSize: JamiTheme.textFontSize
|
font.pointSize: JamiTheme.textFontSize
|
||||||
font.kerning: true
|
font.kerning: true
|
||||||
color: JamiTheme.textColor
|
color: JamiTheme.textColor
|
||||||
|
|
||||||
readOnly: true
|
elide: Text.ElideRight
|
||||||
selectByMouse: true
|
|
||||||
|
|
||||||
wrapMode: Text.Wrap
|
|
||||||
text: idText
|
text: idText
|
||||||
|
|
||||||
horizontalAlignment: Text.AlignLeft
|
horizontalAlignment: Text.AlignLeft
|
||||||
verticalAlignment: Text.AlignVCenter
|
verticalAlignment: Text.AlignVCenter
|
||||||
}
|
}
|
||||||
|
}
|
||||||
Text {
|
}
|
||||||
Layout.alignment: Qt.AlignRight
|
|
||||||
font.pointSize: JamiTheme.textFontSize
|
|
||||||
text: JamiStrings.qrCode
|
|
||||||
color: JamiTheme.faddedFontColor
|
|
||||||
}
|
|
||||||
|
|
||||||
Image {
|
|
||||||
id: contactQrImage
|
|
||||||
|
|
||||||
Layout.alignment: Qt.AlignLeft
|
|
||||||
|
|
||||||
fillMode: Image.PreserveAspectFit
|
|
||||||
sourceSize.width: preferredImgSize
|
|
||||||
sourceSize.height: preferredImgSize
|
|
||||||
mipmap: false
|
|
||||||
smooth: false
|
|
||||||
|
|
||||||
source: convId !== "" ? "image://qrImage/contact_" + convId : "image://qrImage/contact_" + idText
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue