Add avatar placeholder and scrollbar to qml timeline

resources/qml/TimelineView.qml

@@ -13,18 +13,29 @@ Rectangle {
 	}
 
 	ListView {
+		id: chat
+
 		visible: timelineManager.timeline != null
 		anchors.fill: parent
 
-		id: chat
+		ScrollBar.vertical: ScrollBar {
+			id: scrollbar
+			anchors.top: parent.top
+			anchors.right: parent.right
+			anchors.bottom: parent.bottom
+		}
 
 		model: timelineManager.timeline
 		delegate: RowLayout {
-			width: chat.width
+			anchors.leftMargin: 52
+			anchors.left: parent.left
+			anchors.right: parent.right
+			anchors.rightMargin: scrollbar.width
+
 			Text {
 				Layout.fillWidth: true
 				height: contentHeight
-				text: model.userName
+				text: "Event content"
 			}
 
 			Button {
@@ -88,7 +99,9 @@ Rectangle {
 			property: "section"
 			delegate: Column {
 				width: parent.width
+				height: dateBubble.visible ? dateBubble.height + userName.height : userName.height
 				Label {
+					id: dateBubble
 					anchors.horizontalCenter: parent.horizontalCenter
 					visible: section.includes(" ")
 					text: Qt.formatDate(new Date(Number(section.split(" ")[1])))
@@ -100,7 +113,20 @@ Rectangle {
 						color: "black"
 					}
 				}
-				Text { text: section.split(" ")[0] }
+				Row {
+					spacing: 4
+					Rectangle {
+						width: 48
+						height: 48
+						color: "green"
+					}
+
+					Text { 
+						id: userName
+						text: chat.model.displayName(section.split(" ")[0])
+						color: chat.model.userColor(section.split(" ")[0], "#ffffff")
+					}
+				}
 			}
 		}
 	}

src/timeline2/TimelineModel.cpp

@@ -56,7 +56,6 @@ int
 TimelineModel::rowCount(const QModelIndex &parent) const
 {
         Q_UNUSED(parent);
-        nhlog::ui()->info("current order size: {}", eventOrder.size());
         return (int)this->eventOrder.size();
 }
 
@@ -98,10 +97,8 @@ TimelineModel::data(const QModelIndex &index, int role) const
                 return QVariant(boost::apply_visitor(
                   [](const auto &e) -> QString { return senderId(e); }, events.value(id)));
         case UserName:
-                return QVariant(Cache::displayName(
-                  room_id_,
-                  boost::apply_visitor([](const auto &e) -> QString { return senderId(e); },
-                                       events.value(id))));
+                return QVariant(displayName(boost::apply_visitor(
+                  [](const auto &e) -> QString { return senderId(e); }, events.value(id))));
 
         case Timestamp:
                 return QVariant(boost::apply_visitor(
@@ -119,7 +116,6 @@ TimelineModel::addEvents(const mtx::responses::Timeline &events)
                 isInitialSync     = false;
         }
 
-        nhlog::ui()->info("add {} events", events.events.size());
         std::vector<QString> ids;
         for (const auto &e : events.events) {
                 QString id =
@@ -127,7 +123,6 @@ TimelineModel::addEvents(const mtx::responses::Timeline &events)
 
                 this->events.insert(id, e);
                 ids.push_back(id);
-                nhlog::ui()->info("add event {}", id.toStdString());
         }
 
         beginInsertRows(QModelIndex(),
@@ -169,7 +164,6 @@ TimelineModel::fetchHistory()
 void
 TimelineModel::addBackwardsEvents(const mtx::responses::Messages &msgs)
 {
-        nhlog::ui()->info("add {} backwards events", msgs.chunk.size());
         std::vector<QString> ids;
         for (const auto &e : msgs.chunk) {
                 QString id =
@@ -177,7 +171,6 @@ TimelineModel::addBackwardsEvents(const mtx::responses::Messages &msgs)
 
                 this->events.insert(id, e);
                 ids.push_back(id);
-                nhlog::ui()->info("add event {}", id.toStdString());
         }
 
         beginInsertRows(QModelIndex(), 0, static_cast<int>(ids.size() - 1));
@@ -197,3 +190,9 @@ TimelineModel::userColor(QString id, QColor background)
                   id, QColor(utils::generateContrastingHexColor(id, background.name())));
         return userColors.value(id);
 }
+
+QString
+TimelineModel::displayName(QString id) const
+{
+        return Cache::displayName(room_id_, id);
+}

src/timeline2/TimelineModel.h

@@ -29,7 +29,7 @@ public:
         QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const;
 
         Q_INVOKABLE QColor userColor(QString id, QColor background);
-
+        Q_INVOKABLE QString displayName(QString id) const;
 
         void addEvents(const mtx::responses::Timeline &events);