mirror of https://github.com/status-im/StatusQ.git
fix(StatusMessageEmojiReactions): Fixed emoji reactions appearance (#889)
This commit is contained in:
Igor Sirotin
GitHub
parent
c3bbb396ec
commit
efc5be38bd
|
|
@ -1007,7 +1007,54 @@ QtObject {
|
|||
localName: ""
|
||||
profileImage: ""
|
||||
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: ""
|
||||
isContact: false
|
||||
trustIndicator: StatusContactVerificationIcons.TrustedType.None
|
||||
|
|
@ -1029,10 +1076,6 @@ QtObject {
|
|||
numberOfReactions: 2
|
||||
didIReactWithThisEmoji: false
|
||||
jsonArrayOfUsersReactedWithThisEmoji: '["User 1", "User 3"]'
|
||||
// jsonArrayOfUsersReactedWithThisEmoji: [
|
||||
// ListElement { text: "User 1" },
|
||||
// ListElement { text: "User 3" }
|
||||
// ]
|
||||
emojiId: 1
|
||||
},
|
||||
ListElement {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import QtQuick 2.3
|
||||
import QtQuick.Controls 2.13
|
||||
import QtQuick.Layouts 1.14
|
||||
import QtGraphicalEffects 1.13
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
|
|
@ -73,100 +74,65 @@ Item {
|
|||
|
||||
Repeater {
|
||||
id: reactionRepeater
|
||||
|
||||
width: childrenRect.width
|
||||
model: root.emojiReactionsModel
|
||||
|
||||
Rectangle {
|
||||
id: emojiContainer
|
||||
Control {
|
||||
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
|
||||
height: 20
|
||||
radius: 10
|
||||
color: model.didIReactWithThisEmoji ?
|
||||
(isHovered ? Theme.palette.statusMessage.emojiReactionActiveBackgroundHovered : Theme.palette.statusMessage.emojiReactionActiveBackground) :
|
||||
(isHovered ? Theme.palette.statusMessage.emojiReactionBackgroundHovered : Theme.palette.statusMessage.emojiReactionBackground)
|
||||
background: Rectangle {
|
||||
radius: 10
|
||||
color: model.didIReactWithThisEmoji
|
||||
? (reactionDelegate.hovered ? Theme.palette.statusMessage.emojiReactionActiveBackgroundHovered
|
||||
: Theme.palette.statusMessage.emojiReactionActiveBackground)
|
||||
: (reactionDelegate.hovered ? Theme.palette.statusMessage.emojiReactionBackgroundHovered
|
||||
: Theme.palette.statusMessage.emojiReactionBackground)
|
||||
|
||||
StatusToolTip {
|
||||
visible: mouseArea.containsMouse
|
||||
maxWidth: 400
|
||||
text: d.showReactionAuthors(model.jsonArrayOfUsersReactedWithThisEmoji, model.emojiId)
|
||||
// Rounded corner to cover one corner
|
||||
Rectangle {
|
||||
anchors.top: parent.top
|
||||
anchors.left: parent.left
|
||||
width: 10
|
||||
height: 10
|
||||
radius: 2
|
||||
color: parent.color
|
||||
}
|
||||
}
|
||||
|
||||
// Rounded corner to cover one corner
|
||||
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
|
||||
}
|
||||
contentItem: Row {
|
||||
spacing: 4
|
||||
|
||||
// This is a workaround to get a "border" around the rectangle including the weird rectangle
|
||||
Loader {
|
||||
active: model.didIReactWithThisEmoji
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: -1
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: -1
|
||||
z: -2
|
||||
StatusEmoji {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
width: 15
|
||||
height: 15
|
||||
|
||||
sourceComponent: Component {
|
||||
Rectangle {
|
||||
width: emojiContainer.width + 2
|
||||
height: emojiContainer.height + 2
|
||||
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
|
||||
}
|
||||
source: {
|
||||
if (model.emojiId >= 1 && model.emojiId <= root.icons.length)
|
||||
return root.icons[model.emojiId - 1];
|
||||
return "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: Use Row
|
||||
|
||||
StatusEmoji {
|
||||
id: emojiImage
|
||||
|
||||
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 {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: model.numberOfReactions
|
||||
font.pixelSize: 12
|
||||
color: model.didIReactWithThisEmoji ? Theme.palette.indirectColor1 : Theme.palette.directColor1
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
id: emojiCount
|
||||
text: model.numberOfReactions
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: emojiImage.right
|
||||
anchors.leftMargin: root.imageMargin
|
||||
font.pixelSize: 12
|
||||
color: model.didIReactWithThisEmoji ? Theme.palette.primaryColor1 : Theme.palette.directColor1
|
||||
StatusToolTip {
|
||||
visible: reactionDelegate.hovered
|
||||
maxWidth: 400
|
||||
text: d.showReactionAuthors(model.jsonArrayOfUsersReactedWithThisEmoji, model.emojiId)
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
|
|
@ -194,7 +160,7 @@ Item {
|
|||
StatusIcon {
|
||||
id: addEmojiButton
|
||||
|
||||
property bool isHovered: false // TODO: Replace with mouseArea.containsMouse
|
||||
readonly property bool isHovered: addEmojiButtonMouseArea.containsMouse
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 2.5
|
||||
|
|
@ -211,8 +177,6 @@ Item {
|
|||
anchors.fill: addEmojiButton
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
hoverEnabled: true
|
||||
onEntered: addEmojiButton.isHovered = true
|
||||
onExited: addEmojiButton.isHovered = false
|
||||
onClicked: {
|
||||
root.addEmojiClicked(this, mouse);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -159,8 +159,8 @@ ThemePalette {
|
|||
property QtObject statusMessage: QtObject {
|
||||
property color emojiReactionBackground: "#2d2823"
|
||||
property color emojiReactionBackgroundHovered: "#3a3632"
|
||||
property color emojiReactionActiveBackground: "#353a4d"
|
||||
property color emojiReactionActiveBackgroundHovered: "#cbd5f1"
|
||||
property color emojiReactionActiveBackground: getColor('blue')
|
||||
property color emojiReactionActiveBackgroundHovered: Qt.darker(emojiReactionActiveBackground, 1.1)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -157,8 +157,8 @@ ThemePalette {
|
|||
property QtObject statusMessage: QtObject {
|
||||
property color emojiReactionBackground: "#e2e6e9"
|
||||
property color emojiReactionBackgroundHovered: "#d7dadd"
|
||||
property color emojiReactionActiveBackground: getColor('blue6')
|
||||
property color emojiReactionActiveBackgroundHovered: "#cbd5f1"
|
||||
property color emojiReactionActiveBackground: getColor('blue')
|
||||
property color emojiReactionActiveBackgroundHovered: Qt.darker(emojiReactionActiveBackground, 1.1)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue