From 4951241d23a936d110df1694c884490a7ba92461 Mon Sep 17 00:00:00 2001 From: Nicolas Werner Date: Tue, 28 Jan 2020 19:08:16 +0100 Subject: [PATCH] Simplify reply popup logic --- resources/qml/TimelineRow.qml | 49 +------------- resources/qml/TimelineView.qml | 106 +++++++++--------------------- resources/qml/delegates/Reply.qml | 57 ++++++++++++++++ resources/res.qrc | 1 + 4 files changed, 93 insertions(+), 120 deletions(-) create mode 100644 resources/qml/delegates/Reply.qml diff --git a/resources/qml/TimelineRow.qml b/resources/qml/TimelineRow.qml index 86780413..0868c1b8 100644 --- a/resources/qml/TimelineRow.qml +++ b/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 - height: replyContainer.height - - 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 - } + modelData: chat.model.getDump(model.replyTo) + userColor: chat.model.userColor(modelData.userId, colors.window) } // actual message content diff --git a/resources/qml/TimelineView.qml b/resources/qml/TimelineView.qml index 61094890..a5746703 100644 --- a/resources/qml/TimelineView.qml +++ b/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 { - anchors.left: parent.left - anchors.right: parent.right - anchors.bottom: parent.bottom - - id: replyPopup - - visible: timelineManager.replyingEvent && chat.model - width: parent.width - // Height of child, plus margins, plus border - height: replyContent.height + 10 - color: colors.dark - - RowLayout { - id: replyContent + Text { + id: typingDisplay anchors.left: parent.left anchors.right: parent.right - anchors.top: parent.top - anchors.margins: 10 + anchors.leftMargin: 10 + anchors.rightMargin: 10 - Column { - Layout.fillWidth: true - Layout.alignment: Qt.AlignTop - spacing: 4 - Rectangle { - width: parent.width - height: replyContainer.height - anchors.leftMargin: 10 - anchors.rightMargin: 10 + text: chat.model ? chat.model.formatTypingUsers(chat.model.typingUsers, colors.window) : "" + textFormat: Text.RichText + color: colors.windowText + } - Rectangle { - id: colorLine - height: replyContainer.height - width: 4 - color: chat.model ? chat.model.userColor(reply.modelData.userId, colors.window) : colors.window - } + Rectangle { + anchors.left: parent.left + anchors.right: parent.right - Column { - id: replyContainer - anchors.left: colorLine.right - anchors.leftMargin: 4 - width: parent.width - 8 + id: replyPopup - 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 + visible: timelineManager.replyingEvent && chat.model + // Height of child, plus margins, plus border + height: replyPreview.height + 10 + color: colors.dark - 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) : {} - } - } + Reply { + id: replyPreview - color: { var col = chat.model ? chat.model.userColor(reply.modelData.userId, colors.window) : colors.window; col.a = 0.2; return col } + anchors.left: parent.left + anchors.leftMargin: 10 + anchors.right: closeReplyButton.left + anchors.bottom: parent.bottom - MouseArea { - anchors.fill: parent - onClicked: chat.positionViewAtIndex(chat.model.idToIndex(timelineManager.replyingEvent), ListView.Contain) - cursorShape: Qt.PointingHandCursor - } - } + 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 diff --git a/resources/qml/delegates/Reply.qml b/resources/qml/delegates/Reply.qml new file mode 100644 index 00000000..a1ddc8f0 --- /dev/null +++ b/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 + } +} diff --git a/resources/res.qrc b/resources/res.qrc index 36e900a1..0e5f4125 100644 --- a/resources/res.qrc +++ b/resources/res.qrc @@ -123,5 +123,6 @@ qml/delegates/FileMessage.qml qml/delegates/Pill.qml qml/delegates/Placeholder.qml + qml/delegates/Reply.qml