status-desktop/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/StatusUpdate.qml

148 lines
4.0 KiB
QML

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: 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
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 {}
}
Separator {
anchors.bottom: parent.bottom
visible: !root.hovered
}
}