From 505a8b5742b0c3abe978d5c806f839336b155d5c Mon Sep 17 00:00:00 2001 From: Nicolas Werner Date: Wed, 26 Feb 2020 23:43:15 +0100 Subject: [PATCH] Only show reply button and option button on hover --- resources/qml/TimelineRow.qml | 190 ++++++++++++++++++++-------------- 1 file changed, 113 insertions(+), 77 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) + 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 + spacing: 4 + + // 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 + + width: parent.width + + modelData: model + } } - // actual message content - MessageDelegate { - id: contentItem - - width: parent.width - - modelData: model - } - } - - 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 { - Layout.alignment: Qt.AlignRight | Qt.AlignTop - Layout.preferredHeight: 16 - width: 16 - id: replyButton - hoverEnabled: true - - - image: ":/icons/icons/ui/mail-reply.png" - - ToolTip.visible: hovered - ToolTip.text: qsTr("Reply") - - onClicked: view.model.replyAction(model.id) - } - ImageButton { - 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) - - } - - Text { - Layout.alignment: Qt.AlignRight | Qt.AlignTop - text: model.timestamp.toLocaleTimeString("HH:mm") - color: inactiveColors.text - - MouseArea{ - id: ma - anchors.fill: parent + ImageButton { + visible: rowArea.showButtons + Layout.alignment: Qt.AlignRight | Qt.AlignTop + Layout.preferredHeight: 16 + width: 16 + id: replyButton hoverEnabled: true + + + image: ":/icons/icons/ui/mail-reply.png" + + ToolTip.visible: hovered + ToolTip.text: qsTr("Reply") + + 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) + } - ToolTip.visible: ma.containsMouse - ToolTip.text: Qt.formatDateTime(model.timestamp, Qt.DefaultLocaleLongDate) + 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") + color: inactiveColors.text + + MouseArea{ + id: ma + anchors.fill: parent + hoverEnabled: true + } + + ToolTip.visible: ma.containsMouse + ToolTip.text: Qt.formatDateTime(model.timestamp, Qt.DefaultLocaleLongDate) + } } }