Make the message TextField expanding, wrapping and scrollable

Summary:
A scrollbar will show if the entered text fills more than 1/3rd
of the screen, pressing enter will send the message and shift +
enter will add a new line.

Reviewers: #kde_connect, sredman

Reviewed By: #kde_connect, sredman

Subscribers: sredman, kdeconnect

Tags: #kde_connect

Differential Revision: https://phabricator.kde.org/D17224
This commit is contained in:
Billy Laws 2018-11-28 19:15:11 +00:00
parent 538872ddc8
commit c6fc4d92b7

View file

@ -19,7 +19,7 @@
*/
import QtQuick 2.1
import QtQuick.Controls 2.1
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.1
import org.kde.people 1.0
import org.kde.kirigami 2.4 as Kirigami
@ -38,6 +38,12 @@ Kirigami.ScrollablePage
property string phoneNumber
title: person.person && person.person.name ? person.person.name : phoneNumber
function sendMessage() {
console.log("sending sms", page.phoneNumber)
model.sourceModel.sendReplyToConversation(message.text)
message.text = ""
}
ListView {
model: QSortFilterProxyModel {
id: model
@ -65,20 +71,29 @@ Kirigami.ScrollablePage
footer: RowLayout {
enabled: page.device
TextField {
ScrollView {
Layout.maximumHeight: page.height / 3
Layout.fillWidth: true
Layout.fillHeight: true
clip: true
TextArea {
id: message
Layout.fillWidth: true
wrapMode: TextEdit.Wrap
placeholderText: i18n("Say hi...")
onAccepted: {
console.log("sending sms", page.phoneNumber)
model.sourceModel.sendReplyToConversation(message.text)
text = ""
Keys.onPressed: {
if ((event.key == Qt.Key_Return) && !(event.modifiers & Qt.ShiftModifier)) {
sendMessage()
event.accepted = true
}
}
}
}
Button {
text: "Send"
onClicked: {
message.accepted()
sendMessage()
}
}
}