Improve message bubble.

imports/Spectral/Component/Avatar.qml

@@ -45,7 +45,9 @@ Item {
             color: "white"
             text: hint[0].toUpperCase()
             font.pixelSize: root.width / 2
-            font.bold: true
+            font.weight: Font.Light
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
         }
     }
 

imports/Spectral/Component/Timeline/MessageDelegate.qml

@@ -11,7 +11,7 @@ import Spectral.Dialog 2.0
 import Spectral.Menu.Timeline 2.0
 import Spectral.Effect 2.0
 
-RowLayout {
+ColumnLayout {
     readonly property bool avatarVisible: !sentByMe && showAuthor
     readonly property bool sentByMe: author === currentRoom.localUser
     readonly property bool darkBackground: !sentByMe
@@ -24,229 +24,258 @@ RowLayout {
 
     z: -5
 
-    spacing: 4
+    spacing: 0
 
-    Avatar {
+    RowLayout {
-        Layout.preferredWidth: 32
+        id: messageRow
-        Layout.preferredHeight: 32
-        Layout.alignment: Qt.AlignTop
 
-        visible: avatarVisible
+        spacing: 4
-        hint: author.displayName
-        source: author.avatarMediaId
 
-        Component {
+        Avatar {
-            id: userDetailDialog
+            Layout.preferredWidth: 32
+            Layout.preferredHeight: 32
+            Layout.alignment: Qt.AlignTop
 
-            UserDetailDialog {}
+            visible: avatarVisible
-        }
+            hint: author.displayName
+            source: author.avatarMediaId
 
-        RippleEffect {
+            Component {
-            anchors.fill: parent
+                id: userDetailDialog
 
-            circular: true
+                UserDetailDialog {}
-
-            onClicked: userDetailDialog.createObject(ApplicationWindow.overlay, {"room": currentRoom, "user": author}).open()
-        }
-    }
-
-    Item {
-        Layout.preferredWidth: 32
-        Layout.preferredHeight: 32
-
-        visible: !(sentByMe || avatarVisible)
-    }
-
-    Control {
-        Layout.maximumWidth: messageListView.width - (!sentByMe ? 32 + root.spacing : 0) - 48
-
-        verticalPadding: 8
-        horizontalPadding: 16
-
-        background: Rectangle {
-            color: sentByMe ? MPalette.background : eventType === "notice" ? MPalette.primary : MPalette.accent
-            radius: 18
-            antialiasing: true
-
-            Rectangle {
-                anchors.top: parent.top
-                anchors.left: parent.left
-
-                width: parent.width / 2
-                height: parent.height / 2
-
-                visible: !sentByMe && (bubbleShape == 3 || bubbleShape == 2)
-
-                color: sentByMe ? MPalette.background : eventType === "notice" ? MPalette.primary : MPalette.accent
-                radius: 2
             }
 
-            Rectangle {
+            RippleEffect {
-                anchors.top: parent.top
-                anchors.right: parent.right
-
-                width: parent.width / 2
-                height: parent.height / 2
-
-                visible: sentByMe && (bubbleShape == 3 || bubbleShape == 2)
-
-                color: sentByMe ? MPalette.background : eventType === "notice" ? MPalette.primary : MPalette.accent
-                radius: 2
-            }
-
-            Rectangle {
-                anchors.bottom: parent.bottom
-                anchors.left: parent.left
-
-                width: parent.width / 2
-                height: parent.height / 2
-
-                visible: !sentByMe && (bubbleShape == 1 || bubbleShape == 2)
-
-                color: sentByMe ? MPalette.background : eventType === "notice" ? MPalette.primary : MPalette.accent
-                radius: 2
-            }
-
-            Rectangle {
-                anchors.bottom: parent.bottom
-                anchors.right: parent.right
-
-                width: parent.width / 2
-                height: parent.height / 2
-
-                visible: sentByMe && (bubbleShape == 1 || bubbleShape == 2)
-
-                color: sentByMe ? MPalette.background : eventType === "notice" ? MPalette.primary : MPalette.accent
-                radius: 2
-            }
-
-            AutoMouseArea {
                 anchors.fill: parent
 
-                id: messageMouseArea
+                circular: true
 
-                onSecondaryClicked: {
+                onClicked: userDetailDialog.createObject(ApplicationWindow.overlay, {"room": currentRoom, "user": author}).open()
-                    var contextMenu = messageDelegateContextMenu.createObject(ApplicationWindow.overlay)
-                    contextMenu.viewSource.connect(function() {
-                        messageSourceDialog.createObject(ApplicationWindow.overlay, {"sourceText": toolTip}).open()
-                    })
-                    contextMenu.reply.connect(function() {
-                        roomPanelInput.replyUser = author
-                        roomPanelInput.replyEventID = eventId
-                        roomPanelInput.replyContent = contentLabel.selectedText || message
-                        roomPanelInput.isReply = true
-                        roomPanelInput.focus()
-                    })
-                    contextMenu.redact.connect(function() {
-                        currentRoom.redactEvent(eventId)
-                    })
-                    contextMenu.popup()
-                }
-
-
-                Component {
-                    id: messageDelegateContextMenu
-
-                    MessageDelegateContextMenu {}
-                }
-
-                Component {
-                    id: messageSourceDialog
-
-                    MessageSourceDialog {}
-                }
             }
         }
 
-        contentItem: ColumnLayout {
+        Item {
-            RowLayout {
+            Layout.preferredWidth: 32
-                Layout.fillWidth: true
+            Layout.preferredHeight: 32
 
-                visible: replyVisible
+            visible: !(sentByMe || avatarVisible)
+        }
 
-                Avatar {
+        Control {
-                    Layout.preferredWidth: 28
+            Layout.maximumWidth: messageListView.width - (!sentByMe ? 32 + messageRow.spacing : 0) - 48
-                    Layout.preferredHeight: 28
-                    Layout.alignment: Qt.AlignTop
 
-                    source: replyVisible ? replyAuthor.avatarMediaId : ""
+            verticalPadding: 8
-                    hint: replyVisible ? replyAuthor.displayName : "H"
+            horizontalPadding: 16
 
-                    RippleEffect {
+            background: Rectangle {
-                        anchors.fill: parent
+                color: sentByMe ? MPalette.background : eventType === "notice" ? MPalette.primary : MPalette.accent
+                radius: 18
+                antialiasing: true
 
-                        circular: true
+                Rectangle {
+                    anchors.top: parent.top
+                    anchors.left: parent.left
 
-                        onClicked: userDetailDialog.createObject(ApplicationWindow.overlay, {"room": currentRoom, "user": replyAuthor}).open()
+                    width: parent.width / 2
-                    }
+                    height: parent.height / 2
+
+                    visible: !sentByMe && (bubbleShape == 3 || bubbleShape == 2)
+
+                    color: sentByMe ? MPalette.background : eventType === "notice" ? MPalette.primary : MPalette.accent
+                    radius: 2
                 }
 
-                Control {
+                Rectangle {
+                    anchors.top: parent.top
+                    anchors.right: parent.right
+
+                    width: parent.width / 2
+                    height: parent.height / 2
+
+                    visible: sentByMe && (bubbleShape == 3 || bubbleShape == 2)
+
+                    color: sentByMe ? MPalette.background : eventType === "notice" ? MPalette.primary : MPalette.accent
+                    radius: 2
+                }
+
+                Rectangle {
+                    anchors.bottom: parent.bottom
+                    anchors.left: parent.left
+
+                    width: parent.width / 2
+                    height: parent.height / 2
+
+                    visible: !sentByMe && (bubbleShape == 1 || bubbleShape == 2)
+
+                    color: sentByMe ? MPalette.background : eventType === "notice" ? MPalette.primary : MPalette.accent
+                    radius: 2
+                }
+
+                Rectangle {
+                    anchors.bottom: parent.bottom
+                    anchors.right: parent.right
+
+                    width: parent.width / 2
+                    height: parent.height / 2
+
+                    visible: sentByMe && (bubbleShape == 1 || bubbleShape == 2)
+
+                    color: sentByMe ? MPalette.background : eventType === "notice" ? MPalette.primary : MPalette.accent
+                    radius: 2
+                }
+
+                AutoMouseArea {
+                    anchors.fill: parent
+
+                    id: messageMouseArea
+
+                    onSecondaryClicked: {
+                        var contextMenu = messageDelegateContextMenu.createObject(ApplicationWindow.overlay)
+                        contextMenu.viewSource.connect(function() {
+                            messageSourceDialog.createObject(ApplicationWindow.overlay, {"sourceText": toolTip}).open()
+                        })
+                        contextMenu.reply.connect(function() {
+                            roomPanelInput.replyUser = author
+                            roomPanelInput.replyEventID = eventId
+                            roomPanelInput.replyContent = contentLabel.selectedText || message
+                            roomPanelInput.isReply = true
+                            roomPanelInput.focus()
+                        })
+                        contextMenu.redact.connect(function() {
+                            currentRoom.redactEvent(eventId)
+                        })
+                        contextMenu.popup()
+                    }
+
+
+                    Component {
+                        id: messageDelegateContextMenu
+
+                        MessageDelegateContextMenu {}
+                    }
+
+                    Component {
+                        id: messageSourceDialog
+
+                        MessageSourceDialog {}
+                    }
+                }
+            }
+
+            contentItem: ColumnLayout {
+                RowLayout {
                     Layout.fillWidth: true
 
-                    padding: 0
+                    visible: replyVisible
 
-                    background: RippleEffect {
+                    Avatar {
-                        onClicked: goToEvent(replyEventId)
+                        Layout.preferredWidth: 28
+                        Layout.preferredHeight: 28
+                        Layout.alignment: Qt.AlignTop
+
+                        source: replyVisible ? replyAuthor.avatarMediaId : ""
+                        hint: replyVisible ? replyAuthor.displayName : "H"
+
+                        RippleEffect {
+                            anchors.fill: parent
+
+                            circular: true
+
+                            onClicked: userDetailDialog.createObject(ApplicationWindow.overlay, {"room": currentRoom, "user": replyAuthor}).open()
+                        }
                     }
 
-                    contentItem: Label {
+                    Control {
                         Layout.fillWidth: true
 
-                        visible: replyVisible
+                        padding: 0
-                        color: darkBackground ? "white" : MPalette.lighter
-                        text: "<style>a{color: " + (darkBackground ? "white" : MPalette.foreground) + ";} .user-pill{}</style>" + (replyDisplay || "")
 
-                        wrapMode: Label.Wrap
+                        background: RippleEffect {
-                        textFormat: Label.RichText
+                            onClicked: goToEvent(replyEventId)
-                    }
+                        }
-                }
-            }
 
-            Rectangle {
+                        contentItem: Label {
-                Layout.fillWidth: true
+                            Layout.fillWidth: true
-                Layout.preferredHeight: 1
 
-                visible: replyVisible
+                            visible: replyVisible
-                color: darkBackground ? "white" : MPalette.lighter
+                            color: darkBackground ? "white" : MPalette.lighter
-            }
+                            text: "<style>a{color: " + (darkBackground ? "white" : MPalette.foreground) + ";} .user-pill{}</style>" + (replyDisplay || "")
 
-            TextEdit {
+                            wrapMode: Label.Wrap
-                Layout.fillWidth: true
+                            textFormat: Label.RichText
-
+                        }
-                id: contentLabel
-
-                text: "<style>a{color: " + (darkBackground ? "white" : MPalette.foreground) + ";} .user-pill{}</style>" + display
-
-                color: darkBackground ? "white" : MPalette.foreground
-
-                font.family: window.font.family
-                font.pixelSize: 14
-                selectByMouse: true
-                readOnly: true
-                wrapMode: Label.Wrap
-                selectedTextColor: darkBackground ? MPalette.accent : "white"
-                selectionColor: darkBackground ? "white" : MPalette.accent
-                textFormat: Text.RichText
-
-                onLinkActivated: {
-                    if (link.startsWith("https://matrix.to/")) {
-                        var result = link.replace(/\?.*/, "").match("https://matrix.to/#/(!.*:.*)/(\\$.*:.*)")
-                        if (!result || result.length < 3) return
-                        if (result[1] != currentRoom.id) return
-                        if (!result[2]) return
-                        goToEvent(result[2])
-                    } else {
-                        Qt.openUrlExternally(link)
                     }
                 }
 
-                MouseArea {
+                Rectangle {
-                    anchors.fill: parent
+                    Layout.fillWidth: true
-                    acceptedButtons: Qt.NoButton
+                    Layout.preferredHeight: 1
-                    cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor
+
+                    visible: replyVisible
+                    color: darkBackground ? "white" : MPalette.lighter
+                }
+
+                TextEdit {
+                    Layout.fillWidth: true
+
+                    id: contentLabel
+
+                    text: "<style>a{color: " + (darkBackground ? "white" : MPalette.foreground) + ";} .user-pill{}</style>" + display
+
+                    color: darkBackground ? "white" : MPalette.foreground
+
+                    font.family: window.font.family
+                    font.pixelSize: 14
+                    selectByMouse: true
+                    readOnly: true
+                    wrapMode: Label.Wrap
+                    selectedTextColor: darkBackground ? MPalette.accent : "white"
+                    selectionColor: darkBackground ? "white" : MPalette.accent
+                    textFormat: Text.RichText
+
+                    onLinkActivated: {
+                        if (link.startsWith("https://matrix.to/")) {
+                            var result = link.replace(/\?.*/, "").match("https://matrix.to/#/(!.*:.*)/(\\$.*:.*)")
+                            if (!result || result.length < 3) return
+                            if (result[1] != currentRoom.id) return
+                            if (!result[2]) return
+                            goToEvent(result[2])
+                        } else {
+                            Qt.openUrlExternally(link)
+                        }
+                    }
+
+                    MouseArea {
+                        anchors.fill: parent
+                        acceptedButtons: Qt.NoButton
+                        cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor
+                    }
                 }
             }
         }
     }
+
+    RowLayout {
+        Layout.alignment: sentByMe ? Qt.AlignRight : Qt.AlignLeft
+        Layout.leftMargin: sentByMe ? undefined : 32 + messageRow.spacing + 12
+        Layout.rightMargin: sentByMe ? 12 : undefined
+        Layout.bottomMargin: 4
+
+        visible: showTimestamp || (showAuthor && !sentByMe)
+
+        Label {
+            visible: showTimestamp
+
+            text: Qt.formatDateTime(time, "hh:mm")
+            color: MPalette.lighter
+        }
+
+        Label {
+            visible: showAuthor && !sentByMe
+
+            text: author.displayName
+            color: MPalette.lighter
+        }
+    }
 }

imports/Spectral/Panel/RoomListPanel.qml

@@ -201,8 +201,6 @@ Item {
             background: Rectangle {
                 color: Material.background
 
-                opacity: listView.atYBeginning ? 0 : 1
-
                 layer.enabled: true
                 layer.effect: ElevationEffect {
                     elevation: 2

imports/Spectral/Panel/RoomPanelInput.qml

@@ -31,7 +31,7 @@ Control {
 
         layer.enabled: true
         layer.effect: ElevationEffect {
-            elevation: 2
+            elevation: 1
         }
     }
 

src/messageeventmodel.cpp

@@ -415,40 +415,51 @@ QVariant MessageEventModel::data(const QModelIndex& idx, int role) const {
     return {};
   }
 
-  if (role == ShowTimestampRole || role == ShowAuthorRole)
+  if (role == ShowTimestampRole) {
-    for (auto r = row + 1; r < rowCount(); ++r) {
-      auto i = index(r);
-      if (data(i, SpecialMarksRole) != EventStatus::Hidden) {
-        switch (role) {
-          case ShowTimestampRole:
-            return data(i, TimeRole)
-                       .toDateTime()
-                       .msecsTo(data(idx, TimeRole).toDateTime()) > 600000;
-          case ShowAuthorRole:
-            return data(i, AuthorRole) != data(idx, AuthorRole);
-        }
-      }
-    }
-
-  if (role == BubbleShapeRole) {  // TODO: Convoluted logic.
-    int belowRow = -1;            // Invalid
-
     for (auto r = row - 1; r >= 0; --r) {
       auto i = index(r);
       if (data(i, SpecialMarksRole) != EventStatus::Hidden) {
-        belowRow = r;
+        return data(idx, TimeRole)
+                   .toDateTime()
+                   .msecsTo(data(i, TimeRole).toDateTime()) > 600000;
+      }
+    }
+
+    return true;
+  }
+
+  if (role == ShowAuthorRole) {
+    for (auto r = row - 1; r >= 0; --r) {
+      auto i = index(r);
+      if (data(i, SpecialMarksRole) != EventStatus::Hidden) {
+        return data(i, AuthorRole) != data(idx, AuthorRole) ||
+               data(i, EventTypeRole) != data(idx, EventTypeRole);
+      }
+    }
+
+    return true;
+  }
+
+  if (role == BubbleShapeRole) {  // TODO: Convoluted logic.
+    int aboveRow = -1;            // Invalid
+
+    for (auto r = row + 1; r < rowCount(); ++r) {
+      auto i = index(r);
+      if (data(i, SpecialMarksRole) != EventStatus::Hidden) {
+        aboveRow = r;
         break;
       }
     }
 
     bool aboveShow, belowShow;
-    aboveShow = data(idx, ShowAuthorRole).toBool() ||
+    if (aboveRow == -1) {
+      aboveShow = true;
+    } else {
+      aboveShow = data(index(aboveRow), ShowAuthorRole).toBool() ||
+                  data(index(aboveRow), ShowTimestampRole).toBool();
+    }
+    belowShow = data(idx, ShowAuthorRole).toBool() ||
                 data(idx, ShowTimestampRole).toBool();
-    if (belowRow == -1)
-      belowShow = true;
-    else
-      belowShow = data(index(belowRow), ShowAuthorRole).toBool() ||
-                  data(index(belowRow), ShowTimestampRole).toBool();
 
     if (aboveShow && belowShow)
       return BubbleShapes::NoShape;