Spectral/qml/form/RoomForm.qml

191 lines
6.1 KiB
QML
Raw Normal View History

2018-02-23 14:39:14 +00:00
import QtQuick 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
import QtQuick.Controls.Material 2.3
import QtGraphicalEffects 1.0
import Matrique 0.1
2018-02-23 14:39:14 +00:00
import "qrc:/qml/component"
Item {
id: item
property var currentRoom
2018-03-05 11:11:55 +00:00
Pane {
2018-02-23 14:39:14 +00:00
anchors.fill: parent
padding: 0
2018-02-23 14:39:14 +00:00
background: Item {
anchors.fill: parent
2018-07-08 12:54:06 +00:00
visible: currentRoom == null
Pane {
anchors.fill: parent
}
2018-02-23 14:39:14 +00:00
Label {
z: 10
text: "Please choose a room."
anchors.centerIn: parent
2018-02-23 14:39:14 +00:00
}
}
2018-02-23 14:39:14 +00:00
ColumnLayout {
anchors.fill: parent
spacing: 0
2018-07-08 12:54:06 +00:00
visible: currentRoom != null
Pane {
z: 10
padding: 16
2018-02-23 14:39:14 +00:00
Layout.fillWidth: true
Layout.preferredHeight: 80
background: Rectangle {
color: Material.theme == Material.Light ? "#eaeaea" : "#242424"
2018-02-23 14:39:14 +00:00
}
RowLayout {
anchors.fill: parent
spacing: 16
ImageStatus {
Layout.preferredWidth: parent.height
Layout.fillHeight: true
source: currentRoom != null && currentRoom.avatarUrl != "" ? "image://mxc/" + currentRoom.avatarUrl : "qrc:/asset/img/avatar.png"
2018-02-23 14:39:14 +00:00
}
ColumnLayout {
Layout.fillWidth: true
Layout.fillHeight: true
Label {
Layout.fillWidth: true
2018-07-08 12:54:06 +00:00
text: currentRoom != null ? currentRoom.displayName : ""
font.pointSize: 16
elide: Text.ElideRight
wrapMode: Text.NoWrap
}
Label {
Layout.fillWidth: true
2018-07-08 12:54:06 +00:00
text: currentRoom != null ? currentRoom.topic : ""
elide: Text.ElideRight
wrapMode: Text.NoWrap
}
2018-02-23 14:39:14 +00:00
}
}
}
ListView {
id: messageListView
Layout.fillWidth: true
Layout.fillHeight: true
Layout.leftMargin: 16
Layout.rightMargin: 16
displayMarginBeginning: 40
displayMarginEnd: 40
verticalLayoutDirection: ListView.BottomToTop
spacing: 12
model: MessageEventModel{
id: messageEventModel
room: currentRoom
2018-07-08 12:54:06 +00:00
onModelReset: currentRoom.getPreviousContent(50)
}
delegate: Row {
readonly property bool sentByMe: author === currentRoom.localUser
id: messageRow
anchors.right: sentByMe ? parent.right : undefined
spacing: 6
Image {
id: avatar
width: height
height: 40
mipmap: true
visible: !sentByMe
source: author.avatarUrl != "" ? "image://mxc/" + author.avatarUrl : "qrc:/asset/img/avatar.png"
}
2018-02-23 14:39:14 +00:00
Rectangle {
width: Math.min(messageText.implicitWidth + 24,
messageListView.width - (!sentByMe ? avatar.width + messageRow.spacing : 0))
height: messageText.implicitHeight + 24
color: sentByMe ? "lightgrey" : Material.accent
Label {
id: messageText
text: display
color: sentByMe ? "black" : "white"
anchors.fill: parent
anchors.margins: 12
wrapMode: Label.Wrap
}
2018-02-23 14:39:14 +00:00
}
}
ScrollBar.vertical: ScrollBar { /*anchors.left: messageListView.right*/ }
2018-07-08 12:54:06 +00:00
onAtYBeginningChanged: {
if(currentRoom && atYBeginning) currentRoom.getPreviousContent(50)
}
}
2018-02-23 14:39:14 +00:00
Pane {
z: 10
padding: 16
2018-02-23 14:39:14 +00:00
Layout.fillWidth: true
Layout.preferredHeight: 80
RowLayout {
anchors.fill: parent
spacing: 0
ItemDelegate {
Layout.preferredWidth: height
Layout.fillHeight: true
contentItem: MaterialIcon { icon: "\ue226" }
2018-02-23 14:39:14 +00:00
}
TextField {
id: inputField
Layout.fillWidth: true
Layout.fillHeight: true
placeholderText: "Send a Message"
leftPadding: 16
topPadding: 0
bottomPadding: 0
selectByMouse: true
background: Rectangle {
color: Material.theme == Material.Light ? "#eaeaea" : "#242424"
}
Keys.onReturnPressed: {
currentRoom.postMessage("text", inputField.text)
inputField.text = ""
}
2018-02-23 14:39:14 +00:00
}
ItemDelegate {
Layout.preferredWidth: height
Layout.fillHeight: true
contentItem: MaterialIcon { icon: "\ue24e" }
background: Rectangle {
color: Material.theme == Material.Light ? "#eaeaea" : "#242424"
}
2018-02-23 14:39:14 +00:00
}
}
}
}
}
}