From 8c728374a79d5fb6adcc20fa28127cc31974189d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Blin?=
<sebastien.blin@savoirfairelinux.com>
Date: Tue, 18 Jul 2023 14:10:30 -0400
Subject: [PATCH] emojiReactions: change the emojis layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
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 | 52 ++++++------
src/app/commoncomponents/SBSMessageBase.qml | 93 ++++++++++++++-------
src/app/constant/JamiTheme.qml | 3 +-
3 files changed, 88 insertions(+), 60 deletions(-)
diff --git a/src/app/commoncomponents/EmojiReactions.qml b/src/app/commoncomponents/EmojiReactions.qml
index 4ed741f52..64b61c676 100644
--- a/src/app/commoncomponents/EmojiReactions.qml
+++ b/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
}
}
diff --git a/src/app/commoncomponents/SBSMessageBase.qml b/src/app/commoncomponents/SBSMessageBase.qml
index 5a83596ae..3a3266fef 100644
--- a/src/app/commoncomponents/SBSMessageBase.qml
+++ b/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
diff --git a/src/app/constant/JamiTheme.qml b/src/app/constant/JamiTheme.qml
index 3d421faa0..e4fe70b15 100644
--- a/src/app/constant/JamiTheme.qml
+++ b/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)
--
GitLab