matrixion/resources/qml/UserProfile.qml

// SPDX-FileCopyrightText: 2021 Nheko Contributors
//
// SPDX-License-Identifier: GPL-3.0-or-later

import "./device-verification"
import "./ui"
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.2
import QtQuick.Window 2.13
import im.nheko 1.0

ApplicationWindow {
    // this does not work in ApplicationWindow, just in Window
    //transientParent: Nheko.mainwindow()

    id: userProfileDialog

    property var profile

    height: 650
    width: 420
    minimumWidth: 150
    minimumHeight: 420
    palette: Nheko.colors
    color: Nheko.colors.window
    title: profile.isGlobalUserProfile ? qsTr("Global User Profile") : qsTr("Room User Profile")
    modality: Qt.NonModal
    flags: Qt.Dialog | Qt.WindowCloseButtonHint | Qt.WindowTitleHint
    Component.onCompleted: Nheko.reparent(userProfileDialog)

    Shortcut {
        sequence: StandardKey.Cancel
        onActivated: userProfileDialog.close()
    }

    ColumnLayout {
        id: contentL

        anchors.fill: parent
        anchors.margins: 10
        spacing: 10

        Avatar {
            url: profile.avatarUrl.replace("mxc://", "image://MxcImage/")
            height: 130
            width: 130
            displayName: profile.displayName
            id: displayAvatar
            userid: profile.userid
            Layout.alignment: Qt.AlignHCenter
            onClicked: TimelineManager.openImageOverlay(profile.avatarUrl, "")

            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
                image: ":/icons/icons/ui/edit.png"
                onClicked: profile.changeAvatar()
            }
        }

        Spinner {
            Layout.alignment: Qt.AlignHCenter
            running: profile.isLoading
            visible: profile.isLoading
            foreground: Nheko.colors.mid
        }

        Text {
            id: errorText

            color: "red"
            visible: opacity > 0
            opacity: 0
            Layout.alignment: Qt.AlignHCenter
        }

        SequentialAnimation {
            id: hideErrorAnimation

            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, Nheko.colors.window)
            font.bold: true
            Layout.alignment: Qt.AlignHCenter
            selectByMouse: true
            onAccepted: {
                profile.changeUsername(displayUsername.text);
                displayUsername.isUsernameEditingAllowed = false;
            }

            ImageButton {
                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.")
                image: displayUsername.isUsernameEditingAllowed ? ":/icons/icons/ui/checkmark.png" : ":/icons/icons/ui/edit.png"
                onClicked: {
                    if (displayUsername.isUsernameEditingAllowed) {
                        profile.changeUsername(displayUsername.text);
                        displayUsername.isUsernameEditingAllowed = false;
                    } else {
                        displayUsername.isUsernameEditingAllowed = true;
                        displayUsername.focus = true;
                        displayUsername.selectAll();
                    }
                }
            }

        }

        MatrixText {
            text: profile.userid
            font.pixelSize: 15
            Layout.alignment: Qt.AlignHCenter
        }

        MatrixText {
            id: displayRoomname
            text: qsTr("Room: %1").arg(profile.room.roomName)
            Layout.alignment: Qt.AlignHCenter
            visible: !profile.isGlobalUserProfile
            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
            HoverHandler {
                id: ma
            }

            ImageButton {
                anchors.leftMargin: Nheko.paddingSmall
                anchors.left: displayRoomname.right
                anchors.verticalCenter: displayRoomname.verticalCenter
                image: ":/icons/icons/ui/world.png"
                hoverEnabled: true
                ToolTip.visible: hovered
                ToolTip.text: qsTr("Open the global profile for this user.")
                onClicked: profile.openGlobalProfile()
                visible: !profile.isGlobalUserProfile
            }
        }

        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()
        }

        Image {
            Layout.preferredHeight: 16
            Layout.preferredWidth: 16
            source: "image://colorimage/:/icons/icons/ui/lock.png?" + ((profile.userVerified == Crypto.Verified) ? "green" : Nheko.colors.buttonText)
            visible: profile.userVerified != Crypto.Unverified
            Layout.alignment: Qt.AlignHCenter
        }

        RowLayout {
            // ImageButton{
            //     image:":/icons/icons/ui/volume-off-indicator.png"
            //     Layout.margins: {
            //         left: 5
            //         right: 5
            //     }
            //     ToolTip.visible: hovered
            //     ToolTip.text: qsTr("Ignore messages from this user.")
            //     onClicked : {
            //         profile.ignoreUser()
            //     }
            // }

            Layout.alignment: Qt.AlignHCenter
            spacing: 8

            ImageButton {
                image: ":/icons/icons/ui/black-bubble-speech.png"
                hoverEnabled: true
                ToolTip.visible: hovered
                ToolTip.text: qsTr("Start a private chat.")
                onClicked: profile.startChat()
            }

            ImageButton {
                image: ":/icons/icons/ui/round-remove-button.png"
                hoverEnabled: true
                ToolTip.visible: hovered
                ToolTip.text: qsTr("Kick the user.")
                onClicked: profile.kickUser()
                visible: !profile.isGlobalUserProfile && profile.room.permissions.canKick()
            }

            ImageButton {
                image: ":/icons/icons/ui/do-not-disturb-rounded-sign.png"
                hoverEnabled: true
                ToolTip.visible: hovered
                ToolTip.text: qsTr("Ban the user.")
                onClicked: profile.banUser()
                visible: !profile.isGlobalUserProfile && profile.room.permissions.canBan()
            }

        }

        ListView {
            id: devicelist

            Layout.fillHeight: true
            Layout.minimumHeight: 200
            Layout.fillWidth: true
            clip: true
            spacing: 8
            boundsBehavior: Flickable.StopAtBounds
            model: profile.deviceList

            delegate: RowLayout {
                width: devicelist.width
                spacing: 4

                ColumnLayout {
                    spacing: 0

                    Text {
                        Layout.fillWidth: true
                        Layout.alignment: Qt.AlignLeft
                        elide: Text.ElideRight
                        font.bold: true
                        color: Nheko.colors.text
                        text: model.deviceId
                    }

                    Text {
                        Layout.fillWidth: true
                        Layout.alignment: Qt.AlignRight
                        elide: Text.ElideRight
                        color: Nheko.colors.text
                        text: model.deviceName
                    }

                }

                Image {
                    Layout.preferredHeight: 16
                    Layout.preferredWidth: 16
                    source: ((model.verificationStatus == VerificationStatus.VERIFIED) ? "image://colorimage/:/icons/icons/ui/lock.png?green" : ((model.verificationStatus == VerificationStatus.UNVERIFIED) ? "image://colorimage/:/icons/icons/ui/unlock.png?yellow" : "image://colorimage/:/icons/icons/ui/unlock.png?red"))
                }

                Button {
                    id: verifyButton

                    visible: (!profile.userVerificationEnabled && !profile.isSelf) || (profile.isSelf && (model.verificationStatus != VerificationStatus.VERIFIED || !profile.userVerificationEnabled))
                    text: (model.verificationStatus != VerificationStatus.VERIFIED) ? qsTr("Verify") : qsTr("Unverify")
                    onClicked: {
                        if (model.verificationStatus == VerificationStatus.VERIFIED)
                            profile.unverify(model.deviceId);
                        else
                            profile.verify(model.deviceId);
                    }
                }

            }

        }

    }

    footer: DialogButtonBox {
        standardButtons: DialogButtonBox.Ok
        onAccepted: userProfileDialog.close()
    }

}