From a0c2a174eaf1446e8ed42a2e396c1bb9ce885b7e Mon Sep 17 00:00:00 2001 From: kamathmanu Date: Tue, 13 Oct 2020 16:24:42 -0400 Subject: [PATCH 1/3] Display filename on mouse hover --- resources/qml/delegates/ImageMessage.qml | 31 +++++++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) diff --git a/resources/qml/delegates/ImageMessage.qml b/resources/qml/delegates/ImageMessage.qml index e2c78fb..8307bdd 100644 --- a/resources/qml/delegates/ImageMessage.qml +++ b/resources/qml/delegates/ImageMessage.qml @@ -31,11 +31,40 @@ Item { fillMode: Image.PreserveAspectFit MouseArea { + id: mouseArea enabled: model.data.type == MtxEvent.ImageMessage && img.status == Image.Ready + hoverEnabled: true anchors.fill: parent onClicked: TimelineManager.openImageOverlay(model.data.url, model.data.id) } - } + Item { + id: overlay + + anchors.fill: parent + visible: mouseArea.containsMouse + + Rectangle { + id: container + width: parent.width + implicitHeight: imgcaption.implicitHeight + anchors.bottom: overlay.bottom + color: "black" + opacity: 0.75 + + Text { + id: imgcaption + anchors.fill: parent + elide: Text.ElideMiddle + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + // See this MSC: https://github.com/matrix-org/matrix-doc/pull/2530 + text: model.data.filename ? model.data.filename : model.data.body + font.pointSize: 11 + color: "white" + } + } + } + } } From e3c665661393b7495d275bc23fb68a158c5df3fb Mon Sep 17 00:00:00 2001 From: kamathmanu Date: Wed, 14 Oct 2020 18:07:09 -0400 Subject: [PATCH 2/3] Avoid hardcoded font size --- resources/qml/delegates/ImageMessage.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/qml/delegates/ImageMessage.qml b/resources/qml/delegates/ImageMessage.qml index 8307bdd..3f6d995 100644 --- a/resources/qml/delegates/ImageMessage.qml +++ b/resources/qml/delegates/ImageMessage.qml @@ -61,10 +61,10 @@ Item { verticalAlignment: Text.AlignVCenter // See this MSC: https://github.com/matrix-org/matrix-doc/pull/2530 text: model.data.filename ? model.data.filename : model.data.body - font.pointSize: 11 color: "white" } } } + } } From e1c4f7d516b2096c5b133fb7610a8a83755503a0 Mon Sep 17 00:00:00 2001 From: kamathmanu Date: Thu, 15 Oct 2020 11:52:49 -0400 Subject: [PATCH 3/3] Make Text element a sibling of the Rectangle to avoid the text from depending on the rectangle's opacity property. Switch to Nheko theme colors --- resources/qml/delegates/ImageMessage.qml | 28 ++++++++++++------------ 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/resources/qml/delegates/ImageMessage.qml b/resources/qml/delegates/ImageMessage.qml index 3f6d995..6ac5ee1 100644 --- a/resources/qml/delegates/ImageMessage.qml +++ b/resources/qml/delegates/ImageMessage.qml @@ -43,28 +43,28 @@ Item { anchors.fill: parent visible: mouseArea.containsMouse - + Rectangle { id: container + width: parent.width implicitHeight: imgcaption.implicitHeight anchors.bottom: overlay.bottom - color: "black" + color: colors.window opacity: 0.75 + } - Text { - id: imgcaption - - anchors.fill: parent - elide: Text.ElideMiddle - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - // See this MSC: https://github.com/matrix-org/matrix-doc/pull/2530 - text: model.data.filename ? model.data.filename : model.data.body - color: "white" - } + Text { + id: imgcaption + + anchors.fill: container + elide: Text.ElideMiddle + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + // See this MSC: https://github.com/matrix-org/matrix-doc/pull/2530 + text: model.data.filename ? model.data.filename : model.data.body + color: colors.text } } - } }