Only show reply button and option button on hover

1 files changed, 99 insertions, 63 deletions

diff --git a/resources/qml/TimelineRow.qml b/resources/qml/TimelineRow.qml
index fa427bfd..2984844f 100644
--- a/resources/qml/TimelineRow.qml
+++ b/resources/qml/TimelineRow.qml
@@ -7,92 +7,128 @@ import im.nheko 1.0
 
 import "./delegates"
 
-RowLayout {
-	property var view: chat
+MouseArea {
+	id: rowArea
 
-	anchors.leftMargin: avatarSize + 4
 	anchors.left: parent.left
 	anchors.right: parent.right
+	height: row.height
 
-	Column {
-		Layout.fillWidth: true
-		Layout.alignment: Qt.AlignTop
-		spacing: 4
+	hoverEnabled: true
+	preventStealing: true
+	propagateComposedEvents: true
+	acceptedButtons: Qt.NoButton
 
-		// fancy reply, if this is a reply
-		Reply {
-			visible: model.replyTo
-			modelData: chat.model.getDump(model.replyTo)
-			userColor: timelineManager.userColor(modelData.userId, colors.window)
-		}
-
-		// actual message content
-		MessageDelegate {
-			id: contentItem
+	property bool showButtons: false
 
-			width: parent.width
+	Timer {
+		running: rowArea.containsMouse
+		interval: 150
+		onTriggered: rowArea.state = "showButtons"
+	}
 
-			modelData: model
+	states: [
+		State {
+			name: "hideButtons"
+			when: !rowArea.containsMouse
+			PropertyChanges { target: rowArea; showButtons: false; }
+		},
+		State {
+			name: "showButtons"
+			PropertyChanges { target: rowArea; showButtons: true; }
 		}
-	}
+	]
 
-	StatusIndicator {
-		state: model.state
-		Layout.alignment: Qt.AlignRight | Qt.AlignTop
-		Layout.preferredHeight: 16
-		width: 16
-	}
+	RowLayout {
+		id: row
 
-	EncryptionIndicator {
-		visible: model.isEncrypted
-		Layout.alignment: Qt.AlignRight | Qt.AlignTop
-		Layout.preferredHeight: 16
-		width: 16
-	}
+		anchors.leftMargin: avatarSize + 4
+		anchors.left: parent.left
+		anchors.right: parent.right
 
-	ImageButton {
-		Layout.alignment: Qt.AlignRight | Qt.AlignTop
-		Layout.preferredHeight: 16
-		width: 16
-		id: replyButton
-		hoverEnabled: true
 
+		Column {
+			Layout.fillWidth: true
+			Layout.alignment: Qt.AlignTop
+			spacing: 4
 
-		image: ":/icons/icons/ui/mail-reply.png"
+			// fancy reply, if this is a reply
+			Reply {
+				visible: model.replyTo
+				modelData: chat.model.getDump(model.replyTo)
+				userColor: timelineManager.userColor(modelData.userId, colors.window)
+			}
 
-		ToolTip.visible: hovered
-		ToolTip.text: qsTr("Reply")
+			// actual message content
+			MessageDelegate {
+				id: contentItem
 
-		onClicked: view.model.replyAction(model.id)
-	}
-	ImageButton {
-		Layout.alignment: Qt.AlignRight | Qt.AlignTop
-		Layout.preferredHeight: 16
-		width: 16
-		id: optionsButton
-		hoverEnabled: true
+				width: parent.width
 
-		image: ":/icons/icons/ui/vertical-ellipsis.png"
+				modelData: model
+			}
+		}
 
-		ToolTip.visible: hovered
-		ToolTip.text: qsTr("Options")
+		ImageButton {
+			visible: rowArea.showButtons
+			Layout.alignment: Qt.AlignRight | Qt.AlignTop
+			Layout.preferredHeight: 16
+			width: 16
+			id: replyButton
+			hoverEnabled: true
 
-		onClicked: messageContextMenu.show(model.id, model.type, optionsButton)
 
-	}
+			image: ":/icons/icons/ui/mail-reply.png"
 
-	Text {
-		Layout.alignment: Qt.AlignRight | Qt.AlignTop
-		text: model.timestamp.toLocaleTimeString("HH:mm")
-		color: inactiveColors.text
+			ToolTip.visible: hovered
+			ToolTip.text: qsTr("Reply")
 
-		MouseArea{
-			id: ma
-			anchors.fill: parent
+			onClicked: chat.model.replyAction(model.id)
+		}
+		ImageButton {
+			visible: rowArea.showButtons
+			Layout.alignment: Qt.AlignRight | Qt.AlignTop
+			Layout.preferredHeight: 16
+			width: 16
+			id: optionsButton
 			hoverEnabled: true
+
+			image: ":/icons/icons/ui/vertical-ellipsis.png"
+
+			ToolTip.visible: hovered
+			ToolTip.text: qsTr("Options")
+
+			onClicked: messageContextMenu.show(model.id, model.type, optionsButton)
+
+		}
+
+		StatusIndicator {
+			state: model.state
+			Layout.alignment: Qt.AlignRight | Qt.AlignTop
+			Layout.preferredHeight: 16
+			width: 16
 		}
 
-		ToolTip.visible: ma.containsMouse
-		ToolTip.text: Qt.formatDateTime(model.timestamp, Qt.DefaultLocaleLongDate)
+		EncryptionIndicator {
+			visible: model.isEncrypted
+			Layout.alignment: Qt.AlignRight | Qt.AlignTop
+			Layout.preferredHeight: 16
+			width: 16
+		}
+
+		Text {
+			Layout.alignment: Qt.AlignRight | Qt.AlignTop
+			text: model.timestamp.toLocaleTimeString("HH:mm")
+			color: inactiveColors.text
+
+			MouseArea{
+				id: ma
+				anchors.fill: parent
+				hoverEnabled: true
+			}
+
+			ToolTip.visible: ma.containsMouse
+			ToolTip.text: Qt.formatDateTime(model.timestamp, Qt.DefaultLocaleLongDate)
+		}
 	}
 }