Reenable status part of timeline messages

2 files changed, 108 insertions, 27 deletions

diff --git a/resources/qml/MessageView.qml b/resources/qml/MessageView.qml
index 2df9b731..a013c78b 100644
--- a/resources/qml/MessageView.qml
+++ b/resources/qml/MessageView.qml
@@ -69,21 +69,23 @@ Item {
 
             required property var day
             required property bool isSender
-            //required property var previousMessageDay
-            //required property bool previousMessageIsStateEvent
-            //required property string previousMessageUserId
             required property int index
             property var previousMessageDay: (index + 1) >= chat.count ? 0 : chat.model.dataByIndex(index + 1, Room.Day)
             property bool previousMessageIsStateEvent: (index + 1) >= chat.count ? true : chat.model.dataByIndex(index + 1, Room.IsStateEvent)
             property string previousMessageUserId: (index + 1) >= chat.count ? "" : chat.model.dataByIndex(index + 1, Room.UserId)
+
             required property date timestamp
             required property string userId
             required property string userName
             required property string threadId
             required property int userPowerlevel
+            required property bool isEdited
+            required property bool isEncrypted
             required property var reactions
+            required property int status
+            required property int trustlevel
 
-            property int avatarMargin: (wrapper.isStateEvent || Settings.smallAvatars ? 0 : (Nheko.avatarSize + 8)) + (wrapper.threadId ? 6 : 0) // align bubble with section header
+            property int avatarMargin: (wrapper.isStateEvent || Settings.smallAvatars ? 0 : (Nheko.avatarSize + 8)) // align bubble with section header
 
             data: [
             Loader {
@@ -107,16 +109,36 @@ Item {
                 visible: status == Loader.Ready
                 z: 4
             }, 
-                GridLayout {
+                RowLayout {
                     id: gridContainer
 
                     width: wrapper.width
                     y: section.visible && section.active ? section.y + section.height : 0
 
+                    Item {
+                        Layout.preferredWidth: wrapper.avatarMargin
+                    }
+
+                    AbstractButton {
+                        ToolTip.delay: Nheko.tooltipDelay
+                        ToolTip.text: qsTr("Part of a thread")
+                        ToolTip.visible: hovered
+                        Layout.fillHeight: true
+                        visible: wrapper.threadId
+                        Layout.preferredWidth: 4
+
+                        onClicked: room.thread = wrapper.threadId
+
+                        Rectangle {
+                            id: threadLine
+
+                            anchors.fill: parent
+                            color: TimelineManager.userColor(wrapper.threadId, palette.base)
+                        }
+                    }
                     ColumnLayout {
                         id: contentColumn
                         Layout.fillWidth: true
-                        Layout.leftMargin: wrapper.avatarMargin // align bubble with section header
 
                         AbstractButton {
                             id: replyRow
@@ -177,11 +199,81 @@ Item {
                         ]
                     }
 
-                    Rectangle {
-                        color: 'yellow'
-                        Layout.preferredWidth: 100
-                        Layout.preferredHeight: 20
-                        Layout.alignment: Qt.AlignRight | Qt.AlignTop
+                    RowLayout {
+                        id: metadata
+
+                        property int iconSize: Math.floor(fontMetrics.ascent * scaling)
+                        property double scaling: Settings.bubbles ? 0.75 : 1
+
+                        Layout.alignment: Qt.AlignTop | Qt.AlignRight
+                        Layout.preferredWidth: implicitWidth
+                        spacing: 2
+                        visible: !isStateEvent
+
+                        StatusIndicator {
+                            Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
+                            eventId: wrapper.eventId
+                            height: parent.iconSize
+                            status: wrapper.status
+                            width: parent.iconSize
+                        }
+                        Image {
+                            Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
+                            ToolTip.delay: Nheko.tooltipDelay
+                            ToolTip.text: qsTr("Edited")
+                            ToolTip.visible: editHovered.hovered
+                            height: parent.iconSize
+                            source: "image://colorimage/:/icons/icons/ui/edit.svg?" + ((wrapper.eventId == room.edit) ? palette.highlight : palette.buttonText)
+                            sourceSize.height: parent.iconSize * Screen.devicePixelRatio
+                            sourceSize.width: parent.iconSize * Screen.devicePixelRatio
+                            visible: wrapper.isEdited || wrapper.eventId == room.edit
+                            width: parent.iconSize
+
+                            HoverHandler {
+                                id: editHovered
+
+                            }
+                        }
+                        ImageButton {
+                            Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
+                            ToolTip.delay: Nheko.tooltipDelay
+                            ToolTip.text: qsTr("Part of a thread")
+                            ToolTip.visible: hovered
+                            buttonTextColor: TimelineManager.userColor(wrapper.threadId, palette.base)
+                            height: parent.iconSize
+                            image: ":/icons/icons/ui/thread.svg"
+                            visible: wrapper.threadId
+                            width: parent.iconSize
+
+                            onClicked: room.thread = threadId
+                        }
+                        EncryptionIndicator {
+                            Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
+                            encrypted: wrapper.isEncrypted
+                            height: parent.iconSize
+                            sourceSize.height: parent.iconSize * Screen.devicePixelRatio
+                            sourceSize.width: parent.iconSize * Screen.devicePixelRatio
+                            trust: wrapper.trustlevel
+                            visible: room.isEncrypted
+                            width: parent.iconSize
+                        }
+                        Label {
+                            id: ts
+
+                            Layout.alignment: Qt.AlignRight | Qt.AlignTop
+                            Layout.preferredWidth: implicitWidth
+                            ToolTip.delay: Nheko.tooltipDelay
+                            ToolTip.text: Qt.formatDateTime(wrapper.timestamp, Qt.DefaultLocaleLongDate)
+                            ToolTip.visible: ma.hovered
+                            color: palette.inactive.text
+                            font.pointSize: fontMetrics.font.pointSize * parent.scaling
+                            text: wrapper.timestamp.toLocaleTimeString(Locale.ShortFormat)
+
+                            HoverHandler {
+                                id: ma
+
+                            }
+                        }
                     }
                 },
 
@@ -214,13 +306,6 @@ Item {
                         top: reactionRow.bottom
                         topMargin: 5
                     }
-                },
-
-                Rectangle {
-                    width: Math.min(contentColumn.implicitWidth, contentColumn.width)
-                    height: contentColumn.implicitHeight
-                    color: "blue"
-                    opacity: 0.2
                 }
             ]
         }
diff --git a/resources/qml/TimelineRow.qml b/resources/qml/TimelineRow.qml
index 539882ed..fc5c6a76 100644
--- a/resources/qml/TimelineRow.qml
+++ b/resources/qml/TimelineRow.qml
@@ -232,7 +232,7 @@ AbstractButton {
                 userName: r.userName
             }
             */
-            Row {
+            RowLayout {
                 id: metadata
 
                 property int iconSize: Math.floor(fontMetrics.ascent * scaling)
@@ -249,19 +249,17 @@ AbstractButton {
                 visible: !isStateEvent
 
                 StatusIndicator {
-                    Layout.alignment: Qt.AlignRight | Qt.AlignTop
-                    anchors.verticalCenter: ts.verticalCenter
+                    Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
                     eventId: r.eventId
                     height: parent.iconSize
                     status: r.status
                     width: parent.iconSize
                 }
                 Image {
-                    Layout.alignment: Qt.AlignRight | Qt.AlignTop
+                    Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
                     ToolTip.delay: Nheko.tooltipDelay
                     ToolTip.text: qsTr("Edited")
                     ToolTip.visible: editHovered.hovered
-                    anchors.verticalCenter: ts.verticalCenter
                     height: parent.iconSize
                     source: "image://colorimage/:/icons/icons/ui/edit.svg?" + ((eventId == room.edit) ? palette.highlight : palette.buttonText)
                     sourceSize.height: parent.iconSize * Screen.devicePixelRatio
@@ -275,11 +273,10 @@ AbstractButton {
                     }
                 }
                 ImageButton {
-                    Layout.alignment: Qt.AlignRight | Qt.AlignTop
+                    Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
                     ToolTip.delay: Nheko.tooltipDelay
                     ToolTip.text: qsTr("Part of a thread")
                     ToolTip.visible: hovered
-                    anchors.verticalCenter: ts.verticalCenter
                     buttonTextColor: TimelineManager.userColor(threadId, palette.base)
                     height: parent.iconSize
                     image: ":/icons/icons/ui/thread.svg"
@@ -289,8 +286,7 @@ AbstractButton {
                     onClicked: room.thread = threadId
                 }
                 EncryptionIndicator {
-                    Layout.alignment: Qt.AlignRight | Qt.AlignTop
-                    anchors.verticalCenter: ts.verticalCenter
+                    Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
                     encrypted: isEncrypted
                     height: parent.iconSize
                     sourceSize.height: parent.iconSize * Screen.devicePixelRatio