diff options
| -rw-r--r-- | resources/qml/Reactions.qml | 74 | ||||
| -rw-r--r-- | resources/qml/TimelineRow.qml | 3 | ||||
| -rw-r--r-- | resources/res.qrc | 3 |
3 files changed, 79 insertions, 1 deletions
diff --git a/resources/qml/Reactions.qml b/resources/qml/Reactions.qml new file mode 100644 index 00000000..86f0071b --- /dev/null +++ b/resources/qml/Reactions.qml @@ -0,0 +1,74 @@ +import QtQuick 2.6 +import QtQuick.Controls 2.2 + +Flow { + anchors.left: parent.left + anchors.right: parent.right + spacing: 4 + Repeater { + model: ListModel { + id: nameModel + ListElement { key: "😊"; count: 5; reactedBySelf: true; users: "Nico, RedSky, AAA, BBB, CCC" } + ListElement { key: "🤠"; count: 6; reactedBySelf: false; users: "Nico, AAA, BBB, CCC" } + ListElement { key: "💘"; count: 1; reactedBySelf: true; users: "Nico" } + ListElement { key: "🙈"; count: 7; reactedBySelf: false; users: "Nico, RedSky, AAA, BBB, CCC, DDD" } + ListElement { key: "👻"; count: 6; reactedBySelf: false; users: "Nico, RedSky, BBB, CCC" } + } + Button { + id: reaction + //border.width: 1 + text: model.key + hoverEnabled: true + implicitWidth: contentItem.childrenRect.width + contentItem.padding*2 + implicitHeight: contentItem.childrenRect.height + contentItem.padding*2 + + ToolTip.visible: hovered + ToolTip.text: model.users + + contentItem: Row { + anchors.centerIn: parent + spacing: 2 + padding: 4 + + Text { + id: reactionText + text: reaction.text + font: reaction.font + opacity: enabled ? 1.0 : 0.3 + color: reaction.hovered ? colors.highlight : colors.buttonText + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + + Rectangle { + height: reactionText.implicitHeight + width: 1 + color: reaction.hovered ? colors.highlight : colors.buttonText + } + + Text { + text: model.count + font: reaction.font + opacity: enabled ? 1.0 : 0.3 + color: reaction.hovered ? colors.highlight : colors.buttonText + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + } + + background: Rectangle { + anchors.centerIn: parent + implicitWidth: reaction.implicitWidth + implicitHeight: reaction.implicitHeight + opacity: enabled ? 1 : 0.3 + border.color: (reaction.hovered || model.reactedBySelf )? colors.highlight : colors.buttonText + color: colors.dark + border.width: 1 + radius: reaction.height / 2.0 + } + } + } +} + diff --git a/resources/qml/TimelineRow.qml b/resources/qml/TimelineRow.qml index 05c69112..f3262fbd 100644 --- a/resources/qml/TimelineRow.qml +++ b/resources/qml/TimelineRow.qml @@ -52,6 +52,9 @@ MouseArea { modelData: model } + + Reactions { + } } StatusIndicator { diff --git a/resources/res.qrc b/resources/res.qrc index c6daaa80..64a5b3cb 100644 --- a/resources/res.qrc +++ b/resources/res.qrc @@ -117,8 +117,9 @@ <file>qml/MatrixText.qml</file> <file>qml/StatusIndicator.qml</file> <file>qml/EncryptionIndicator.qml</file> - <file>qml/TimelineRow.qml</file> + <file>qml/Reactions.qml</file> <file>qml/ScrollHelper.qml</file> + <file>qml/TimelineRow.qml</file> <file>qml/delegates/MessageDelegate.qml</file> <file>qml/delegates/TextMessage.qml</file> <file>qml/delegates/NoticeMessage.qml</file> |