matrixion/qml/TimelineRow.qml

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

import "./delegates"
import "./emoji"
import QtQuick 2.15
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.2
import QtQuick.Window 2.13
import im.nheko 1.0

AbstractButton {
    id: r

    required property double proportionalHeight
    required property int type
    required property string typeString
    required property int originalWidth
    required property string blurhash
    required property string body
    required property string formattedBody
    required property string eventId
    required property string filename
    required property string filesize
    required property string url
    required property string thumbnailUrl
    required property bool isOnlyEmoji
    required property bool isSender
    required property bool isEncrypted
    required property bool isEditable
    required property bool isEdited
    required property bool isStateEvent
    required property string replyTo
    required property string userId
    required property string userName
    required property string roomTopic
    required property string roomName
    required property string callType
    required property var reactions
    required property int trustlevel
    required property int encryptionError
    required property int duration
    required property var timestamp
    required property int status
    required property int relatedEventCacheBuster

    hoverEnabled: true

    width: parent.width
    height: row.height+(reactionRow.height > 0 ? reactionRow.height-2 : 0 )

    Rectangle {
        color: (Settings.messageHoverHighlight && hovered) ? timelineRoot.palette.alternateBase : "transparent"
        anchors.fill: parent
        // this looks better without margins
        TapHandler {
            acceptedButtons: Qt.RightButton
            onSingleTapped: messageContextMenu.show(eventId, type, isSender, isEncrypted, isEditable, contentItem.child.hoveredLink, contentItem.child.copyText)
            gesturePolicy: TapHandler.ReleaseWithinBounds
            acceptedDevices: PointerDevice.Mouse | PointerDevice.Stylus | PointerDevice.TouchPad
        }
    }


    onPressAndHold: messageContextMenu.show(eventId, type, isSender, isEncrypted, isEditable, contentItem.child.hoveredLink, contentItem.child.copyText)
    onDoubleClicked: chat.model.reply = eventId

    DragHandler {
        id: draghandler
        yAxis.enabled: false
        xAxis.maximum: 100
        xAxis.minimum: -100
        onActiveChanged: {
            if(!active && (x < -70 || x > 70))
                chat.model.reply = eventId
        }
    }
    states: State {
        name: "dragging"
        when: draghandler.active
    }
    transitions: Transition {
        from: "dragging"
        to: ""
        PropertyAnimation {
            target: r
            properties: "x"
            easing.type: Easing.InOutQuad
            to: 0
            duration: 100
        }
    }

    onClicked: {
        let link = contentItem.child.linkAt != undefined && contentItem.child.linkAt(pressX-row.x-msg.x, pressY-row.y-msg.y-contentItem.y);
        if (link) {
            Nheko.openLink(link)
        }
    }

    Rectangle {
        id: row
        property bool bubbleOnRight : isSender && Settings.bubbles
        anchors.leftMargin: isStateEvent || Settings.smallAvatars? 0 : Nheko.avatarSize+8 // align bubble with section header
        anchors.left: isStateEvent? undefined : (bubbleOnRight? undefined : parent.left)
        anchors.right: isStateEvent? undefined: (bubbleOnRight? parent.right : undefined)
        anchors.horizontalCenter: isStateEvent? parent.horizontalCenter : undefined
        property int maxWidth: (parent.width-(Settings.smallAvatars || isStateEvent? 0 : Nheko.avatarSize+8))*(Settings.bubbles && !isStateEvent? 0.9 : 1)
        width: Settings.bubbles? Math.min(maxWidth,Math.max(reply.implicitWidth+8,contentItem.implicitWidth+metadata.width+20)) : maxWidth
        height: msg.height+msg.anchors.margins*2

        property color userColor: TimelineManager.userColor(userId, timelineRoot.palette.base)
        property color bgColor: timelineRoot.palette.base
        color: (Settings.bubbles && !isStateEvent) ? Qt.tint(bgColor, Qt.hsla(userColor.hslHue, 0.5, userColor.hslLightness, 0.2)) : "#00000000"
        radius: 4

        GridLayout {
            anchors {
                left: parent.left
                top: parent.top
                right: parent.right
                margins: (Settings.bubbles && ! isStateEvent)? 4 : 2
                leftMargin: 4
            }
            id: msg
            rowSpacing: 0
            columnSpacing: 2
            columns: Settings.bubbles? 1 : 2
            rows: Settings.bubbles? 3 : 2

            // fancy reply, if this is a reply
            Reply {
                Layout.row: 0
                Layout.column: 0
                Layout.fillWidth: true
                Layout.maximumWidth: Settings.bubbles? Number.MAX_VALUE : implicitWidth
                Layout.bottomMargin: visible? 2 : 0
                Layout.preferredHeight: height
                id: reply

                function fromModel(role) {
                    return replyTo != "" ? room.dataById(replyTo, role, r.eventId) : null;
                }
                visible: replyTo
                userColor: r.relatedEventCacheBuster, TimelineManager.userColor(userId, timelineRoot.palette.base)
                blurhash: r.relatedEventCacheBuster, fromModel(Room.Blurhash) ?? ""
                body: r.relatedEventCacheBuster, fromModel(Room.Body) ?? ""
                formattedBody: r.relatedEventCacheBuster, fromModel(Room.FormattedBody) ?? ""
                eventId: fromModel(Room.EventId) ?? ""
                filename: r.relatedEventCacheBuster, fromModel(Room.Filename) ?? ""
                filesize: r.relatedEventCacheBuster, fromModel(Room.Filesize) ?? ""
                proportionalHeight: r.relatedEventCacheBuster, fromModel(Room.ProportionalHeight) ?? 1
                type: r.relatedEventCacheBuster, fromModel(Room.Type) ?? MtxEvent.UnknownMessage
                typeString: r.relatedEventCacheBuster, fromModel(Room.TypeString) ?? ""
                url: r.relatedEventCacheBuster, fromModel(Room.Url) ?? ""
                originalWidth: r.relatedEventCacheBuster, fromModel(Room.OriginalWidth) ?? 0
                isOnlyEmoji: r.relatedEventCacheBuster, fromModel(Room.IsOnlyEmoji) ?? false
                isStateEvent: r.relatedEventCacheBuster, fromModel(Room.IsStateEvent) ?? false
                userId: r.relatedEventCacheBuster, fromModel(Room.UserId) ?? ""
                userName: r.relatedEventCacheBuster, fromModel(Room.UserName) ?? ""
                thumbnailUrl: r.relatedEventCacheBuster, fromModel(Room.ThumbnailUrl) ?? ""
                duration: r.relatedEventCacheBuster, fromModel(Room.Duration) ?? 0
                roomTopic: r.relatedEventCacheBuster, fromModel(Room.RoomTopic) ?? ""
                roomName: r.relatedEventCacheBuster, fromModel(Room.RoomName) ?? ""
                callType: r.relatedEventCacheBuster, fromModel(Room.CallType) ?? ""
                encryptionError: r.relatedEventCacheBuster, fromModel(Room.EncryptionError) ?? 0
                relatedEventCacheBuster: r.relatedEventCacheBuster, fromModel(Room.RelatedEventCacheBuster) ?? 0
            }

            // actual message content
            MessageDelegate {
                Layout.row: 1
                Layout.column: 0
                Layout.fillWidth: true
                Layout.preferredHeight: height
                id: contentItem

                blurhash: r.blurhash
                body: r.body
                formattedBody: r.formattedBody
                eventId: r.eventId
                filename: r.filename
                filesize: r.filesize
                proportionalHeight: r.proportionalHeight
                type: r.type
                typeString: r.typeString ?? ""
                url: r.url
                thumbnailUrl: r.thumbnailUrl
                duration: r.duration
                originalWidth: r.originalWidth
                isOnlyEmoji: r.isOnlyEmoji
                isStateEvent: r.isStateEvent
                userId: r.userId
                userName: r.userName
                roomTopic: r.roomTopic
                roomName: r.roomName
                callType: r.callType
                encryptionError: r.encryptionError
                relatedEventCacheBuster: r.relatedEventCacheBuster
                isReply: false
                metadataWidth: metadata.width
            }

            Row {
                id: metadata
                Layout.column: Settings.bubbles? 0 : 1
                Layout.row: Settings.bubbles? 2 : 0
                Layout.rowSpan: Settings.bubbles? 1 : 2
                Layout.bottomMargin: -2
                Layout.topMargin: (contentItem.fitsMetadata && Settings.bubbles)? -height-Layout.bottomMargin : 0
                Layout.alignment: Qt.AlignTop | Qt.AlignRight
                Layout.preferredWidth: implicitWidth
                visible: !isStateEvent
                spacing: 2

                property double scaling: Settings.bubbles? 0.75 : 1

                property int iconSize: Math.floor(fontMetrics.ascent*scaling)

                StatusIndicator {
                    Layout.alignment: Qt.AlignRight | Qt.AlignTop
                    height: parent.iconSize
                    width: parent.iconSize
                    status: r.status
                    eventId: r.eventId
                    anchors.verticalCenter: ts.verticalCenter
                }

                Image {
                    visible: isEdited || eventId == chat.model.edit
                    Layout.alignment: Qt.AlignRight | Qt.AlignTop
                    height: parent.iconSize
                    width: parent.iconSize
                    sourceSize.width: parent.iconSize * Screen.devicePixelRatio
                    sourceSize.height: parent.iconSize * Screen.devicePixelRatio
                    source: "image://colorimage/:/icons/icons/ui/edit.svg?" + ((eventId == chat.model.edit) ? timelineRoot.palette.highlight : timelineRoot.palette.buttonText)
                    ToolTip.visible: editHovered.hovered
                    ToolTip.delay: Nheko.tooltipDelay
                    ToolTip.text: qsTr("Edited")
                    anchors.verticalCenter: ts.verticalCenter

                    HoverHandler {
                        id: editHovered
                    }

                }

                EncryptionIndicator {
                    visible: room.isEncrypted
                    encrypted: isEncrypted
                    trust: trustlevel
                    Layout.alignment: Qt.AlignRight | Qt.AlignTop
                    height: parent.iconSize
                    width: parent.iconSize
                    sourceSize.width: parent.iconSize * Screen.devicePixelRatio
                    sourceSize.height: parent.iconSize * Screen.devicePixelRatio
                    anchors.verticalCenter: ts.verticalCenter
                }

                Label {
                    id: ts
                    Layout.alignment: Qt.AlignRight | Qt.AlignTop
                    Layout.preferredWidth: implicitWidth
                    text: timestamp.toLocaleTimeString(Locale.ShortFormat)
                    color: timelineRoot.palette.inactive.text
                    ToolTip.visible: ma.hovered
                    ToolTip.delay: Nheko.tooltipDelay
                    ToolTip.text: Qt.formatDateTime(timestamp, Qt.DefaultLocaleLongDate)
                    font.pointSize: fontMetrics.font.pointSize*parent.scaling
                    HoverHandler {
                        id: ma
                    }

                }
            }
        }
    }
    Reactions {
        anchors {
            top: row.bottom
            topMargin: -2
            left: row.bubbleOnRight? undefined : row.left
            right: row.bubbleOnRight? row.right : undefined
        }
        width: row.maxWidth
        layoutDirection: row.bubbleOnRight? Qt.RightToLeft : Qt.LeftToRight

        id: reactionRow

        reactions: r.reactions
        eventId: r.eventId
    }
}