Files
neochat/imports/NeoChat/Component/ChatBox/ReplyPane.qml
Noah Davis 38e2c7222b This splits ChatTextInput into ChatBox and a handful of subcomponents.
- ChatBar: Contains the main TextArea and standard buttons.
  - Usually visible, but can be disabled when necessary.
- AttachmentPane: Contains an image when attaching an image and also a filename with mimetype icon.
  - Has a toolbar to cancel the attachment or edit it if it's an image.
  - Shown when there is an attachment.
- ReplyPane: Shows who you are replying to and the content of their message.
  - Also shows edits and has a button to cancel replies/edits
  - Shown when replying or editing
- CompletionMenu
  - Now a vertical list using a QQC2.Popup
  - Either a Pane or a Menu/Popup
- EmojiPickerPane

@teams/vdg
2021-03-17 23:48:06 +00:00

117 lines
4.2 KiB
QML

/* SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.de>
* SPDX-FileCopyrightText: 2020 Noah Davis <noahadvs@gmail.com>
* SPDX-License-Identifier: GPL-2.0-or-later
*/
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15
import org.kde.kirigami 2.14 as Kirigami
Loader {
id: root
property bool isEdit: false
property var user: null
property string content: ""
property string avatarMediaUrl: user ? "image://mxc/" + replyUser.avatarMediaId : ""
signal clearEditReplyTriggered()
active: visible
sourceComponent: Pane {
id: replyPane
Kirigami.Theme.colorSet: Kirigami.Theme.View
spacing: leftPadding
contentItem: RowLayout {
Layout.fillWidth: true
spacing: replyPane.spacing
FontMetrics {
id: fontMetrics
font: textArea.font
}
Kirigami.Avatar {
id: avatar
Layout.alignment: textContentLayout.height > avatar.height ? Qt.AlignHCenter | Qt.AlignTop : Qt.AlignCenter
Layout.preferredWidth: Layout.preferredHeight
Layout.preferredHeight: fontMetrics.lineSpacing * 2 - fontMetrics.leading
source: root.avatarMediaUrl
name: user ? user.displayName : ""
color: user ? user.color : "transparent"
visible: Boolean(user)
}
ColumnLayout {
id: textContentLayout
Layout.alignment: Qt.AlignCenter
Layout.fillWidth: true
spacing: fontMetrics.leading
Label {
textFormat: TextEdit.RichText
wrapMode: Label.Wrap
text: {
let stylesheet = "<style>.user-pill{}</style>"
let heading = "<b>%1</b>"
let userName = user ? "<font color=\""+ user.color +"\">" + user.displayName + "</font>" : ""
if (isEdit) {
heading = heading.arg(i18n("Editing message:")) + "<br/>"
} else {
heading = heading.arg(i18n("Replying to %1:"))
heading = heading.arg(userName) + "<br/>"
}
return stylesheet + heading
}
}
ScrollView {
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
Layout.fillWidth: true
Layout.maximumHeight: fontMetrics.lineSpacing * 8 - fontMetrics.leading
TextArea {
id: textArea
leftPadding: 0
rightPadding: 0
topPadding: 0
bottomPadding: 0
text: {
let stylesheet = "<style> a{color:"+Kirigami.Theme.linkColor+";}.user-pill{}</style>"
let userName = user ? "<font color=\""+ user.color +"\">" + user.displayName + "</font>" : ""
return stylesheet + content
}
selectByMouse: true
selectByKeyboard: true
readOnly: true
wrapMode: Label.Wrap
textFormat: TextEdit.RichText
background: null
HoverHandler {
cursorShape: textArea.hoveredLink ? Qt.PointingHandCursor : Qt.IBeamCursor
}
}
}
}
Button {
id: cancelReplyButton
Layout.alignment: avatar.Layout.alignment
icon.name: "dialog-cancel"
text: i18n("Cancel")
display: AbstractButton.IconOnly
onClicked: {
clearEditReplyTriggered()
}
ToolTip.text: text
ToolTip.visible: hovered
}
}
background: Rectangle {
color: Kirigami.Theme.backgroundColor
}
}
}