Only show reply button and option button on hover

resources/qml/TimelineRow.qml

@@ -7,13 +7,46 @@ import im.nheko 1.0
 
 import "./delegates"
 
-RowLayout {
-	property var view: chat
+MouseArea {
+	id: rowArea
+
+	anchors.left: parent.left
+	anchors.right: parent.right
+	height: row.height
+
+	hoverEnabled: true
+	preventStealing: true
+	propagateComposedEvents: true
+	acceptedButtons: Qt.NoButton
+
+	property bool showButtons: false
+
+	Timer {
+		running: rowArea.containsMouse
+		interval: 150
+		onTriggered: rowArea.state = "showButtons"
+	}
+
+	states: [
+		State {
+			name: "hideButtons"
+			when: !rowArea.containsMouse
+			PropertyChanges { target: rowArea; showButtons: false; }
+		},
+		State {
+			name: "showButtons"
+			PropertyChanges { target: rowArea; showButtons: true; }
+		}
+	]
+
+	RowLayout {
+		id: row
 
 		anchors.leftMargin: avatarSize + 4
 		anchors.left: parent.left
 		anchors.right: parent.right
 
+
 		Column {
 			Layout.fillWidth: true
 			Layout.alignment: Qt.AlignTop
@@ -36,21 +69,8 @@ RowLayout {
 			}
 		}
 
-	StatusIndicator {
-		state: model.state
-		Layout.alignment: Qt.AlignRight | Qt.AlignTop
-		Layout.preferredHeight: 16
-		width: 16
-	}
-
-	EncryptionIndicator {
-		visible: model.isEncrypted
-		Layout.alignment: Qt.AlignRight | Qt.AlignTop
-		Layout.preferredHeight: 16
-		width: 16
-	}
-
 		ImageButton {
+			visible: rowArea.showButtons
 			Layout.alignment: Qt.AlignRight | Qt.AlignTop
 			Layout.preferredHeight: 16
 			width: 16
@@ -63,9 +83,10 @@ RowLayout {
 			ToolTip.visible: hovered
 			ToolTip.text: qsTr("Reply")
 
-		onClicked: view.model.replyAction(model.id)
+			onClicked: chat.model.replyAction(model.id)
 		}
 		ImageButton {
+			visible: rowArea.showButtons
 			Layout.alignment: Qt.AlignRight | Qt.AlignTop
 			Layout.preferredHeight: 16
 			width: 16
@@ -81,6 +102,20 @@ RowLayout {
 
 		}
 
+		StatusIndicator {
+			state: model.state
+			Layout.alignment: Qt.AlignRight | Qt.AlignTop
+			Layout.preferredHeight: 16
+			width: 16
+		}
+
+		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")
@@ -95,4 +130,5 @@ RowLayout {
 			ToolTip.visible: ma.containsMouse
 			ToolTip.text: Qt.formatDateTime(model.timestamp, Qt.DefaultLocaleLongDate)
 		}
+	}
 }