emojiReactions: change the emojis layout

Gitlab: #1230
Co-authored-by: Charles <charles-francis.damedey@savoirfairelinux.com>
Co-authored-by: Sébastien Blin <sebastien.blin@savoirfairelinux.com>
Change-Id: I5bff3a811caa9bec8ee9b80733165aaaaae5db24

src/app/commoncomponents/EmojiReactions.qml

@@ -24,9 +24,13 @@ import net.jami.Constants 1.1
 Item {
     id: root
 
+    width: reactionBubble.width
+
     property var reactions
-    property real contentHeight: bubble.height
-    property real contentWidth: bubble.width
+    property real contentHeight: reactionBubble.height
+    property real contentWidth: reactionBubble.width
+    property color borderColor: undefined
+    property int maxWidth: JamiTheme.defaulMaxWidthReaction
 
     visible: emojis.length && Body !== ""
 
@@ -80,36 +84,30 @@ Item {
         return [];
     }
 
+    // TODO:
+
+    // -order emojis based on the timestamp of the reaction and/or the quantity of emojis
     Rectangle {
-        id: bubble
+        id: reactionBubble
 
         color: JamiTheme.emojiReactBubbleBgColor
-        width: textEmojis.width + 6
-        height: textEmojis.height + 6
-        radius: 10
-
-        Text {
-            id: textEmojis
-
-            anchors.margins: 10
-            anchors.centerIn: bubble
-            font.pointSize: JamiTheme.emojiReactSize
-            color: JamiTheme.chatviewTextColor
-            text: root.emojis
-        }
+        width: textEmojis.width + 10
+        height: textEmojis.height + 10
+        anchors.centerIn: textEmojis
+        radius: 5
+        border.color: root.borderColor
+        border.width: 1
     }
 
-    DropShadow {
-        z: -1
+    Text {
+        id: textEmojis
+        anchors.margins: 10
+        anchors.centerIn: root
 
-        width: bubble.width
-        height: bubble.height
-        horizontalOffset: 3.0
-        verticalOffset: 3.0
-        radius: bubble.radius * 4
-        color: JamiTheme.shadowColor
-        source: bubble
-        transparentBorder: true
-        samples: radius + 1
+        font.pointSize: JamiTheme.emojiReactSize
+        color: JamiTheme.chatviewTextColor
+        text: root.emojis
+        width: Math.min(implicitWidth,root.maxWidth)
+        wrapMode: Text.Wrap
     }
 }

src/app/commoncomponents/SBSMessageBase.qml

@@ -64,6 +64,15 @@ Control {
     // then the root delegate is likely a Loader.
     readonly property ListView listView: ListView.view ? ListView.view : parent.ListView.view
 
+    function getBaseColor() {
+        var baseColor = isOutgoing ? CurrentConversation.color : JamiTheme.messageInBgColor;
+        if (Id === MessagesAdapter.replyToId || Id === MessagesAdapter.editId) {
+            // If we are replying to or editing the message
+            return Qt.darker(baseColor, 1.5);
+        }
+        return baseColor;
+    }
+
     rightPadding: hPadding
     leftPadding: hPadding
 
@@ -115,7 +124,7 @@ Control {
             Layout.fillWidth: true
             Layout.preferredHeight: childrenRect.height
 
-            Layout.topMargin: visible? JamiTheme.sbsMessageBaseReplyTopMargin : 0
+            Layout.topMargin: visible ? JamiTheme.sbsMessageBaseReplyTopMargin : 0
             Layout.leftMargin: isOutgoing ? undefined : JamiTheme.sbsMessageBaseReplyMargin
             Layout.rightMargin: !isOutgoing ? undefined : JamiTheme.sbsMessageBaseReplyMargin
 
@@ -201,7 +210,7 @@ Control {
         RowLayout {
             id: msgRowlayout
 
-            Layout.preferredHeight: innerContent.height + root.extraHeight
+            Layout.preferredHeight: innerContent.height + root.extraHeight + (emojiReactions.emojis === "" ? 0 : emojiReactions.height - 8)
             Layout.topMargin: ((seq === MsgSeq.first || seq === MsgSeq.single) && !root.isReply) ? 6 : 0
 
             Item {
@@ -323,17 +332,7 @@ Control {
                     out: isOutgoing
                     type: seq
                     isReply: root.isReply
-
-                    function getBaseColor() {
-                        var baseColor = isOutgoing ? CurrentConversation.color : JamiTheme.messageInBgColor;
-                        if (Id === MessagesAdapter.replyToId || Id === MessagesAdapter.editId) {
-                            // If we are replying to or editing the message
-                            return Qt.darker(baseColor, 1.5);
-                        }
-                        return baseColor;
-                    }
-
-                    color: getBaseColor()
+                    color: root.getBaseColor()
                     radius: msgRadius
                     anchors.right: isOutgoing ? parent.right : undefined
                     anchors.top: parent.top
@@ -342,6 +341,55 @@ Control {
                     height: innerContent.childrenRect.height + (visible ? root.extraHeight : 0)
                 }
 
+                EmojiReactions {
+                    id: emojiReactions
+
+                    anchors.top: bubble.bottom
+                    anchors.topMargin: -8
+
+                    height: contentHeight + 5
+                    reactions: Reactions
+                    borderColor: root.getBaseColor()
+                    maxWidth: 2/3 * maxMsgWidth - JamiTheme.emojiMargins
+
+                    state: root.isOutgoing ? "anchorsRight" : (emojiReactions.width > bubble.width - JamiTheme.emojiMargins ? "anchorsLeft" : "anchorsRight")
+
+                    TapHandler {
+                        onTapped: {
+                            reactionPopup.open();
+                        }
+                    }
+
+                    states: [
+                        State {
+                            name: "anchorsRight"
+                            AnchorChanges {
+                                target: emojiReactions;
+                                anchors.right: bubble.right
+                                anchors.left: undefined
+                            }
+                            PropertyChanges {
+                                target: emojiReactions;
+                                anchors.rightMargin: JamiTheme.emojiMargins
+                                anchors.leftMargin: 0
+                            }
+                        },
+                        State {
+                            name: "anchorsLeft"
+                            AnchorChanges {
+                                target: emojiReactions;
+                                anchors.right: undefined
+                                anchors.left:  bubble.left
+                            }
+                            PropertyChanges {
+                                target: emojiReactions;
+                                anchors.rightMargin: 0
+                                anchors.leftMargin: JamiTheme.emojiMargins
+                            }
+                        }
+                    ]
+                }
+
                 Rectangle {
                     id: bg
 
@@ -440,25 +488,6 @@ Control {
             }
         }
 
-        EmojiReactions {
-            id: emojiReactions
-
-            property bool isOutgoing: Author === CurrentAccount.uri
-            Layout.alignment: isOutgoing ? Qt.AlignRight : Qt.AlignLeft
-            Layout.rightMargin: isOutgoing ? status.width : undefined
-            Layout.leftMargin: !isOutgoing ? avatarBlock.width : undefined
-            Layout.topMargin: -contentHeight / 4
-            Layout.preferredHeight: contentHeight + 5
-            Layout.preferredWidth: contentWidth
-            reactions: Reactions
-
-            TapHandler {
-                onTapped: {
-                    reactionPopup.open();
-                }
-            }
-        }
-
         ListView {
             id: infoCell
 

src/app/constant/JamiTheme.qml

@@ -265,12 +265,13 @@ Item {
     property real namePopupFontsize: calcSize(15)
     property real avatarSize: 30
     property int emojiPushButtonSize: 30
-    property int emojiMargins: 20
+    property int emojiMargins: 16
     property color emojiReactBubbleBgColor: darkTheme ? darkGreyColor : whiteColor
     property color emojiReactPushButtonColor: darkTheme ? "#bbb" : "#003b4e"
     property real messageOptionTextFontSize: calcSize(15)
     property int emojiPickerWidth: 400
     property int emojiPickerHeight: 425
+    property int defaulMaxWidthReaction : 350
 
     // Files To Send Container
     property color removeFileButtonColor: Qt.rgba(96, 95, 97, 0.5)