Simplify reply popup logic

resources/qml/TimelineRow.qml

@@ -22,53 +22,10 @@ RowLayout {
 		spacing: 4
 
 		// fancy reply, if this is a reply
-		Rectangle {
+		Reply {
 			visible: model.replyTo
-			width: parent.width
+			modelData: chat.model.getDump(model.replyTo)
-			height: replyContainer.height
+			userColor: chat.model.userColor(modelData.userId, colors.window)
-
-			Rectangle {
-				id: colorLine
-				height: replyContainer.height
-				width: 4
-				color: chat.model.userColor(reply.modelData.userId, colors.window)
-			}
-
-			Column {
-				id: replyContainer
-				anchors.left: colorLine.right
-				anchors.leftMargin: 4
-				width: parent.width - 8
-
-
-				Text { 
-					id: userName
-					text: chat.model.escapeEmoji(reply.modelData.userName)
-					color: chat.model.userColor(reply.modelData.userId, colors.window)
-					textFormat: Text.RichText
-
-					MouseArea {
-						anchors.fill: parent
-						onClicked: chat.model.openUserProfile(reply.modelData.userId)
-						cursorShape: Qt.PointingHandCursor
-					}
-				}
-
-				MessageDelegate {
-					id: reply
-					width: parent.width
-
-					modelData: chat.model.getDump(model.replyTo)
-				}
-			}
-
-			color: { var col = chat.model.userColor(reply.modelData.userId, colors.window); col.a = 0.2; return col }
-
-			MouseArea {
-				anchors.fill: parent
-				onClicked: chat.positionViewAtIndex(chat.model.idToIndex(model.replyTo), ListView.Contain)
-				cursorShape: Qt.PointingHandCursor
-			}
 		}
 
 		// actual message content

resources/qml/TimelineView.qml

@@ -192,7 +192,7 @@ Item {
 		Rectangle {
 			id: chatFooter
 
-			height: Math.max(Math.max(16, typingDisplay.height), replyPopup.height)
+			height: Math.max(16, aaaaa.height)
 			anchors.left: parent.left
 			anchors.right: parent.right
 			anchors.bottom: parent.bottom
@@ -200,96 +200,54 @@ Item {
 
 			color: colors.window
 
-			Text {
+			Column {
+				id: aaaaa
 				anchors.left: parent.left
 				anchors.right: parent.right
-				anchors.bottom: parent.bottom
-				anchors.leftMargin: 10
-				anchors.rightMargin: 10
-
-				id: typingDisplay
-				text: chat.model ? chat.model.formatTypingUsers(chat.model.typingUsers, chatFooter.color) : ""
-				textFormat: Text.RichText
-				color: colors.windowText
-			}
 
-			Rectangle {
+				Text {
-				anchors.left: parent.left
+					id: typingDisplay
-				anchors.right: parent.right
+					anchors.left: parent.left
-				anchors.bottom: parent.bottom
+					anchors.right: parent.right
-
+					anchors.leftMargin: 10
-				id: replyPopup
+					anchors.rightMargin: 10
 
-				visible: timelineManager.replyingEvent && chat.model
+					text: chat.model ? chat.model.formatTypingUsers(chat.model.typingUsers, colors.window) : ""
-				width: parent.width
+					textFormat: Text.RichText
-				// Height of child, plus margins, plus border
+					color: colors.windowText
-				height: replyContent.height + 10
+				}
-				color: colors.dark
 
-				RowLayout {
+				Rectangle {
-					id: replyContent
 					anchors.left: parent.left
 					anchors.right: parent.right
-					anchors.top: parent.top
-					anchors.margins: 10
 
-					Column {
+					id: replyPopup
-						Layout.fillWidth: true
-						Layout.alignment: Qt.AlignTop
-						spacing: 4
-						Rectangle {
-							width: parent.width
-							height: replyContainer.height
-							anchors.leftMargin: 10
-							anchors.rightMargin: 10
-
-							Rectangle {
-								id: colorLine
-								height: replyContainer.height
-								width: 4
-								color: chat.model ? chat.model.userColor(reply.modelData.userId, colors.window) : colors.window
-							}
 
-							Column {
+					visible: timelineManager.replyingEvent && chat.model
-								id: replyContainer
+					// Height of child, plus margins, plus border
-								anchors.left: colorLine.right
+					height: replyPreview.height + 10
-								anchors.leftMargin: 4
+					color: colors.dark
-								width: parent.width - 8
-
-								Text { 
-									id: userName
-									text: chat.model ? chat.model.escapeEmoji(reply.modelData.userName) : ""
-									color: chat.model ? chat.model.userColor(reply.modelData.userId, colors.windowText) : colors.windowText
-									textFormat: Text.RichText
-
-									MouseArea {
-										anchors.fill: parent
-										onClicked: chat.model.openUserProfile(reply.modelData.userId)
-										cursorShape: Qt.PointingHandCursor
-									}
-								}
-
-								MessageDelegate {
-									id: reply
-									width: parent.width
-									modelData: chat.model ? chat.model.getDump(timelineManager.replyingEvent) : {}
-								}
-							}
 
-							color: { var col = chat.model ? chat.model.userColor(reply.modelData.userId, colors.window) : colors.window; col.a = 0.2; return col }
 
-							MouseArea {
+					Reply {
-								anchors.fill: parent
+						id: replyPreview
-								onClicked: chat.positionViewAtIndex(chat.model.idToIndex(timelineManager.replyingEvent), ListView.Contain)
+
-								cursorShape: Qt.PointingHandCursor
+						anchors.left: parent.left
-							}
+						anchors.leftMargin: 10
-						}
+						anchors.right: closeReplyButton.left
+						anchors.bottom: parent.bottom
+
+						modelData: chat.model ? chat.model.getDump(timelineManager.replyingEvent) : {}
+						userColor: chat.model ? chat.model.userColor(modelData.userId, colors.window) : colors.window
 					}
+
 					ImageButton {
-						Layout.alignment: Qt.AlignRight | Qt.AlignTop
-						Layout.preferredHeight: 16
 						id: closeReplyButton
 
+						anchors.right: parent.right
+						anchors.rightMargin: 10
+						anchors.top: replyPreview.top
+
 						image: ":/icons/icons/ui/remove-symbol.png"
 						ToolTip {
 							visible: closeReplyButton.hovered

resources/qml/delegates/Reply.qml

@@ -0,0 +1,57 @@
+import QtQuick 2.6
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.2
+import QtQuick.Window 2.2
+
+Rectangle {
+	id: replyComponent
+
+	property alias modelData: reply.modelData
+	property color userColor: "red"
+
+	width: parent.width
+	height: replyContainer.height
+
+	Rectangle {
+		id: colorLine
+
+		anchors.top: replyContainer.top
+		anchors.bottom: replyContainer.bottom
+		width: 4
+
+		color: chat.model ? chat.model.userColor(reply.modelData.userId, colors.window) : colors.window
+	}
+
+	Column {
+		id: replyContainer
+		anchors.left: colorLine.right
+		anchors.leftMargin: 4
+		width: parent.width - 8
+
+		Text { 
+			id: userName
+			text: chat.model ? chat.model.escapeEmoji(reply.modelData.userName) : ""
+			color: replyComponent.userColor
+			textFormat: Text.RichText
+
+			MouseArea {
+				anchors.fill: parent
+				onClicked: chat.model.openUserProfile(reply.modelData.userId)
+				cursorShape: Qt.PointingHandCursor
+			}
+		}
+
+		MessageDelegate {
+			id: reply
+			width: parent.width
+		}
+	}
+
+	color: Qt.rgba(userColor.r, userColor.g, userColor.b, 0.2)
+
+	MouseArea {
+		anchors.fill: parent
+		onClicked: chat.positionViewAtIndex(chat.model.idToIndex(timelineManager.replyingEvent), ListView.Contain)
+		cursorShape: Qt.PointingHandCursor
+	}
+}

resources/res.qrc

@@ -123,5 +123,6 @@
         <file>qml/delegates/FileMessage.qml</file>
         <file>qml/delegates/Pill.qml</file>
         <file>qml/delegates/Placeholder.qml</file>
+        <file>qml/delegates/Reply.qml</file>
     </qresource>
 </RCC>