103 lines
2.7 KiB
QML
103 lines
2.7 KiB
QML
// Copyright (C) 2023 The Qt Company Ltd.
|
|
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
|
|
|
|
pragma ComponentBehavior: Bound
|
|
|
|
import QtQuick
|
|
import QtQuick.Layouts
|
|
import QtQuick.Controls
|
|
|
|
Page {
|
|
id: root
|
|
|
|
property string inConversationWith
|
|
|
|
header: ToolBar {
|
|
ToolButton {
|
|
text: qsTr("Back")
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: 10
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
onClicked: root.StackView.view.pop()
|
|
}
|
|
|
|
Label {
|
|
id: pageTitle
|
|
text: root.inConversationWith
|
|
font.pixelSize: 20
|
|
anchors.centerIn: parent
|
|
}
|
|
}
|
|
|
|
ColumnLayout {
|
|
anchors.fill: parent
|
|
|
|
ListView {
|
|
id: listView
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
Layout.margins: pane.leftPadding + messageField.leftPadding
|
|
displayMarginBeginning: 40
|
|
displayMarginEnd: 40
|
|
verticalLayoutDirection: ListView.BottomToTop
|
|
spacing: 12
|
|
model: 10
|
|
delegate: Row {
|
|
id: messageDelegate
|
|
anchors.right: sentByMe ? listView.contentItem.right : undefined
|
|
spacing: 6
|
|
|
|
required property int index
|
|
readonly property bool sentByMe: index % 2 == 0
|
|
|
|
Rectangle {
|
|
id: avatar
|
|
width: height
|
|
height: parent.height
|
|
color: "grey"
|
|
visible: !messageDelegate.sentByMe
|
|
}
|
|
|
|
Rectangle {
|
|
width: 80
|
|
height: 40
|
|
color: messageDelegate.sentByMe ? "lightgrey" : "steelblue"
|
|
|
|
Label {
|
|
anchors.centerIn: parent
|
|
text: messageDelegate.index
|
|
color: messageDelegate.sentByMe ? "black" : "white"
|
|
}
|
|
}
|
|
}
|
|
|
|
ScrollBar.vertical: ScrollBar {}
|
|
}
|
|
|
|
Pane {
|
|
id: pane
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: false
|
|
|
|
RowLayout {
|
|
width: parent.width
|
|
|
|
TextArea {
|
|
id: messageField
|
|
Layout.fillWidth: true
|
|
placeholderText: qsTr("Compose message")
|
|
wrapMode: TextArea.Wrap
|
|
}
|
|
|
|
Button {
|
|
id: sendButton
|
|
text: qsTr("Send")
|
|
enabled: messageField.length > 0
|
|
Layout.fillWidth: false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|