Indicate messages that are not sent yet

src/models/messageeventmodel.cpp

@@ -68,6 +68,7 @@ QHash<int, QByteArray> MessageEventModel::roleNames() const
     roles[IsAvatarChangeRole] = "isAvatarChange";
     roles[IsRedactedRole] = "isRedacted";
     roles[GenericDisplayRole] = "genericDisplay";
+    roles[IsPendingRole] = "isPending";
     return roles;
 }
 
@@ -176,6 +177,7 @@ void MessageEventModel::setRoom(NeoChatRoom *room)
         });
         connect(m_currentRoom, &Room::pendingEventAdded, this, &MessageEventModel::endInsertRows);
         connect(m_currentRoom, &Room::pendingEventAboutToMerge, this, [this](RoomEvent *, int i) {
+            Q_EMIT dataChanged(index(i, 0), index(i, 0), {IsPendingRole});
             if (i == 0) {
                 return; // No need to move anything, just refresh
             }
@@ -908,6 +910,10 @@ QVariant MessageEventModel::data(const QModelIndex &idx, int role) const
         return evt.isRedacted();
     }
 
+    if (role == IsPendingRole) {
+        return row < m_currentRoom->pendingEvents().size();
+    }
+
     return {};
 }
 

src/models/messageeventmodel.h

@@ -73,6 +73,7 @@ public:
         IsNameChangeRole,
         IsAvatarChangeRole,
         IsRedactedRole,
+        IsPendingRole,
         LastRole, // Keep this last
     };
     Q_ENUM(EventRoles)

src/qml/Component/Timeline/TimelineContainer.qml

@@ -197,76 +197,93 @@ ColumnLayout {
                 }
             ]
 
-            contentItem: ColumnLayout {
+            contentItem: RowLayout {
-                id: column
+                Kirigami.Icon {
-                spacing: Kirigami.Units.smallSpacing
+                    source: "content-loading-symbolic"
-                RowLayout {
+                    width: height
-                    id: rowLayout
+                    Layout.preferredWidth: Kirigami.Units.iconSizes.small
-
+                    Layout.preferredHeight: Kirigami.Units.iconSizes.small
+                    visible: model.isPending && Config.showLocalMessagesOnRight
+                }
+                ColumnLayout {
+                    id: column
                     spacing: Kirigami.Units.smallSpacing
-                    visible: model.showAuthor && !isEmote
+                    RowLayout {
+                        id: rowLayout
 
-                    QQC2.Label {
+                        spacing: Kirigami.Units.smallSpacing
-                        id: nameLabel
+                        visible: model.showAuthor && !isEmote
 
-                        Layout.maximumWidth: contentMaxWidth - timeLabel.implicitWidth - rowLayout.spacing
+                        QQC2.Label {
+                            id: nameLabel
 
-                        text: visible ? author.displayName : ""
+                            Layout.maximumWidth: contentMaxWidth - timeLabel.implicitWidth - rowLayout.spacing
-                        textFormat: Text.PlainText
+
-                        font.weight: Font.Bold
+                            text: visible ? author.displayName : ""
-                        color: author.color
+                            textFormat: Text.PlainText
-                        elide: Text.ElideRight
+                            font.weight: Font.Bold
-                        MouseArea {
+                            color: author.color
-                            anchors.fill: parent
+                            elide: Text.ElideRight
-                            cursorShape: Qt.PointingHandCursor
+                            MouseArea {
-                            onClicked: {
+                                anchors.fill: parent
-                                userDetailDialog.createObject(QQC2.ApplicationWindow.overlay, {
+                                cursorShape: Qt.PointingHandCursor
-                                    room: currentRoom,
+                                onClicked: {
-                                    user: author.object,
+                                    userDetailDialog.createObject(QQC2.ApplicationWindow.overlay, {
-                                    displayName: author.displayName,
+                                        room: currentRoom,
-                                    avatarMediaId: author.avatarMediaId,
+                                        user: author.object,
-                                    avatarUrl: author.avatarUrl
+                                        displayName: author.displayName,
-                                }).open();
+                                        avatarMediaId: author.avatarMediaId,
+                                        avatarUrl: author.avatarUrl
+                                    }).open();
+                                }
+                            }
+                        }
+                        QQC2.Label {
+                            id: timeLabel
+
+                            text: visible ? model.time.toLocaleTimeString(Qt.locale(), Locale.ShortFormat) : ""
+                            color: Kirigami.Theme.disabledTextColor
+                            QQC2.ToolTip.visible: hoverHandler.hovered
+                            QQC2.ToolTip.text: model.time.toLocaleString(Qt.locale(), Locale.LongFormat)
+                            QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
+
+                            HoverHandler {
+                                id: hoverHandler
                             }
                         }
                     }
-                    QQC2.Label {
+                    Loader {
-                        id: timeLabel
+                        id: replyLoader
 
-                        text: visible ? model.time.toLocaleTimeString(Qt.locale(), Locale.ShortFormat) : ""
+                        Layout.maximumWidth: contentMaxWidth
-                        color: Kirigami.Theme.disabledTextColor
-                        QQC2.ToolTip.visible: hoverHandler.hovered
-                        QQC2.ToolTip.text: model.time.toLocaleString(Qt.locale(), Locale.LongFormat)
-                        QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
 
-                        HoverHandler {
+                        active: model.reply !== undefined
-                            id: hoverHandler
+                        visible: active
+
+                        sourceComponent: ReplyComponent {
+                            name: currentRoom.htmlSafeMemberName(reply.author.id)
+                            avatar: reply.author.avatarMediaId ? ("image://mxc/" + reply.author.avatarMediaId) : ""
+                            color: reply.author.color
+                        }
+
+                        Connections {
+                            target: replyLoader.item
+                            function onReplyClicked() {
+                                replyClicked(reply.eventId)
+                            }
                         }
                     }
                 }
-                Loader {
+                Kirigami.Icon {
-                    id: replyLoader
+                    source: "content-loading-symbolic"
-
+                    width: height
-                    Layout.maximumWidth: contentMaxWidth
+                    Layout.preferredWidth: Kirigami.Units.iconSizes.small
-
+                    Layout.preferredHeight: Kirigami.Units.iconSizes.small
-                    active: model.reply !== undefined
+                    visible: model.isPending && !Config.showLocalMessagesOnRight
-                    visible: active
-
-                    sourceComponent: ReplyComponent {
-                        name: currentRoom.htmlSafeMemberName(reply.author.id)
-                        avatar: reply.author.avatarMediaId ? ("image://mxc/" + reply.author.avatarMediaId) : ""
-                        color: reply.author.color
-                    }
-
-                    Connections {
-                        target: replyLoader.item
-                        function onReplyClicked() {
-                            replyClicked(reply.eventId)
-                        }
-                    }
                 }
             }
 
+
             background: Item {
                 Kirigami.ShadowedRectangle {
                     id: bubbleBackground