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 {
|
