From c6fc4d92b721870b6699cf729d15db819a1e14a2 Mon Sep 17 00:00:00 2001
From: Billy Laws <blaws05@gmail.com>
Date: Wed, 28 Nov 2018 19:15:11 +0000
Subject: [PATCH] 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
---
 smsapp/qml/ConversationDisplay.qml | 33 ++++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/smsapp/qml/ConversationDisplay.qml b/smsapp/qml/ConversationDisplay.qml
index 07a3c43fc..771e550f6 100644
--- a/smsapp/qml/ConversationDisplay.qml
+++ b/smsapp/qml/ConversationDisplay.qml
@@ -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 {
-            id: message
+        ScrollView {
+            Layout.maximumHeight: page.height / 3
             Layout.fillWidth: true
-            placeholderText: i18n("Say hi...")
-            onAccepted: {
-                console.log("sending sms", page.phoneNumber)
-                model.sourceModel.sendReplyToConversation(message.text)
-                text = ""
+            Layout.fillHeight: true
+            clip: true
+
+            TextArea {
+                id: message
+                Layout.fillWidth: true
+                wrapMode: TextEdit.Wrap
+                placeholderText: i18n("Say hi...")
+                Keys.onPressed: {
+                    if ((event.key == Qt.Key_Return) && !(event.modifiers & Qt.ShiftModifier)) {
+                        sendMessage()
+                        event.accepted = true
+                    }
+                }
             }
         }
         Button {
             text: "Send"
             onClicked: {
-                message.accepted()
+                sendMessage()
             }
         }
     }