status-im
/
status-qml
mirror of
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(StatusMessageEmojiReactions): Fixed emoji reactions appearance (#889)

This commit is contained in:
Igor Sirotin 2022-09-10 11:22:12 +08:00 committed by GitHub
parent c3bbb396ec
commit efc5be38bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 97 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
sandbox/demoapp/data/Models.qml
View File

@ -1007,7 +1007,54 @@ QtObject {
localName: "" localName: ""
profileImage: "" profileImage: ""
contentType: StatusMessage.ContentType.Text contentType: StatusMessage.ContentType.Text
message: 'Simple text message with reactions' message: 'Simple text message from another user with reactions'
messageContent: ""
isContact: false
trustIndicator: StatusContactVerificationIcons.TrustedType.None
hasMention: false
editMode: false
isReply: false
replySenderId: ""
replySenderName: ""
replyProfileImage: ""
replyMessageText: ""
replyAmISender: false
replyContentType: StatusMessage.ContentType.Text
replyMessageContent: ""
isPinned: false
pinnedBy: ""
hasExpired: false
reactions: [
ListElement {
numberOfReactions: 2
didIReactWithThisEmoji: false
jsonArrayOfUsersReactedWithThisEmoji: '["User 1", "User 3"]'
emojiId: 1
},
ListElement {
numberOfReactions: 3
didIReactWithThisEmoji: true
jsonArrayOfUsersReactedWithThisEmoji: '["Teenage Mutant Turtle", "User 1", "User 3"]'
emojiId: 3
},
ListElement {
numberOfReactions: 1
didIReactWithThisEmoji: false
jsonArrayOfUsersReactedWithThisEmoji: '["User 3"]'
emojiId: 4
}
]
}
ListElement {
timestamp: "1657937930"
amIsender: true
senderId: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
userName: "You"
ensName: ""
localName: ""
profileImage: ""
contentType: StatusMessage.ContentType.Text
message: 'Simple text message from current user with reactions'
messageContent: "" messageContent: ""
isContact: false isContact: false
trustIndicator: StatusContactVerificationIcons.TrustedType.None trustIndicator: StatusContactVerificationIcons.TrustedType.None
@ -1029,10 +1076,6 @@ QtObject {
numberOfReactions: 2 numberOfReactions: 2
didIReactWithThisEmoji: false didIReactWithThisEmoji: false
jsonArrayOfUsersReactedWithThisEmoji: '["User 1", "User 3"]' jsonArrayOfUsersReactedWithThisEmoji: '["User 1", "User 3"]'
// jsonArrayOfUsersReactedWithThisEmoji: [
// ListElement { text: "User 1" },
// ListElement { text: "User 3" }
// ]
emojiId: 1 emojiId: 1
}, },
ListElement { ListElement {

126
src/StatusQ/Components/private/statusMessage/StatusMessageEmojiReactions.qml
View File

@ -1,5 +1,6 @@
import QtQuick 2.3 import QtQuick 2.3
import QtQuick.Controls 2.13 import QtQuick.Controls 2.13
import QtQuick.Layouts 1.14
import QtGraphicalEffects 1.13 import QtGraphicalEffects 1.13
import StatusQ.Core 0.1 import StatusQ.Core 0.1
@ -73,100 +74,65 @@ Item {
Repeater { Repeater {
id: reactionRepeater id: reactionRepeater
width: childrenRect.width width: childrenRect.width
model: root.emojiReactionsModel model: root.emojiReactionsModel
Rectangle { Control {
id: emojiContainer id: reactionDelegate
readonly property bool isHovered: mouseArea.containsMouse topPadding: 2
bottomPadding: 2
leftPadding: 2
rightPadding: 6
width: emojiImage.width + emojiCount.width + (root.imageMargin * 2) + + 8 background: Rectangle {
height: 20 radius: 10
radius: 10 color: model.didIReactWithThisEmoji
color: model.didIReactWithThisEmoji ? ? (reactionDelegate.hovered ? Theme.palette.statusMessage.emojiReactionActiveBackgroundHovered
(isHovered ? Theme.palette.statusMessage.emojiReactionActiveBackgroundHovered : Theme.palette.statusMessage.emojiReactionActiveBackground) : : Theme.palette.statusMessage.emojiReactionActiveBackground)
(isHovered ? Theme.palette.statusMessage.emojiReactionBackgroundHovered : Theme.palette.statusMessage.emojiReactionBackground) : (reactionDelegate.hovered ? Theme.palette.statusMessage.emojiReactionBackgroundHovered
: Theme.palette.statusMessage.emojiReactionBackground)
StatusToolTip { // Rounded corner to cover one corner
visible: mouseArea.containsMouse Rectangle {
maxWidth: 400 anchors.top: parent.top
text: d.showReactionAuthors(model.jsonArrayOfUsersReactedWithThisEmoji, model.emojiId) anchors.left: parent.left
width: 10
height: 10
radius: 2
color: parent.color
}
} }
// Rounded corner to cover one corner contentItem: Row {
Rectangle { spacing: 4
color: parent.color
width: 10
height: 10
anchors.top: parent.top
anchors.left: !root.isCurrentUser ? parent.left : undefined
anchors.leftMargin: 0
anchors.right: !root.isCurrentUser ? undefined : parent.right
anchors.rightMargin: 0
radius: 2
z: -1
}
// This is a workaround to get a "border" around the rectangle including the weird rectangle StatusEmoji {
Loader { anchors.verticalCenter: parent.verticalCenter
active: model.didIReactWithThisEmoji width: 15
anchors.top: parent.top height: 15
anchors.topMargin: -1
anchors.left: parent.left
anchors.leftMargin: -1
z: -2
sourceComponent: Component { source: {
Rectangle { if (model.emojiId >= 1 && model.emojiId <= root.icons.length)
width: emojiContainer.width + 2 return root.icons[model.emojiId - 1];
height: emojiContainer.height + 2 return "";
radius: emojiContainer.radius
color: Theme.palette.primaryColor1
Rectangle {
color: parent.color
width: 10
height: 10
anchors.top: parent.top
anchors.left: !root.isCurrentUser ? parent.left : undefined
anchors.leftMargin: 0
anchors.right: !root.isCurrentUser ? undefined : parent.right
anchors.rightMargin: 0
radius: 2
z: -1
}
} }
} }
}
// TODO: Use Row StatusBaseText {
anchors.verticalCenter: parent.verticalCenter
StatusEmoji { text: model.numberOfReactions
id: emojiImage font.pixelSize: 12
color: model.didIReactWithThisEmoji ? Theme.palette.indirectColor1 : Theme.palette.directColor1
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: root.imageMargin
width: 15
height: 15
source: {
if (model.emojiId >= 1 && model.emojiId <= root.icons.length)
return root.icons[model.emojiId - 1];
return "";
} }
} }
StatusBaseText { StatusToolTip {
id: emojiCount visible: reactionDelegate.hovered
text: model.numberOfReactions maxWidth: 400
anchors.verticalCenter: parent.verticalCenter text: d.showReactionAuthors(model.jsonArrayOfUsersReactedWithThisEmoji, model.emojiId)
anchors.left: emojiImage.right
anchors.leftMargin: root.imageMargin
font.pixelSize: 12
color: model.didIReactWithThisEmoji ? Theme.palette.primaryColor1 : Theme.palette.directColor1
} }
MouseArea { MouseArea {
@ -194,7 +160,7 @@ Item {
StatusIcon { StatusIcon {
id: addEmojiButton id: addEmojiButton
property bool isHovered: false // TODO: Replace with mouseArea.containsMouse readonly property bool isHovered: addEmojiButtonMouseArea.containsMouse
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 2.5 anchors.leftMargin: 2.5
@ -211,8 +177,6 @@ Item {
anchors.fill: addEmojiButton anchors.fill: addEmojiButton
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
hoverEnabled: true hoverEnabled: true
onEntered: addEmojiButton.isHovered = true
onExited: addEmojiButton.isHovered = false
onClicked: { onClicked: {
root.addEmojiClicked(this, mouse); root.addEmojiClicked(this, mouse);
} }

4
src/StatusQ/Core/Theme/StatusDarkTheme.qml
View File

@ -159,8 +159,8 @@ ThemePalette {
property QtObject statusMessage: QtObject { property QtObject statusMessage: QtObject {
property color emojiReactionBackground: "#2d2823" property color emojiReactionBackground: "#2d2823"
property color emojiReactionBackgroundHovered: "#3a3632" property color emojiReactionBackgroundHovered: "#3a3632"
property color emojiReactionActiveBackground: "#353a4d" property color emojiReactionActiveBackground: getColor('blue')
property color emojiReactionActiveBackgroundHovered: "#cbd5f1" property color emojiReactionActiveBackgroundHovered: Qt.darker(emojiReactionActiveBackground, 1.1)
} }
} }

4
src/StatusQ/Core/Theme/StatusLightTheme.qml
View File

@ -157,8 +157,8 @@ ThemePalette {
property QtObject statusMessage: QtObject { property QtObject statusMessage: QtObject {
property color emojiReactionBackground: "#e2e6e9" property color emojiReactionBackground: "#e2e6e9"
property color emojiReactionBackgroundHovered: "#d7dadd" property color emojiReactionBackgroundHovered: "#d7dadd"
property color emojiReactionActiveBackground: getColor('blue6') property color emojiReactionActiveBackground: getColor('blue')
property color emojiReactionActiveBackgroundHovered: "#cbd5f1" property color emojiReactionActiveBackgroundHovered: Qt.darker(emojiReactionActiveBackground, 1.1)
} }
} }