feat: introduce StatusUpdate component

This is a new MessageComponent type that will be used in the timeline status updates
view.
This commit is contained in:
Pascal Precht 2020-12-10 12:47:30 +01:00 committed by Pascal Precht
parent bb6bcc640a
commit 8cd95d5bfd
4 changed files with 162 additions and 2 deletions

View File

@ -38,6 +38,7 @@ Item {
property bool isMessage: isEmoji || isImage || isSticker || isText || isAudio
property bool isExpired: (outgoingStatus == "sending" && (Math.floor(timestamp) + 180000) < Date.now())
property bool isStatusUpdate: false
property int replyMessageIndex: chatsModel.messageList.getMessageIndex(responseTo);
property string repliedMessageAuthor: replyMessageIndex > -1 ? chatsModel.messageList.getMessageData(replyMessageIndex, "userName") : "";
@ -100,7 +101,8 @@ Item {
case Constants.transactionType:
return transactionBubble
default:
return appSettings.compactMode ? compactMessageComponent : messageComponent
return appSettings.compactMode ? compactMessageComponent :
isStatusUpdate ? statusUpdateComponent : messageComponent
}
}
}
@ -209,6 +211,13 @@ Item {
}
}
Component {
id: statusUpdateComponent
StatusUpdate {
clickMessage: messageItem.clickMessage
}
}
// Compact Messages
Component {
id: compactMessageComponent

View File

@ -12,7 +12,6 @@ Item {
id: root
visible: contentType == Constants.messageType || isEmoji
z: 51
height: visible ? (showMoreLoader.active ? childrenRect.height - 10 : chatText.height) : 0

View File

@ -0,0 +1,145 @@
import QtQuick 2.3
import QtGraphicalEffects 1.13
import "../../../../../shared"
import "../../../../../imports"
import "../../../../../shared/status"
Rectangle {
id: root
property var clickMessage: function () {}
anchors.top: parent.top
anchors.topMargin: authorCurrentMsg != authorPrevMsg ? Style.current.smallPadding : 0
height: (isImage ? chatImageContent.height : chatText.height) + chatName.height + 2* Style.current.padding + (emojiReactions !== "" ? 20 : 0)
width: parent.width
radius: Style.current.radius
color: hovered ? Style.current.border : Style.current.background
property bool hovered: false
UserImage {
id: chatImage
active: isMessage || isImage
anchors.left: parent.left
anchors.leftMargin: Style.current.padding
anchors.top: parent.top
anchors.topMargin: Style.current.halfPadding
}
UsernameLabel {
id: chatName
visible: chatImage.visible
anchors.leftMargin: Style.current.halfPadding
anchors.top: chatImage.top
anchors.left: chatImage.right
label.font.pixelSize: Style.current.primaryTextFontSize
userName: messageItem.userName
localName: messageItem.localName
alias: messageItem.alias
z: 51
}
ChatTime {
id: chatTime
visible: chatName.visible
anchors.verticalCenter: chatName.verticalCenter
anchors.left: chatName.right
anchors.leftMargin: Style.current.halfPadding
}
ChatText {
id: chatText
anchors.top: chatName.visible ? chatName.bottom : chatImage.top
anchors.topMargin: chatName.visible ? 6 : 0
anchors.left: chatImage.right
anchors.leftMargin: Style.current.halfPadding
anchors.right: parent.right
anchors.rightMargin: Style.current.padding
}
Loader {
id: chatImageContent
active: isImage
anchors.left: chatImage.right
anchors.leftMargin: Style.current.halfPadding
anchors.top: chatText.bottom
z: 51
sourceComponent: Component {
ChatImage {
imageSource: image
imageWidth: 200
onClicked: root.clickMessage(false, false, true, image)
}
}
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
propagateComposedEvents: true
onClicked: {
mouse.accepted = false
}
onEntered: {
root.hovered = true
}
onExited: {
root.hovered = false
}
}
StatusIconButton {
id: emojiBtn
visible: root.hovered
highlighted: visible
anchors.top: root.top
anchors.topMargin: -height/2
anchors.right: root.right
anchors.rightMargin: Style.current.halfPadding
highlightedIconColor: Style.current.secondaryText
highlightedBackgroundColor: Style.current.background
icon.name: "emoji"
icon.width: 20
icon.height: 20
MouseArea {
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: root.clickMessage(false, false, false, null, true)
onEntered: {
if (!root.hovered) {
root.hovered = true
}
}
onExited: {
if (root.hovered) {
root.hovered = false
}
}
}
}
DropShadow {
anchors.fill: emojiBtn
horizontalOffset: 0
verticalOffset: 2
radius: 10
samples: 12
color: "#22000000"
source: emojiBtn
}
Loader {
id: emojiReactionLoader
active: emojiReactions !== ""
sourceComponent: emojiReactionsComponent
anchors.left: chatImage.right
anchors.leftMargin: Style.current.halfPadding
anchors.top: isImage ? chatImageContent.bottom : chatText.bottom
anchors.topMargin: Style.current.halfPadding
}
Component {
id: emojiReactionsComponent
EmojiReactions {}
}
}

7
ui/app/img/emoji.svg Normal file
View File

@ -0,0 +1,7 @@
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.3761 0C17.7558 0 18.0636 0.307804 18.0636 0.6875V2.42917C18.0636 2.73292 18.3098 2.97917 18.6136 2.97917H20.3126C20.6923 2.97917 21.0001 3.28697 21.0001 3.66667C21.0001 4.04636 20.6923 4.35417 20.3126 4.35417H18.6136C18.3098 4.35417 18.0636 4.60041 18.0636 4.90417V6.64583C18.0636 7.02553 17.7558 7.33333 17.3761 7.33333C16.9964 7.33333 16.6886 7.02553 16.6886 6.64583V4.90417C16.6886 4.60041 16.4423 4.35417 16.1386 4.35417H14.352C13.9723 4.35417 13.6645 4.04636 13.6645 3.66667C13.6645 3.28697 13.9723 2.97917 14.352 2.97917H16.1386C16.4423 2.97917 16.6886 2.73292 16.6886 2.42917V0.6875C16.6886 0.307804 16.9964 0 17.3761 0Z" fill="#4360DF"/>
<path d="M12.0914 2.7009C12.1863 2.40694 12.0505 2.05817 11.7472 1.99964C11.1816 1.89049 10.5975 1.83333 10 1.83333C4.93743 1.83333 0.833374 5.93739 0.833374 11C0.833374 16.0626 4.93743 20.1667 10 20.1667C15.0627 20.1667 19.1667 16.0626 19.1667 11C19.1667 10.4778 19.123 9.96581 19.0392 9.46746C18.9858 9.1504 18.6159 9.01041 18.3129 9.11795C18.2546 9.13865 18.1953 9.15727 18.1351 9.17371C17.8601 9.24877 17.6555 9.51421 17.6992 9.79585C17.7601 10.1883 17.7917 10.5905 17.7917 11C17.7917 15.3032 14.3033 18.7917 10 18.7917C5.69682 18.7917 2.20837 15.3032 2.20837 11C2.20837 6.69678 5.69682 3.20833 10 3.20833C10.4762 3.20833 10.9423 3.25104 11.3949 3.33283C11.6889 3.38598 11.971 3.16641 12.0418 2.87609C12.0563 2.81684 12.0728 2.75842 12.0914 2.7009Z" fill="#4360DF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.40336 12.2118C4.65385 11.9242 5.04674 11.7708 5.45456 11.835C6.27472 11.9641 7.82078 12.1429 10.0931 12.1429C12.3654 12.1429 13.9114 11.9641 14.7316 11.835C15.1394 11.7708 15.5323 11.9242 15.7828 12.2118C16.0419 12.5093 16.1431 12.9507 15.9529 13.3727C15.3719 14.6619 13.7529 17.1846 10.0931 17.1846C6.43325 17.1846 4.81424 14.6619 4.23327 13.3727C4.04308 12.9507 4.1442 12.5093 4.40336 12.2118ZM6.62352 13.3648C6.24802 13.3289 5.98809 13.7257 6.22374 14.0203C6.94751 14.925 8.14957 15.8096 10.0931 15.8096C12.0366 15.8096 13.2386 14.925 13.9624 14.0203C14.1981 13.7257 13.9381 13.3289 13.5626 13.3648C12.6748 13.4498 11.5183 13.5179 10.0931 13.5179C8.66785 13.5179 7.51131 13.4498 6.62352 13.3648Z" fill="#4360DF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.5036 6.45233C5.76153 6.14281 6.22153 6.101 6.53104 6.35892L9.03222 8.44324C9.26817 8.63987 9.3557 8.96322 9.25114 9.25201C9.14658 9.5408 8.87234 9.73318 8.5652 9.73318C7.40856 9.73318 5.72377 10.1077 4.78332 10.6957C4.4417 10.9093 3.99161 10.8055 3.77801 10.4639C3.56442 10.1223 3.6682 9.67217 4.00982 9.45857C4.65245 9.05678 5.49512 8.75255 6.34509 8.55308C6.51619 8.51292 6.57217 8.29242 6.43715 8.1799L5.597 7.47977C5.28749 7.22185 5.24567 6.76184 5.5036 6.45233Z" fill="#4360DF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4965 6.45233C14.2386 6.14281 13.7786 6.101 13.469 6.35892L10.9679 8.44324C10.7319 8.63987 10.6444 8.96322 10.7489 9.25201C10.8535 9.5408 11.1277 9.73318 11.4349 9.73318C12.5915 9.73318 14.2763 10.1077 15.2168 10.6957C15.5584 10.9093 16.0085 10.8055 16.2221 10.4639C16.4357 10.1223 16.3319 9.67217 15.9903 9.45857C15.3476 9.05678 14.505 8.75255 13.655 8.55308C13.4839 8.51292 13.4279 8.29242 13.5629 8.1799L14.4031 7.47977C14.7126 7.22185 14.7544 6.76184 14.4965 6.45233Z" fill="#4360DF"/>
</svg>

After

Width:  |  Height:  |  Size: 3.3 KiB