matrixion/resources/qml/dialogs/UserProfile.qml

561 lines
21 KiB
QML
Raw Normal View History

// SPDX-FileCopyrightText: Nheko Contributors
//
2021-03-05 02:35:15 +03:00
// SPDX-License-Identifier: GPL-3.0-or-later
import ".."
import "../device-verification"
import "../ui"
2023-02-24 04:40:14 +03:00
import "../components"
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.2
import QtQuick.Window 2.13
2023-02-24 04:40:14 +03:00
import QtQml.Models 2.2
2020-05-22 08:47:02 +03:00
import im.nheko 1.0
2020-10-08 22:11:21 +03:00
ApplicationWindow {
id: userProfileDialog
property var profile
height: 650
width: 420
minimumWidth: 150
minimumHeight: 150
color: palette.window
2021-04-01 00:07:07 +03:00
title: profile.isGlobalUserProfile ? qsTr("Global User Profile") : qsTr("Room User Profile")
modality: Qt.NonModal
2021-08-19 17:55:54 +03:00
flags: Qt.Dialog | Qt.WindowCloseButtonHint | Qt.WindowTitleHint
2020-10-08 22:11:21 +03:00
2021-01-30 02:18:39 +03:00
Shortcut {
sequence: StandardKey.Cancel
onActivated: userProfileDialog.close()
}
ListView {
id: devicelist
2023-02-24 04:40:14 +03:00
property int selectedTab: 0
Layout.fillHeight: true
Layout.fillWidth: true
clip: true
spacing: 8
boundsBehavior: Flickable.StopAtBounds
anchors.fill: parent
anchors.margins: 10
footerPositioning: ListView.OverlayFooter
2020-10-08 22:11:21 +03:00
header: ColumnLayout {
id: contentL
width: devicelist.width
spacing: Nheko.paddingMedium
Avatar {
id: displayAvatar
url: profile.avatarUrl.replace("mxc://", "image://MxcImage/")
height: 130
width: 130
displayName: profile.displayName
userid: profile.userid
Layout.alignment: Qt.AlignHCenter
2022-05-10 04:19:53 +03:00
onClicked: TimelineManager.openImageOverlay(null, profile.avatarUrl, "", 0, 0)
ImageButton {
hoverEnabled: true
ToolTip.visible: hovered
ToolTip.text: profile.isGlobalUserProfile ? qsTr("Change avatar globally.") : qsTr("Change avatar. Will only apply to this room.")
anchors.left: displayAvatar.left
anchors.top: displayAvatar.top
anchors.leftMargin: Nheko.paddingMedium
anchors.topMargin: Nheko.paddingMedium
visible: profile.isSelf
2021-11-14 04:23:10 +03:00
image: ":/icons/icons/ui/edit.svg"
onClicked: profile.changeAvatar()
}
}
Spinner {
Layout.alignment: Qt.AlignHCenter
running: profile.isLoading
visible: profile.isLoading
foreground: palette.mid
}
2021-02-07 21:58:32 +03:00
Text {
id: errorText
2021-02-07 21:58:32 +03:00
color: "red"
visible: opacity > 0
opacity: 0
Layout.alignment: Qt.AlignHCenter
}
2021-02-07 21:58:32 +03:00
SequentialAnimation {
id: hideErrorAnimation
2021-02-07 21:58:32 +03:00
running: false
PauseAnimation {
duration: 4000
}
NumberAnimation {
target: errorText
property: 'opacity'
to: 0
duration: 1000
}
}
Connections {
function onDisplayError(errorMessage) {
errorText.text = errorMessage;
errorText.opacity = 1;
hideErrorAnimation.restart();
}
target: profile
}
TextInput {
id: displayUsername
property bool isUsernameEditingAllowed
readOnly: !isUsernameEditingAllowed
text: profile.displayName
font.pixelSize: 20
color: TimelineManager.userColor(profile.userid, palette.window)
font.bold: true
Layout.alignment: Qt.AlignHCenter
Layout.maximumWidth: parent.width - (Nheko.paddingSmall * 2) - usernameChangeButton.anchors.leftMargin - (usernameChangeButton.width * 2)
horizontalAlignment: TextInput.AlignHCenter
wrapMode: TextInput.Wrap
selectByMouse: true
onAccepted: {
profile.changeUsername(displayUsername.text);
displayUsername.isUsernameEditingAllowed = false;
}
2020-10-08 22:11:21 +03:00
ImageButton {
id: usernameChangeButton
visible: profile.isSelf
anchors.leftMargin: Nheko.paddingSmall
anchors.left: displayUsername.right
anchors.verticalCenter: displayUsername.verticalCenter
hoverEnabled: true
ToolTip.visible: hovered
ToolTip.text: profile.isGlobalUserProfile ? qsTr("Change display name globally.") : qsTr("Change display name. Will only apply to this room.")
2021-11-14 04:23:10 +03:00
image: displayUsername.isUsernameEditingAllowed ? ":/icons/icons/ui/checkmark.svg" : ":/icons/icons/ui/edit.svg"
onClicked: {
if (displayUsername.isUsernameEditingAllowed) {
profile.changeUsername(displayUsername.text);
displayUsername.isUsernameEditingAllowed = false;
} else {
displayUsername.isUsernameEditingAllowed = true;
displayUsername.focus = true;
displayUsername.selectAll();
}
}
}
2020-10-08 22:11:21 +03:00
}
MatrixText {
text: profile.userid
Layout.alignment: Qt.AlignHCenter
}
MatrixText {
id: statusMsg
text: qsTr("<i><b>Status:</b> %1</i>").arg(userStatus)
visible: userStatus != ""
Layout.fillWidth: true
horizontalAlignment: TextEdit.AlignHCenter
Layout.leftMargin: Nheko.paddingMedium
Layout.rightMargin: Nheko.paddingMedium
font.pointSize: Math.floor(fontMetrics.font.pointSize * 0.9)
property string userStatus: Presence.userStatus(profile.userid)
Connections {
target: Presence
function onPresenceChanged(id) {
if (id == profile.userid) statusMsg.userStatus = Presence.userStatus(profile.userid);
}
}
}
RowLayout {
visible: !profile.isGlobalUserProfile
Layout.alignment: Qt.AlignHCenter
spacing: Nheko.paddingSmall
MatrixText {
id: displayRoomname
text: qsTr("Room: %1").arg(profile.room ? profile.room.roomName : "")
ToolTip.text: qsTr("This is a room-specific profile. The user's name and avatar may be different from their global versions.")
ToolTip.visible: ma.hovered
Layout.maximumWidth: parent.parent.width - (parent.spacing * 3) - 16
horizontalAlignment: TextEdit.AlignHCenter
HoverHandler {
id: ma
}
}
ImageButton {
2021-11-14 04:23:10 +03:00
image: ":/icons/icons/ui/world.svg"
hoverEnabled: true
ToolTip.visible: hovered
ToolTip.text: qsTr("Open the global profile for this user.")
onClicked: profile.openGlobalProfile()
}
2020-10-08 22:11:21 +03:00
}
Button {
id: verifyUserButton
text: qsTr("Verify")
Layout.alignment: Qt.AlignHCenter
enabled: profile.userVerified != Crypto.Verified
visible: profile.userVerified != Crypto.Verified && !profile.isSelf && profile.userVerificationEnabled
onClicked: profile.verify()
}
EncryptionIndicator {
2023-04-04 20:29:08 +03:00
Layout.preferredHeight: 32
Layout.preferredWidth: 32
encrypted: profile.userVerificationEnabled
trust: profile.userVerified
Layout.alignment: Qt.AlignHCenter
ToolTip.visible: false
2020-10-08 22:11:21 +03:00
}
RowLayout {
// ImageButton{
2021-11-14 04:23:10 +03:00
// image:":/icons/icons/ui/volume-off-indicator.svg"
// Layout.margins: {
// left: 5
// right: 5
// }
// ToolTip.visible: hovered
// ToolTip.text: qsTr("Ignore messages from this user.")
// onClicked : {
// profile.ignoreUser()
// }
// }
Layout.alignment: Qt.AlignHCenter
Layout.bottomMargin: 10
spacing: Nheko.paddingSmall
ImageButton {
2023-04-04 20:29:08 +03:00
Layout.preferredHeight: 24
Layout.preferredWidth: 24
2021-11-14 04:23:10 +03:00
image: ":/icons/icons/ui/chat.svg"
hoverEnabled: true
ToolTip.visible: hovered
ToolTip.text: qsTr("Start a private chat.")
onClicked: profile.startChat()
}
ImageButton {
2023-04-04 20:29:08 +03:00
Layout.preferredHeight: 24
Layout.preferredWidth: 24
2021-11-14 04:23:10 +03:00
image: ":/icons/icons/ui/round-remove-button.svg"
hoverEnabled: true
ToolTip.visible: hovered
ToolTip.text: qsTr("Kick the user.")
onClicked: profile.kickUser()
visible: !profile.isGlobalUserProfile && profile.room.permissions.canKick()
}
ImageButton {
2023-04-04 20:29:08 +03:00
Layout.preferredHeight: 24
Layout.preferredWidth: 24
2021-11-14 04:23:10 +03:00
image: ":/icons/icons/ui/ban.svg"
hoverEnabled: true
ToolTip.visible: hovered
ToolTip.text: qsTr("Ban the user.")
onClicked: profile.banUser()
visible: !profile.isGlobalUserProfile && profile.room.permissions.canBan()
}
2023-07-28 04:04:34 +03:00
ImageButton {
Layout.preferredHeight: 24
Layout.preferredWidth: 24
image: ":/icons/icons/ui/volume-off-indicator.svg"
hoverEnabled: true
ToolTip.visible: hovered
ToolTip.text: profile.ignored ? qsTr("Unignore the user.") : qsTr("Ignore the user.")
buttonTextColor: profile.ignored ? Nheko.theme.red : palette.buttonText
onClicked: profile.ignored = !profile.ignored
visible: !profile.isSelf
2023-07-28 04:04:34 +03:00
}
ImageButton {
2023-04-04 20:29:08 +03:00
Layout.preferredHeight: 24
Layout.preferredWidth: 24
2021-11-14 04:23:10 +03:00
image: ":/icons/icons/ui/refresh.svg"
hoverEnabled: true
ToolTip.visible: hovered
ToolTip.text: qsTr("Refresh device list.")
onClicked: profile.refreshDevices()
}
2023-07-28 04:04:34 +03:00
ImageButton {
Layout.preferredHeight: 24
Layout.preferredWidth: 24
image: ":/icons/icons/ui/volume-off-indicator.svg"
hoverEnabled: true
ToolTip.visible: hovered
ToolTip.text: qsTr("Ignored users.")
onClicked: {
var component = Qt.createComponent("IgnoredUsers.qml")
if (component.status == Component.Ready) {
2023-09-08 00:10:04 +03:00
var window = component.createObject(userProfileDialog, { profile: profile})
2023-07-28 04:04:34 +03:00
window.show()
timelineRoot.destroyOnClose(window)
} else {
console.error("Failed to create component: " + component.errorString());
}
}
visible: profile.isSelf && profile.isGlobalUserProfile
}
}
2020-10-08 22:11:21 +03:00
2023-02-24 04:40:14 +03:00
TabBar {
id: tabbar
visible: !profile.isSelf
Layout.fillWidth: true
onCurrentIndexChanged: devicelist.selectedTab = currentIndex
NhekoTabButton {
text: qsTr("Devices")
}
NhekoTabButton {
text: qsTr("Shared Rooms")
}
Layout.bottomMargin: Nheko.paddingMedium
}
}
2020-10-08 22:11:21 +03:00
2023-02-24 04:40:14 +03:00
model: (selectedTab == 0) ? devicesModel : sharedRoomsModel
DelegateModel {
id: devicesModel
model: profile.deviceList
delegate: RowLayout {
required property int verificationStatus
required property string deviceId
required property string deviceName
required property string lastIp
required property var lastTs
width: devicelist.width
spacing: 4
ColumnLayout {
spacing: 0
Layout.leftMargin: Nheko.paddingMedium
Layout.rightMargin: Nheko.paddingMedium
RowLayout {
Text {
Layout.fillWidth: true
Layout.alignment: Qt.AlignLeft
elide: Text.ElideRight
font.bold: true
color: palette.text
2023-02-24 04:40:14 +03:00
text: deviceId
}
2023-02-24 04:40:14 +03:00
Image {
Layout.preferredHeight: 16
Layout.preferredWidth: 16
visible: profile.isSelf && verificationStatus != VerificationStatus.NOT_APPLICABLE
sourceSize.height: 16 * Screen.devicePixelRatio
sourceSize.width: 16 * Screen.devicePixelRatio
source: {
switch (verificationStatus) {
case VerificationStatus.VERIFIED:
return "image://colorimage/:/icons/icons/ui/shield-filled-checkmark.svg?" + Nheko.theme.green;
case VerificationStatus.UNVERIFIED:
return "image://colorimage/:/icons/icons/ui/shield-filled-exclamation-mark.svg?" + Nheko.theme.orange;
case VerificationStatus.SELF:
return "image://colorimage/:/icons/icons/ui/checkmark.svg?" + Nheko.theme.green;
default:
return "image://colorimage/:/icons/icons/ui/shield-filled-cross.svg?" + Nheko.theme.orange;
}
}
}
2023-02-24 04:40:14 +03:00
ImageButton {
Layout.alignment: Qt.AlignTop
image: ":/icons/icons/ui/power-off.svg"
hoverEnabled: true
ToolTip.visible: hovered
ToolTip.text: qsTr("Sign out this device.")
onClicked: profile.signOutDevice(deviceId)
visible: profile.isSelf
}
}
RowLayout {
id: deviceNameRow
property bool isEditingAllowed
TextInput {
id: deviceNameField
readOnly: !deviceNameRow.isEditingAllowed
text: deviceName
color: palette.text
2023-02-24 04:40:14 +03:00
Layout.alignment: Qt.AlignLeft
Layout.fillWidth: true
selectByMouse: true
onAccepted: {
profile.changeDeviceName(deviceId, deviceNameField.text);
deviceNameRow.isEditingAllowed = false;
}
}
ImageButton {
visible: profile.isSelf
hoverEnabled: true
ToolTip.visible: hovered
ToolTip.text: qsTr("Change device name.")
image: deviceNameRow.isEditingAllowed ? ":/icons/icons/ui/checkmark.svg" : ":/icons/icons/ui/edit.svg"
onClicked: {
if (deviceNameRow.isEditingAllowed) {
profile.changeDeviceName(deviceId, deviceNameField.text);
deviceNameRow.isEditingAllowed = false;
} else {
deviceNameRow.isEditingAllowed = true;
deviceNameField.focus = true;
deviceNameField.selectAll();
}
}
}
}
Text {
2023-02-24 04:40:14 +03:00
visible: profile.isSelf
Layout.fillWidth: true
Layout.alignment: Qt.AlignLeft
elide: Text.ElideRight
color: palette.text
2023-02-24 04:40:14 +03:00
text: qsTr("Last seen %1 from %2").arg(new Date(lastTs).toLocaleString(Locale.ShortFormat)).arg(lastIp ? lastIp : "???")
}
2023-02-24 04:40:14 +03:00
}
Image {
Layout.preferredHeight: 16
Layout.preferredWidth: 16
visible: !profile.isSelf && verificationStatus != VerificationStatus.NOT_APPLICABLE
source: {
switch (verificationStatus) {
case VerificationStatus.VERIFIED:
2023-02-24 04:40:14 +03:00
return "image://colorimage/:/icons/icons/ui/shield-filled-checkmark.svg?" + Nheko.theme.green;
case VerificationStatus.UNVERIFIED:
2023-02-24 04:40:14 +03:00
return "image://colorimage/:/icons/icons/ui/shield-filled-exclamation-mark.svg?" + Nheko.theme.orange;
case VerificationStatus.SELF:
2023-02-24 04:40:14 +03:00
return "image://colorimage/:/icons/icons/ui/checkmark.svg?" + Nheko.theme.green;
default:
2023-02-24 04:40:14 +03:00
return "image://colorimage/:/icons/icons/ui/shield-filled.svg?" + Nheko.theme.red;
}
}
2023-02-24 04:40:14 +03:00
}
2023-02-24 04:40:14 +03:00
Button {
id: verifyButton
2023-02-24 04:40:14 +03:00
visible: verificationStatus == VerificationStatus.UNVERIFIED && (profile.isSelf || !profile.userVerificationEnabled)
text: (verificationStatus != VerificationStatus.VERIFIED) ? qsTr("Verify") : qsTr("Unverify")
onClicked: {
if (verificationStatus == VerificationStatus.VERIFIED)
profile.unverify(deviceId);
else
profile.verify(deviceId);
}
}
2023-02-24 04:40:14 +03:00
}
}
2023-02-24 04:40:14 +03:00
DelegateModel {
id: sharedRoomsModel
model: profile.sharedRooms
delegate: RowLayout {
required property string roomId
required property string roomName
required property string avatarUrl
2023-02-24 04:40:14 +03:00
width: devicelist.width
spacing: 4
2023-02-24 04:40:14 +03:00
Avatar {
id: avatar
2023-02-24 04:40:14 +03:00
enabled: false
Layout.alignment: Qt.AlignVCenter
Layout.leftMargin: Nheko.paddingMedium
2020-10-08 22:11:21 +03:00
2023-02-24 04:40:14 +03:00
property int avatarSize: Math.ceil(fontMetrics.lineSpacing * 1.6)
height: avatarSize
width: avatarSize
url: avatarUrl.replace("mxc://", "image://MxcImage/")
roomid: roomId
displayName: roomName
2020-10-08 22:11:21 +03:00
}
2023-02-24 04:40:14 +03:00
ElidedLabel {
Layout.alignment: Qt.AlignVCenter
color: palette.text
2023-02-24 04:40:14 +03:00
Layout.fillWidth: true
elideWidth: width
fullText: roomName
textFormat: Text.PlainText
Layout.rightMargin: Nheko.paddingMedium
}
2023-02-24 04:40:14 +03:00
Item {
Layout.fillWidth: true
}
2020-10-08 22:11:21 +03:00
}
}
footer: DialogButtonBox {
z: 2
width: devicelist.width
alignment: Qt.AlignRight
standardButtons: DialogButtonBox.Ok
onAccepted: userProfileDialog.close()
background: Rectangle {
anchors.fill: parent
color: palette.window
}
}
2020-10-08 22:11:21 +03:00
}
2020-05-17 16:34:47 +03:00
}