invert timeline

1 files changed, 47 insertions, 9 deletions

diff --git a/resources/qml/TimelineView.qml b/resources/qml/TimelineView.qml
index 1a1900ad..6bc2eb53 100644
--- a/resources/qml/TimelineView.qml
+++ b/resources/qml/TimelineView.qml
@@ -115,30 +115,68 @@ Item {
 			onMovementEnded: updatePosition()
 
 			spacing: 4
-			delegate: TimelineRow {
+			verticalLayoutDirection: ListView.BottomToTop
+
+			delegate: Rectangle {
+				// This would normally be previousSection, but our model's order is inverted.
+				property bool sectionBoundary: (ListView.nextSection != "" && ListView.nextSection !== ListView.section) || model.index === chat.count - 1
+
+				id: wrapper
+				property Item section
+				width: chat.width
+				height: section ? section.height + timelinerow.height : timelinerow.height
+
+				TimelineRow {
+					id: timelinerow
+					y: section ? section.y + section.height : 0
+				}
 				function isFullyVisible() {
 					return height > 1 && (y - chat.contentY - 1) + height < chat.height
 				}
 				function getIndex() {
 					return index;
 				}
+
+				onSectionBoundaryChanged: {
+					if (sectionBoundary) {
+						var properties = {
+							'modelData': model.dump,
+							'section': ListView.section,
+							'nextSection': ListView.nextSection
+						}
+						section = sectionHeader.createObject(wrapper, properties)
+					} else {
+						section.destroy()
+						section = null
+					}
+				}
+
 			}
 
 			section {
 				property: "section"
-				delegate: Column {
+			}
+			Component {
+				id: sectionHeader
+				Column {
+					property var modelData
+					property string section
+					property string nextSection
+
 					topPadding: 4
 					bottomPadding: 4
 					spacing: 8
 
+					visible: !!modelData
+
 					width: parent.width
 					height: (section.includes(" ") ? dateBubble.height + 8 + userName.height : userName.height) + 8
 
 					Label {
 						id: dateBubble
-						anchors.horizontalCenter: parent.horizontalCenter
+						anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined
 						visible: section.includes(" ")
-						text: chat.model.formatDateSeparator(new Date(Number(section.split(" ")[1])))
+						text: chat.model.formatDateSeparator(modelData.timestamp)
 						color: colors.windowText
 
 						height: contentHeight * 1.2
@@ -155,20 +193,20 @@ Item {
 						Avatar {
 							width: avatarSize
 							height: avatarSize
-							url: chat.model.avatarUrl(section.split(" ")[0]).replace("mxc://", "image://MxcImage/")
-							displayName: chat.model.displayName(section.split(" ")[0])
+							url: chat.model.avatarUrl(modelData.userId).replace("mxc://", "image://MxcImage/")
+							displayName: modelData.userName
 
 							MouseArea {
 								anchors.fill: parent
-								onClicked: chat.model.openUserProfile(section.split(" ")[0])
+								onClicked: chat.model.openUserProfile(modelData.userId)
 								cursorShape: Qt.PointingHandCursor
 							}
 						}
 
 						Text { 
 							id: userName
-							text: chat.model.escapeEmoji(chat.model.displayName(section.split(" ")[0]))
-							color: chat.model.userColor(section.split(" ")[0], colors.window)
+							text: chat.model.escapeEmoji(modelData.userName)
+							color: chat.model.userColor(modelData.userId, colors.window)
 							textFormat: Text.RichText
 
 							MouseArea {