Add placeholder for reactions

resources/qml/Reactions.qml

+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
+			}
+		}
+	}
+}
+

resources/qml/TimelineRow.qml

@@ -52,6 +52,9 @@ MouseArea {
 
 				modelData: model
 			}
+
+			Reactions {
+			}
 		}
 
 		StatusIndicator {

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>