From e96dab71613c5f731b2150bb8260a130716f8b8a Mon Sep 17 00:00:00 2001
From: Carl Schwan <carl@carlschwan.eu>
Date: Sun, 8 Nov 2020 14:45:17 +0100
Subject: [PATCH] fix position of reactions in timeline

---
 .../Component/Timeline/MessageDelegate.qml    |  9 -----
 .../Component/Timeline/ReactionDelegate.qml   | 36 ++++++++++---------
 qml/RoomPage.qml                              | 30 +++++++++++-----
 3 files changed, 41 insertions(+), 34 deletions(-)

diff --git a/imports/Spectral/Component/Timeline/MessageDelegate.qml b/imports/Spectral/Component/Timeline/MessageDelegate.qml
index 1efc1ba56..29e67b0b1 100644
--- a/imports/Spectral/Component/Timeline/MessageDelegate.qml
+++ b/imports/Spectral/Component/Timeline/MessageDelegate.qml
@@ -120,15 +120,6 @@ RowLayout {
                     }
                 }
             }
-
-            ReactionDelegate {
-                Layout.fillWidth: true
-
-                Layout.topMargin: 0
-                Layout.bottomMargin: 8
-                Layout.leftMargin: 16
-                Layout.rightMargin: 16
-            }
         }
     }
 }
diff --git a/imports/Spectral/Component/Timeline/ReactionDelegate.qml b/imports/Spectral/Component/Timeline/ReactionDelegate.qml
index 92ac4f45d..4f457f0bc 100644
--- a/imports/Spectral/Component/Timeline/ReactionDelegate.qml
+++ b/imports/Spectral/Component/Timeline/ReactionDelegate.qml
@@ -18,15 +18,15 @@ Flow {
         model: reaction
 
         delegate: Control {
-            width: Math.min(implicitWidth, 128)
-            height: width
+            width: Math.max(implicitWidth, Kirigami.Units.largeSpacing * 3)
+            height: Kirigami.Units.largeSpacing * 3
 
             horizontalPadding: 6
             verticalPadding: 0
 
             contentItem: Label {
+                height: Kirigami.Units.largeSpacing * 3
                 text: modelData.reaction + (modelData.count > 1 ? " " + modelData.count : "")
-                font.pixelSize: 14
                 font.family: "emoji"
                 elide: Text.ElideRight
             }
@@ -41,24 +41,26 @@ Flow {
 
                     hoverEnabled: true
 
-                    ToolTip.visible: containsMouse
-                    TootTip.font.family: Kirigami.Theme.defaultFont.family + ", emoji"
-                    ToolTip.text: {
-                        var text = "";
+                    ToolTip {
+                        visible: parent.containsMouse
+                        font.family: Kirigami.Theme.defaultFont.family + ", emoji"
+                        text: {
+                            var text = "";
 
-                        for (var i = 0; i < modelData.authors.length; i++) {
-                            if (i === modelData.authors.length - 1 && i !== 0) {
-                                text += i18nc("Seperate the usernames of users", " and ")
-                            } else if (i !== 0) {
-                                text += ", "
+                            for (var i = 0; i < modelData.authors.length; i++) {
+                                if (i === modelData.authors.length - 1 && i !== 0) {
+                                    text += i18nc("Seperate the usernames of users", " and ")
+                                } else if (i !== 0) {
+                                    text += ", "
+                                }
+
+                                text += modelData.authors[i].displayName
                             }
 
-                            text += modelData.authors[i].displayName
+                            text = i18ncp("%1 is the users who reacted and %2 the emoji that was given", "%2 reacted with %3", "%2 reacted with %3", modelData.authors.length, text, modelData.reaction)
+
+                            return text
                         }
-
-                        text = i18ncp("%1 is the users who reacted and %2 the emoji that was given", "%2 reacted with %3", "%2 reacted with %3", modelData.authors.length, text, modelData.reaction)
-
-                        return text
                     }
 
                     onClicked: currentRoom.toggleReaction(eventId, modelData.reaction)
diff --git a/qml/RoomPage.qml b/qml/RoomPage.qml
index aefeb4546..04c0cc15f 100644
--- a/qml/RoomPage.qml
+++ b/qml/RoomPage.qml
@@ -192,9 +192,16 @@ Kirigami.ScrollablePage {
                             anchors.fill: parent
                             onClicked: openMessageContext(author, display, eventId, toolTip);
                         }
-                        innerObject: TextDelegate {
-                            Layout.fillWidth: true
-                        }
+                        innerObject: [
+                            TextDelegate {
+                                Layout.fillWidth: true
+                            },
+                            ReactionDelegate {
+                                Layout.fillWidth: true
+                                Layout.topMargin: 0
+                                Layout.bottomMargin: 8
+                            }
+                        ]
                     }
                 }
             }
@@ -222,11 +229,18 @@ Kirigami.ScrollablePage {
                     innerObject: MessageDelegate {
                         Layout.fillWidth: true
 
-                        innerObject: ImageDelegate {
-                            Layout.maximumWidth: parent.width
-                            Layout.preferredWidth: Math.min(320, info.w)
-                            Layout.preferredHeight: Math.min(320, info.h)
-                        }
+                        innerObject: [
+                            ImageDelegate {
+                                Layout.maximumWidth: parent.width
+                                Layout.preferredWidth: Math.min(320, info.w)
+                                Layout.preferredHeight: Math.min(320, info.h)
+                            },
+                            ReactionDelegate {
+                                Layout.fillWidth: true
+                                Layout.topMargin: 0
+                                Layout.bottomMargin: 8
+                            }
+                        ]
                     }
                 }
             }